gradient-forge 1.0.0

package/components/site/site-data.ts

@@ -0,0 +1,103 @@
+export const navItems = [
+  { label: "Home", href: "/" },
+  { label: "Themes", href: "/gallery" },
+  { label: "Showcase", href: "/showcase" },
+  { label: "Studio", href: "/studio" },
+  { label: "Docs", href: "/docs" },
+];
+
+export const featureCards = [
+  {
+    title: "Theme Engine",
+    description:
+      "Persisted theme + color mode with data attributes ready for shadcn component tokens.",
+  },
+  {
+    title: "Surface-aware Layers",
+    description:
+      "Cards, sidebars, and overlays inherit subtle tints for depth without losing contrast.",
+  },
+  {
+    title: "Memory Lane Unlock",
+    description:
+      "Preview all public palettes to unlock the secret theme for your portfolio or product demo.",
+  },
+  {
+    title: "Copy-ready Exports",
+    description:
+      "Grab the exact CSS + Tailwind aliases used here and drop them into any app.",
+  },
+];
+
+export const workflowSteps = [
+  {
+    title: "1. Pick a theme",
+    description: "Browse /studio or /gallery to find your perfect gradient.",
+  },
+  {
+    title: "2. Copy the code",
+    description: "Click 'Get Theme' to copy CSS + React code instantly.",
+  },
+  {
+    title: "3. Paste & go",
+    description: "Add CSS to globals, wrap with ThemeProvider, done!",
+  },
+];
+
+export const useCases = [
+  "SaaS dashboards with polished gradient theming",
+  "Portfolio demos for UI engineering roles",
+  "Design system spikes for shadcn component suites",
+  "Startup landing pages with cinematic brand color",
+];
+
+export const roadmapItems = [
+  {
+    title: "Theme Studio",
+    detail: "Interactive theme preview with live component showcase.",
+    status: "done",
+  },
+  {
+    title: "Theme Gallery",
+    detail: "Browse all 21 gradient themes with one-click copy.",
+    status: "done",
+  },
+  {
+    title: "Export Formats",
+    detail: "CSS, SCSS, JSON, Tailwind, W3C tokens, Figma tokens.",
+    status: "done",
+  },
+  {
+    title: "CLI Tool",
+    detail: "npm install gradient-forge for automatic setup.",
+    status: "coming-soon",
+  },
+  {
+    title: "Preset Editor",
+    detail: "Fine-tune gradient stops and export a new palette.",
+    status: "coming-soon",
+  },
+];
+
+export const faqItems = [
+  {
+    question: "Does the theme engine work outside Next.js?",
+    answer:
+      "Yes. The engine is plain CSS variables plus a small React context for state. You can reuse the CSS and write your own theme toggle in any framework.",
+  },
+  {
+    question: "How do I add my own palettes?",
+    answer:
+      "Add a new entry in the theme list and a matching CSS class in globals. The gallery and picker update automatically.",
+  },
+  {
+    question: "Is this compatible with shadcn/ui defaults?",
+    answer:
+      "Yes. The tokens map directly to shadcn defaults and the surface overlay keeps contrast predictable.",
+  },
+  {
+    question: "Can I use this as a design system starter?",
+    answer:
+      "Absolutely. The token layer is stable and the demo shows cards, nav, inputs, and forms for guidance.",
+  },
+];

