From 4440cb27a83e007bc027b3fd6592160ee734bedd Mon Sep 17 00:00:00 2001
From: Sahaj Jain <sahajjain13@gmail.com>
Date: Mon, 21 Jul 2025 21:49:29 +0530
Subject: [PATCH] add more touchpoints for pricing page

---
 app/ai/components/ai-announcement.tsx | 17 +++++++----
 components/get-pro-cta.tsx            |  4 +--
 components/home/ai-generation-cta.tsx | 27 ++++++++++++------
 components/home/header.tsx            | 41 +++++++++++++++++++++------
 4 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/app/ai/components/ai-announcement.tsx b/app/ai/components/ai-announcement.tsx
index a44c3247..feaec178 100644
--- a/app/ai/components/ai-announcement.tsx
+++ b/app/ai/components/ai-announcement.tsx
@@ -1,18 +1,25 @@
+"use client";
+
+import { useSubscription } from "@/hooks/use-subscription";
 import { ArrowRight } from "lucide-react";
 import Link from "next/link";
 
 export function AIAnnouncement() {
+  const { subscriptionStatus, isPending } = useSubscription();
+  const isPro = subscriptionStatus?.isSubscribed ?? false;
+
+  if (isPending || isPro) {
+    return null;
+  }
+
   return (
     <div className="mx-auto max-w-3xl">
       <Link
-        href={"/editor/theme?tab=ai"}
+        href="/pricing"
         className="group bg-muted flex items-center justify-between gap-2 rounded-full px-2 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
       >
-        <span className="bg-primary text-primary-foreground rounded-full px-1.5 py-0.5 text-xs font-medium capitalize">
-          Beta
-        </span>
         <span className="text-muted-foreground group-hover:text-foreground text-sm font-medium transition-colors">
-          Try the new AI Theme Editor
+          Upgrade to Pro for unlimited requests
         </span>
 
         <ArrowRight className="text-muted-foreground group-hover:text-foreground size-4 -rotate-45 transition-all group-hover:rotate-0" />
diff --git a/components/get-pro-cta.tsx b/components/get-pro-cta.tsx
index 986ab8be..0db24219 100644
--- a/components/get-pro-cta.tsx
+++ b/components/get-pro-cta.tsx
@@ -10,11 +10,11 @@ import Link from "next/link";
 interface GetProCTAProps extends React.ComponentProps<typeof Button> {}
 
 export function GetProCTA({ className, ...props }: GetProCTAProps) {
-  const { data: session } = authClient.useSession();
+  const { isPending: isSessionPending } = authClient.useSession();
   const { subscriptionStatus, isPending } = useSubscription();
   const isPro = subscriptionStatus?.isSubscribed ?? false;
 
-  if (isPending || isPro || !session?.user) {
+  if (isPending || isSessionPending || isPro) {
     return null;
   }
 
diff --git a/components/home/ai-generation-cta.tsx b/components/home/ai-generation-cta.tsx
index 6a6d45cc..a0169350 100644
--- a/components/home/ai-generation-cta.tsx
+++ b/components/home/ai-generation-cta.tsx
@@ -44,16 +44,25 @@ export function AIGenerationCTA() {
                   </p>
                 </div>
 
-                <div className="flex w-fit flex-col gap-4">
-                  <Button
-                    asChild
-                    size="lg"
-                    className="border-primary/20 hover:border-primary/50 h-12 cursor-pointer rounded-full px-8 text-base transition-transform duration-250 hover:translate-y-[-2px]"
-                  >
-                    <Link href="/ai">
+                <div className="flex w-fit flex-col gap-4 md:flex-row">
+                  <Link href="/ai">
+                    <Button
+                      size="lg"
+                      className="border-primary/20 hover:border-primary/50 h-12 cursor-pointer rounded-full px-8 text-base transition-transform duration-250 hover:translate-y-[-2px]"
+                    >
                       Try it Free <ArrowRight className="ml-2" />
-                    </Link>
-                  </Button>
+                    </Button>
+                  </Link>
+
+                  <Link href="/pricing">
+                    <Button
+                      size="lg"
+                      variant="outline"
+                      className="border-primary/20 hover:border-primary/50 h-12 cursor-pointer rounded-full px-8 text-base transition-transform duration-300 hover:translate-y-[-2px]"
+                    >
+                      Get Pro
+                    </Button>
+                  </Link>
                 </div>
 
                 <div className="flex flex-wrap items-center gap-6">
diff --git a/components/home/header.tsx b/components/home/header.tsx
index b3f6924e..a2d889ba 100644
--- a/components/home/header.tsx
+++ b/components/home/header.tsx
@@ -17,6 +17,29 @@ interface HeaderProps {
   setMobileMenuOpen: (open: boolean) => void;
 }
 
+const navbarItems = [
+  {
+    label: "Examples",
+    href: "#examples",
+  },
+  {
+    label: "Features",
+    href: "#features",
+  },
+  {
+    label: "Pricing",
+    href: "/pricing",
+  },
+  {
+    label: "Roadmap",
+    href: "#roadmap",
+  },
+  {
+    label: "FAQ",
+    href: "#faq",
+  },
+];
+
 export function Header({ isScrolled, mobileMenuOpen, setMobileMenuOpen }: HeaderProps) {
   const { stargazersCount } = useGithubStars("jnsahaj", "tweakcn");
 
@@ -46,17 +69,17 @@ export function Header({ isScrolled, mobileMenuOpen, setMobileMenuOpen }: Header
           </div>
         </Link>
         <nav className="hidden items-center gap-4 md:flex lg:gap-8">
-          {["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map((item, i) => (
+          {navbarItems.map((item, i) => (
             <motion.a
-              key={item}
+              key={item.label}
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.3, delay: 0.1 + i * 0.05 }}
-              href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
-              onClick={handleScrollToSection}
+              href={item.href}
+              onClick={item.href.startsWith("#") ? handleScrollToSection : undefined}
               className="text-muted-foreground hover:text-foreground group relative text-xs font-medium transition-colors lg:text-sm"
             >
-              {item}
+              {item.label}
               <span className="bg-primary absolute -bottom-1 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full"></span>
             </motion.a>
           ))}
@@ -122,20 +145,20 @@ export function Header({ isScrolled, mobileMenuOpen, setMobileMenuOpen }: Header
           className="bg-background/95 absolute inset-x-0 top-16 border-b backdrop-blur-lg md:hidden"
         >
           <div className="container mx-auto flex flex-col gap-4 px-4 py-4">
-            {["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map((item, i) => (
+            {navbarItems.map((item, i) => (
               <motion.a
-                key={item}
+                key={item.label}
                 initial={{ opacity: 0, x: -10 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ duration: 0.2, delay: i * 0.05 }}
-                href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
+                href={item.href}
                 onClick={(e) => {
                   handleScrollToSection(e);
                   setMobileMenuOpen(false);
                 }}
                 className="group relative overflow-hidden py-2 text-sm font-medium"
               >
-                <span className="relative z-10">{item}</span>
+                <span className="relative z-10">{item.href}</span>
                 <span className="bg-primary absolute bottom-0 left-0 h-0.5 w-0 transition-all duration-300 group-hover:w-full"></span>
               </motion.a>
             ))}