create-frootkit 1.1.3 → 1.2.0

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

@@ -0,0 +1,44 @@
+import { POSTS } from '../data/posts.js';
+import { Navbar } from '../components/Navbar.js';
+import { PostCard } from '../components/PostCard.js';
+import { Newsletter } from '../components/Newsletter.js';
+import { Footer } from '../components/Footer.js';
+
+export const metadata = {
+  title: 'FrootBlog — Insights on Modern Web Performance',
+  description: 'Deep dives into Preact SSR, fullstack TypeScript, and native styling.',
+};
+
+export default function BlogHomePage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-5xl mx-auto px-6 py-12 flex-1 w-full">
+        {/* Header Banner */}
+        <div class="mb-12 text-center sm:text-left">
+          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs font-semibold text-emerald-400 mb-4">
+            Engineering Journal
+          </div>
+          <h1 class="text-4xl sm:text-5xl font-black text-white tracking-tight mb-4">
+            Stories, Architecture & Tutorials
+          </h1>
+          <p class="text-slate-400 text-base sm:text-lg max-w-2xl">
+            Exploring the bleeding edge of sub-millisecond server rendering, zero-overhead client apps, and modern developer velocity.
+          </p>
+        </div>
+
+        {/* Post Grid */}
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {POSTS.map((post) => (
+            <PostCard key={post.slug} post={post} />
+          ))}
+        </div>
+
+        <Newsletter />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/blog/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-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div>
+          FrootBlog &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/posts" class="hover:text-slate-400 transition-colors">Posts API</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,31 @@
+export function Navbar() {
+  return (
+    <header class="border-b border-slate-800/80 bg-slate-950/60 backdrop-blur-md sticky top-0 z-50">
+      <div class="max-w-5xl 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-cyan-400 flex items-center justify-center text-slate-950 font-black text-sm">
+            F
+          </span>
+          <span>Froot<span class="text-emerald-400">Blog</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">
+            Articles
+          </a>
+          <a href="/api/posts" class="text-slate-400 hover:text-emerald-400 transition-colors font-mono text-xs px-2 py-1 rounded bg-slate-900 border border-slate-800">
+            /api/posts
+          </a>
+          <a
+            href="https://github.com/orbitnorth/frootkit"
+            target="_blank"
+            rel="noreferrer"
+            class="text-slate-300 hover:text-white transition-colors"
+          >
+            GitHub
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/blog/src/components/Newsletter.tsx

@@ -0,0 +1,32 @@
+export function Newsletter() {
+  return (
+    <div class="rounded-3xl border border-emerald-500/20 bg-gradient-to-b from-emerald-950/20 to-slate-900/40 p-8 sm:p-12 text-center my-16 backdrop-blur-sm">
+      <div class="max-w-xl mx-auto">
+        <h3 class="text-2xl sm:text-3xl font-bold text-white mb-3">
+          Subscribe to the FrootKit Dispatch
+        </h3>
+        <p class="text-slate-400 text-sm mb-8">
+          Weekly deep-dives into modern web architectures, performance optimization, and fullstack TypeScript.
+        </p>
+        <form
+          action="/api/posts"
+          method="GET"
+          class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
+        >
+          <input
+            type="email"
+            placeholder="colleague@company.com"
+            required
+            class="flex-1 px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+          />
+          <button
+            type="submit"
+            class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors text-sm"
+          >
+            Subscribe
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/blog/src/components/PostCard.tsx

@@ -0,0 +1,47 @@
+import type { Post } from '../data/posts.js';
+
+export function PostCard({ post }: { post: Post }) {
+  return (
+    <article 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 flex flex-col justify-between">
+      <div>
+        <div class="flex items-center justify-between mb-3 text-xs">
+          <span class="font-mono text-emerald-400 font-medium px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+            {post.category}
+          </span>
+          <span class="text-slate-400 font-mono">{post.readTime}</span>
+        </div>
+
+        <h2 class="text-xl font-bold text-white mb-3 group-hover:text-emerald-400 transition-colors line-clamp-2">
+          <a href={`/blog/${post.slug}`}>
+            {post.title}
+          </a>
+        </h2>
+
+        <p class="text-slate-300 text-sm leading-relaxed mb-6 line-clamp-3">
+          {post.summary}
+        </p>
+      </div>
+
+      <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <img
+            src={post.author.avatar}
+            alt={post.author.name}
+            class="w-7 h-7 rounded-full object-cover ring-1 ring-slate-700"
+          />
+          <div class="text-xs">
+            <span class="font-medium text-slate-200 block">{post.author.name}</span>
+            <span class="text-slate-500">{post.date}</span>
+          </div>
+        </div>
+
+        <a
+          href={`/blog/${post.slug}`}
+          class="text-emerald-400 text-xs font-semibold hover:underline flex items-center gap-1 group-hover:translate-x-0.5 transition-transform"
+        >
+          Read &rarr;
+        </a>
+      </div>
+    </article>
+  );
+}

package/templates/blog/src/data/posts.ts

@@ -0,0 +1,75 @@
+export interface Author {
+  name: string;
+  role: string;
+  avatar: string;
+}
+
+export interface Post {
+  slug: string;
+  title: string;
+  summary: string;
+  date: string;
+  readTime: string;
+  category: string;
+  author: Author;
+  tags: string[];
+  content: string[];
+}
+
+export const POSTS: Post[] = [
+  {
+    slug: 'welcome-to-frootkit',
+    title: 'Introducing FrootKit: High-Performance Next.js Alternative',
+    summary: 'Why we combined Preact SSR, native Tailwind CSS v4, and the Froot runtime for maximum developer velocity and sub-millisecond page loads.',
+    date: 'Oct 31, 2026',
+    readTime: '4 min read',
+    category: 'Architecture',
+    author: {
+      name: 'Alex Rivera',
+      role: 'Staff Systems Architect',
+      avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop&crop=faces',
+    },
+    tags: ['FrootKit', 'Preact', 'Performance', 'SSR'],
+    content: [
+      'Modern web frameworks have grown increasingly heavy. Between massive runtime bundles, complex hydration mismatches, and multi-megabyte node_modules dependencies, developers often spend more time debugging tooling than writing features.',
+      'FrootKit takes an unapologetically streamlined approach: sub-millisecond Preact server-side rendering, zero-config Tailwind CSS v4 compilation, and Next.js-style App Router conventions without the heavyweight lock-in.',
+      'By decoupling static site generation from bloated polyfills and leveraging monomorphic V8 dispatch trees, FrootKit achieves sub-millisecond render times while keeping memory usage under 20MB.',
+    ],
+  },
+  {
+    slug: 'tailwind-v4-without-configs',
+    title: 'Zero Configuration Tailwind CSS v4 in Practice',
+    summary: 'Say goodbye to tailwind.config.js and postcss.config.js. Explore how native CSS @theme variables simplify fullstack design tokens.',
+    date: 'Oct 28, 2026',
+    readTime: '3 min read',
+    category: 'Styling',
+    author: {
+      name: 'Elena Rostova',
+      role: 'Design Systems Lead',
+      avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100&h=100&fit=crop&crop=faces',
+    },
+    tags: ['TailwindCSS', 'CSS', 'Design'],
+    content: [
+      'Tailwind CSS v4 revolutionizes how utility styling is processed. Instead of relying on JavaScript configuration files, everything is declared directly inside modern CSS using the @theme directive.',
+      'In FrootKit, the Tailwind CLI is integrated natively into the development lifecycle. When you run frootkit dev, stylesheets are recompiled in single-digit milliseconds without requiring external bundlers.',
+    ],
+  },
+  {
+    slug: 'building-sub-millisecond-apis',
+    title: 'Crafting Dynamic Fullstack APIs with Standard Web Standards',
+    summary: 'A deep dive into Next.js-style route handlers powered by standard Request and Response interfaces on top of Froot.',
+    date: 'Oct 24, 2026',
+    readTime: '5 min read',
+    category: 'Backend',
+    author: {
+      name: 'Marcus Chen',
+      role: 'Core Runtime Engineer',
+      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=faces',
+    },
+    tags: ['API', 'Web Standards', 'TypeScript'],
+    content: [
+      'Web standards have matured dramatically. Standard Fetch API primitives like Request, Response, Headers, and URL are now universal across Node.js, Bun, Deno, and browsers.',
+      'FrootKit route handlers in src/app/api/**/route.ts take direct advantage of these standards. You export standard HTTP verb functions like GET, POST, PUT, DELETE, and receive native Request objects with zero middleware baggage.',
+    ],
+  },
+];

package/templates/blog/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/blog/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/ecommerce/README.md

@@ -0,0 +1,11 @@
+# {{PROJECT_NAME}} — E-Commerce Store
+
+High-performance digital storefront built with **FrootKit**.
+
+## 🚀 Features
+
+- Dynamic product pages: `src/app/products/[id]/page.tsx`
+- Product catalog & Cart drawer: `src/app/cart/page.tsx`
+- Checkout API endpoint: `src/app/api/checkout/route.ts`
+- Products API endpoint: `src/app/api/products/route.ts`
+- Ready for real database integration (Drizzle ORM with SQLite or Prisma)!

package/templates/ecommerce/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/ecommerce/src/app/api/checkout/route.ts

@@ -0,0 +1,19 @@
+export async function POST(req: Request): Promise<Response> {
+  const orderId = 'ord_' + Math.random().toString(36).substring(2, 9);
+
+  return Response.json(
+    {
+      success: true,
+      orderId,
+      status: 'pending_payment',
+      message: 'Order created successfully. Ready for Stripe / LemonSqueezy integration.',
+      createdAt: new Date().toISOString(),
+    },
+    {
+      status: 201,
+      headers: {
+        'content-type': 'application/json',
+      },
+    }
+  );
+}

package/templates/ecommerce/src/app/api/products/route.ts

@@ -0,0 +1,28 @@
+import { PRODUCTS } from '../../../data/products.js';
+
+export async function GET(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const category = url.searchParams.get('category');
+  const limit = Number(url.searchParams.get('limit') || 20);
+
+  let results = [...PRODUCTS];
+  if (category) {
+    results = results.filter((p) => p.category.toLowerCase() === category.toLowerCase());
+  }
+
+  results = results.slice(0, limit);
+
+  return Response.json(
+    {
+      products: results,
+      total: results.length,
+      timestamp: new Date().toISOString(),
+    },
+    {
+      status: 200,
+      headers: {
+        'content-type': 'application/json',
+      },
+    }
+  );
+}

package/templates/ecommerce/src/app/cart/page.tsx

@@ -0,0 +1,22 @@
+import { Navbar } from '../../components/Navbar.js';
+import { CartDrawer } from '../../components/CartDrawer.js';
+import { Footer } from '../../components/Footer.js';
+
+export const metadata = {
+  title: 'Shopping Cart — FrootStore',
+};
+
+export default function CartPage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-4xl mx-auto px-6 py-12 flex-1 w-full">
+        <h1 class="text-3xl font-black text-white mb-8">Your Cart</h1>
+        <CartDrawer />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/ecommerce/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 || 'FrootStore — High-Performance Gear';
+  const description =
+    metadata?.description ||
+    'Minimalist hardware, peripherals, and engineering workspace equipment powered by Preact and FrootKit.';
+
+  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/ecommerce/src/app/page.tsx

@@ -0,0 +1,59 @@
+import { PRODUCTS } from '../data/products.js';
+import { Navbar } from '../components/Navbar.js';
+import { ProductCard } from '../components/ProductCard.js';
+import { Footer } from '../components/Footer.js';
+
+export const metadata = {
+  title: 'FrootStore — Curated Workspace & Developer Hardware',
+  description: 'Precision mechanical keyboards, studio audio, and ergonomic setups.',
+};
+
+export default function StoreHomePage() {
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
+        {/* Hero Banner */}
+        <div class="rounded-3xl border border-slate-800 bg-gradient-to-r from-slate-900 via-slate-950 to-emerald-950/30 p-8 sm:p-12 mb-12 relative overflow-hidden">
+          <div class="max-w-2xl relative z-10">
+            <span class="inline-block px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs font-semibold text-emerald-400 mb-4">
+              Autumn 2026 Collection
+            </span>
+            <h1 class="text-4xl sm:text-5xl font-black text-white tracking-tight mb-4">
+              Engineered for Focus. Crafted for Craft.
+            </h1>
+            <p class="text-slate-300 text-base sm:text-lg mb-8 leading-relaxed">
+              Curated minimal workspace hardware designed to elevate your daily development workflow with tactile precision.
+            </p>
+            <div class="flex items-center gap-4">
+              <a
+                href="#catalog"
+                class="px-6 py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20 text-sm"
+              >
+                Browse All Equipment
+              </a>
+              <span class="text-xs text-slate-400 font-mono">Free shipping over $100</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Catalog Section */}
+        <div id="catalog" class="mb-8 flex items-center justify-between">
+          <div>
+            <h2 class="text-2xl font-bold text-white">All Products</h2>
+            <p class="text-xs text-slate-400">Showing {PRODUCTS.length} curated instruments</p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {PRODUCTS.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/templates/ecommerce/src/app/products/[id]/page.tsx

@@ -0,0 +1,88 @@
+import { PRODUCTS } from '../../../data/products.js';
+import { Navbar } from '../../../components/Navbar.js';
+import { Footer } from '../../../components/Footer.js';
+
+export async function generateStaticParams() {
+  return PRODUCTS.map((p) => ({ id: p.id }));
+}
+
+export default function ProductDetailPage({ params }: { params?: { id?: string } }) {
+  const id = params?.id || 'nordic-mechanical-keyboard';
+  const product = PRODUCTS.find((p) => p.id === id) || PRODUCTS[0]!;
+
+  return (
+    <div class="min-h-screen flex flex-col justify-between">
+      <Navbar />
+
+      <main class="max-w-6xl mx-auto px-6 py-12 flex-1 w-full">
+        <a
+          href="/"
+          class="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-emerald-400 mb-8 transition-colors"
+        >
+          &larr; Back to catalog
+        </a>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          <div class="rounded-3xl border border-slate-800 overflow-hidden bg-slate-950 aspect-[4/3]">
+            <img
+              src={product.image}
+              alt={product.name}
+              class="w-full h-full object-cover"
+            />
+          </div>
+
+          <div>
+            <div class="flex items-center gap-2 mb-3">
+              <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono font-medium">
+                {product.category}
+              </span>
+              <span class="text-amber-400 text-xs font-bold">
+                &#9733; {product.rating} ({product.reviewsCount} reviews)
+              </span>
+            </div>
+
+            <h1 class="text-3xl sm:text-4xl font-black text-white tracking-tight mb-4">
+              {product.name}
+            </h1>
+
+            <div class="text-3xl font-black text-emerald-400 mb-6 font-mono">
+              ${product.price.toFixed(2)}
+            </div>
+
+            <p class="text-slate-300 text-base leading-relaxed mb-8">
+              {product.description}
+            </p>
+
+            <div class="border-t border-slate-800 pt-6 mb-8">
+              <h3 class="text-xs uppercase font-mono font-bold text-slate-400 tracking-wider mb-4">
+                Key Specifications
+              </h3>
+              <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-slate-300">
+                {product.features.map((f) => (
+                  <li key={f} class="flex items-center gap-2">
+                    <span class="text-emerald-400 font-bold">&#10003;</span>
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div class="flex items-center gap-4">
+              <a
+                href="/cart"
+                class="flex-1 py-3.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-center text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+              >
+                Add to Cart &bull; ${product.price.toFixed(2)}
+              </a>
+              <span class="text-xs text-slate-500 font-mono">
+                {product.inStock ? 'In Stock (Ready to Ship)' : 'Backorder'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import { PRODUCTS } from '../data/products.js';
+
+export function CartDrawer() {
+  const cartItems = [
+    { product: PRODUCTS[0]!, quantity: 1 },
+    { product: PRODUCTS[2]!, quantity: 1 },
+  ];
+
+  const subtotal = cartItems.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
+  const shipping = subtotal > 100 ? 0 : 15;
+  const total = subtotal + shipping;
+
+  return (
+    <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 backdrop-blur-md">
+      <h2 class="text-lg font-bold text-white mb-4 flex items-center justify-between">
+        <span>Order Summary</span>
+        <span class="text-xs font-mono text-emerald-400 font-semibold">{cartItems.length} items</span>
+      </h2>
+
+      <div class="space-y-4 mb-6">
+        {cartItems.map(({ product, quantity }) => (
+          <div key={product.id} class="flex items-center gap-3 pb-3 border-b border-slate-800/60">
+            <img
+              src={product.image}
+              alt={product.name}
+              class="w-12 h-12 rounded-lg object-cover bg-slate-950"
+            />
+            <div class="flex-1 min-w-0">
+              <h4 class="text-xs font-semibold text-white truncate">{product.name}</h4>
+              <div class="text-[11px] text-slate-400">Qty: {quantity} &times; ${product.price}</div>
+            </div>
+            <div class="font-bold text-sm text-white font-mono">
+              ${(product.price * quantity).toFixed(2)}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div class="space-y-2 text-xs text-slate-400 mb-6 font-mono">
+        <div class="flex justify-between">
+          <span>Subtotal</span>
+          <span class="text-white font-bold">${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Estimated Shipping</span>
+          <span class="text-emerald-400 font-semibold">{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
+        </div>
+        <div class="pt-3 border-t border-slate-800 flex justify-between text-sm text-white font-bold">
+          <span>Total</span>
+          <span class="text-emerald-400 text-base font-black">${total.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <form action="/api/checkout" method="POST">
+        <button
+          type="submit"
+          class="w-full py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
+        >
+          Proceed to Checkout &rarr;
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/ecommerce/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>
+          FrootStore &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/products" class="hover:text-slate-400 transition-colors">Products API</a>
+        </div>
+      </div>
+    </footer>
+  );
+}