package/components/site/site-header.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import gsap from "gsap";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { navItems } from "@/components/site/site-data";
+import { useThemeContext } from "@/components/theme/theme-context";
+import { 
+  Wand2, 
+  Command, 
+  Github, 
+  Coffee,
+  Menu, 
+  X,
+  Sparkles,
+  Sun,
+  Moon,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { MagneticButton } from "@/components/ui/gsap-animated";
+
+export function SiteHeader() {
+  const pathname = usePathname();
+  const { colorMode, setColorMode } = useThemeContext();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const headerRef = useRef<HTMLElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
+  const isLightMode = colorMode === "light";
+
+  useEffect(() => {
+    const header = headerRef.current;
+    if (!header) return;
+
+    // Header entrance animation
+    gsap.fromTo(
+      header,
+      { opacity: 0, y: -20 },
+      { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }
+    );
+  }, []);
+
+  useEffect(() => {
+    if (mobileMenuOpen && mobileMenuRef.current) {
+      // Animate mobile menu open
+      gsap.fromTo(
+        mobileMenuRef.current,
+        { opacity: 0, y: -10 },
+        { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" }
+      );
+      
+      // Animate menu items
+      const items = mobileMenuRef.current.querySelectorAll(".mobile-nav-item");
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -20 },
+        { opacity: 1, x: 0, duration: 0.3, stagger: 0.05, ease: "power2.out", delay: 0.1 }
+      );
+    }
+  }, [mobileMenuOpen]);
+
+  return (
+    <header ref={headerRef} className="relative z-50">
+      <div className="rounded-2xl sm:rounded-full border border-border/40 bg-background/50 px-3 sm:px-4 py-2 sm:py-3 backdrop-blur-xl">
+        <div className="flex items-center justify-between gap-3">
+          {/* Logo */}
+          <div className="flex items-center gap-2 sm:gap-3">
+            <MagneticButton strength={0.1}>
+              <Badge variant="glass" className="gap-1.5 sm:gap-2 cursor-pointer text-xs sm:text-sm py-1 sm:py-1.5">
+                <Wand2 className="h-3 w-3 sm:h-4 sm:w-4" /> 
+                <span className="hidden sm:inline">Gradient Forge</span>
+                <span className="sm:hidden">GF</span>
+              </Badge>
+            </MagneticButton>
+            <span className="hidden lg:inline text-xs text-muted-foreground">
+              Nitro-inspired theming studio
+            </span>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-1">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <MagneticButton key={item.label} strength={0.05}>
+                  <Button
+                    variant={isActive ? "default" : "ghost"}
+                    size="sm"
+                    className={cn(
+                      "text-xs sm:text-sm h-8 sm:h-9",
+                      isActive && "shadow-md"
+                    )}
+                    asChild
+                  >
+                    <a href={item.href}>{item.label}</a>
+                  </Button>
+                </MagneticButton>
+              );
+            })}
+            
+            <div className="h-4 w-px bg-border mx-1" />
+
+            <div className="flex items-center rounded-full border border-border/60 bg-background/60 p-1">
+              <Button
+                variant={isLightMode ? "default" : "ghost"}
+                size="sm"
+                className="h-7 gap-1 px-2 text-xs"
+                onClick={() => setColorMode("light")}
+                aria-pressed={isLightMode}
+              >
+                <Sun className="h-3.5 w-3.5" />
+                <span>Light</span>
+              </Button>
+              <Button
+                variant={!isLightMode ? "default" : "ghost"}
+                size="sm"
+                className="h-7 gap-1 px-2 text-xs"
+                onClick={() => setColorMode("dark")}
+                aria-pressed={!isLightMode}
+              >
+                <Moon className="h-3.5 w-3.5" />
+                <span>Dark</span>
+              </Button>
+            </div>
+            
+            {/* Command Palette Trigger */}
+            <MagneticButton strength={0.05}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="gap-1.5 text-muted-foreground text-xs sm:text-sm h-8 sm:h-9"
+                onClick={() => {
+                  window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
+                }}
+              >
+                <Command className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
+                <span className="hidden lg:inline text-xs">Cmd K</span>
+              </Button>
+            </MagneticButton>
+            
+            {/* Social Links */}
+            <MagneticButton strength={0.05}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="px-2 h-8 sm:h-9"
+                asChild
+              >
+                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+                  <Github className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
+                </a>
+              </Button>
+            </MagneticButton>
+            
+            <MagneticButton strength={0.05}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="px-2 h-8 sm:h-9"
+                asChild
+              >
+                <a href="https://buymeacoffee.com/karannn" target="_blank" rel="noopener noreferrer">
+                  <Coffee className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
+                </a>
+              </Button>
+            </MagneticButton>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <div className="flex md:hidden items-center gap-1">
+            <div className="flex items-center rounded-full border border-border/60 bg-background/60 p-1">
+              <Button
+                variant={isLightMode ? "default" : "ghost"}
+                size="sm"
+                className="h-7 px-2 text-[11px]"
+                onClick={() => setColorMode("light")}
+                aria-pressed={isLightMode}
+              >
+                Light
+              </Button>
+              <Button
+                variant={!isLightMode ? "default" : "ghost"}
+                size="sm"
+                className="h-7 px-2 text-[11px]"
+                onClick={() => setColorMode("dark")}
+                aria-pressed={!isLightMode}
+              >
+                Dark
+              </Button>
+            </div>
+            <MagneticButton strength={0.1}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              >
+                {mobileMenuOpen ? (
+                  <X className="h-4 w-4" />
+                ) : (
+                  <Menu className="h-4 w-4" />
+                )}
+              </Button>
+            </MagneticButton>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div 
+          ref={mobileMenuRef}
+          className="absolute top-full left-0 right-0 mt-2 mx-3 rounded-xl border border-border/40 bg-background/95 backdrop-blur-xl shadow-xl overflow-hidden md:hidden"
+        >
+          <nav className="flex flex-col p-2">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <a
+                  key={item.label}
+                  href={item.href}
+                  className={cn(
+                    "mobile-nav-item flex items-center justify-between px-3 py-2.5 rounded-lg text-sm transition-colors",
+                    isActive 
+                      ? "bg-primary text-primary-foreground" 
+                      : "text-foreground hover:bg-muted"
+                  )}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {item.label}
+                  {isActive && <Sparkles className="h-3 w-3" />}
+                </a>
+              );
+            })}
+            
+            <div className="h-px bg-border my-2" />
+            
+            <button
+              className="mobile-nav-item flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm text-muted-foreground hover:bg-muted transition-colors"
+              onClick={() => {
+                setMobileMenuOpen(false);
+                window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
+              }}
+            >
+              <Command className="h-4 w-4" />
+              Command Palette
+              <span className="ml-auto text-xs bg-muted px-1.5 py-0.5 rounded">Cmd K</span>
+            </button>
+            
+            <div className="flex items-center gap-2 px-3 py-2 mt-1">
+              <Button variant="ghost" size="sm" className="flex-1 h-9" asChild>
+                <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+                  <Github className="h-4 w-4 mr-2" />
+                  GitHub
+                </a>
+              </Button>
+              <Button variant="ghost" size="sm" className="flex-1 h-9" asChild>
+                <a href="https://buymeacoffee.com/karannn" target="_blank" rel="noopener noreferrer">
+                  <Coffee className="h-4 w-4 mr-2" />
+                  Coffee
+                </a>
+              </Button>
+            </div>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}

