create-frootkit 1.2.12 → 1.2.13

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

@@ -2,59 +2,48 @@ import type { Product } from '../data/products.js';
 
 export function ProductCard({ product }: { product: Product }) {
   return (
-    <div class="group rounded-xl border border-white/[0.08] bg-[#0f1117] overflow-hidden hover:border-white/[0.18] transition-all duration-200 flex flex-col justify-between shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
-      {/* Product Image Frame */}
-      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-zinc-950/60">
+    <article class="group">
+      <a href={`/products/${product.id}`} class="relative block w-full overflow-hidden rounded-lg aspect-square bg-[#f6f9fc] border border-[#e6ebf1]">
         <img
           src={product.image}
           alt={product.name}
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           loading="lazy"
         />
-        <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none" />
-        <span class="absolute top-3 left-3 px-2.5 py-0.5 rounded-full bg-[#090a0f]/85 backdrop-blur-md text-[10px] uppercase tracking-wider font-semibold text-zinc-300 border border-white/[0.08]">
-          {product.category}
+        {product.inStock && (
+          <span class="bd absolute left-3 top-3 bg-white text-[#635bff] shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)]">
+            {product.category}
+          </span>
+        )}
+        <span class="absolute inset-x-3 bottom-3 rounded-md bg-white/95 py-1.5 text-center text-[13px] font-medium text-[#0a2540] opacity-0 shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] transition-opacity group-hover:opacity-100">
+          Quick view
         </span>
       </a>
 
-      {/* Product Details */}
-      <div class="p-5 flex-1 flex flex-col justify-between">
+      <div class="mt-3 flex items-start justify-between gap-2">
         <div>
-          {/* Subtle star & reviews */}
-          <div class="flex items-center gap-1.5 mb-2 text-xs text-zinc-400 font-medium">
-            <span class="text-amber-400 text-xs">★</span>
-            <span class="text-zinc-200 tabular-nums">{product.rating.toFixed(1)}</span>
-            <span class="text-zinc-600">•</span>
-            <span class="text-zinc-500 tabular-nums">{product.reviewsCount} reviews</span>
-          </div>
-
-          <h3 class="font-semibold text-zinc-100 text-sm mb-2 group-hover:text-white transition-colors line-clamp-1">
-            <a href={`/products/${product.id}`}>
+          <h3 class="font-medium text-[#0a2540] line-clamp-1">
+            <a href={`/products/${product.id}`} class="hover:text-[#635bff] transition-colors">
               {product.name}
             </a>
           </h3>
-
-          <p class="text-zinc-400 text-xs leading-relaxed mb-4 line-clamp-2">
-            {product.description}
+          <p class="text-[13px] text-[#425466]">
+            <span class="text-[#f5a623]">★</span> {product.rating.toFixed(1)} · {product.reviewsCount} reviews
           </p>
         </div>
+        <p class="font-mono text-[14px] text-[#0a2540] shrink-0 font-medium">
+          ${product.price.toFixed(2)}
+        </p>
+      </div>
 
-        {/* Price & Action Row */}
-        <div class="pt-4 border-t border-white/[0.06] flex items-center justify-between">
-          <div>
-            <span class="text-[10px] text-zinc-500 block uppercase tracking-wider font-medium">Price</span>
-            <span class="text-base font-semibold text-white tabular-nums">${product.price.toFixed(2)}</span>
-          </div>
-
-          <a
-            href={`/products/${product.id}`}
-            class="px-3.5 py-1.5 rounded-lg bg-white text-zinc-950 font-medium text-xs hover:bg-zinc-200 transition-all shadow-sm flex items-center gap-1.5 group-hover:shadow"
-          >
-            <span>View</span>
-            <span class="text-zinc-500">→</span>
-          </a>
-        </div>
+      <div class="mt-2.5 flex items-center gap-2">
+        <a
+          href="/cart"
+          class="btn btn-s w-full text-center py-1.5 text-xs font-medium"
+        >
+          Add to cart
+        </a>
       </div>
-    </div>
+    </article>
   );
 }

package/templates/ecommerce/src/styles.css

