create-frootkit 1.1.4 → 1.2.0

package/templates/ecommerce/src/components/Navbar.tsx

@@ -0,0 +1,32 @@
+export function Navbar() {
+  return (
+    <header class="border-b border-slate-800/80 bg-slate-950/70 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <a href="/" class="flex items-center gap-3 font-extrabold text-white text-lg tracking-tight hover:opacity-90">
+          <span class="w-8 h-8 rounded-xl bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-slate-950 font-black text-sm">
+            🛒
+          </span>
+          <span>Froot<span class="text-emerald-400">Store</span></span>
+        </a>
+
+        <nav class="flex items-center gap-6 text-sm font-medium">
+          <a href="/" class="text-slate-300 hover:text-white transition-colors">
+            Catalog
+          </a>
+          <a href="/api/products" class="text-slate-400 hover:text-emerald-400 font-mono text-xs px-2 py-1 rounded bg-slate-900 border border-slate-800 transition-colors">
+            /api/products
+          </a>
+          <a
+            href="/cart"
+            class="flex items-center gap-2 px-3.5 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 hover:border-emerald-500/50 hover:text-emerald-400 transition-all font-semibold text-xs"
+          >
+            <span>Cart</span>
+            <span class="w-5 h-5 rounded-full bg-emerald-500 text-slate-950 flex items-center justify-center font-bold text-[10px]">
+              2
+            </span>
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/ecommerce/src/components/ProductCard.tsx

@@ -0,0 +1,52 @@
+import type { Product } from '../data/products.js';
+
+export function ProductCard({ product }: { product: Product }) {
+  return (
+    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 overflow-hidden backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group flex flex-col justify-between">
+      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-slate-950">
+        <img
+          src={product.image}
+          alt={product.name}
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          loading="lazy"
+        />
+        <span class="absolute top-3 right-3 px-2 py-0.5 rounded-full bg-slate-950/80 backdrop-blur-md text-[11px] font-mono text-slate-300 border border-slate-700/60">
+          {product.category}
+        </span>
+      </a>
+
+      <div class="p-5 flex-1 flex flex-col justify-between">
+        <div>
+          <div class="flex items-center gap-1.5 mb-2 text-xs">
+            <span class="text-amber-400 font-bold">&#9733; {product.rating}</span>
+            <span class="text-slate-500">({product.reviewsCount})</span>
+          </div>
+
+          <h3 class="font-bold text-white text-base mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
+            <a href={`/products/${product.id}`}>
+              {product.name}
+            </a>
+          </h3>
+
+          <p class="text-slate-400 text-xs leading-relaxed mb-4 line-clamp-2">
+            {product.description}
+          </p>
+        </div>
+
+        <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
+          <div>
+            <span class="text-xs text-slate-500 block">Price</span>
+            <span class="text-lg font-black text-white">${product.price.toFixed(2)}</span>
+          </div>
+
+          <a
+            href={`/products/${product.id}`}
+            class="px-3.5 py-2 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs hover:bg-emerald-400 transition-colors shadow-md shadow-emerald-500/10"
+          >
+            View Details
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/src/data/products.ts

@@ -0,0 +1,87 @@
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
+  rating: number;
+  reviewsCount: number;
+  image: string;
+  description: string;
+  features: string[];
+  inStock: boolean;
+}
+
+export const PRODUCTS: Product[] = [
+  {
+    id: 'nordic-mechanical-keyboard',
+    name: 'Nordic Minimal Mechanical Keyboard',
+    price: 149.0,
+    category: 'Keyboards',
+    rating: 4.9,
+    reviewsCount: 128,
+    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=600&h=450&fit=crop',
+    description: 'Aircraft-grade anodized aluminum body with custom hot-swappable linear switches and sound-dampening silicone base.',
+    features: ['Hot-swappable switches', 'Bluetooth 5.3 & 2.4GHz', 'CNC Aluminum Chassis', 'PBT Dye-Sub Keycaps'],
+    inStock: true,
+  },
+  {
+    id: 'studio-monitor-headphones',
+    name: 'Studio Master Pro Headphones',
+    price: 289.0,
+    category: 'Audio',
+    rating: 4.8,
+    reviewsCount: 94,
+    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=450&fit=crop',
+    description: 'Precision 50mm dynamic drivers engineered for ultra-flat frequency response, critical mixing, and executive focus.',
+    features: ['Planar Magnetic Sound', 'Memory Foam Cushions', 'Detachable Silver Cable', 'Hard Travel Case'],
+    inStock: true,
+  },
+  {
+    id: 'ergo-master-mouse',
+    name: 'ErgoMaster Wireless Precision Mouse',
+    price: 89.0,
+    category: 'Peripherals',
+    rating: 4.7,
+    reviewsCount: 210,
+    image: 'https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?w=600&h=450&fit=crop',
+    description: 'Sculpted ergonomic contour designed to eliminate wrist fatigue during extended development sessions.',
+    features: ['26,000 DPI Optical Sensor', '70-day Battery Life', 'Infinite Scroll Wheel', 'Quiet Click Switches'],
+    inStock: true,
+  },
+  {
+    id: 'walnut-monitor-riser',
+    name: 'Solid Walnut Monitor Riser Stand',
+    price: 119.0,
+    category: 'Desk Setup',
+    rating: 5.0,
+    reviewsCount: 62,
+    image: 'https://images.unsplash.com/photo-1526738549149-8e07eca6c147?w=600&h=450&fit=crop',
+    description: 'Handcrafted from single-origin American walnut with cork feet and an integrated aluminum tray for accessories.',
+    features: ['Sustainable American Walnut', 'Holds up to 60 lbs', 'Integrated Cable Troughs', 'Hand-finished Matte Oil'],
+    inStock: true,
+  },
+  {
+    id: 'titanium-desk-pad',
+    name: 'Matte Slate Vegan Leather Desk Mat',
+    price: 49.0,
+    category: 'Desk Setup',
+    rating: 4.6,
+    reviewsCount: 175,
+    image: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=600&h=450&fit=crop',
+    description: 'Water-resistant, stain-proof premium desk surface that provides effortless mouse tracking and protects your workspace.',
+    features: ['Water-resistant PU Leather', 'Anti-slip Suede Backing', '90cm x 45cm Large Size', 'Easy to Clean'],
+    inStock: true,
+  },
+  {
+    id: 'usb-c-magnetic-cable',
+    name: '240W Braided Kevlar Charging Cable',
+    price: 29.0,
+    category: 'Accessories',
+    rating: 4.9,
+    reviewsCount: 340,
+    image: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=600&h=450&fit=crop',
+    description: 'Ultra-durable Kevlar-reinforced charging cable supporting up to 240W Power Delivery and 40Gbps Thunderbolt data transfer.',
+    features: ['240W Power Delivery', 'E-Marker Smart Chip', 'Braided Kevlar Weave', '2-meter Length'],
+    inStock: true,
+  },
+];

package/templates/ecommerce/src/styles.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-950: #022c22;
+}
+
+:root {
+  color-scheme: dark;
+}

package/templates/ecommerce/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/templates/empty/README.md

@@ -0,0 +1,10 @@
+# {{PROJECT_NAME}}
+
+A minimal blank canvas created with **FrootKit**.
+
+## 🚀 Quick Start
+
+```bash
+pnpm install
+pnpm dev
+```

package/templates/empty/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "frootkit dev",
+    "build": "frootkit build",
+    "start": "frootkit start"
+  },
+  "dependencies": {
+    "frootkit": "npm:froot-kit@^1.3.1",
+    "froot-kit": "^1.3.1",
+    "frootjs": "^1.0.6",
+    "preact": "^11.1.0",
+    "preact-render-to-string": "^6.8.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "@types/node": "^22.10.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.0"
+  }
+}