package/components/templates/blog.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { 
+  Calendar, 
+  Clock, 
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight,
+  Search,
+  Tag
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface BlogTemplateProps {
+  preview?: boolean;
+}
+
+export function BlogTemplate({ preview }: BlogTemplateProps) {
+  const featuredPost = {
+    title: "Building Beautiful UIs with Gradient Forge",
+    excerpt: "Learn how to create stunning gradient themes and apply them to your shadcn/ui components for a cohesive design system.",
+    author: "Sarah Chen",
+    date: "January 15, 2024",
+    readTime: "8 min read",
+    category: "Design",
+    image: "bg-gradient-to-br from-primary/30 to-accent/30"
+  };
+
+  const posts = [
+    {
+      id: 1,
+      title: "The Future of CSS Variables in Modern Web Design",
+      excerpt: "Explore how CSS custom properties are revolutionizing the way we build and maintain design systems.",
+      author: "Alex Rivera",
+      date: "Jan 12, 2024",
+      readTime: "5 min",
+      category: "Development",
+      image: "bg-muted"
+    },
+    {
+      id: 2,
+      title: "Creating Accessible Color Palettes",
+      excerpt: "A comprehensive guide to building color systems that work for everyone, including WCAG compliance tips.",
+      author: "Emily Watson",
+      date: "Jan 10, 2024",
+      readTime: "6 min",
+      category: "Accessibility",
+      image: "bg-muted"
+    },
+    {
+      id: 3,
+      title: "Mastering Dark Mode Design",
+      excerpt: "Best practices for implementing dark mode that looks great and reduces eye strain for your users.",
+      author: "Michael Park",
+      date: "Jan 8, 2024",
+      readTime: "4 min",
+      category: "UI Design",
+      image: "bg-muted"
+    },
+    {
+      id: 4,
+      title: "React Server Components: A Deep Dive",
+      excerpt: "Understanding the architecture and benefits of React Server Components in Next.js applications.",
+      author: "Lisa Johnson",
+      date: "Jan 5, 2024",
+      readTime: "10 min",
+      category: "Engineering",
+      image: "bg-muted"
+    }
+  ];
+
+  const tags = ["Design", "Development", "UI/UX", "Accessibility", "React", "CSS", "TypeScript"];
+
+  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-4xl mx-auto h-14 flex items-center justify-between px-4">
+          <h1 className="font-semibold text-lg">The Gradient Blog</h1>
+          <div className="flex items-center gap-3">
+            <div className="relative hidden sm:block">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input 
+                type="text" 
+                placeholder="Search..."
+                className="pl-9 pr-4 py-2 rounded-full border border-border/50 bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-48"
+              />
+            </div>
+            <Button variant="outline" size="sm" className="text-xs">
+              Subscribe
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-8 sm:py-12">
+        {/* Featured Article */}
+        <article className="mb-12 sm:mb-16">
+          <div className={cn("h-48 sm:h-80 rounded-2xl mb-6 overflow-hidden", featuredPost.image)}>
+            <div className="h-full w-full bg-gradient-to-t from-background/80 to-transparent flex items-end p-6">
+              <Badge variant="glass" className="text-xs">{featuredPost.category}</Badge>
+            </div>
+          </div>
+          
+          <h2 className="text-2xl sm:text-4xl font-bold mb-4 leading-tight">
+            {featuredPost.title}
+          </h2>
+          
+          <p className="text-base sm:text-lg text-muted-foreground mb-4">
+            {featuredPost.excerpt}
+          </p>
+          
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar className="h-9 w-9">
+                <AvatarFallback className="bg-primary/20 text-xs">
+                  {featuredPost.author.split(" ").map(n => n[0]).join("")}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <p className="text-sm font-medium">{featuredPost.author}</p>
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Calendar className="h-3 w-3" /> {featuredPost.date}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Clock className="h-3 w-3" /> {featuredPost.readTime}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <Button variant="ghost" size="sm" className="gap-1 text-xs hidden sm:flex">
+              Read More <ArrowRight className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </article>
+
+        {/* Tags */}
+        <div className="flex flex-wrap gap-2 mb-8 sm:mb-12">
+          <span className="text-sm text-muted-foreground flex items-center gap-1">
+            <Tag className="h-4 w-4" /> Popular:
+          </span>
+          {tags.map((tag) => (
+            <Badge key={tag} variant="outline" className="cursor-pointer hover:bg-primary/10 text-xs">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+
+        {/* Recent Articles */}
+        <div>
+          <h3 className="text-xl font-semibold mb-6">Recent Articles</h3>
+          <div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
+            {posts.map((post) => (
+              <Card key={post.id} className="border-border/50 cursor-pointer hover:shadow-lg transition-shadow group">
+                <CardContent className="p-4 sm:p-5">
+                  <div className={cn("h-32 sm:h-40 rounded-lg mb-4", post.image)} />
+                  <Badge variant="glass" className="mb-2 text-[10px]">
+                    {post.category}
+                  </Badge>
+                  <h4 className="font-semibold text-sm sm:text-base mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+                    {post.title}
+                  </h4>
+                  <p className="text-xs sm:text-sm text-muted-foreground mb-3 line-clamp-2">
+                    {post.excerpt}
+                  </p>
+                  <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span>{post.author}</span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" /> {post.readTime}
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        {/* Pagination */}
+        <div className="flex items-center justify-center gap-2 mt-8 sm:mt-12">
+          <Button variant="outline" size="sm" className="h-8 w-8 p-0">
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button variant="default" size="sm" className="h-8 w-8 p-0 text-xs">1</Button>
+          <Button variant="outline" size="sm" className="h-8 w-8 p-0 text-xs">2</Button>
+          <Button variant="outline" size="sm" className="h-8 w-8 p-0 text-xs">3</Button>
+          <Button variant="outline" size="sm" className="h-8 w-8 p-0">
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+}