@@ -4,58 +4,177 @@
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-  --color-brand-primary: #f4f4f5;
-  --color-brand-hover: #ffffff;
+  --color-brand: #635bff;
+  --color-brand-hover: #5249e6;
+  --color-navy: #0a2540;
+  --color-slate: #425466;
+  --color-surface: #f6f9fc;
+  --color-hairline: #e6ebf1;
+  --color-cyan: #00d4ff;
+  --color-success: #24b47e;
+  --color-error: #cd3d64;
+  --color-warn: #c98a00;
 }
 
 :root {
-  color-scheme: dark;
-  --bg-canvas: #090a0f;
-  --bg-surface: #0f1117;
-  --bg-elevated: #151822;
-  --border-subtle: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(255, 255, 255, 0.16);
-  --text-primary: #f4f4f5;
-  --text-secondary: #9496a1;
-  --text-muted: #5c6370;
-}
-
-html {
-  background-color: var(--bg-canvas);
-  color: var(--text-primary);
-  font-family: var(--font-sans);
-  scroll-behavior: smooth;
+  color-scheme: light;
+  --brand: #635bff;
+  --navy: #0a2540;
+  --slate: #425466;
+  --surface: #f6f9fc;
+  --hairline: #e6ebf1;
+  --cyan: #00d4ff;
+  --success: #24b47e;
+  --error: #cd3d64;
+
+  --shadow-card: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
+  --shadow-pop: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
+}
+
+body {
+  font-size: 15px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #425466;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+:focus-visible {
+  outline: 2px solid #635bff;
+  outline-offset: 2px;
+}
+
 /* Strict SVG safety to prevent flex ballooning */
 svg {
   flex-shrink: 0;
   max-width: 100%;
 }
 