package/templates/empty/src/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { ComponentChildren } from 'preact';
+
+export interface RootLayoutProps {
+  children: ComponentChildren;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+}
+
+export default function RootLayout({ children, metadata }: RootLayoutProps) {
+  const title = metadata?.title || 'FrootKit App';
+  const description = metadata?.description || 'Built with FrootKit & Preact';
+
+  return (
+    <html lang="en" class="dark">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body class="bg-slate-950 text-slate-100 min-h-screen antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/empty/src/app/page.tsx

@@ -0,0 +1,38 @@
+export const metadata = {
+  title: 'Blank Canvas — FrootKit',
+  description: 'Minimal blank project with Preact and Tailwind CSS v4.',
+};
+
+export default function HomePage() {
+  return (
+    <main class="min-h-screen flex items-center justify-center p-6">
+      <div class="max-w-md w-full text-center border border-slate-800 bg-slate-900/40 rounded-2xl p-8 backdrop-blur-sm">
+        <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center mx-auto mb-4 text-emerald-400 font-bold text-xl">
+          F
+        </div>
+        <h1 class="text-2xl font-bold text-white mb-2">Blank Slate</h1>
+        <p class="text-slate-400 text-sm mb-6">
+          Edit <code class="font-mono text-emerald-400 bg-slate-800/80 px-1.5 py-0.5 rounded">src/app/page.tsx</code> to get started.
+        </p>
+        <div class="flex justify-center gap-3 text-xs font-medium">
+          <a
+            href="https://frootjs.org"
+            target="_blank"
+            rel="noreferrer"
+            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors"
+          >
+            Docs
+          </a>
+          <a
+            href="https://github.com/orbitnorth/frootkit"
+            target="_blank"
+            rel="noreferrer"
+            class="px-4 py-2 rounded-lg bg-slate-800 text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            GitHub
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/empty/src/styles.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-950: #022c22;
+}
+
+:root {
+  color-scheme: dark;
+}

package/templates/empty/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/templates/starter/README.md

@@ -0,0 +1,22 @@
+# {{PROJECT_NAME}}
+
+Scaffolded with **FrootKit** (Next.js Alternative for Preact).
+
+## 🚀 Quick Start
+
+```bash
+# 1. Install dependencies
+pnpm install
+
+# 2. Start development server
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## 📦 Features
+
+- **Sub-millisecond Preact SSR**
+- **Native Tailwind CSS v4**
+- **File-based Routing & API Routes**
+- **Zero-config Static Site Export (`pnpm build`)**

package/templates/starter/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "frootkit dev",
+    "build": "frootkit build",
+    "start": "frootkit start"
+  },
+  "dependencies": {
+    "frootkit": "npm:froot-kit@^1.3.1",
+    "froot-kit": "^1.3.1",
+    "frootjs": "^1.0.6",
+    "preact": "^11.1.0",
+    "preact-render-to-string": "^6.8.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "@types/node": "^22.10.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.0"
+  }
+}

package/templates/starter/src/app/api/health/route.ts

@@ -0,0 +1,23 @@
+export async function GET(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+
+  return Response.json(
+    {
+      status: 'healthy',
+      framework: 'FrootKit',
+      version: '1.3.1',
+      engine: 'Preact SSR + Monomorphic V8 Router',
+      timestamp: new Date().toISOString(),
+      uptimeSeconds: Math.floor(process.uptime()),
+      nodeVersion: process.version,
+      query: Object.fromEntries(url.searchParams.entries()),
+    },
+    {
+      status: 200,
+      headers: {
+        'content-type': 'application/json',
+        'cache-control': 'no-cache',
+      },
+    }
+  );
+}

package/templates/starter/src/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { ComponentChildren } from 'preact';
+
+export interface RootLayoutProps {
+  children: ComponentChildren;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+}
+
+export default function RootLayout({ children, metadata }: RootLayoutProps) {
+  const title = metadata?.title || 'FrootKit — The Next.js Alternative for Preact';
+  const description =
+    metadata?.description ||
+    'High-performance fullstack web application powered by Preact SSR, nested layouts, Tailwind CSS v4, and dynamic API routes.';
+
+  return (
+    <html lang="en" class="dark scroll-smooth">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300">
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/starter/src/app/page.tsx

@@ -0,0 +1,122 @@
+import { Header } from '../components/Header.js';
+import { FeatureCard } from '../components/FeatureCard.js';
+import { TerminalPreview } from '../components/TerminalPreview.js';
+import { Footer } from '../components/Footer.js';
+
+export const metadata = {
+  title: 'FrootKit — Next.js Alternative for Preact & Froot',
+  description: 'Ultra-fast Preact SSR, nested layouts, native Tailwind CSS v4, and dynamic API routes.',
+};
+
+export default function HomePage() {
+  const features = [
+    {
+      icon: '⚡',
+      badge: '0.1ms render',
+      title: 'Sub-Millisecond SSR',
+      description: 'Preact VNode streaming and monomorphic rendering ensure blistering speed with near-zero memory footprint.',
+    },
+    {
+      icon: '🎨',
+      badge: 'Tailwind v4',
+      title: 'Native CSS Pipeline',
+      description: 'Zero postcss.config.js or tailwind.config.js required. Tailwind CSS v4 is compiled instantly on every change.',
+    },
+    {
+      icon: '📁',
+      badge: 'App Router',
+      title: 'Nested Layouts',
+      description: 'Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions.',
+    },
+    {
+      icon: '🔌',
+      badge: 'Fullstack API',
+      title: 'Route Handlers',
+      description: 'Build backend logic seamlessly in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web APIs.',
+    },
+    {
+      icon: '📦',
+      badge: 'Static Export',
+      title: 'SSG & Edge Ready',
+      description: 'Run frootkit build to pre-render static HTML and bundle dynamic endpoints for serverless and edge clouds.',
+    },
+    {
+      icon: '🤖',
+      badge: 'Agent Friendly',
+      title: 'AI Native Scaffolding',
+      description: 'Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support.',
+    },
+  ];
+
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      {/* Background glow effects */}
+      <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+        <div class="absolute -top-40 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-gradient-to-tr from-emerald-500/15 via-teal-500/10 to-cyan-500/5 blur-[120px] rounded-full" />
+        <div class="absolute top-1/2 -left-40 w-[600px] h-[400px] bg-emerald-600/10 blur-[140px] rounded-full" />
+      </div>
+
+      <Header />
+
+      {/* Hero Section */}
+      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center">
+        <div class="text-center max-w-3xl mx-auto mb-16">
+          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/25 text-xs font-semibold text-emerald-400 mb-8 shadow-sm shadow-emerald-950">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+            Next.js App Router Conventions &bull; Zero Overhead
+          </div>
+
+          <h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold text-white tracking-tight mb-6 leading-tight sm:leading-none">
+            The Next.js Alternative Built for{' '}
+            <span class="bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400 bg-clip-text text-transparent">
+              Speed & Simplicity
+            </span>
+          </h1>
+
+          <p class="text-slate-300 text-lg sm:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
+            Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, instant static site export, and built-in API routes.
+          </p>
+
+          <div class="flex flex-wrap items-center justify-center gap-4">
+            <a
+              href="https://frootjs.org"
+              target="_blank"
+              rel="noreferrer"
+              class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 hover:-translate-y-0.5"
+            >
+              Explore Documentation &rarr;
+            </a>
+            <a
+              href="https://github.com/orbitnorth/frootkit"
+              target="_blank"
+              rel="noreferrer"
+              class="px-6 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 font-semibold hover:bg-slate-800/80 hover:border-slate-700 transition-all hover:-translate-y-0.5 flex items-center gap-2"
+            >
+              <svg class="w-4 h-4 fill-current text-slate-300" viewBox="0 0 24 24">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+              Star on GitHub
+            </a>
+          </div>
+        </div>
+
+        <TerminalPreview />
+
+        {/* Feature Grid */}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((f) => (
+            <FeatureCard
+              key={f.title}
+              icon={f.icon}
+              badge={f.badge}
+              title={f.title}
+              description={f.description}
+            />
+          ))}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/starter/src/components/FeatureCard.tsx

@@ -0,0 +1,25 @@
+export interface FeatureCardProps {
+  icon: string;
+  badge: string;
+  title: string;
+  description: string;
+}
+
+export function FeatureCard({ icon, badge, title, description }: FeatureCardProps) {
+  return (
+    <div class="rounded-2xl border border-slate-800/80 bg-slate-900/30 p-6 backdrop-blur-sm hover:border-emerald-500/40 transition-all hover:-translate-y-1 group">
+      <div class="flex items-center justify-between mb-4">
+        <span class="text-3xl">{icon}</span>
+        <span class="text-xs font-mono font-medium px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700/60 group-hover:border-emerald-500/40 transition-colors">
+          {badge}
+        </span>
+      </div>
+      <h3 class="text-lg font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">
+        {title}
+      </h3>
+      <p class="text-slate-400 text-sm leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+}

package/templates/starter/src/components/Footer.tsx

@@ -0,0 +1,16 @@
+export function Footer() {
+  return (
+    <footer class="border-t border-slate-900 bg-slate-950/60 py-8 text-center text-xs text-slate-500">
+      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div>
+          FrootKit &copy; {new Date().getFullYear()} OrbitNorth LLC. MIT Licensed.
+        </div>
+        <div class="flex items-center gap-6">
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-slate-400 transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-slate-400 transition-colors">Documentation</a>
+          <a href="/api/health" class="hover:text-slate-400 transition-colors">Health API</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/starter/src/components/Header.tsx

@@ -0,0 +1,45 @@
+export function Header() {
+  return (
+    <header class="border-b border-slate-800/80 bg-slate-950/40 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-emerald-400 font-extrabold text-xl tracking-tight flex items-center gap-2">
+            <span class="inline-block w-3 h-3 rounded-full bg-emerald-400 animate-pulse" />
+            FrootKit
+          </span>
+          <span class="px-2 py-0.5 text-[11px] font-mono font-medium rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+            v1.3.1
+          </span>
+        </div>
+
+        <nav class="flex items-center gap-6 text-sm font-medium">
+          <a
+            href="https://frootjs.org"
+            target="_blank"
+            rel="noreferrer"
+            class="text-slate-300 hover:text-white transition-colors"
+          >
+            Docs
+          </a>
+          <a
+            href="/api/health"
+            class="text-slate-300 hover:text-emerald-400 transition-colors font-mono text-xs px-2.5 py-1 rounded-md bg-slate-900 border border-slate-800"
+          >
+            /api/health
+          </a>
+          <a
+            href="https://github.com/orbitnorth/frootkit"
+            target="_blank"
+            rel="noreferrer"
+            class="flex items-center gap-2 text-slate-300 hover:text-white transition-colors"
+          >
+            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+            GitHub
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}