npm - create-frootkit - Versions diffs - 1.2.2 → 1.2.4 - Mend

create-frootkit 1.2.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/index.js +1 -1
package/package.json +1 -1
package/templates/auth/src/app/dashboard/layout.tsx +9 -9
package/templates/auth/src/app/dashboard/page.tsx +20 -20
package/templates/auth/src/app/layout.tsx +7 -1
package/templates/auth/src/app/login/page.tsx +2 -2
package/templates/auth/src/app/page.tsx +78 -37
package/templates/auth/src/app/signup/page.tsx +2 -2
package/templates/auth/src/components/AuthForm.tsx +28 -17
package/templates/auth/src/components/DashboardNav.tsx +66 -33
package/templates/auth/src/components/MetricCard.tsx +9 -7
package/templates/auth/src/components/Navbar.tsx +11 -8
package/templates/auth/src/styles.css +29 -11
package/templates/blog/src/app/blog/[slug]/page.tsx +11 -11
package/templates/blog/src/app/layout.tsx +7 -1
package/templates/blog/src/app/page.tsx +26 -12
package/templates/blog/src/components/Footer.tsx +5 -5
package/templates/blog/src/components/Navbar.tsx +8 -6
package/templates/blog/src/components/Newsletter.tsx +16 -10
package/templates/blog/src/components/PostCard.tsx +61 -14
package/templates/blog/src/styles.css +29 -11
package/templates/ecommerce/src/app/cart/page.tsx +2 -2
package/templates/ecommerce/src/app/layout.tsx +7 -1
package/templates/ecommerce/src/app/page.tsx +20 -29
package/templates/ecommerce/src/app/products/[id]/page.tsx +21 -20
package/templates/ecommerce/src/components/CartDrawer.tsx +13 -13
package/templates/ecommerce/src/components/Footer.tsx +5 -5
package/templates/ecommerce/src/components/Navbar.tsx +13 -8
package/templates/ecommerce/src/components/ProductCard.tsx +14 -13
package/templates/ecommerce/src/styles.css +29 -11
package/templates/empty/src/app/layout.tsx +6 -0
package/templates/empty/src/app/page.tsx +9 -9
package/templates/empty/src/styles.css +29 -11
package/templates/starter/src/app/layout.tsx +7 -1
package/templates/starter/src/app/page.tsx +77 -76
package/templates/starter/src/components/FeatureCard.tsx +10 -6
package/templates/starter/src/components/Footer.tsx +5 -5
package/templates/starter/src/components/Header.tsx +6 -6
package/templates/starter/src/components/TerminalPreview.tsx +28 -28
package/templates/starter/src/styles.css +29 -11

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

@@ -11,23 +11,23 @@ export function CartDrawer() {
   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">
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 sm:p-8">
+      <h2 class="text-lg font-bold text-white mb-6 flex items-center justify-between border-b border-[#1a2333] pb-4">
         <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">
+          <div key={product.id} class="flex items-center gap-4 pb-4 border-b border-[#1a2333]">
             <img
               src={product.image}
               alt={product.name}
-              class="w-12 h-12 rounded-lg object-cover bg-slate-950"
+              class="w-14 h-14 rounded-lg object-cover bg-[#06090f] border border-[#1a2333]"
             />
             <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>
+              <h4 class="text-sm font-semibold text-white truncate">{product.name}</h4>
+              <div class="text-xs text-slate-400 font-mono mt-0.5">Qty: {quantity} &times; ${product.price.toFixed(2)}</div>
             </div>
             <div class="font-bold text-sm text-white font-mono">
               ${(product.price * quantity).toFixed(2)}
@@ -36,27 +36,27 @@ export function CartDrawer() {
         ))}
       </div>
-      <div class="space-y-2 text-xs text-slate-400 mb-6 font-mono">
+      <div class="space-y-2.5 text-xs text-slate-300 mb-6 font-mono">
         <div class="flex justify-between">
-          <span>Subtotal</span>
+          <span class="text-slate-400">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-slate-400">Standard 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">
+        <div class="pt-3 border-t border-[#1a2333] 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>
+          <span class="text-emerald-400 text-base font-mono 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"
+          class="w-full py-3 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors"
         >
-          Proceed to Checkout &rarr;
+          Proceed to Checkout →
         </button>
       </form>
     </div>

package/templates/ecommerce/src/components/Footer.tsx CHANGED Viewed

@@ -1,14 +1,14 @@
 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">
+    <footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400">
+      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono">
         <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>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-white transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-white transition-colors">Documentation</a>
+          <a href="/api/products" class="hover:text-white transition-colors">Products API</a>
         </div>
       </div>
     </footer>

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