-/* Stripe/Linear refined product card */
-.product-card {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: 0.75rem;
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+/* Stripe Design Tokens & Utility Classes */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.product-card:hover {
-  border-color: var(--border-strong);
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+.btn-p {
+  background-color: #635bff;
+  color: #ffffff;
+  box-shadow: var(--shadow-card);
+}
+.btn-p:hover:not(:disabled) {
+  background-color: #5249e6;
 }
 
-/* Accessibility: Mandatory Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+.btn-s {
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  color: #0a2540;
+  box-shadow: var(--shadow-card);
+}
+.btn-s:hover:not(:disabled) {
+  background-color: #f6f9fc;
+}
+
+.btn-n {
+  background-color: #0a2540;
+  color: #ffffff;
+  box-shadow: var(--shadow-card);
+}
+.btn-n:hover:not(:disabled) {
+  background-color: #425466;
+}
+
+.inp {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  padding: 0.5rem 0.75rem;
+  font-size: 15px;
+  color: #0a2540;
+  outline: none;
+  transition: all 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.inp:focus {
+  border-color: #635bff;
+  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.25);
+}
+.inp.bad {
+  border-color: #cd3d64;
+}
+.inp.bad:focus {
+  box-shadow: 0 0 0 3px rgba(205, 61, 100, 0.2);
+}
+
+.bd {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.shadow-card {
+  box-shadow: var(--shadow-card);
+}
+
+.shadow-pop {
+  box-shadow: var(--shadow-pop);
+}
+
+dialog {
+  margin: auto;
+  width: calc(100% - 2rem);
+  max-width: 32rem;
+  border-radius: 8px;
+  border: 0;
+  background-color: #ffffff;
+  padding: 1.5rem;
+  color: #425466;
+  box-shadow: var(--shadow-pop);
+}
+
+dialog::backdrop {
+  background: rgba(10, 37, 64, 0.5);
+}
+
+dialog[open] {
+  animation: dlg 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+@keyframes dlg {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
   }
 }
+
+dialog.drawer {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 0;
+  margin-left: auto;
+  display: flex;
+  height: 100%;
+  max-height: none;
+  width: 420px;
+  max-width: 100%;
+  flex-direction: column;
+  border-radius: 0;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}

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

@@ -9,13 +9,13 @@ export interface RootLayoutProps {
 }
 
 export default function RootLayout({ children, metadata }: RootLayoutProps) {
-  const title = metadata?.title || 'FrootKit — Next.js Alternative for Preact';
+  const title = metadata?.title || 'FrootKit — The Preact Fullstack Framework';
   const description =
     metadata?.description ||
-    'Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, and dynamic API routes.';
+    'Sub-millisecond Preact SSR, native Tailwind CSS v4, and App Router conventions.';
 
   return (
-    <html lang="en" class="dark scroll-smooth">
+    <html lang="en" class="scroll-smooth">
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -24,12 +24,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
           rel="stylesheet"
         />
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#08090a] text-zinc-100 min-h-screen antialiased selection:bg-indigo-500/20 selection:text-indigo-300 font-sans">
+      <body class="bg-white font-sans text-[#425466] antialiased">
         {children}
       </body>
     </html>

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

@@ -1,129 +1,136 @@
 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',
-  description: 'Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, and dynamic API routes.',
+  title: 'FrootKit — The Fullstack Preact Framework',
+  description: 'Sub-millisecond Preact SSR, native Tailwind CSS v4, and App Router conventions.',
 };
 
-export default function HomePage() {
+export default function StarterPage() {
+  const features = [
+    {
+      title: 'Sub-Millisecond SSR',
+      description: 'Preact VNode rendering tuned for ultra-fast TTFB and zero unnecessary hydration overhead.',
+      icon: (
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+        </svg>
+      ),
+      badge: '0.42ms TTFB',
+    },
+    {
+      title: 'App Router Conventions',
+      description: 'Nested layouts, dynamic segments, loading boundaries, and standard web Request/Response route handlers.',
+      icon: (
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="3" width="7" height="7" />
+          <rect x="14" y="3" width="7" height="7" />
+          <rect x="14" y="14" width="7" height="7" />
+          <rect x="3" y="14" width="7" height="7" />
+        </svg>
+      ),
+      badge: 'Next.js Parity',
+    },
+    {
+      title: 'Stripe Design System',
+      description: 'Polished FrootUI component library with multi-layer blue shadows and semantic tints built-in.',
+      icon: (
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+        </svg>
+      ),
+      badge: 'Zero Slop',
+    },
+  ];
+
   return (
-    <div class="min-h-screen bg-[#08090a] text-zinc-100 flex flex-col justify-between selection:bg-indigo-500/20 selection:text-indigo-300">
+    <div class="bg-white font-sans text-[#425466]">
       <Header />
 
-      <main class="max-w-6xl mx-auto px-6 py-16 sm:py-24 flex-1 flex flex-col justify-center">
-        {/* Hero Section */}
-        <div class="max-w-3xl mb-16">
-          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-medium mb-6">
-            <span class="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
-            <span>Next.js App Router Conventions • Zero Overhead</span>
+      {/* HERO SECTION */}
+      <section class="hero relative pb-44 pt-32 text-white md:pb-56">
+        <div class="mx-auto max-w-6xl px-6 grid items-center gap-14 lg:grid-cols-2">
+          <div class="rise">
+            <span class="bd bg-white/15 text-white">FrootKit 1.2 · Stripe Design System</span>
+            <h1 class="mt-5 text-[42px] font-light leading-[1.08] tracking-tight md:text-[56px] md:leading-[64px]">
+              The web framework built for precision engineering
+            </h1>
+            <p class="mt-6 max-w-md text-[18px] font-light leading-7 text-white/90">
+              Zero-bloat Preact SSR, native Tailwind CSS v4, and standard Web Crypto APIs packaged into a high-performance developer runtime.
+            </p>
+            <div class="mt-8 flex flex-wrap gap-3">
+              <a href="https://frootjs.org" class="btn btn-w">Read the Documentation</a>
+              <a href="/api/health" class="btn btn-gl font-mono text-xs">Test Health API</a>
+            </div>
+            <p class="mt-4 text-[13px] text-white/75">
+              Edit <code class="font-mono bg-white/10 px-1.5 py-0.5 rounded">src/app/page.tsx</code> to start building your application.
+            </p>
           </div>
 
-          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white tracking-[-0.03em] leading-[1.1] mb-6">
-            The Next.js Alternative Built for Speed & Simplicity.
-          </h1>
+          <div class="rise overflow-hidden rounded-lg bg-[#06182b] text-white/90 shadow-[0_13px_27px_-5px_rgba(50,50,93,0.25),0_8px_16px_-8px_rgba(0,0,0,0.3)]">
+            <div class="flex items-center gap-1.5 border-b border-white/10 bg-[#0a2540] px-4 py-2.5">
+              <i class="h-2.5 w-2.5 rounded-full bg-white/20" />
+              <i class="h-2.5 w-2.5 rounded-full bg-white/20" />
+              <i class="h-2.5 w-2.5 rounded-full bg-white/20" />
+              <span class="ml-3 font-mono text-[12px] text-white/70">terminal ~ frootkit dev</span>
+            </div>
+            <pre class="p-5 font-mono text-[13px] leading-6 overflow-x-auto">
+              <code>{`$ npx create-frootkit my-app
+$ cd my-app && npm run dev
 
-          <p class="text-base sm:text-lg text-zinc-400 leading-relaxed mb-8 max-w-2xl">
-            Sub-millisecond Preact SSR, nested file-based layouts, native Tailwind CSS v4, dynamic API routes, and instant static site generation.
-          </p>
+⚡ FrootKit v1.2.12 [Preact SSR Engine]
+  - Local:    http://localhost:3000
+  - Network:  http://192.168.1.5:3000
 
-          <div class="flex flex-wrap items-center gap-3.5">
-            <a
-              href="https://frootjs.org"
-              target="_blank"
-              rel="noreferrer"
-              class="px-4 py-2.5 rounded-lg bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-sm shadow-sm flex items-center gap-2 group"
-            >
-              <span>Explore Documentation</span>
-              <span class="text-zinc-500 group-hover:translate-x-0.5 transition-transform">→</span>
-            </a>
-            <a
-              href="https://github.com/orbitnorth/frootkit"
-              target="_blank"
-              rel="noreferrer"
-              class="px-4 py-2.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-zinc-300 font-medium hover:bg-white/[0.08] hover:text-white transition-all text-sm flex items-center gap-2"
-            >
-              <svg style="width: 14px; height: 14px;" class="fill-current shrink-0" 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>
-              <span>Star on GitHub</span>
-            </a>
+✓ Compiled src/app/page.tsx in 1.2ms
+✓ Tailwind CSS v4 styles active
+✓ Zero hydration mismatch`}</code>
+            </pre>
           </div>
         </div>
+      </section>
 
-        <TerminalPreview />
-
-        {/* Feature Grid with Precision 16px SVG Icons */}
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-          <FeatureCard
-            badge="0.1ms render"
-            title="Sub-Millisecond SSR"
-            description="Preact VNode streaming and monomorphic rendering ensure blistering response times with near-zero memory footprint."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-            </svg>
-          </FeatureCard>
-
-          <FeatureCard
-            badge="Tailwind v4"
-            title="Native CSS Pipeline"
-            description="Zero postcss or tailwind config files required. Native Tailwind CSS v4 compiles in single-digit milliseconds."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-            </svg>
-          </FeatureCard>
-
-          <FeatureCard
-            badge="App Router"
-            title="Nested File Layouts"
-            description="Intuitive file-based routing with layout.tsx, page.tsx, and loading.tsx mirroring modern Next.js conventions."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-              <line x1="9" y1="3" x2="9" y2="21" />
-            </svg>
-          </FeatureCard>
-
-          <FeatureCard
-            badge="Fullstack API"
-            title="Dynamic Route Handlers"
-            description="First-class Web Standard Request/Response handlers inside src/app/api/**/route.ts with JSON and SSE streaming."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="16 18 22 12 16 6" />
-              <polyline points="8 6 2 12 8 18" />
-            </svg>
-          </FeatureCard>
-
-          <FeatureCard
-            badge="Pure Web Standards"
-            title="Zero C++ Dependencies"
-            description="Built entirely on pure ECMAScript and Web Crypto. Clean deployments to Node.js, Bun, and Edge runners."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="2" y1="12" x2="22" y2="12" />
-              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-            </svg>
-          </FeatureCard>
+      {/* STATS */}
+      <section class="bg-[#f6f9fc] py-14">
+        <div class="mx-auto max-w-6xl px-6 grid gap-8 text-center sm:grid-cols-3">
+          <div>
+            <p class="font-mono text-[40px] font-light text-[#0a2540]">0.42ms</p>
+            <p class="text-[14px]">Sub-millisecond server rendering</p>
+          </div>
+          <div>
+            <p class="font-mono text-[40px] font-light text-[#0a2540]">3.2 kB</p>
+            <p class="text-[14px]">Ultra-lean Preact client runtime</p>
+          </div>
+          <div>
+            <p class="font-mono text-[40px] font-light text-[#0a2540]">100%</p>
+            <p class="text-[14px]">Web Standards API compatibility</p>
+          </div>
+        </div>
+      </section>
 
-          <FeatureCard
-            badge="Instant SSG"
-            title="Static Site Export"
-            description="Deterministic pre-rendering of static paths into deployable HTML assets with zero configuration."
-          >
-            <svg style="width: 16px; height: 16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-          </FeatureCard>
+      {/* FEATURES */}
+      <section id="features" class="scroll-mt-16 py-24">
+        <div class="mx-auto max-w-6xl px-6">
+          <h2 class="text-[32px] font-light leading-[1.15] tracking-tight text-[#0a2540] md:text-[40px] max-w-2xl">
+            Engineered for high velocity, built with zero AI slop
+          </h2>
+          <p class="mt-4 max-w-xl text-[17px] leading-7">
+            Every token, font, shadow, and component has been modeled after Stripe's award-winning design system.
+          </p>
+          <div class="mt-12 grid gap-6 md:grid-cols-3">
+            {features.map((f) => (
+              <FeatureCard
+                key={f.title}
+                title={f.title}
+                description={f.description}
+                icon={f.icon}
+                badge={f.badge}
+              />
+            ))}
+          </div>
         </div>
-      </main>
+      </section>
 
       <Footer />
     </div>

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

@@ -1,29 +1,23 @@
 import type { ComponentChildren } from 'preact';
 
 export interface FeatureCardProps {
-  badge: string;
   title: string;
   description: string;
-  children?: ComponentChildren;
+  icon?: ComponentChildren;
+  badge?: string;
 }
 
-export function FeatureCard({ badge, title, description, children }: FeatureCardProps) {
+export function FeatureCard({ title, description, icon, badge }: FeatureCardProps) {
   return (
-    <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-5 hover:border-white/[0.18] transition-all shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
+    <div class="rounded-lg border border-[#e6ebf1] bg-white p-6 shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] transition hover:-translate-y-0.5 hover:shadow-[0_13px_27px_-5px_rgba(50,50,93,0.25),0_8px_16px_-8px_rgba(0,0,0,0.3)]">
       <div class="flex items-center justify-between mb-4">
-        <div class="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center text-indigo-400">
-          {children}
-        </div>
-        <span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-white/[0.04] text-zinc-300 border border-white/[0.06]">
-          {badge}
+        <span class="grid h-10 w-10 place-items-center rounded-md bg-[#635bff]/10 text-[#635bff]">
+          {icon}
         </span>
+        {badge && <span class="bd bg-[#635bff]/10 text-[#635bff]">{badge}</span>}
       </div>
-      <h3 class="text-sm font-semibold text-white mb-1.5">
-        {title}
-      </h3>
-      <p class="text-zinc-400 text-xs leading-relaxed">
-        {description}
-      </p>
+      <h3 class="text-[17px] font-medium text-[#0a2540]">{title}</h3>
+      <p class="mt-1 text-[14px] text-[#425466] leading-relaxed">{description}</p>
     </div>
   );
 }

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

@@ -1,14 +1,16 @@
 export function Footer() {
   return (
-    <footer class="border-t border-white/[0.08] bg-[#08090a] py-8 text-xs text-zinc-500">
-      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
-        <div>
-          FrootKit © {new Date().getFullYear()} OrbitNorth LLC. Built for high performance.
-        </div>
-        <div class="flex items-center gap-6">
-          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-zinc-300 transition-colors">GitHub</a>
-          <a href="https://frootjs.org" class="hover:text-zinc-300 transition-colors">Documentation</a>
-          <a href="/api/health" class="hover:text-zinc-300 transition-colors font-mono text-[11px]">/api/health</a>
+    <footer class="border-t border-[#e6ebf1] py-10 text-[14px] bg-white">
+      <div class="mx-auto max-w-6xl px-6 flex flex-wrap justify-between gap-4 text-xs text-[#425466]">
+        <span>
+          <b class="text-[#635bff] font-semibold text-sm">frootkit</b> · High-performance Preact fullstack web framework.
+        </span>
+        <div class="flex items-center gap-4">
+          <a href="https://frootjs.org" class="hover:text-[#0a2540]">Docs</a>
+          <span>·</span>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-[#0a2540]">GitHub</a>
+          <span>·</span>
+          <a href="/api/health" class="font-mono hover:text-[#0a2540]">/api/health</a>
         </div>
       </div>
     </footer>