gradient-forge 1.0.0

package/components/templates/ecommerce.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { 
+  ShoppingCart, 
+  Search, 
+  Heart, 
+  Star,
+  Filter,
+  ChevronDown
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface EcommerceTemplateProps {
+  preview?: boolean;
+}
+
+export function EcommerceTemplate({ preview }: EcommerceTemplateProps) {
+  const products = [
+    { 
+      id: 1, 
+      name: "Premium Wireless Headphones", 
+      price: 299, 
+      rating: 4.8, 
+      reviews: 128,
+      image: "bg-muted",
+      badge: "Bestseller"
+    },
+    { 
+      id: 2, 
+      name: "Smart Watch Pro", 
+      price: 399, 
+      rating: 4.9, 
+      reviews: 256,
+      image: "bg-muted",
+      badge: "New"
+    },
+    { 
+      id: 3, 
+      name: "Minimalist Backpack", 
+      price: 89, 
+      rating: 4.7, 
+      reviews: 89,
+      image: "bg-muted"
+    },
+    { 
+      id: 4, 
+      name: "Portable Speaker", 
+      price: 149, 
+      rating: 4.6, 
+      reviews: 167,
+      image: "bg-muted"
+    },
+  ];
+
+  const categories = ["All", "Electronics", "Accessories", "Home", "Lifestyle"];
+
+  return (
+    <div className="min-h-full bg-background">
+      {/* Header */}
+      <header className="border-b border-border/50 bg-background/80 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 h-14 sm:h-16 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-primary/20 flex items-center justify-center">
+              <ShoppingCart className="h-4 w-4 text-primary" />
+            </div>
+            <span className="font-semibold text-sm sm:text-base">Shop</span>
+          </div>
+          
+          <div className="flex-1 max-w-md mx-4 hidden sm:block">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input 
+                type="text" 
+                placeholder="Search products..."
+                className="w-full pl-10 pr-4 py-2 rounded-full border border-border/50 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hidden sm:flex">
+              <Heart className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="sm" className="gap-2 text-xs">
+              <ShoppingCart className="h-4 w-4" />
+              <span className="hidden sm:inline">Cart (2)</span>
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 py-6 sm:py-8">
+        {/* Hero Banner */}
+        <div className="relative rounded-2xl overflow-hidden mb-6 sm:mb-8 bg-gradient-to-r from-primary/20 to-accent/20 h-48 sm:h-64 flex items-center">
+          <div className="absolute inset-0 bg-background/40" />
+          <div className="relative z-10 px-6 sm:px-10 max-w-lg">
+            <Badge variant="glass" className="mb-3 text-xs">Summer Sale</Badge>
+            <h1 className="text-2xl sm:text-4xl font-bold mb-2 sm:mb-3">
+              Up to 50% off
+            </h1>
+            <p className="text-sm text-muted-foreground mb-4">
+              Discover amazing deals on premium products
+            </p>
+            <Button size="sm" variant="glow" className="text-xs">
+              Shop Now
+            </Button>
+          </div>
+        </div>
+
+        {/* Categories */}
+        <div className="flex gap-2 overflow-x-auto pb-4 mb-4 sm:mb-6 scrollbar-hide">
+          {categories.map((category, i) => (
+            <Button
+              key={category}
+              variant={i === 0 ? "default" : "outline"}
+              size="sm"
+              className="whitespace-nowrap text-xs"
+            >
+              {category}
+            </Button>
+          ))}
+        </div>
+
+        {/* Filters */}
+        <div className="flex items-center justify-between mb-4 sm:mb-6">
+          <h2 className="text-lg sm:text-xl font-semibold">Featured Products</h2>
+          <Button variant="outline" size="sm" className="gap-2 text-xs">
+            <Filter className="h-3.5 w-3.5" />
+            Filter
+            <ChevronDown className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+
+        {/* Products Grid */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
+          {products.map((product) => (
+            <Card key={product.id} className="border-border/50 group cursor-pointer overflow-hidden">
+              <CardContent className="p-0">
+                {/* Image */}
+                <div className="relative aspect-square bg-muted overflow-hidden">
+                  <div className={cn("absolute inset-0", product.image)} />
+                  {product.badge && (
+                    <Badge 
+                      variant="default" 
+                      className="absolute top-2 left-2 text-[10px]"
+                    >
+                      {product.badge}
+                    </Badge>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    <Heart className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                {/* Info */}
+                <div className="p-3 sm:p-4">
+                  <h3 className="font-medium text-xs sm:text-sm mb-1 line-clamp-1">
+                    {product.name}
+                  </h3>
+                  
+                  <div className="flex items-center gap-1 mb-2">
+                    <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
+                    <span className="text-xs font-medium">{product.rating}</span>
+                    <span className="text-[10px] sm:text-xs text-muted-foreground">
+                      ({product.reviews})
+                    </span>
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm sm:text-base font-bold">
+                      ${product.price}
+                    </span>
+                    <Button size="sm" variant="glow" className="h-8 text-xs">
+                      Add
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Load More */}
+        <div className="text-center mt-6 sm:mt-8">
+          <Button variant="outline" size="sm" className="text-xs">
+            Load More Products
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+}

package/components/templates/mail.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { 
+  Inbox, 
+  Send, 
+  Archive, 
+  Trash2,
+  Star,
+  MoreVertical,
+  Search,
+  Plus,
+  ChevronLeft,
+  Paperclip,
+  Reply,
+  Forward
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface MailTemplateProps {
+  preview?: boolean;
+}
+
+export function MailTemplate({ preview }: MailTemplateProps) {
+  const folders = [
+    { name: "Inbox", count: 128, icon: Inbox, active: true },
+    { name: "Sent", count: 0, icon: Send, active: false },
+    { name: "Drafts", count: 3, icon: Send, active: false },
+    { name: "Archive", count: 0, icon: Archive, active: false },
+    { name: "Trash", count: 0, icon: Trash2, active: false },
+  ];
+
+  const emails = [
+    { 
+      id: 1, 
+      from: "Sarah Chen", 
+      subject: "Q4 Marketing Strategy - Review Needed", 
+      preview: "Hi team, I've put together the initial draft for our Q4 marketing strategy. Please review...",
+      time: "10:30 AM",
+      starred: true,
+      unread: true
+    },
+    { 
+      id: 2, 
+      from: "Alex Rivera", 
+      subject: "Design System Update", 
+      preview: "The new component library is now ready for testing. I've attached the documentation...",
+      time: "9:15 AM",
+      starred: false,
+      unread: true
+    },
+    { 
+      id: 3, 
+      from: "Emily Watson", 
+      subject: "Meeting Notes: Product Review", 
+      preview: "Here are the notes from today's product review meeting. Key decisions include...",
+      time: "Yesterday",
+      starred: false,
+      unread: false
+    },
+    { 
+      id: 4, 
+      from: "Michael Park", 
+      subject: "Weekly Analytics Report", 
+      preview: "Attached is the weekly analytics report. We've seen a 15% increase in user engagement...",
+      time: "Yesterday",
+      starred: true,
+      unread: false
+    },
+  ];
+
+  return (
+    <div className="min-h-full bg-background flex">
+      {/* Sidebar */}
+      <aside className="w-14 sm:w-60 border-r border-border/50 bg-muted/30 flex-shrink-0 flex flex-col">
+        <div className="h-14 border-b border-border/50 flex items-center justify-center sm:justify-start sm:px-4">
+          <Button variant="glow" size="sm" className="w-10 sm:w-auto px-0 sm:px-4 gap-0 sm:gap-2">
+            <Plus className="h-4 w-4" />
+            <span className="hidden sm:inline text-xs">Compose</span>
+          </Button>
+        </div>
+        
+        <nav className="flex-1 p-2 space-y-1">
+          {folders.map((folder) => (
+            <Button
+              key={folder.name}
+              variant={folder.active ? "secondary" : "ghost"}
+              size="sm"
+              className={cn(
+                "w-full justify-center sm:justify-start gap-0 sm:gap-3 h-9 px-2 sm:px-3",
+                folder.active && "bg-secondary"
+              )}
+            >
+              <folder.icon className="h-4 w-4" />
+              <span className="hidden sm:inline flex-1 text-left text-xs">{folder.name}</span>
+              {folder.count > 0 && (
+                <span className="hidden sm:inline text-xs text-muted-foreground">
+                  {folder.count}
+                </span>
+              )}
+            </Button>
+          ))}
+        </nav>
+      </aside>
+
+      {/* Email List */}
+      <div className="w-full sm:w-80 border-r border-border/50 flex-shrink-0 flex flex-col">
+        <div className="h-14 border-b border-border/50 flex items-center px-4 gap-3">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input 
+              type="text"
+              placeholder="Search mail..."
+              className="w-full pl-9 pr-4 py-2 rounded-lg border border-border/50 bg-background text-xs focus:outline-none focus:ring-2 focus:ring-primary/20"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {emails.map((email) => (
+            <div
+              key={email.id}
+              className={cn(
+                "p-3 sm:p-4 border-b border-border/50 cursor-pointer transition-colors hover:bg-muted/30",
+                email.unread && "bg-primary/5"
+              )}
+            >
+              <div className="flex items-start gap-3">
+                <div className="hidden sm:flex items-center gap-2 pt-0.5">
+                  <Checkbox className="h-4 w-4" />
+                  <Star 
+                    className={cn(
+                      "h-4 w-4 cursor-pointer",
+                      email.starred ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
+                    )} 
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className={cn(
+                      "text-xs sm:text-sm truncate",
+                      email.unread ? "font-semibold" : "font-medium"
+                    )}>
+                      {email.from}
+                    </span>
+                    <span className="text-[10px] sm:text-xs text-muted-foreground whitespace-nowrap">
+                      {email.time}
+                    </span>
+                  </div>
+                  <div className={cn(
+                    "text-xs truncate mt-0.5",
+                    email.unread ? "font-medium" : "text-muted-foreground"
+                  )}>
+                    {email.subject}
+                  </div>
+                  <p className="text-[10px] sm:text-xs text-muted-foreground truncate mt-0.5">
+                    {email.preview}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Email Content */}
+      <main className="flex-1 min-w-0 hidden lg:flex flex-col">
+        <div className="h-14 border-b border-border/50 flex items-center justify-between px-4 sm:px-6">
+          <div className="flex items-center gap-4">
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="sm" className="gap-2 text-xs">
+                <Reply className="h-4 w-4" /> Reply
+              </Button>
+              <Button variant="ghost" size="sm" className="gap-2 text-xs">
+                <Forward className="h-4 w-4" /> Forward
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <Archive className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <Trash2 className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex-1 p-4 sm:p-6 overflow-y-auto">
+          <div className="max-w-3xl">
+            <h1 className="text-lg sm:text-xl font-semibold mb-4">
+              Q4 Marketing Strategy - Review Needed
+            </h1>
+            
+            <div className="flex items-start gap-3 mb-6 pb-6 border-b border-border/50">
+              <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-sm font-medium">
+                SC
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <span className="font-medium text-sm">Sarah Chen</span>
+                    <span className="text-xs text-muted-foreground ml-2">&lt;sarah@company.com&gt;</span>
+                  </div>
+                  <span className="text-xs text-muted-foreground">10:30 AM</span>
+                </div>
+                <div className="text-xs text-muted-foreground mt-0.5">
+                  To: Marketing Team
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4 text-sm leading-relaxed">
+              <p>Hi team,</p>
+              <p>
+                I've put together the initial draft for our Q4 marketing strategy. 
+                This includes our target audience analysis, channel recommendations, 
+                and budget allocation.
+              </p>
+              <p>
+                Key highlights include:
+              </p>
+              <ul className="list-disc list-inside space-y-1 ml-4">
+                <li>Focus on content marketing and SEO</li>
+                <li>Increased budget for paid social</li>
+                <li>New webinar series starting October</li>
+              </ul>
+              <p>
+                Please review the attached document and let me know your thoughts. 
+                I'd like to finalize this by Friday.
+              </p>
+              <p>Best,<br />Sarah</p>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-border/50">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Paperclip className="h-4 w-4" />
+                <span>2 attachments</span>
+              </div>
+              <div className="flex gap-3 mt-3">
+                <Card className="p-3 flex items-center gap-3 cursor-pointer hover:bg-muted/30 transition-colors">
+                  <div className="h-10 w-10 rounded bg-primary/10 flex items-center justify-center">
+                    <span className="text-xs font-medium">PDF</span>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium">Q4_Strategy.pdf</p>
+                    <p className="text-[10px] text-muted-foreground">2.4 MB</p>
+                  </div>
+                </Card>
+                <Card className="p-3 flex items-center gap-3 cursor-pointer hover:bg-muted/30 transition-colors">
+                  <div className="h-10 w-10 rounded bg-primary/10 flex items-center justify-center">
+                    <span className="text-xs font-medium">XLS</span>
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium">Budget_2024.xlsx</p>
+                    <p className="text-[10px] text-muted-foreground">1.1 MB</p>
+                  </div>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/components/templates/saas-landing.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { ArrowRight, Check, Sparkles, Zap, Shield, Globe } from "lucide-react";
+
+interface SaaSLandingTemplateProps {
+  preview?: boolean;
+}
+
+export function SaaSLandingTemplate({ preview }: SaaSLandingTemplateProps) {
+  // Show compact preview version
+  const features = [
+    { icon: Zap, title: "Lightning Fast", desc: "Optimized performance with minimal bundle size" },
+    { icon: Shield, title: "Type Safe", desc: "Full TypeScript support with strict typing" },
+    { icon: Globe, title: "Production Ready", desc: "Battle-tested in production environments" },
+    { icon: Sparkles, title: "Beautiful Themes", desc: "21 curated gradient themes included" },
+    { icon: Check, title: "Accessible", desc: "WCAG 2.1 AA compliant components" },
+    { icon: Zap, title: "Dark Mode", desc: "Automatic dark mode with system preference" },
+  ];
+
+  const plans = [
+    { name: "Starter", price: "$0", desc: "Perfect for side projects", features: ["5 projects", "Basic themes", "Community support"] },
+    { name: "Pro", price: "$29", desc: "For growing teams", features: ["Unlimited projects", "All themes", "Priority support", "Custom exports"], popular: true },
+    { name: "Enterprise", price: "Custom", desc: "For large organizations", features: ["Everything in Pro", "SLA", "Dedicated support", "Custom development"] },
+  ];
+
+  return (
+    <div className="min-h-full bg-background">
+      {/* Navbar */}
+      <nav className="border-b border-border/50 bg-background/80 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-14 sm:h-16 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="h-7 w-7 sm:h-8 sm:w-8 rounded-lg bg-primary/20 flex items-center justify-center">
+              <Sparkles className="h-4 w-4 text-primary" />
+            </div>
+            <span className="font-semibold text-sm sm:text-base">SaaSify</span>
+          </div>
+          <div className="flex items-center gap-1 sm:gap-2">
+            <Button variant="ghost" size="sm" className="hidden sm:inline-flex text-xs">Features</Button>
+            <Button variant="ghost" size="sm" className="hidden sm:inline-flex text-xs">Pricing</Button>
+            <Button variant="glow" size="sm" className="text-xs">Get Started</Button>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="py-12 sm:py-20 px-4 text-center">
+        <Badge variant="glass" className="mb-3 sm:mb-4 text-xs">Now in Beta</Badge>
+        <h1 className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6 leading-tight">
+          Build faster with{" "}
+          <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Gradient Forge
+          </span>
+        </h1>
+        <p className="text-sm sm:text-lg md:text-xl text-muted-foreground max-w-xl sm:max-w-2xl mx-auto mb-6 sm:mb-8 px-4">
+          Production-ready theming system with beautiful gradients and surface-aware overlays for modern web apps.
+        </p>
+          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 justify-center px-4">
+          <Button size={preview ? "sm" : "md"} variant="glow" className="gap-1.5 text-xs sm:text-sm">
+            Start Building <ArrowRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
+          </Button>
+          <Button size={preview ? "sm" : "md"} variant="outline" className="text-xs sm:text-sm">
+            View Documentation
+          </Button>
+        </div>
+
+        {/* Trusted By */}
+        <div className="mt-12 sm:mt-20 px-4">
+          <p className="text-xs sm:text-sm text-muted-foreground mb-4 sm:mb-6">Trusted by innovative teams</p>
+          <div className="flex flex-wrap justify-center gap-4 sm:gap-8 opacity-50">
+            {["Vercel", "Linear", "Notion", "Figma", "Stripe"].map((company) => (
+              <div key={company} className="text-xs sm:text-sm font-semibold text-muted-foreground">
+                {company}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="py-12 sm:py-20 px-4 bg-muted/30">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-8 sm:mb-12">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4">Everything you need</h2>
+            <p className="text-sm sm:text-base text-muted-foreground">Powerful features for modern applications</p>
+          </div>
+          
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+            {features.map((feature, i) => (
+              <Card key={i} className="border-border/50 bg-background/60 hover:shadow-lg transition-shadow">
+                <CardContent className="p-4 sm:p-6">
+                  <div className="h-8 w-8 sm:h-10 sm:w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3 sm:mb-4">
+                    <feature.icon className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-sm sm:text-base mb-1 sm:mb-2">{feature.title}</h3>
+                  <p className="text-xs sm:text-sm text-muted-foreground">{feature.desc}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section className="py-12 sm:py-20 px-4">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8 sm:mb-12">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4">Simple Pricing</h2>
+            <p className="text-sm sm:text-base text-muted-foreground">Choose the plan that works for you</p>
+          </div>
+          
+          <div className="grid sm:grid-cols-3 gap-4 sm:gap-6">
+            {plans.map((plan, i) => (
+              <Card key={i} className={cn(
+                "border-border/50 relative",
+                plan.popular && "border-primary/50 shadow-lg shadow-primary/10"
+              )}>
+                {plan.popular && (
+                  <Badge className="absolute -top-2 left-1/2 -translate-x-1/2 text-xs">
+                    Most Popular
+                  </Badge>
+                )}
+                <CardContent className="p-4 sm:p-6">
+                  <h3 className="font-semibold text-sm sm:text-base mb-1">{plan.name}</h3>
+                  <div className="text-2xl sm:text-3xl font-bold mb-1">{plan.price}</div>
+                  <p className="text-xs sm:text-sm text-muted-foreground mb-3 sm:mb-4">{plan.desc}</p>
+                  <ul className="space-y-1.5 sm:space-y-2 mb-4 sm:mb-6">
+                    {plan.features.map((feature, j) => (
+                      <li key={j} className="flex items-center gap-2 text-xs sm:text-sm">
+                        <Check className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                  <Button 
+                    variant={plan.popular ? "glow" : "outline"} 
+                    className="w-full text-xs sm:text-sm"
+                    size="sm"
+                  >
+                    Get Started
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-12 sm:py-20 px-4 bg-muted/30">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-3 sm:mb-4">Ready to get started?</h2>
+          <p className="text-sm sm:text-base text-muted-foreground mb-5 sm:mb-6">
+            Join thousands of developers building beautiful applications
+          </p>
+          <Button size={preview ? "md" : "lg"} variant="glow" className="gap-2 text-xs sm:text-sm">
+            Start Building Now <ArrowRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function cn(...classes: (string | boolean | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}