@@ -1,11 +1,13 @@
 export function Navbar() {
   return (
-    <header class="border-b border-slate-800/80 bg-slate-950/70 backdrop-blur-md sticky top-0 z-50">
+    <header class="border-b border-[#1a2333] bg-[#06090f]/95 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>
+        <a href="/" class="flex items-center gap-3 font-bold text-white text-base tracking-tight hover:text-emerald-400 transition-colors">
+          <div class="w-8 h-8 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
+            <svg width="16" height="16" class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+            </svg>
+          </div>
           <span>Froot<span class="text-emerald-400">Store</span></span>
         </a>
@@ -13,15 +15,18 @@ export function Navbar() {
           <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">
+          <a href="/api/products" class="text-emerald-400 hover:text-emerald-300 font-mono text-xs px-2.5 py-1 rounded-md bg-[#0a0f18] border border-[#1a2333] 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"
+            class="flex items-center gap-2 px-3.5 py-1.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 hover:border-slate-700 hover:text-white transition-colors text-xs font-semibold"
           >
+            <svg width="14" height="14" class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+            </svg>
             <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]">
+            <span class="px-1.5 py-0.2 rounded bg-emerald-500 text-slate-950 font-bold text-[10px]">
               2
             </span>
           </a>

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

@@ -2,27 +2,28 @@ 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">
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] overflow-hidden hover:border-slate-700 transition-colors flex flex-col justify-between">
+      <a href={`/products/${product.id}`} class="block relative aspect-[4/3] overflow-hidden bg-[#06090f]">
         <img
           src={product.image}
           alt={product.name}
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          class="w-full h-full object-cover transition-transform duration-200"
           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">
+        <span class="absolute top-3 right-3 px-2 py-0.5 rounded bg-[#06090f]/90 text-[11px] font-mono text-slate-300 border border-[#1a2333]">
           {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 class="flex items-center gap-1.5 mb-2 text-xs font-mono text-slate-400">
+            <span class="text-emerald-400 font-bold">{product.rating.toFixed(1)}</span>
+            <span>/ 5.0</span>
+            <span class="text-slate-500">({product.reviewsCount} reviews)</span>
           </div>
-          <h3 class="font-bold text-white text-base mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
+          <h3 class="font-bold text-white text-base mb-2 hover:text-emerald-400 transition-colors line-clamp-1">
             <a href={`/products/${product.id}`}>
               {product.name}
             </a>
@@ -33,17 +34,17 @@ export function ProductCard({ product }: { product: Product }) {
           </p>
         </div>
-        <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
+        <div class="pt-4 border-t border-[#1a2333] 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>
+            <span class="text-[11px] font-mono text-slate-500 block">Price</span>
+            <span class="text-lg font-bold text-white font-mono">${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"
+            class="px-3.5 py-1.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-xs hover:bg-emerald-400 transition-colors"
           >
-            View Details
+            Details
           </a>
         </div>
       </div>

package/templates/ecommerce/src/styles.css CHANGED Viewed

@@ -1,19 +1,37 @@
 @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;
+  --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: #10b981;
+  --color-brand-hover: #34d399;
 }
 :root {
   color-scheme: dark;
 }
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  font-family: var(--font-sans);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+/* SVG safety: prevents flex ballooning across all browsers */
+svg {
+  flex-shrink: 0;
+  max-width: 100%;
+}
+/* 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;
+  }
+}

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

@@ -19,6 +19,12 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title}</title>
         <meta name="description" content={description} />
+        <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;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          rel="stylesheet"
+        />
         <link rel="stylesheet" href="/styles.css" />
       </head>
       <body class="bg-slate-950 text-slate-100 min-h-screen antialiased">

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

@@ -5,29 +5,29 @@ export const metadata = {
 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">
+    <main class="min-h-screen bg-[#06090f] text-slate-100 flex items-center justify-center p-6">
+      <div class="max-w-md w-full text-center border border-[#1a2333] bg-[#0a0f18] rounded-xl p-8">
+        <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center mx-auto mb-4 text-emerald-400 font-bold text-lg font-mono">
           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.
+        <h1 class="text-2xl font-bold text-white mb-2">Blank Canvas</h1>
+        <p class="text-slate-400 text-sm mb-6 leading-relaxed">
+          Start building by editing <code class="font-mono text-emerald-400 bg-[#06090f] border border-[#1a2333] px-1.5 py-0.5 rounded">src/app/page.tsx</code>.
         </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"
+            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors"
           >
-            Docs
+            Documentation
           </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"
+            class="px-4 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-slate-300 hover:text-white transition-colors"
           >
             GitHub
           </a>

package/templates/empty/src/styles.css CHANGED Viewed

@@ -1,19 +1,37 @@
 @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;
+  --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: #10b981;
+  --color-brand-hover: #34d399;
 }
 :root {
   color-scheme: dark;
 }
+html {
+  background-color: #06090f;
+  color: #f8fafc;
+  font-family: var(--font-sans);
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+}
+/* SVG safety: prevents flex ballooning across all browsers */
+svg {
+  flex-shrink: 0;
+  max-width: 100%;
+}
+/* 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;
+  }
+}

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

@@ -21,9 +21,15 @@ export default function RootLayout({ children, metadata }: RootLayoutProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{title}</title>
         <meta name="description" content={description} />
+        <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;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          rel="stylesheet"
+        />
         <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">
+      <body class="bg-[#030712] text-slate-100 min-h-screen antialiased selection:bg-emerald-500/20 selection:text-emerald-300 font-sans">
         {children}
       </body>
     </html>

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

@@ -4,95 +4,46 @@ 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.',
+  title: 'FrootKit — Next.js Alternative for Preact',
+  description: 'Sub-millisecond Preact SSR, nested file-based 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>
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <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
+      <main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
+        {/* Hero Section */}
+        <div class="max-w-3xl mb-16">
+          <div class="text-xs font-mono font-medium text-emerald-400 mb-3 tracking-wide uppercase">
+            Next.js App Router Conventions • 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 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
+            The Next.js Alternative Built for Speed & Simplicity.
           </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 class="text-base sm:text-lg text-slate-300 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>
-          <div class="flex flex-wrap items-center justify-center gap-4">
+          <div class="flex flex-wrap items-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"
+              class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm"
             >
-              Explore Documentation &rarr;
+              Explore Documentation →
             </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"
+              class="px-5 py-2.5 rounded-lg bg-[#0a0f18] border border-[#1a2333] text-slate-200 font-semibold hover:border-slate-700 hover:text-white transition-colors text-sm flex items-center gap-2"
             >
-              <svg class="w-4 h-4 fill-current text-slate-300" viewBox="0 0 24 24">
+              <svg width="16" height="16" class="w-4 h-4 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>
               Star on GitHub
@@ -102,17 +53,67 @@ export default function HomePage() {
         <TerminalPreview />
-        {/* Feature Grid */}
+        {/* Feature Grid with Real SVG Icons */}
         <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}
-            />
-          ))}
+          <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 width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </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 width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+            </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 width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+          </FeatureCard>
+          <FeatureCard
+            badge="Fullstack API"
+            title="Dynamic Route Handlers"
+            description="Build backend endpoints in src/app/api/**/route.ts handling GET, POST, PUT, DELETE with standard Web Fetch APIs."
+          >
+            <svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </FeatureCard>
+          <FeatureCard
+            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 in seconds."
+          >
+            <svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+          </FeatureCard>
+          <FeatureCard
+            badge="AI Native"
+            title="Agent Guidelines"
+            description="Comes with pre-configured AGENT.md guidelines, strict TypeScript, and biome/eslint support for agentic development."
+          >
+            <svg width="20" height="20" class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </FeatureCard>
         </div>
       </main>

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

