From 539b3e43108b3a5f33cc3707e50c419cd82d9afd Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:04:55 -0500
Subject: [PATCH 01/11] refactor: extract shared BackgroundCard component from
 Hero and FinalCTA

---
 src/components/landing/BackgroundCard.tsx | 49 +++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/landing/BackgroundCard.tsx

diff --git a/src/components/landing/BackgroundCard.tsx b/src/components/landing/BackgroundCard.tsx
new file mode 100644
index 00000000..88b83ce3
--- /dev/null
+++ b/src/components/landing/BackgroundCard.tsx
@@ -0,0 +1,49 @@
+import type { CardColor } from "@/lib/workspace-state/colors";
+import { getCardColorCSS } from "@/lib/workspace-state/colors";
+
+export interface BackgroundCardData {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+    color: CardColor;
+    rotation: number;
+}
+
+interface BackgroundCardProps {
+    card: BackgroundCardData;
+    isMobileOnly?: boolean;
+}
+
+export function BackgroundCard({ card, isMobileOnly = false }: BackgroundCardProps) {
+    return (
+        <div
+            style={{
+                position: "absolute",
+                top: card.top,
+                left: card.left,
+                width: card.width,
+                height: card.height,
+                backgroundColor: getCardColorCSS(card.color as CardColor, 0.5),
+                transform: `rotate(${card.rotation}deg)`,
+                opacity: 0.5,
+            }}
+            className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`}
+        >
+            {/* Card content placeholder */}
+            <div className="p-3 h-full flex flex-col gap-2">
+                <div className="h-2 w-3/4 rounded bg-foreground/20" />
+                <div className="h-1.5 w-full rounded bg-foreground/15" />
+                <div className="h-1.5 w-5/6 rounded bg-foreground/15" />
+                <div className="flex-1" />
+                <div className="h-1 w-1/2 rounded bg-foreground/10" />
+            </div>
+        </div>
+    );
+}
+
+// Random card colors for background
+export const cardColors: CardColor[] = [
+    "#8B5CF6", "#3B82F6", "#10B981", "#F59E0B", "#EF4444",
+    "#EC4899", "#06B6D4", "#84CC16", "#F97316", "#6366F1",
+];

From 2f37990e8a163894d68295546606a2daaf324230 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:04:59 -0500
Subject: [PATCH 02/11] refactor: use shared BackgroundCard component in Hero
 and FinalCTA; add prefetch to Get Started links

---
 src/components/landing/FinalCTA.tsx | 45 ++------------------------
 src/components/landing/Hero.tsx     | 50 ++++++-----------------------
 2 files changed, 12 insertions(+), 83 deletions(-)

diff --git a/src/components/landing/FinalCTA.tsx b/src/components/landing/FinalCTA.tsx
index 5929f2cf..129cd31c 100644
--- a/src/components/landing/FinalCTA.tsx
+++ b/src/components/landing/FinalCTA.tsx
@@ -2,17 +2,10 @@
 
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { getCardColorCSS } from "@/lib/workspace-state/colors";
-import type { CardColor } from "@/lib/workspace-state/colors";
-
-// Random card colors for background
-const cardColors: CardColor[] = [
-  "#8B5CF6", "#3B82F6", "#10B981", "#F59E0B", "#EF4444",
-  "#EC4899", "#06B6D4", "#84CC16", "#F97316", "#6366F1",
-];
+import { BackgroundCard, cardColors, type BackgroundCardData } from "./BackgroundCard";
 
 // Random card positions and sizes (static - no parallax)
-const backgroundCards = [
+const backgroundCards: BackgroundCardData[] = [
   { top: "15%", left: "10%", width: "180px", height: "140px", color: cardColors[0], rotation: -3 },
   { top: "30%", left: "75%", width: "200px", height: "160px", color: cardColors[1], rotation: 2 },
   { top: "60%", left: "15%", width: "160px", height: "120px", color: cardColors[2], rotation: -2 },
@@ -20,38 +13,6 @@ const backgroundCards = [
   { top: "20%", left: "50%", width: "170px", height: "130px", color: cardColors[4], rotation: 1 },
 ];
 
-interface BackgroundCardProps {
-  card: typeof backgroundCards[0];
-  isMobileOnly?: boolean;
-}
-
-function BackgroundCard({ card, isMobileOnly = false }: BackgroundCardProps) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: card.top,
-        left: card.left,
-        width: card.width,
-        height: card.height,
-        backgroundColor: getCardColorCSS(card.color as CardColor, 0.5),
-        transform: `rotate(${card.rotation}deg)`,
-        opacity: 0.5,
-      }}
-      className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`}
-    >
-      {/* Card content placeholder */}
-      <div className="p-3 h-full flex flex-col gap-2">
-        <div className="h-2 w-3/4 rounded bg-foreground/20" />
-        <div className="h-1.5 w-full rounded bg-foreground/15" />
-        <div className="h-1.5 w-5/6 rounded bg-foreground/15" />
-        <div className="flex-1" />
-        <div className="h-1 w-1/2 rounded bg-foreground/10" />
-      </div>
-    </div>
-  );
-}
-
 export function FinalCTA() {
   return (
     <section
@@ -101,7 +62,7 @@ export function FinalCTA() {
           </p>
 
           <div className="flex justify-center pt-4">
-            <Link href="/guest-setup">
+            <Link href="/guest-setup" prefetch>
               <Button
                 size="lg"
                 className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 1362b815..2d40bd52 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -3,17 +3,12 @@
 import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
-import { getCardColorCSS } from "@/lib/workspace-state/colors";
+import { getCardAccentColor } from "@/lib/workspace-state/colors";
 import type { CardColor } from "@/lib/workspace-state/colors";
-
-// Random card colors for background
-const cardColors: CardColor[] = [
-  "#8B5CF6", "#3B82F6", "#10B981", "#F59E0B", "#EF4444",
-  "#EC4899", "#06B6D4", "#84CC16", "#F97316", "#6366F1",
-];
+import { BackgroundCard, cardColors, type BackgroundCardData } from "./BackgroundCard";
 
 // Random card positions and sizes (static - no parallax)
-const backgroundCards = [
+const backgroundCards: BackgroundCardData[] = [
   { top: "10%", left: "5%", width: "180px", height: "140px", color: cardColors[0], rotation: -3 },
   { top: "25%", left: "75%", width: "200px", height: "160px", color: cardColors[1], rotation: 2 },
   { top: "50%", left: "5%", width: "160px", height: "120px", color: cardColors[2], rotation: -2 },
@@ -23,38 +18,6 @@ const backgroundCards = [
   { top: "30%", left: "20%", width: "160px", height: "120px", color: cardColors[7], rotation: -2 },
 ];
 
-interface BackgroundCardProps {
-  card: typeof backgroundCards[0];
-  isMobileOnly?: boolean;
-}
-
-function BackgroundCard({ card, isMobileOnly = false }: BackgroundCardProps) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: card.top,
-        left: card.left,
-        width: card.width,
-        height: card.height,
-        backgroundColor: getCardColorCSS(card.color as CardColor, 0.5),
-        transform: `rotate(${card.rotation}deg)`,
-        opacity: 0.5,
-      }}
-      className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`}
-    >
-      {/* Card content placeholder */}
-      <div className="p-3 h-full flex flex-col gap-2">
-        <div className="h-2 w-3/4 rounded bg-foreground/20" />
-        <div className="h-1.5 w-full rounded bg-foreground/15" />
-        <div className="h-1.5 w-5/6 rounded bg-foreground/15" />
-        <div className="flex-1" />
-        <div className="h-1 w-1/2 rounded bg-foreground/10" />
-      </div>
-    </div>
-  );
-}
-
 export function Hero() {
   return (
     <section
@@ -100,6 +63,7 @@ export function Hero() {
               width={140}
               height={28}
               className="h-6 md:h-7 w-auto"
+              priority
             />
             <span>Mokhtarzada Hatchery 2025 Cohort</span>
           </a>
@@ -128,7 +92,7 @@ export function Hero() {
 
           {/* Get Started Button - Above Video */}
           <div className="flex justify-center">
-            <Link href="/guest-setup">
+            <Link href="/guest-setup" prefetch>
               <Button
                 size="lg"
                 className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
@@ -146,6 +110,8 @@ export function Hero() {
                   src="/demo.png"
                   alt="ThinkEx Demo"
                   fill
+                  priority
+                  sizes="(max-width: 768px) 100vw, 0vw"
                   className="object-cover"
                 />
               </div>
@@ -160,6 +126,8 @@ export function Hero() {
                   src="/demo.png"
                   alt="ThinkEx Demo"
                   fill
+                  priority
+                  sizes="(max-width: 768px) 0vw, 80vw"
                   className="object-cover"
                 />
               </div>

From 55c6ae92b73590f4f8fcd544b49dc9b4f717c040 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:05:04 -0500
Subject: [PATCH 03/11] feat: add lazy loading and sizes attributes to
 below-fold images; remove priority from footer logo

---
 src/components/landing/Footer.tsx     |  2 +-
 src/components/landing/FourWays.tsx   | 15 +++++++--------
 src/components/landing/ThreeSteps.tsx |  2 ++
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx
index 6d9f8f07..a7b6607b 100644
--- a/src/components/landing/Footer.tsx
+++ b/src/components/landing/Footer.tsx
@@ -17,8 +17,8 @@ export function Footer() {
                 alt="ThinkEx Logo"
                 width={24}
                 height={24}
+                loading="lazy"
                 className="object-contain"
-                priority
               />
             </div>
             <span className="text-xl font-normal text-foreground">ThinkEx</span>
diff --git a/src/components/landing/FourWays.tsx b/src/components/landing/FourWays.tsx
index 0a291a13..d61071b0 100644
--- a/src/components/landing/FourWays.tsx
+++ b/src/components/landing/FourWays.tsx
@@ -95,14 +95,9 @@ export function FourWays() {
                     className={`space-y-4 md:space-y-6 ${way.imageSide === "left" ? "md:col-start-2" : ""
                       }`}
                   >
-                    <div className="flex items-center gap-4">
-                      <span className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground text-background text-lg font-semibold">
-                        {index + 1}
-                      </span>
-                      <h3 className="text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
-                        {way.title}
-                      </h3>
-                    </div>
+                    <h3 className="text-2xl font-medium tracking-tight text-foreground sm:text-3xl">
+                      {way.title}
+                    </h3>
                     <ul className="space-y-2 text-base md:text-lg leading-relaxed text-muted-foreground list-disc list-inside pl-1">
                       {way.bullets.map((bullet, bulletIndex) => (
                         <li key={bulletIndex}>{bullet}</li>
@@ -121,6 +116,8 @@ export function FourWays() {
                         src={way.image}
                         alt={way.title}
                         fill
+                        loading="lazy"
+                        sizes="(max-width: 768px) 100vw, 0vw"
                         className="object-cover"
                         style={
                           way.image === "/attachments.png"
@@ -140,6 +137,8 @@ export function FourWays() {
                         alt={way.title}
                         width={800}
                         height={600}
+                        loading="lazy"
+                        sizes="(max-width: 768px) 0vw, 50vw"
                         className="w-full h-full object-cover"
                         style={
                           way.image === "/attachments.png"
diff --git a/src/components/landing/ThreeSteps.tsx b/src/components/landing/ThreeSteps.tsx
index 89ab9a79..a20c729d 100644
--- a/src/components/landing/ThreeSteps.tsx
+++ b/src/components/landing/ThreeSteps.tsx
@@ -71,6 +71,8 @@ export function ThreeSteps() {
                       src={step.image}
                       alt={step.title}
                       fill
+                      loading="lazy"
+                      sizes="(max-width: 768px) 100vw, 33vw"
                       className="object-cover"
                       style={step.id === "step-2" ? { objectPosition: "left center" } : undefined}
                     />

From cfcc33a199fd01c510de9008b9feeada5b7981e0 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:05:08 -0500
Subject: [PATCH 04/11] feat: add prefetch to critical navigation links in
 Navbar and Pricing

---
 src/components/landing/Navbar.tsx  | 436 ++++++++++++++---------------
 src/components/landing/Pricing.tsx |   2 +-
 2 files changed, 219 insertions(+), 219 deletions(-)

diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
index 295779cc..de8b5d31 100644
--- a/src/components/landing/Navbar.tsx
+++ b/src/components/landing/Navbar.tsx
@@ -34,11 +34,11 @@ export function Navbar() {
     handleScroll(); // Check on mount
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
-  
+
   const userName = session?.user?.name || session?.user?.email || "User";
   const userEmail = session?.user?.email || "";
   const userImage = session?.user?.image || undefined;
-  
+
   const getInitials = (name: string) => {
     if (name === "User") return "U";
     return name
@@ -63,238 +63,238 @@ export function Navbar() {
         transition={{ duration: 0.5 }}
         className="sticky top-0 z-50"
       >
-      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 pt-1">
-        <motion.div
-          className="relative flex h-16 items-center justify-between px-6"
-          animate={{
-            borderRadius: isScrolled ? 6 : 0,
-            borderWidth: isScrolled ? 1 : 0,
-            borderColor: isScrolled ? "rgba(128, 128, 128, 0.3)" : "rgba(128, 128, 128, 0)",
-            backgroundColor: isScrolled ? "hsl(var(--background) / 0.95)" : "transparent",
-            backdropFilter: isScrolled ? "blur(8px)" : "none",
-            marginTop: isScrolled ? "0.25rem" : "0",
-          }}
-          transition={{ duration: 0.3, ease: "easeOut" }}
-        >
-          {/* Logo/Brand */}
-          <Link href="#hero" className="flex items-center gap-2 group z-10">
-            <div className="relative h-6 w-6 flex items-center justify-center transition-transform group-hover:scale-105">
-              <Image
-                src="/newlogothinkex.svg"
-                alt="ThinkEx Logo"
-                width={24}
-                height={24}
-                className="object-contain"
-                priority
-              />
-            </div>
-            <span className="text-xl font-normal text-foreground">ThinkEx</span>
-          </Link>
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 pt-1">
+          <motion.div
+            className="relative flex h-16 items-center justify-between px-6"
+            animate={{
+              borderRadius: isScrolled ? 6 : 0,
+              borderWidth: isScrolled ? 1 : 0,
+              borderColor: isScrolled ? "rgba(128, 128, 128, 0.3)" : "rgba(128, 128, 128, 0)",
+              backgroundColor: isScrolled ? "hsl(var(--background) / 0.95)" : "transparent",
+              backdropFilter: isScrolled ? "blur(8px)" : "none",
+              marginTop: isScrolled ? "0.25rem" : "0",
+            }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+          >
+            {/* Logo/Brand */}
+            <Link href="#hero" className="flex items-center gap-2 group z-10">
+              <div className="relative h-6 w-6 flex items-center justify-center transition-transform group-hover:scale-105">
+                <Image
+                  src="/newlogothinkex.svg"
+                  alt="ThinkEx Logo"
+                  width={24}
+                  height={24}
+                  className="object-contain"
+                  priority
+                />
+              </div>
+              <span className="text-xl font-normal text-foreground">ThinkEx</span>
+            </Link>
 
-          {/* Desktop Navigation - Centered */}
-          <div className="hidden md:flex md:items-center md:gap-8 absolute left-1/2 -translate-x-1/2">
-            {navLinks.map((link) => (
-              <a
-                key={link.href}
-                href={link.href}
-                onClick={(e) => {
-                  e.preventDefault();
-                  const element = document.querySelector(link.href);
-                  if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                  }
-                }}
-                className="text-sm font-normal text-foreground/70 transition-colors hover:text-foreground cursor-pointer"
-              >
-                {link.label}
-              </a>
-            ))}
-          </div>
-
-          {/* Desktop CTA */}
-          <div className="hidden md:flex md:items-center md:gap-4 z-10">
-            {!isPending && !session && (
-              <>
+            {/* Desktop Navigation - Centered */}
+            <div className="hidden md:flex md:items-center md:gap-8 absolute left-1/2 -translate-x-1/2">
+              {navLinks.map((link) => (
                 <a
-                  href="https://github.com/thinkex-oss/thinkex/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-foreground/70 transition-colors hover:text-foreground cursor-pointer"
-                >
-                  <Github className="h-5 w-5" />
-                </a>
-                <Link 
-                  href="/auth/sign-in"
+                  key={link.href}
+                  href={link.href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const element = document.querySelector(link.href);
+                    if (element) {
+                      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                  }}
                   className="text-sm font-normal text-foreground/70 transition-colors hover:text-foreground cursor-pointer"
                 >
-                  Login
-                </Link>
-                <Link href="/guest-setup">
-                  <Button
-                    onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })}
-                    size="sm"
-                    className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90"
+                  {link.label}
+                </a>
+              ))}
+            </div>
+
+            {/* Desktop CTA */}
+            <div className="hidden md:flex md:items-center md:gap-4 z-10">
+              {!isPending && !session && (
+                <>
+                  <a
+                    href="https://github.com/thinkex-oss/thinkex/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-foreground/70 transition-colors hover:text-foreground cursor-pointer"
                   >
-                    Get Started
-                  </Button>
-                </Link>
-              </>
-            )}
-            {!isPending && session && (
-              <>
-                <Link href="/dashboard">
-                  <Button
-                    onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })}
-                    size="sm"
-                    variant="outline"
-                    className="rounded-md font-medium transition-all hover:bg-foreground/5"
+                    <Github className="h-5 w-5" />
+                  </a>
+                  <Link
+                    href="/auth/sign-in"
+                    className="text-sm font-normal text-foreground/70 transition-colors hover:text-foreground cursor-pointer"
                   >
-                    Dashboard
-                  </Button>
-                </Link>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button className="relative h-9 w-9 rounded-full">
-                      <Avatar className="h-9 w-9">
-                        {userImage && <AvatarImage src={userImage} alt={userName} />}
-                        <AvatarFallback className="bg-primary/10 text-xs">
-                          {getInitials(userName)}
-                        </AvatarFallback>
-                      </Avatar>
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-56">
-                    <div className="px-2 py-1.5">
-                      <p className="text-sm font-medium">{userName}</p>
-                      {userEmail && (
-                        <p className="text-xs text-muted-foreground truncate">{userEmail}</p>
-                      )}
-                    </div>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      onClick={() => setShowAccountModal(true)}
-                      className="cursor-pointer"
+                    Login
+                  </Link>
+                  <Link href="/guest-setup" prefetch>
+                    <Button
+                      onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })}
+                      size="sm"
+                      className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90"
                     >
-                      Account Settings
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      onClick={() => signOut()}
-                      className="cursor-pointer"
+                      Get Started
+                    </Button>
+                  </Link>
+                </>
+              )}
+              {!isPending && session && (
+                <>
+                  <Link href="/dashboard" prefetch>
+                    <Button
+                      onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })}
+                      size="sm"
+                      variant="outline"
+                      className="rounded-md font-medium transition-all hover:bg-foreground/5"
                     >
-                      Sign Out
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            )}
-          </div>
-
-          {/* Mobile menu dropdown */}
-          <div className="md:hidden z-10">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                  aria-label="Toggle menu"
-                >
-                  <Menu className="h-6 w-6" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56">
-                {navLinks.map((link) => (
-                  <DropdownMenuItem
-                    key={link.href}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      const element = document.querySelector(link.href);
-                      if (element) {
-                        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                      }
-                    }}
-                    className="cursor-pointer"
-                  >
-                    {link.label}
-                  </DropdownMenuItem>
-                ))}
-                {!isPending && !session && (
-                  <>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem asChild>
-                      <a
-                        href="https://github.com/thinkex-oss/thinkex/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="cursor-pointer flex items-center justify-center"
-                      >
-                        <Github className="h-4 w-4" />
-                      </a>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <Link 
-                        href="/auth/sign-in"
+                      Dashboard
+                    </Button>
+                  </Link>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button className="relative h-9 w-9 rounded-full">
+                        <Avatar className="h-9 w-9">
+                          {userImage && <AvatarImage src={userImage} alt={userName} />}
+                          <AvatarFallback className="bg-primary/10 text-xs">
+                            {getInitials(userName)}
+                          </AvatarFallback>
+                        </Avatar>
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <div className="px-2 py-1.5">
+                        <p className="text-sm font-medium">{userName}</p>
+                        {userEmail && (
+                          <p className="text-xs text-muted-foreground truncate">{userEmail}</p>
+                        )}
+                      </div>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() => setShowAccountModal(true)}
                         className="cursor-pointer"
                       >
-                        Login
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem asChild>
-                      <Link 
-                        href="/guest-setup"
-                        onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'mobile' })}
-                        className="cursor-pointer"
-                      >
-                        Get Started
-                      </Link>
-                    </DropdownMenuItem>
-                  </>
-                )}
-                {!isPending && session && (
-                  <>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem asChild>
-                      <Link 
-                        href="/dashboard"
-                        onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'mobile' })}
+                        Account Settings
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() => signOut()}
                         className="cursor-pointer"
                       >
-                        Dashboard
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <div className="px-2 py-1.5">
-                      <p className="text-sm font-medium">{userName}</p>
-                      {userEmail && (
-                        <p className="text-xs text-muted-foreground truncate">{userEmail}</p>
-                      )}
-                    </div>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem
-                      onClick={() => setShowAccountModal(true)}
-                      className="cursor-pointer"
-                    >
-                      Account Settings
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
+                        Sign Out
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
+              )}
+            </div>
+
+            {/* Mobile menu dropdown */}
+            <div className="md:hidden z-10">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                    aria-label="Toggle menu"
+                  >
+                    <Menu className="h-6 w-6" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  {navLinks.map((link) => (
                     <DropdownMenuItem
-                      onClick={() => signOut()}
+                      key={link.href}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        const element = document.querySelector(link.href);
+                        if (element) {
+                          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
+                      }}
                       className="cursor-pointer"
                     >
-                      Sign Out
+                      {link.label}
                     </DropdownMenuItem>
-                  </>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </motion.div>
-      </div>
-      
-      <AccountModal
-        open={showAccountModal}
-        onOpenChange={setShowAccountModal}
-      />
-    </motion.nav>
+                  ))}
+                  {!isPending && !session && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem asChild>
+                        <a
+                          href="https://github.com/thinkex-oss/thinkex/"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="cursor-pointer flex items-center justify-center"
+                        >
+                          <Github className="h-4 w-4" />
+                        </a>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <Link
+                          href="/auth/sign-in"
+                          className="cursor-pointer"
+                        >
+                          Login
+                        </Link>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <Link
+                          href="/guest-setup"
+                          onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'mobile' })}
+                          className="cursor-pointer"
+                        >
+                          Get Started
+                        </Link>
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  {!isPending && session && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem asChild>
+                        <Link
+                          href="/dashboard"
+                          onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'mobile' })}
+                          className="cursor-pointer"
+                        >
+                          Dashboard
+                        </Link>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <div className="px-2 py-1.5">
+                        <p className="text-sm font-medium">{userName}</p>
+                        {userEmail && (
+                          <p className="text-xs text-muted-foreground truncate">{userEmail}</p>
+                        )}
+                      </div>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() => setShowAccountModal(true)}
+                        className="cursor-pointer"
+                      >
+                        Account Settings
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() => signOut()}
+                        className="cursor-pointer"
+                      >
+                        Sign Out
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </motion.div>
+        </div>
+
+        <AccountModal
+          open={showAccountModal}
+          onOpenChange={setShowAccountModal}
+        />
+      </motion.nav>
     </>
   );
 }
diff --git a/src/components/landing/Pricing.tsx b/src/components/landing/Pricing.tsx
index 62c80b70..caa34630 100644
--- a/src/components/landing/Pricing.tsx
+++ b/src/components/landing/Pricing.tsx
@@ -158,7 +158,7 @@ export function Pricing() {
                   ))}
                 </ul>
 
-                <Link href={tier.ctaLink} className="block">
+                <Link href={tier.ctaLink} className="block" prefetch>
                   <Button
                     className={`w-full ${tier.highlighted
                       ? "bg-foreground text-background hover:bg-foreground/90"

From 6610672cca84711ad6f98c240044ec116b678c86 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:05:12 -0500
Subject: [PATCH 05/11] feat: convert landing page to Server Component with
 Next.js Metadata API; add dynamic imports for below-fold sections

---
 src/app/page.tsx | 137 +++++++++++++++++++++++++++++++----------------
 1 file changed, 91 insertions(+), 46 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f534eb08..de220a06 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,58 +1,103 @@
-"use client";
+import dynamic from "next/dynamic";
+import type { Metadata } from "next";
 
+// Static imports for above-the-fold components
 import { Navbar } from "@/components/landing/Navbar";
 import { Hero } from "@/components/landing/Hero";
-import { FourWays } from "@/components/landing/FourWays";
-import { ThreeSteps } from "@/components/landing/ThreeSteps";
-import { Comparison } from "@/components/landing/Comparison";
-import { Pricing } from "@/components/landing/Pricing";
-import { FinalCTA } from "@/components/landing/FinalCTA";
-import { Footer } from "@/components/landing/Footer";
-import { SEO } from "@/components/seo/SEO";
+
+// Dynamic imports for below-the-fold components
+const FourWays = dynamic(
+  () => import("@/components/landing/FourWays").then((mod) => mod.FourWays),
+  { ssr: true }
+);
+
+const ThreeSteps = dynamic(
+  () => import("@/components/landing/ThreeSteps").then((mod) => mod.ThreeSteps),
+  { ssr: true }
+);
+
+const Comparison = dynamic(
+  () => import("@/components/landing/Comparison").then((mod) => mod.Comparison),
+  { ssr: true }
+);
+
+const Pricing = dynamic(
+  () => import("@/components/landing/Pricing").then((mod) => mod.Pricing),
+  { ssr: true }
+);
+
+const FinalCTA = dynamic(
+  () => import("@/components/landing/FinalCTA").then((mod) => mod.FinalCTA),
+  { ssr: true }
+);
+
+const Footer = dynamic(
+  () => import("@/components/landing/Footer").then((mod) => mod.Footer),
+  { ssr: true }
+);
+
+// Next.js Metadata API for SEO (replaces client-side SEO component)
+export const metadata: Metadata = {
+  title: "ThinkEx",
+  description: "Study and work with information effortlessly.",
+  keywords: "AI workspace, productivity, collaboration, artificial intelligence, workspace tools, ThinkEx, AI assistant, creative workspace",
+  authors: [{ name: "ThinkEx" }],
+  openGraph: {
+    title: "ThinkEx",
+    description: "Study and work with information effortlessly.",
+    url: "https://thinkex.app",
+    siteName: "ThinkEx",
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "ThinkEx",
+    description: "Study and work with information effortlessly.",
+  },
+  alternates: {
+    canonical: "https://thinkex.app",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
 
 export default function LandingPage() {
   return (
-    <>
-      <SEO
-        title="ThinkEx"
-        description="Study and work with information effortlessly."
-        keywords="AI workspace, productivity, collaboration, artificial intelligence, workspace tools, ThinkEx, AI assistant, creative workspace"
-        url="https://thinkex.app"
-        canonical="https://thinkex.app"
-      />
+    <div
+      className="relative min-h-screen bg-background"
+      style={{ fontFamily: 'var(--font-outfit)' }}
+    >
+      {/* Grid Background (static) */}
       <div
-        className="relative min-h-screen bg-background"
-        style={{ fontFamily: 'var(--font-outfit)' }}
+        className="fixed top-0 left-0 right-0 bottom-0 z-0 opacity-55 pointer-events-none"
       >
-        {/* Grid Background (static) */}
+        {/* Grid Pattern */}
         <div
-          className="fixed top-0 left-0 right-0 bottom-0 z-0 opacity-55 pointer-events-none"
-        >
-          {/* Grid Pattern */}
-          <div
-            className="absolute inset-0"
-            style={{
-              backgroundImage: `
-              linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
-              linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px)
-            `,
-              backgroundSize: "50px 50px",
-            }}
-          />
-        </div>
-
-        {/* Content */}
-        <div className="relative z-10">
-          <Navbar />
-          <Hero />
-          <FourWays />
-          <ThreeSteps />
-          <Comparison />
-          <Pricing />
-          <FinalCTA />
-          <Footer />
-        </div>
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `
+            linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px)
+          `,
+            backgroundSize: "50px 50px",
+          }}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10">
+        <Navbar />
+        <Hero />
+        <FourWays />
+        <ThreeSteps />
+        <Comparison />
+        <Pricing />
+        <FinalCTA />
+        <Footer />
       </div>
-    </>
+    </div>
   );
 }

From 97327d9794e7e5f928389b0306a561b2cb443f55 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:12:47 -0500
Subject: [PATCH 06/11] chore: remove unused getCardAccentColor import from
 Hero

---
 src/components/landing/Hero.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 2d40bd52..4b9da625 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -3,8 +3,6 @@
 import Link from "next/link";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
-import { getCardAccentColor } from "@/lib/workspace-state/colors";
-import type { CardColor } from "@/lib/workspace-state/colors";
 import { BackgroundCard, cardColors, type BackgroundCardData } from "./BackgroundCard";
 
 // Random card positions and sizes (static - no parallax)
@@ -28,12 +26,12 @@ export function Hero() {
       <div className="absolute inset-0 z-0 opacity-40">
         {/* Static Background Cards */}
         {backgroundCards.map((card, index) => {
-          const isMobileOnly = index >= 3;
+          const isDesktopOnly = index >= 3;
           return (
             <BackgroundCard
               key={index}
               card={card}
-              isMobileOnly={isMobileOnly}
+              isDesktopOnly={isDesktopOnly}
             />
           );
         })}
@@ -111,7 +109,7 @@ export function Hero() {
                   alt="ThinkEx Demo"
                   fill
                   priority
-                  sizes="(max-width: 768px) 100vw, 0vw"
+                  sizes="100vw"
                   className="object-cover"
                 />
               </div>
@@ -127,7 +125,7 @@ export function Hero() {
                   alt="ThinkEx Demo"
                   fill
                   priority
-                  sizes="(max-width: 768px) 0vw, 80vw"
+                  sizes="80vw"
                   className="object-cover"
                 />
               </div>

From e9f84dcdcb63a289c811f5aeacfe32644d99d6ca Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:12:51 -0500
Subject: [PATCH 07/11] refactor: rename isMobileOnly to isDesktopOnly for
 clarity

---
 src/components/landing/BackgroundCard.tsx | 6 +++---
 src/components/landing/FinalCTA.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/landing/BackgroundCard.tsx b/src/components/landing/BackgroundCard.tsx
index 88b83ce3..79c8993e 100644
--- a/src/components/landing/BackgroundCard.tsx
+++ b/src/components/landing/BackgroundCard.tsx
@@ -12,10 +12,10 @@ export interface BackgroundCardData {
 
 interface BackgroundCardProps {
     card: BackgroundCardData;
-    isMobileOnly?: boolean;
+    isDesktopOnly?: boolean;
 }
 
-export function BackgroundCard({ card, isMobileOnly = false }: BackgroundCardProps) {
+export function BackgroundCard({ card, isDesktopOnly = false }: BackgroundCardProps) {
     return (
         <div
             style={{
@@ -28,7 +28,7 @@ export function BackgroundCard({ card, isMobileOnly = false }: BackgroundCardPro
                 transform: `rotate(${card.rotation}deg)`,
                 opacity: 0.5,
             }}
-            className={`rounded-md border border-foreground/20 shadow-xl ${isMobileOnly ? 'hidden md:block' : ''}`}
+            className={`rounded-md border border-foreground/20 shadow-xl ${isDesktopOnly ? 'hidden md:block' : ''}`}
         >
             {/* Card content placeholder */}
             <div className="p-3 h-full flex flex-col gap-2">
diff --git a/src/components/landing/FinalCTA.tsx b/src/components/landing/FinalCTA.tsx
index 129cd31c..59c86a47 100644
--- a/src/components/landing/FinalCTA.tsx
+++ b/src/components/landing/FinalCTA.tsx
@@ -23,12 +23,12 @@ export function FinalCTA() {
       <div className="absolute inset-0 z-0 opacity-40">
         {/* Static Background Cards */}
         {backgroundCards.map((card, index) => {
-          const isMobileOnly = index >= 3;
+          const isDesktopOnly = index >= 3;
           return (
             <BackgroundCard
               key={index}
               card={card}
-              isMobileOnly={isMobileOnly}
+              isDesktopOnly={isDesktopOnly}
             />
           );
         })}

From 1955a3ccfd95ac3ff9a85c9a0385958e7c890929 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:12:56 -0500
Subject: [PATCH 08/11] fix: simplify image sizes attributes to avoid 0vw at
 breakpoints

---
 src/components/landing/FourWays.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/landing/FourWays.tsx b/src/components/landing/FourWays.tsx
index d61071b0..b9db7edf 100644
--- a/src/components/landing/FourWays.tsx
+++ b/src/components/landing/FourWays.tsx
@@ -117,7 +117,7 @@ export function FourWays() {
                         alt={way.title}
                         fill
                         loading="lazy"
-                        sizes="(max-width: 768px) 100vw, 0vw"
+                        sizes="100vw"
                         className="object-cover"
                         style={
                           way.image === "/attachments.png"
@@ -138,7 +138,7 @@ export function FourWays() {
                         width={800}
                         height={600}
                         loading="lazy"
-                        sizes="(max-width: 768px) 0vw, 50vw"
+                        sizes="50vw"
                         className="w-full h-full object-cover"
                         style={
                           way.image === "/attachments.png"

From 858af1f431a0af9ed5ad1a7c2117a13033f9c608 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:18:39 -0500
Subject: [PATCH 09/11] fix: add solid border style to Navbar and fix nested
 interactive elements

---
 src/components/landing/Navbar.tsx | 37 +++++++++++++++++--------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx
index de8b5d31..a280a4be 100644
--- a/src/components/landing/Navbar.tsx
+++ b/src/components/landing/Navbar.tsx
@@ -73,6 +73,7 @@ export function Navbar() {
               backgroundColor: isScrolled ? "hsl(var(--background) / 0.95)" : "transparent",
               backdropFilter: isScrolled ? "blur(8px)" : "none",
               marginTop: isScrolled ? "0.25rem" : "0",
+              borderStyle: "solid",
             }}
             transition={{ duration: 0.3, ease: "easeOut" }}
           >
@@ -129,29 +130,31 @@ export function Navbar() {
                   >
                     Login
                   </Link>
-                  <Link href="/guest-setup" prefetch>
-                    <Button
-                      onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })}
-                      size="sm"
-                      className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90"
-                    >
+                  <Button
+                    asChild
+                    onClick={() => posthog.capture('navbar-get-started-clicked', { location: 'desktop' })}
+                    size="sm"
+                    className="rounded-md bg-foreground font-medium text-background transition-all hover:bg-foreground/90"
+                  >
+                    <Link href="/guest-setup" prefetch>
                       Get Started
-                    </Button>
-                  </Link>
+                    </Link>
+                  </Button>
                 </>
               )}
               {!isPending && session && (
                 <>
-                  <Link href="/dashboard" prefetch>
-                    <Button
-                      onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })}
-                      size="sm"
-                      variant="outline"
-                      className="rounded-md font-medium transition-all hover:bg-foreground/5"
-                    >
+                  <Button
+                    asChild
+                    onClick={() => posthog.capture('navbar-dashboard-clicked', { location: 'desktop' })}
+                    size="sm"
+                    variant="outline"
+                    className="rounded-md font-medium transition-all hover:bg-foreground/5"
+                  >
+                    <Link href="/dashboard" prefetch>
                       Dashboard
-                    </Button>
-                  </Link>
+                    </Link>
+                  </Button>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <button className="relative h-9 w-9 rounded-full">

From 33ce95b1a6c8c7facf22619eadf9970e9c3050cc Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:18:49 -0500
Subject: [PATCH 10/11] refactor: fix nested Link/Button accessibility issues
 in landing components

---
 src/components/landing/FinalCTA.tsx | 15 ++++++++-------
 src/components/landing/Hero.tsx     | 15 ++++++++-------
 src/components/landing/Pricing.tsx  | 23 ++++++++++++-----------
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/landing/FinalCTA.tsx b/src/components/landing/FinalCTA.tsx
index 59c86a47..64802edc 100644
--- a/src/components/landing/FinalCTA.tsx
+++ b/src/components/landing/FinalCTA.tsx
@@ -62,14 +62,15 @@ export function FinalCTA() {
           </p>
 
           <div className="flex justify-center pt-4">
-            <Link href="/guest-setup" prefetch>
-              <Button
-                size="lg"
-                className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
-              >
+            <Button
+              asChild
+              size="lg"
+              className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
+            >
+              <Link href="/guest-setup" prefetch>
                 Get Started
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 4b9da625..f35b5ab0 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -90,14 +90,15 @@ export function Hero() {
 
           {/* Get Started Button - Above Video */}
           <div className="flex justify-center">
-            <Link href="/guest-setup" prefetch>
-              <Button
-                size="lg"
-                className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
-              >
+            <Button
+              asChild
+              size="lg"
+              className="h-12 rounded-md bg-foreground px-8 text-base font-medium text-background transition-all hover:bg-foreground/90"
+            >
+              <Link href="/guest-setup" prefetch>
                 Get Started
-              </Button>
-            </Link>
+              </Link>
+            </Button>
           </div>
 
           {/* Mobile Demo Image - Only visible on mobile */}
diff --git a/src/components/landing/Pricing.tsx b/src/components/landing/Pricing.tsx
index caa34630..7aa0a469 100644
--- a/src/components/landing/Pricing.tsx
+++ b/src/components/landing/Pricing.tsx
@@ -158,18 +158,19 @@ export function Pricing() {
                   ))}
                 </ul>
 
-                <Link href={tier.ctaLink} className="block" prefetch>
-                  <Button
-                    className={`w-full ${tier.highlighted
-                      ? "bg-foreground text-background hover:bg-foreground/90"
-                      : "border-foreground/20 hover:bg-foreground/5"
-                      }`}
-                    variant={tier.highlighted ? "default" : "outline"}
-                    size="lg"
-                  >
+                <Button
+                  asChild
+                  className={`w-full ${tier.highlighted
+                    ? "bg-foreground text-background hover:bg-foreground/90"
+                    : "border-foreground/20 hover:bg-foreground/5"
+                    }`}
+                  variant={tier.highlighted ? "default" : "outline"}
+                  size="lg"
+                >
+                  <Link href={tier.ctaLink} className="block" prefetch>
                     {tier.cta}
-                  </Button>
-                </Link>
+                  </Link>
+                </Button>
               </div>
             ))}
           </div>

From a5e873b900a7ff349bffdd9676652547b5e7ac81 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:19:57 -0500
Subject: [PATCH 11/11] style: increase Hero demo image width to max-w-6xl to
 match other sections

---
 src/components/landing/Hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index f35b5ab0..895f5794 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -119,7 +119,7 @@ export function Hero() {
 
           {/* Desktop Demo Image - Hidden on mobile */}
           <div className="relative w-full hidden md:block">
-            <div className="relative w-full max-w-5xl mx-auto px-4">
+            <div className="relative w-full max-w-6xl mx-auto px-4">
               <div className="relative aspect-[16/9] w-full overflow-hidden rounded-md border border-foreground/20 shadow-2xl">
                 <Image
                   src="/demo.png"