create-frootkit 1.2.11 → 1.2.13

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

@@ -1,40 +1,33 @@
 export function DashboardNav() {
   return (
-    <aside class="w-60 border-r border-white/[0.08] bg-[#0d0e12] p-3 flex flex-col justify-between shrink-0 min-h-screen">
+    <aside class="w-60 border-r border-[#e6ebf1] bg-white p-3 flex flex-col justify-between shrink-0 min-h-screen">
       <div class="space-y-6">
-        {/* Workspace Brand / Org Selector */}
+        {/* Workspace Brand */}
         <div class="px-2 pt-1">
-          <div class="flex items-center justify-between p-1.5 rounded-lg hover:bg-white/[0.04] transition-colors cursor-pointer border border-transparent hover:border-white/[0.06]">
-            <div class="flex items-center gap-2.5 min-w-0">
-              <div class="w-6 h-6 rounded-md bg-indigo-500/15 border border-indigo-500/30 flex items-center justify-center text-indigo-400 shrink-0">
-                <svg style="width: 13px; height: 13px; min-width: 13px; min-height: 13px;" 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>
-              </div>
-              <div class="truncate">
-                <div class="text-xs font-semibold text-zinc-200 truncate">Orbit Workspace</div>
-                <div class="text-[10px] text-zinc-500 truncate">Production Cluster</div>
-              </div>
+          <a href="/" class="flex items-center gap-2.5 p-1.5 rounded-lg hover:bg-[#f6f9fc] transition-colors">
+            <div class="w-7 h-7 rounded-md bg-[#635bff]/10 border border-[#635bff]/20 flex items-center justify-center text-[#635bff] font-bold text-xs shrink-0">
+              FA
             </div>
-            <svg style="width: 12px; height: 12px; min-width: 12px; min-height: 12px;" class="text-zinc-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </div>
+            <div class="truncate">
+              <div class="text-xs font-semibold text-[#0a2540] truncate">Orbit Workspace</div>
+              <div class="text-[10px] text-[#425466] truncate">US-East Production</div>
+            </div>
+          </a>
         </div>
 
         {/* Navigation Sections */}
         <div class="space-y-4">
           <div>
-            <div class="px-2.5 mb-1.5 text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
+            <div class="px-2.5 mb-1.5 text-[11px] font-semibold text-[#425466]/70 uppercase tracking-wider">
               Platform
             </div>
             <nav class="space-y-0.5 text-xs font-medium">
               <a
                 href="/dashboard"
-                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md bg-white/[0.08] text-white border border-white/[0.08] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.06)]"
+                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md bg-[#635bff]/10 text-[#635bff] font-semibold"
               >
-                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-indigo-400">
-                  <svg style="width: 14px; height: 14px; min-width: 14px; min-height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-[#635bff]">
+                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <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" />
@@ -46,10 +39,10 @@ export function DashboardNav() {
 
               <a
                 href="/dashboard#analytics"
-                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors"
+                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[#425466] hover:text-[#0a2540] hover:bg-[#f6f9fc] transition-colors"
               >
-                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-zinc-500">
-                  <svg style="width: 14px; height: 14px; min-width: 14px; min-height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-[#425466]">
+                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
                   </svg>
                 </span>
@@ -58,10 +51,10 @@ export function DashboardNav() {
 
               <a
                 href="/dashboard#team"
-                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors"
+                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[#425466] hover:text-[#0a2540] hover:bg-[#f6f9fc] transition-colors"
               >
-                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-zinc-500">
-                  <svg style="width: 14px; height: 14px; min-width: 14px; min-height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-[#425466]">
+                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                     <circle cx="9" cy="7" r="4" />
                     <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
@@ -70,22 +63,15 @@ export function DashboardNav() {
                 </span>
                 <span>Members</span>
               </a>
-            </nav>
-          </div>
 
-          <div>
-            <div class="px-2.5 mb-1.5 text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
-              Developer
-            </div>
-            <nav class="space-y-0.5 text-xs font-medium">
               <a
                 href="/api/auth"
-                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors"
+                class="flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[#425466] hover:text-[#0a2540] hover:bg-[#f6f9fc] transition-colors"
               >
-                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-zinc-500">
-                  <svg style="width: 14px; height: 14px; min-width: 14px; min-height: 14px;" 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" />
+                <span class="w-4 h-4 flex items-center justify-center shrink-0 text-[#425466]">
+                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m21 2-2 2m-2-2 2 2" />
+                    <path d="M15.5 8.5 7 17l-4 1 1-4 8.5-8.5a2.12 2.12 0 0 1 3 3z" />
                   </svg>
                 </span>
                 <span>Session API</span>
@@ -95,30 +81,24 @@ export function DashboardNav() {
         </div>
       </div>
 
-      {/* User profile & Sign out */}
-      <div class="p-2 border-t border-white/[0.06] flex items-center justify-between">
-        <div class="flex items-center gap-2.5 min-w-0">
-          <div class="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center font-medium text-[11px] text-white shrink-0">
-            AD
-          </div>
-          <div class="text-xs min-w-0 truncate">
-            <div class="font-medium text-zinc-200 truncate">admin@frootkit.dev</div>
-            <div class="text-zinc-500 text-[10px] truncate">Owner</div>
+      {/* User Footer Profile */}
+      <div class="pt-3 border-t border-[#e6ebf1]">
+        <div class="flex items-center justify-between p-2 rounded-lg bg-[#f6f9fc] text-xs">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="w-7 h-7 rounded-full bg-[#635bff] text-white flex items-center justify-center text-xs font-semibold shrink-0">
+              AD
+            </div>
+            <div class="truncate">
+              <div class="font-medium text-[#0a2540] truncate">admin@frootkit.dev</div>
+              <div class="text-[10px] text-[#425466]">Administrator</div>
+            </div>
           </div>
-        </div>
-        <form action="/api/auth?action=logout" method="POST" class="shrink-0 ml-1">
-          <button
-            type="submit"
-            class="p-1.5 rounded-md text-zinc-500 hover:text-zinc-200 hover:bg-white/[0.06] transition-colors"
-            title="Sign out"
-          >
-            <svg style="width: 14px; height: 14px; min-width: 14px; min-height: 14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-              <polyline points="16 17 21 12 16 7" />
-              <line x1="21" y1="12" x2="9" y2="12" />
+          <a href="/login" class="text-[#425466] hover:text-[#cd3d64] p-1" title="Sign out">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
+          </a>
+        </div>
       </div>
     </aside>
   );

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

@@ -1,34 +1,24 @@
 export interface MetricCardProps {
   label: string;
-  value: string;
+  value: string | number;
   change: string;
-  isPositive: boolean;
-  context?: string;
+  isPositive?: boolean;
 }
 
-export function MetricCard({ label, value, change, isPositive, context = 'vs last 30d' }: MetricCardProps) {
+export function MetricCard({ label, value, change, isPositive = true }: MetricCardProps) {
   return (
-    <div class="rounded-xl border border-white/[0.08] bg-[#0f1117] p-4 sm:p-5 flex flex-col justify-between shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)] transition-all hover:border-white/[0.14]">
-      <div class="text-xs font-medium text-zinc-400 mb-3 tracking-normal">
-        {label}
+    <div class="rounded-lg border border-[#e6ebf1] bg-white p-5 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">
+        <span class="text-[13px] font-medium text-[#425466]">{label}</span>
       </div>
-      <div class="flex items-baseline justify-between gap-3">
-        <div class="text-2xl sm:text-3xl font-semibold text-white tracking-tight tabular-nums">
+
+      <div class="mt-3 flex items-baseline justify-between gap-2">
+        <span class="text-[28px] sm:text-[30px] font-mono font-light text-[#0a2540] tracking-tight">
           {value}
-        </div>
-        <span
-          class={`inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full border shrink-0 ${
-            isPositive
-              ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
-              : 'bg-rose-500/10 text-rose-400 border-rose-500/20'
-          }`}
-        >
-          <span>{isPositive ? '↑' : '↓'}</span>
-          <span>{change}</span>
         </span>
-      </div>
-      <div class="mt-2 text-[11px] text-zinc-500">
-        {context}
+        <span class={`bd ${isPositive ? 'bg-[#24b47e]/15 text-[#0e6245]' : 'bg-[#cd3d64]/10 text-[#cd3d64]'}`}>
+          {change}
+        </span>
       </div>
     </div>
   );

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

@@ -1,33 +1,30 @@
 export function Navbar() {
   return (
-    <header class="border-b border-white/[0.08] bg-[#08090a]/80 backdrop-blur-md sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
-        <a href="/" class="flex items-center gap-2.5 font-semibold text-zinc-100 text-sm tracking-tight group">
-          <div class="w-7 h-7 rounded-md bg-indigo-500/10 border border-indigo-500/25 flex items-center justify-center text-indigo-400 group-hover:border-indigo-400/50 transition-colors shrink-0">
-            <svg style="width: 14px; height: 14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-            </svg>
-          </div>
-          <span>Froot<span class="text-indigo-400">Auth</span></span>
+    <header class="absolute inset-x-0 top-0 z-30">
+      <nav class="mx-auto max-w-6xl px-6 flex items-center justify-between py-5 text-white">
+        <a href="/" class="text-[22px] font-semibold tracking-tight flex items-center gap-2">
+          <span>froot<span class="opacity-90">auth</span></span>
         </a>
 
-        <nav class="flex items-center gap-5 text-xs font-medium">
-          <a href="/dashboard" class="text-zinc-400 hover:text-zinc-200 transition-colors">
-            Dashboard
-          </a>
-          <a href="/login" class="text-zinc-400 hover:text-zinc-200 transition-colors">
-            Sign In
+        <div class="hidden items-center gap-8 text-[15px] font-medium md:flex">
+          <a href="#features" class="opacity-90 hover:opacity-100 transition-opacity">Product</a>
+          <a href="#developers" class="opacity-90 hover:opacity-100 transition-opacity">Developers</a>
+          <a href="#pricing" class="opacity-90 hover:opacity-100 transition-opacity">Pricing</a>
+          <a href="/dashboard" class="opacity-90 hover:opacity-100 transition-opacity">Dashboard</a>
+        </div>
+
+        <div class="flex items-center gap-4 text-[15px] font-medium">
+          <a href="/login" class="hidden opacity-90 hover:opacity-100 sm:block transition-opacity">
+            Sign in
           </a>
           <a
             href="/signup"
-            class="px-3 py-1.5 rounded-md bg-white text-zinc-950 font-medium hover:bg-zinc-200 transition-all text-xs shadow-sm flex items-center gap-1.5"
+            class="rounded-full bg-white px-4 py-1.5 text-[14px] text-[#635bff] font-medium shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] hover:bg-[#f6f9fc] transition-colors"
           >
-            <span>Get Started</span>
-            <span class="text-zinc-500">→</span>
+            Start free
           </a>
-        </nav>
-      </div>
+        </div>
+      </nav>
     </header>
   );
 }

package/templates/auth/src/styles.css

@@ -4,48 +4,178 @@
   --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: #6366f1;
-  --color-brand-hover: #4f46e5;
+  --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: #08090a;
-  --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;
+  --warn: #c98a00;
+
+  --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%;
 }
 
-/* Linear-style subtle card highlight */
-.linear-card {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
-  border-radius: 0.75rem;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+/* Stripe Design Tokens & Utility Classes */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding: 0.625rem 1.25rem;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: pointer;
+}
+
+.btn-p {
+  background-color: #635bff;
+  color: #ffffff;
+  box-shadow: var(--shadow-card);
+}
+.btn-p:hover {
+  background-color: #5249e6;
+}
+
+.btn-w {
+  background-color: #ffffff;
+  color: #635bff;
+  box-shadow: var(--shadow-card);
+}
+.btn-w:hover {
+  background-color: #f6f9fc;
+}
+
+.btn-o {
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  color: #0a2540;
+  box-shadow: var(--shadow-card);
+}
+.btn-o:hover {
+  background-color: #f6f9fc;
+}
+
+.btn-gl {
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  color: #ffffff;
+}
+.btn-gl:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.btn-s {
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  color: #0a2540;
+  box-shadow: var(--shadow-card);
+}
+.btn-s:hover {
+  background-color: #f6f9fc;
+}
+
+.btn-n {
+  background-color: #0a2540;
+  color: #ffffff;
+  box-shadow: var(--shadow-card);
+}
+.btn-n:hover {
+  background-color: #425466;
+}
+
+.bd {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.inp {
+  width: 100%;
+  border-radius: 8px;
+  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);
+}
+
+.card {
+  border-radius: 8px;
+  border: 1px solid #e6ebf1;
+  background-color: #ffffff;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-card);
+}
+
+.shadow-card {
+  box-shadow: var(--shadow-card);
+}
+
+.shadow-pop {
+  box-shadow: var(--shadow-pop);
+}
+
+.hero {
+  background: linear-gradient(160deg, #635bff 0%, #7a73ff 38%, #00d4ff 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
 }
 
-.linear-card:hover {
-  border-color: var(--border-strong);
+.rise {
+  animation: rise 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both;
 }
 
 /* Accessibility: Mandatory Reduced Motion */

package/templates/blog/src/app/blog/[slug]/page.tsx

@@ -9,66 +9,105 @@ export async function generateStaticParams() {
 export default async function BlogPostPage({ params }: { params?: { slug?: string } }) {
   const slug = params?.slug || 'welcome-to-frootkit';
   const post = (await getPostBySlug(slug)) || POSTS[0]!;
+  const relatedPosts = POSTS.filter((p) => p.slug !== post.slug).slice(0, 3);
 
   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="min-h-screen bg-white text-[#425466] flex flex-col justify-between">
       <Navbar />
 
-      <main class="max-w-3xl mx-auto px-6 py-12 flex-1 w-full">
-        <a
-          href="/"
-          class="inline-flex items-center gap-2 text-xs text-zinc-400 hover:text-white mb-8 transition-colors"
-        >
-          <span>←</span>
-          <span>Back to articles</span>
-        </a>
-
-        <header class="mb-10">
-          <div class="flex items-center gap-3 mb-4 text-xs">
-            <span class="px-2.5 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 font-medium text-[11px]">
-              {post.category}
-            </span>
-            <span class="text-zinc-600">•</span>
-            <span class="text-zinc-400">{post.readTime}</span>
-            <span class="text-zinc-600">•</span>
-            <span class="text-zinc-400">{post.date}</span>
-          </div>
-
-          <h1 class="text-3xl sm:text-4xl font-semibold text-white tracking-[-0.025em] mb-6 leading-tight">
+      {/* Article Gradient Header */}
+      <header
+        class="relative overflow-hidden text-white"
+        style="background: linear-gradient(145deg, #635bff, #00d4ff)"
+      >
+        <div class="mx-auto max-w-3xl px-6 py-14 md:py-20">
+          <a href="/#articles" class="text-[14px] text-white/80 hover:text-white transition-colors">
+            ← All articles
+          </a>
+          <span class="bd ml-3 bg-white/15 text-white">{post.category}</span>
+          <h1 class="mt-5 text-[34px] font-light leading-[1.15] tracking-tight md:text-[48px]">
             {post.title}
           </h1>
-
-          <div class="flex items-center gap-3.5 p-3.5 rounded-xl bg-[#0f1117] border border-white/[0.08] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]">
-            <img
-              src={post.author.avatar}
-              alt={post.author.name}
-              class="w-9 h-9 rounded-full object-cover border border-white/[0.1]"
-            />
-            <div>
-              <div class="font-medium text-white text-xs">{post.author.name}</div>
-              <div class="text-[11px] text-zinc-400">{post.author.role}</div>
-            </div>
+          <p class="mt-4 text-[18px] font-light text-white/90">
+            {post.summary}
+          </p>
+          <div class="mt-6 flex items-center gap-3">
+            <span class="grid h-10 w-10 text-[13px] shrink-0 place-items-center rounded-full font-medium text-white bg-[#0a2540]">
+              {post.author.name.split(' ').map((n) => n[0]).join('')}
+            </span>
+            <span class="text-[14px]">
+              <b class="block">{post.author.name}</b>
+              <span class="text-white/80">{post.author.role} · {post.date} · {post.readTime}</span>
+            </span>
           </div>
-        </header>
+        </div>
+      </header>
 
-        <article class="prose max-w-none space-y-6 text-zinc-300 leading-relaxed text-base">
+      {/* Article Content */}
+      <main class="mx-auto max-w-3xl px-6 py-12 flex-1 w-full">
+        <div class="space-y-6">
           {post.content.map((paragraph, idx) => (
-            <p key={idx}>{paragraph}</p>
+            <p key={idx} class="prose-p">{paragraph}</p>
           ))}
-        </article>
 
-        <div class="mt-12 pt-8 border-t border-white/[0.08] flex flex-wrap gap-2">
-          {post.tags.map((tag) => (
-            <span
-              key={tag}
-              class="px-2.5 py-1 rounded-full bg-white/[0.04] text-xs font-medium text-zinc-300 border border-white/[0.06]"
-            >
-              {tag}
-            </span>
-          ))}
+          <blockquote class="my-8 border-l-4 border-[#635bff] pl-5 text-[22px] font-light leading-8 text-[#0a2540]">
+            “If a request can be repeated, it must be safe to repeat.”
+          </blockquote>
+
+          <div class="my-6 flex gap-3 rounded-md border border-[#635bff]/20 bg-[#635bff]/5 p-4 text-[15px] text-[#0a2540]">
+            <b class="text-[#635bff]">Note:</b>
+            <span>SSR renders directly with sub-millisecond execution latency on FrootKit.</span>
+          </div>
+        </div>
+
+        {/* Feedback Row */}
+        <div class="mt-10 flex flex-wrap items-center gap-3 border-t border-[#e6ebf1] pt-6 text-sm">
+          <span class="text-[#425466]">Was this useful?</span>
+          <button type="button" class="btn btn-s text-xs py-1 px-3">Yes</button>
+          <button type="button" class="btn btn-s text-xs py-1 px-3">No</button>
+        </div>
+
+        {/* Author Bio Card */}
+        <div class="mt-8 flex gap-4 rounded-lg bg-[#f6f9fc] p-5 border border-[#e6ebf1]">
+          <span class="grid h-12 w-12 text-[15px] shrink-0 place-items-center rounded-full font-medium text-white bg-[#635bff]">
+            {post.author.name.split(' ').map((n) => n[0]).join('')}
+          </span>
+          <div>
+            <b class="text-[#0a2540]">{post.author.name}</b>
+            <p class="text-[14px] text-[#425466] mt-0.5">
+              {post.author.role} at FrootKit. Writes about how high-throughput systems scale with zero hydration bottlenecks.
+            </p>
+          </div>
         </div>
       </main>
 
+      {/* Keep Reading */}
+      <section class="bg-[#f6f9fc] py-14 border-t border-[#e6ebf1]">
+        <div class="mx-auto max-w-6xl px-6">
+          <h2 class="text-[26px] font-light text-[#0a2540]">Keep reading</h2>
+          <div class="mt-6 grid gap-6 sm:grid-cols-3">
+            {relatedPosts.map((r) => (
+              <a
+                key={r.slug}
+                href={`/blog/${r.slug}`}
+                class="group block rounded-lg bg-white p-3 shadow-[0_2px_5px_-1px_rgba(50,50,93,0.25),0_1px_3px_-1px_rgba(0,0,0,0.3)] transition hover:shadow-[0_13px_27px_-5px_rgba(50,50,93,0.25),0_8px_16px_-8px_rgba(0,0,0,0.3)] border border-[#e6ebf1]"
+              >
+                <div
+                  class="aspect-[16/10] overflow-hidden rounded-lg p-3 text-white flex flex-col justify-end"
+                  style="background: linear-gradient(145deg, #0a2540, #635bff)"
+                >
+                  <span class="font-mono text-[11px] opacity-75">{r.readTime}</span>
+                </div>
+                <h3 class="mt-3 px-1 font-medium leading-6 text-[#0a2540] group-hover:text-[#635bff] transition-colors">
+                  {r.title}
+                </h3>
+                <p class="px-1 pb-1 text-[13px] text-[#425466] mt-1">{r.readTime}</p>
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+
       <Footer />
     </div>
   );