@@ -1,20 +1,24 @@
+import type { ComponentChildren } from 'preact';
 export interface FeatureCardProps {
-  icon: string;
   badge: string;
   title: string;
   description: string;
+  children?: ComponentChildren;
 }
-export function FeatureCard({ icon, badge, title, description }: FeatureCardProps) {
+export function FeatureCard({ badge, title, description, children }: 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="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 hover:border-slate-700 transition-colors">
       <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">
+        <div class="w-9 h-9 rounded-lg bg-[#0f1624] border border-[#1a2333] flex items-center justify-center text-emerald-400">
+          {children}
+        </div>
+        <span class="text-xs font-mono font-medium px-2 py-0.5 rounded bg-[#0f1624] text-slate-300 border border-[#1a2333]">
           {badge}
         </span>
       </div>
-      <h3 class="text-lg font-bold text-white mb-2 group-hover:text-emerald-400 transition-colors">
+      <h3 class="text-base font-bold text-white mb-2">
         {title}
       </h3>
       <p class="text-slate-400 text-sm leading-relaxed">

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

@@ -1,14 +1,14 @@
 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">
+    <footer class="border-t border-[#1a2333] bg-[#06090f] py-8 text-xs text-slate-400">
+      <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono">
         <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>
+          <a href="https://github.com/orbitnorth/frootkit" class="hover:text-white transition-colors">GitHub</a>
+          <a href="https://frootjs.org" class="hover:text-white transition-colors">Documentation</a>
+          <a href="/api/health" class="hover:text-white transition-colors">Health API</a>
         </div>
       </div>
     </footer>