From 74329d7146fb12d1849fca0497fa1be9b0fc96da Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 14 Aug 2026 04:58:07 +0000
Subject: [PATCH 1/3] feat(web): show product hunt badge on welcome

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
---
 .../WelcomeModal/ProductHuntBadge.tsx         | 22 +++++++++++++++++++
 .../WelcomeModal/WelcomeGuideBody.tsx         |  4 ++++
 .../WelcomeModal/WelcomeModal.test.tsx        |  8 +++++++
 3 files changed, 34 insertions(+)
 create mode 100644 packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx

diff --git a/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
new file mode 100644
index 000000000..c48179ce9
--- /dev/null
+++ b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
@@ -0,0 +1,22 @@
+const PRODUCT_HUNT_URL =
+  "https://www.producthunt.com/products/compass-calendar?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-compass-calendar-2";
+const PRODUCT_HUNT_BADGE_SRC =
+  "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1222394&theme=dark&t=1786683338797";
+
+export function ProductHuntBadge() {
+  return (
+    <a
+      href={PRODUCT_HUNT_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="c-focus-ring inline-flex rounded-sm"
+    >
+      <img
+        alt="Compass Calendar - The keyboard-first calendar. Get organized quickly. | Product Hunt"
+        width={250}
+        height={54}
+        src={PRODUCT_HUNT_BADGE_SRC}
+      />
+    </a>
+  );
+}
diff --git a/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx b/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
index dbe3a26a0..aa9807500 100644
--- a/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
+++ b/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
@@ -1,5 +1,6 @@
 import { useId, useState } from "react";
 import { FAQ_ITEMS } from "./faq";
+import { ProductHuntBadge } from "./ProductHuntBadge";
 
 export function WelcomeGuideBody() {
   const disclosureIdPrefix = useId();
@@ -31,6 +32,9 @@ export function WelcomeGuideBody() {
           Rediscover the joy of shortcuts as you build your perfect schedule. No
           mouse required.
         </p>
+        <div className="flex justify-center pt-1">
+          <ProductHuntBadge />
+        </div>
       </div>
 
       <div className="flex flex-col divide-y divide-border">
diff --git a/packages/web/src/components/WelcomeModal/WelcomeModal.test.tsx b/packages/web/src/components/WelcomeModal/WelcomeModal.test.tsx
index c55d1cbc5..937e789a9 100644
--- a/packages/web/src/components/WelcomeModal/WelcomeModal.test.tsx
+++ b/packages/web/src/components/WelcomeModal/WelcomeModal.test.tsx
@@ -72,6 +72,14 @@ describe("WelcomeModal", () => {
     expect(screen.getByText(/Rediscover the joy of shortcuts/)).toBeTruthy();
     expect(screen.getByRole("img", { name: /pixel pirate/i })).toBeTruthy();
     expect(screen.getByText("No signup required")).toBeTruthy();
+    expect(
+      screen.getByRole("link", {
+        name: "Compass Calendar - The keyboard-first calendar. Get organized quickly. | Product Hunt",
+      }),
+    ).toHaveAttribute(
+      "href",
+      "https://www.producthunt.com/products/compass-calendar?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-compass-calendar-2",
+    );
   });
 
   it("opens the auth modal from the Log in pill", async () => {

From 04e8f73e822370352cffda07a273057e993a7724 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 14 Aug 2026 05:09:36 +0000
Subject: [PATCH 2/3] fix(web): center product hunt badge on welcome

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
---
 .../src/components/WelcomeModal/ProductHuntBadge.tsx  |  2 +-
 .../src/components/WelcomeModal/WelcomeGuideBody.tsx  | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
index c48179ce9..85c770f97 100644
--- a/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
+++ b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
@@ -9,7 +9,7 @@ export function ProductHuntBadge() {
       href={PRODUCT_HUNT_URL}
       target="_blank"
       rel="noopener noreferrer"
-      className="c-focus-ring inline-flex rounded-sm"
+      className="c-focus-ring mx-auto flex w-fit rounded-sm"
     >
       <img
         alt="Compass Calendar - The keyboard-first calendar. Get organized quickly. | Product Hunt"
diff --git a/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx b/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
index aa9807500..55f6cddbe 100644
--- a/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
+++ b/packages/web/src/components/WelcomeModal/WelcomeGuideBody.tsx
@@ -24,7 +24,7 @@ export function WelcomeGuideBody() {
 
   return (
     <>
-      <div className="flex flex-col gap-2">
+      <div className="flex w-full flex-col gap-2">
         <h2 className="font-bold text-2xl text-text leading-snug">
           The keyboard-first calendar
         </h2>
@@ -32,12 +32,13 @@ export function WelcomeGuideBody() {
           Rediscover the joy of shortcuts as you build your perfect schedule. No
           mouse required.
         </p>
-        <div className="flex justify-center pt-1">
-          <ProductHuntBadge />
-        </div>
       </div>
 
-      <div className="flex flex-col divide-y divide-border">
+      <div className="flex w-full justify-center">
+        <ProductHuntBadge />
+      </div>
+
+      <div className="flex w-full flex-col divide-y divide-border">
         {FAQ_ITEMS.map((item, index) => {
           const isExpanded = expandedFaqs.has(item.question);
           const answerId = `${disclosureIdPrefix}-faq-answer-${index}`;

From 9478a63219b1310cab9fa29c193aa3fea0f5185d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 14 Aug 2026 05:20:26 +0000
Subject: [PATCH 3/3] refactor(web): drop redundant badge centering classes

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>
---
 packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
index 85c770f97..c48179ce9 100644
--- a/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
+++ b/packages/web/src/components/WelcomeModal/ProductHuntBadge.tsx
@@ -9,7 +9,7 @@ export function ProductHuntBadge() {
       href={PRODUCT_HUNT_URL}
       target="_blank"
       rel="noopener noreferrer"
-      className="c-focus-ring mx-auto flex w-fit rounded-sm"
+      className="c-focus-ring inline-flex rounded-sm"
     >
       <img
         alt="Compass Calendar - The keyboard-first calendar. Get organized quickly. | Product Hunt"