create-frootkit 1.2.2 → 1.2.4

package/dist/index.js

@@ -11,7 +11,7 @@ import { scaffoldProject } from './scaffold.js';
 export * from './template.js';
 export * from './scaffold.js';
 export * from './ui.js';
-const VERSION = '1.2.2';
+const VERSION = '1.2.3';
 function parseCliArgs(argv) {
     const raw = argv.slice(2);
     const args = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-frootkit",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Interactive CLI for scaffolding high-performance FrootKit (Next.js Alternative) applications",
   "type": "module",
   "bin": {

package/templates/auth/src/app/dashboard/layout.tsx

@@ -3,24 +3,24 @@ import { DashboardNav } from '../../components/DashboardNav.js';
 
 export default function DashboardLayout({ children }: { children: ComponentChildren }) {
   return (
-    <div class="min-h-screen flex bg-[#030712] text-slate-100">
+    <div class="min-h-screen flex bg-[#06090f] text-slate-100">
       <DashboardNav />
       <div class="flex-1 flex flex-col min-w-0">
-        <header class="h-16 border-b border-slate-800/80 px-8 flex items-center justify-between bg-slate-950/40 backdrop-blur-md">
+        <header class="h-16 border-b border-[#1a2333] px-8 flex items-center justify-between bg-[#06090f]">
           <div class="flex items-center gap-3">
-            <h1 class="text-sm font-bold text-white">Production Cluster</h1>
-            <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20">
-              US-East (N. Virginia)
+            <h1 class="text-sm font-semibold text-white">Cluster: US-East Production</h1>
+            <span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-mono border border-emerald-500/20 font-semibold">
+              Live • 99.99% Uptime
             </span>
           </div>
 
-          <div class="flex items-center gap-4 text-xs">
-            <span class="text-slate-400">Logged in as <strong class="text-white">admin@frootkit.dev</strong></span>
+          <div class="flex items-center gap-4 text-xs font-mono">
+            <span class="text-slate-400">User: <strong class="text-white">admin@frootkit.dev</strong></span>
             <a
               href="/api/auth"
-              class="px-2.5 py-1 rounded-lg bg-slate-900 border border-slate-800 text-slate-300 font-mono hover:text-emerald-400"
+              class="px-2.5 py-1 rounded bg-[#0a0f18] border border-[#1a2333] text-slate-300 hover:text-emerald-400 transition-colors"
             >
-              Session API
+              /api/auth
             </a>
           </div>
         </header>

package/templates/auth/src/app/dashboard/page.tsx

@@ -1,29 +1,29 @@
 import { MetricCard } from '../../components/MetricCard.js';
 
 export const metadata = {
-  title: 'Workspace Overview — FrootSaaS',
+  title: 'Workspace Overview — FrootAuth',
 };
 
 export default function DashboardOverviewPage() {
   const metrics = [
     { label: 'Monthly Recurring Revenue', value: '$42,850', change: '+14.2%', isPositive: true },
     { label: 'Active Subscribers', value: '1,280', change: '+8.1%', isPositive: true },
-    { label: 'API Requests (24h)', value: '3.42M', change: '+22.4%', isPositive: true },
-    { label: 'Average Latency', value: '0.42ms', change: '-12.0%', isPositive: true },
+    { label: 'API Invocations (24h)', value: '3.42M', change: '+22.4%', isPositive: true },
+    { label: 'P99 Dispatch Latency', value: '0.42ms', change: '-12.0%', isPositive: true },
   ];
 
   const recentUsers = [
     { name: 'Sarah Connor', email: 'sarah@frootkit.dev', role: 'Owner', date: 'Just now' },
-    { name: 'John Doe', email: 'john@acme.corp', role: 'Developer', date: '2 hours ago' },
-    { name: 'Alex Wong', email: 'alex@startup.io', role: 'Designer', date: '1 day ago' },
-    { name: 'Maria Garcia', email: 'maria@scale.dev', role: 'Admin', date: '3 days ago' },
+    { name: 'Marcus Chen', email: 'marcus@infra.org', role: 'Developer', date: '2 hours ago' },
+    { name: 'Elena Rostova', email: 'elena@design.io', role: 'Staff Eng', date: '1 day ago' },
+    { name: 'Alex Rivera', email: 'alex@systems.net', role: 'Admin', date: '3 days ago' },
   ];
 
   return (
     <div class="space-y-8">
       <div>
-        <h2 class="text-2xl font-bold text-white mb-1">Metrics & Operations</h2>
-        <p class="text-xs text-slate-400">Real-time performance and subscriber growth analytics.</p>
+        <h2 class="text-2xl font-bold text-white mb-1.5 tracking-tight">Metrics & Telemetry</h2>
+        <p class="text-sm text-slate-400">Real-time throughput and workspace subscriber analytics.</p>
       </div>
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -38,29 +38,29 @@ export default function DashboardOverviewPage() {
         ))}
       </div>
 
-      <div class="rounded-2xl border border-slate-800 bg-slate-900/40 p-6 backdrop-blur-sm">
-        <h3 class="text-sm font-bold text-white mb-4">Recent Workspace Activity</h3>
+      <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-sm">
+        <h3 class="text-base font-semibold text-white mb-4">Recent Workspace Activity</h3>
         <div class="overflow-x-auto">
-          <table class="w-full text-left text-xs">
+          <table class="w-full text-left text-sm">
             <thead>
-              <tr class="border-b border-slate-800 text-slate-500 font-mono">
+              <tr class="border-b border-[#1a2333] text-slate-400 text-xs uppercase font-mono tracking-wider">
                 <th class="pb-3 font-semibold">User</th>
                 <th class="pb-3 font-semibold">Email</th>
                 <th class="pb-3 font-semibold">Role</th>
-                <th class="pb-3 font-semibold">Time</th>
+                <th class="pb-3 font-semibold text-right">Timestamp</th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-slate-800/60">
+            <tbody class="divide-y divide-[#1a2333]/70">
               {recentUsers.map((u) => (
-                <tr key={u.email} class="hover:bg-slate-900/60">
-                  <td class="py-3 font-medium text-white">{u.name}</td>
-                  <td class="py-3 text-slate-400 font-mono">{u.email}</td>
-                  <td class="py-3">
-                    <span class="px-2 py-0.5 rounded-full bg-slate-800 text-slate-300 font-mono text-[10px]">
+                <tr key={u.email} class="hover:bg-[#0f1624]/40 transition-colors">
+                  <td class="py-3.5 font-medium text-white">{u.name}</td>
+                  <td class="py-3.5 text-slate-400 font-mono text-xs">{u.email}</td>
+                  <td class="py-3.5">
+                    <span class="px-2 py-0.5 rounded-md bg-[#0f1624] text-slate-300 border border-[#1a2333] text-xs font-mono">
                       {u.role}
                     </span>
                   </td>
-                  <td class="py-3 text-slate-500">{u.date}</td>
+                  <td class="py-3.5 text-slate-500 text-xs text-right font-mono">{u.date}</td>
                 </tr>
               ))}
             </tbody>

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

@@ -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/auth/src/app/login/page.tsx

@@ -2,12 +2,12 @@ import { Navbar } from '../../components/Navbar.js';
 import { AuthForm } from '../../components/AuthForm.js';
 
 export const metadata = {
-  title: 'Sign In — FrootSaaS',
+  title: 'Sign In — FrootAuth',
 };
 
 export default function LoginPage() {
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
       <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">

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

@@ -1,57 +1,98 @@
 import { Navbar } from '../components/Navbar.js';
 
 export const metadata = {
-  title: 'FrootSaaS — Next Generation Cloud Infrastructure',
-  description: 'Deploy lightning fast web services with enterprise grade observability.',
+  title: 'FrootAuth — Web Crypto Authentication & Dashboard',
+  description: 'Pure Web Crypto PBKDF2 password hashing and secure session management for FrootKit.',
 };
 
 export default function SaaSMarketingPage() {
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
-      <main class="max-w-6xl mx-auto px-6 py-20 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">
-            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
-            Fullstack Authentication & Dashboard
+      <main class="max-w-6xl mx-auto px-6 py-16 flex-1 flex flex-col justify-center">
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+          {/* Left Column (7 cols) */}
+          <div class="lg:col-span-7">
+            <div class="text-xs font-mono font-medium text-emerald-400 mb-3 uppercase tracking-wide">
+              Security Architecture • Pure Web Crypto
+            </div>
+
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
+              Fullstack Authentication & Administration.
+            </h1>
+
+            <p class="text-base sm:text-lg text-slate-300 leading-relaxed mb-8 max-w-xl">
+              Zero external C++ dependencies. Real PBKDF2 password hashing (100,000 iterations), cryptographically random session tokens, protected layout routes, and administrative dashboard metrics.
+            </p>
+
+            <div class="flex flex-wrap items-center gap-4 mb-8">
+              <a
+                href="/signup"
+                class="px-5 py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-sm flex items-center gap-1.5"
+              >
+                <span>Create Account</span>
+                <span>→</span>
+              </a>
+              <a
+                href="/dashboard"
+                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"
+              >
+                View Dashboard
+              </a>
+            </div>
+
+            <div class="text-xs font-mono text-slate-400 flex items-center gap-2">
+              <span class="text-emerald-400 font-bold">✓</span>
+              <span>Demo Account ready: admin@frootkit.dev / password123</span>
+            </div>
           </div>
 
-          <h1 class="text-4xl sm:text-6xl font-black text-white tracking-tight mb-6 leading-tight">
-            The Complete Platform for{' '}
-            <span class="bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400 bg-clip-text text-transparent">
-              Modern SaaS
-            </span>
-          </h1>
-
-          <p class="text-slate-300 text-lg sm:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
-            Real Web Crypto password hashing, secure session cookies, protected routes, and an administrative dashboard layout ready out of the box.
-          </p>
-
-          <div class="flex flex-wrap items-center justify-center gap-4">
-            <a
-              href="/signup"
-              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:-translate-y-0.5"
-            >
-              Start Free Trial &rarr;
-            </a>
-            <a
-              href="/dashboard"
-              class="px-6 py-3 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 font-semibold hover:bg-slate-800 transition-all hover:-translate-y-0.5"
-            >
-              View Live Dashboard
-            </a>
+          {/* Right Column: Mini Dashboard Card (5 cols) */}
+          <div class="lg:col-span-5">
+            <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-6 shadow-xl space-y-4">
+              <div class="flex items-center justify-between pb-3 border-b border-[#1a2333]">
+                <span class="text-xs font-mono text-slate-400">Security Telemetry</span>
+                <span class="text-[10px] font-mono text-emerald-400 px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 font-semibold">
+                  PBKDF2-SHA256
+                </span>
+              </div>
+
+              <div class="space-y-3 font-mono text-xs">
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Iterations:</span>
+                  <span class="text-white font-bold">100,000</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Salt Length:</span>
+                  <span class="text-white font-bold">128-bit (16 bytes)</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Key Derivation:</span>
+                  <span class="text-white font-bold">256-bit SubtleCrypto</span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-slate-400">Cookie Security:</span>
+                  <span class="text-emerald-400 font-bold">HttpOnly; SameSite=Lax</span>
+                </div>
+              </div>
+
+              <div class="pt-3 border-t border-[#1a2333] flex justify-between items-center text-xs">
+                <span class="text-slate-400">Endpoint:</span>
+                <code class="text-emerald-400 font-mono">/api/auth?action=login</code>
+              </div>
+            </div>
           </div>
         </div>
       </main>
 
-      <footer class="border-t border-slate-900 bg-slate-950/60 py-8 text-center text-xs text-slate-500">
+      <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 justify-between">
-          <div>FrootSaaS &copy; {new Date().getFullYear()} OrbitNorth LLC</div>
+          <div>FrootAuth © {new Date().getFullYear()} OrbitNorth LLC</div>
           <div class="flex gap-4">
-            <a href="/login" class="hover:text-slate-400">Sign In</a>
-            <a href="/signup" class="hover:text-slate-400">Sign Up</a>
-            <a href="/dashboard" class="hover:text-slate-400">Dashboard</a>
+            <a href="/login" class="hover:text-white transition-colors">Sign In</a>
+            <a href="/signup" class="hover:text-white transition-colors">Sign Up</a>
+            <a href="/dashboard" class="hover:text-white transition-colors">Dashboard</a>
           </div>
         </div>
       </footer>

package/templates/auth/src/app/signup/page.tsx

@@ -2,12 +2,12 @@ import { Navbar } from '../../components/Navbar.js';
 import { AuthForm } from '../../components/AuthForm.js';
 
 export const metadata = {
-  title: 'Create Account — FrootSaaS',
+  title: 'Create Account — FrootAuth',
 };
 
 export default function SignupPage() {
   return (
-    <div class="min-h-screen flex flex-col justify-between">
+    <div class="min-h-screen bg-[#06090f] text-slate-100 flex flex-col justify-between">
       <Navbar />
 
       <main class="max-w-md mx-auto px-6 py-16 flex-1 w-full flex flex-col justify-center">

package/templates/auth/src/components/AuthForm.tsx

@@ -6,13 +6,13 @@ export function AuthForm({ mode }: AuthFormProps) {
   const isLogin = mode === 'login';
 
   return (
-    <div class="rounded-3xl border border-slate-800 bg-slate-900/60 p-8 backdrop-blur-xl shadow-2xl">
-      <div class="text-center mb-8">
-        <h1 class="text-2xl font-bold text-white mb-2">
-          {isLogin ? 'Sign in to your account' : 'Create your account'}
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-8 shadow-xl">
+      <div class="mb-6">
+        <h1 class="text-2xl font-bold text-white mb-1.5">
+          {isLogin ? 'Sign in to workspace' : 'Create workspace account'}
         </h1>
         <p class="text-slate-400 text-xs">
-          {isLogin ? "Don't have an account? " : 'Already have an account? '}
+          {isLogin ? 'Need an account? ' : 'Already registered? '}
           <a href={isLogin ? '/signup' : '/login'} class="text-emerald-400 font-semibold hover:underline">
             {isLogin ? 'Sign up' : 'Sign in'}
           </a>
@@ -20,9 +20,10 @@ export function AuthForm({ mode }: AuthFormProps) {
       </div>
 
       {isLogin && (
-        <div class="mb-6 p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-300 flex items-center justify-between">
-          <div>
-            <span class="font-bold">Demo:</span> admin@frootkit.dev &bull; password123
+        <div class="mb-6 p-3.5 rounded-lg bg-[#06090f] border border-[#1a2333] text-xs text-slate-300">
+          <span class="text-emerald-400 font-bold block mb-1">Demo Credentials:</span>
+          <div class="font-mono text-slate-300 text-[11px]">
+            admin@frootkit.dev <span class="text-slate-500 mx-1">•</span> password123
           </div>
         </div>
       )}
@@ -30,46 +31,56 @@ export function AuthForm({ mode }: AuthFormProps) {
       <form action={`/api/auth?action=${mode}`} method="POST" class="space-y-4">
         {!isLogin && (
           <div>
-            <label class="block text-xs font-medium text-slate-300 mb-1.5">Full Name</label>
+            <label class="block text-xs font-medium text-slate-300 mb-1.5" for="name">
+              Full Name
+            </label>
             <input
+              id="name"
               type="text"
               name="name"
-              placeholder="Sarah Connor"
+              placeholder="Developer Name"
               required
-              class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+              class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
             />
           </div>
         )}
 
         <div>
-          <label class="block text-xs font-medium text-slate-300 mb-1.5">Email Address</label>
+          <label class="block text-xs font-medium text-slate-300 mb-1.5" for="email">
+            Email Address
+          </label>
           <input
+            id="email"
             type="email"
             name="email"
             placeholder="admin@frootkit.dev"
             defaultValue={isLogin ? 'admin@frootkit.dev' : ''}
             required
-            class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+            class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
           />
         </div>
 
         <div>
-          <label class="block text-xs font-medium text-slate-300 mb-1.5">Password</label>
+          <label class="block text-xs font-medium text-slate-300 mb-1.5" for="password">
+            Password
+          </label>
           <input
+            id="password"
             type="password"
             name="password"
             placeholder="••••••••••••"
             defaultValue={isLogin ? 'password123' : ''}
             required
-            class="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-emerald-500"
+            class="w-full px-3.5 py-2 rounded-lg bg-[#06090f] border border-[#1a2333] text-white text-sm focus:outline-none focus:border-emerald-500 transition-colors"
           />
         </div>
 
         <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 mt-2"
+          class="w-full py-2.5 rounded-lg bg-emerald-500 text-slate-950 font-semibold text-sm hover:bg-emerald-400 transition-colors mt-2 flex items-center justify-center gap-2"
         >
-          {isLogin ? 'Sign In &rarr;' : 'Create Account &rarr;'}
+          <span>{isLogin ? 'Sign In' : 'Create Account'}</span>
+          <span>→</span>
         </button>
       </form>
     </div>

package/templates/auth/src/components/DashboardNav.tsx

@@ -1,48 +1,81 @@
 export function DashboardNav() {
-  const links = [
-    { label: 'Overview', href: '/dashboard', icon: '📊' },
-    { label: 'Analytics', href: '/dashboard#analytics', icon: '📈' },
-    { label: 'Team', href: '/dashboard#team', icon: '👥' },
-    { label: 'API Keys', href: '/api/auth', icon: '🔑' },
-  ];
-
   return (
-    <aside class="w-64 border-r border-slate-800/80 bg-slate-950/80 p-6 flex flex-col justify-between shrink-0">
+    <aside class="w-64 border-r border-[#1a2333] bg-[#0a0f18] p-5 flex flex-col justify-between shrink-0 min-h-screen">
       <div>
-        <div class="flex items-center gap-2.5 font-bold text-white text-lg mb-8">
-          <span class="w-7 h-7 rounded-lg bg-emerald-500 flex items-center justify-center text-slate-950 font-black text-xs">
-            F
-          </span>
-          <span>Workspace</span>
+        {/* Brand Header */}
+        <div class="flex items-center gap-3 font-bold text-white text-base mb-6 px-1">
+          <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 shrink-0">
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <span class="tracking-tight">Workspace</span>
         </div>
 
+        {/* Navigation Links */}
         <nav class="space-y-1 text-sm font-medium">
-          {links.map((link) => (
-            <a
-              key={link.label}
-              href={link.href}
-              class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-slate-300 hover:text-white hover:bg-slate-900/80 transition-colors"
-            >
-              <span>{link.icon}</span>
-              <span>{link.label}</span>
-            </a>
-          ))}
+          <a
+            href="/dashboard"
+            class="flex items-center gap-3 px-3 py-2 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/25 transition-colors"
+          >
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+            </svg>
+            <span>Overview</span>
+          </a>
+
+          <a
+            href="/dashboard#analytics"
+            class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
+          >
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+            </svg>
+            <span>Telemetry</span>
+          </a>
+
+          <a
+            href="/dashboard#team"
+            class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
+          >
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+            <span>Members</span>
+          </a>
+
+          <a
+            href="/api/auth"
+            class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/[0.04] transition-colors"
+          >
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+            </svg>
+            <span>Session API</span>
+          </a>
         </nav>
       </div>
 
-      <div class="pt-6 border-t border-slate-800/80 flex items-center justify-between">
-        <div class="flex items-center gap-2.5">
-          <div class="w-8 h-8 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center font-bold text-xs text-emerald-400">
-            SC
+      {/* User profile & Sign out */}
+      <div class="pt-4 border-t border-[#1a2333] flex items-center justify-between">
+        <div class="flex items-center gap-2.5 min-w-0">
+          <div class="w-8 h-8 rounded-full bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center font-bold text-xs text-emerald-400 font-mono shrink-0">
+            AD
           </div>
-          <div class="text-xs">
-            <div class="font-bold text-white">Sarah Connor</div>
-            <div class="text-slate-500">Pro Plan</div>
+          <div class="text-xs truncate">
+            <div class="font-semibold text-white truncate">admin@frootkit.dev</div>
+            <div class="text-slate-400 text-[11px]">Administrator</div>
           </div>
         </div>
-        <form action="/api/auth?action=logout" method="POST">
-          <button type="submit" class="text-slate-500 hover:text-rose-400 text-xs transition-colors" title="Sign out">
-            &rarr;
+        <form action="/api/auth?action=logout" method="POST" class="shrink-0 ml-2">
+          <button
+            type="submit"
+            class="p-1.5 rounded-md text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
+            title="Sign out"
+          >
+            <svg width="16" height="16" class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
           </button>
         </form>
       </div>

package/templates/auth/src/components/MetricCard.tsx

@@ -7,15 +7,17 @@ export interface MetricCardProps {
 
 export function MetricCard({ label, value, change, isPositive }: MetricCardProps) {
   return (
-    <div class="rounded-2xl border border-slate-800 bg-slate-900/40 p-6 backdrop-blur-sm">
-      <div class="text-xs font-medium text-slate-400 mb-2">{label}</div>
-      <div class="flex items-baseline justify-between">
-        <div class="text-2xl sm:text-3xl font-black text-white">{value}</div>
+    <div class="rounded-xl border border-[#1a2333] bg-[#0a0f18] p-5 flex flex-col justify-between">
+      <div class="text-[11px] font-mono uppercase tracking-wider text-slate-400 mb-3 font-semibold">
+        {label}
+      </div>
+      <div class="flex items-baseline justify-between gap-3">
+        <div class="text-2xl sm:text-3xl font-bold text-white font-mono tracking-tight">{value}</div>
         <span
-          class={`text-xs font-mono font-bold px-2 py-0.5 rounded-full ${
+          class={`text-xs font-mono font-semibold px-2 py-0.5 rounded-md border shrink-0 ${
             isPositive
-              ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
-              : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+              ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
+              : 'bg-rose-500/10 text-rose-400 border-rose-500/20'
           }`}
         >
           {change}

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

@@ -1,12 +1,14 @@
 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-2.5 font-bold 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">SaaS</span></span>
+        <a href="/" class="flex items-center gap-2.5 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 shrink-0">
+            <svg width="18" height="18" class="w-4.5 h-4.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </div>
+          <span>Froot<span class="text-emerald-400">Auth</span></span>
         </a>
 
         <nav class="flex items-center gap-6 text-sm font-medium">
@@ -18,9 +20,10 @@ export function Navbar() {
           </a>
           <a
             href="/signup"
-            class="px-4 py-2 rounded-xl bg-emerald-500 text-slate-950 font-bold hover:bg-emerald-400 transition-all shadow-md shadow-emerald-500/20"
+            class="px-4 py-2 rounded-lg bg-emerald-500 text-slate-950 font-semibold hover:bg-emerald-400 transition-colors text-xs flex items-center gap-1.5"
           >
-            Get Started
+            <span>Get Started</span>
+            <span>→</span>
           </a>
         </nav>
       </div>