opensource/tweakcn
3
0
Fork 0
mirror of https://github.com/jnsahaj/tweakcn.git synced 2026-08-30 18:10:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

add more touchpoints for pricing page

Browse Source
This commit is contained in:
Sahaj Jain
2025-07-21 21:49:29 +05:30
parent c1c65dba27
commit 4440cb27a8
4 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ai/components/ai-announcement.tsx
+12 -5
View File
@@ -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" />
components/get-pro-cta.tsx
+2 -2
View File
@@ -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;
}
components/home/ai-generation-cta.tsx
+18 -9
View File
@@ -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">
components/home/header.tsx
+32 -9
View File
@@ -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>
))}