@ramme-io/create-app 1.3.18 → 2.0.0-alpha.1

package/template/src/features/onboarding/pages/PrototypeGallery.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { Card, Icon, Badge, Button } from '@ramme-io/ui';
+
+const VIBES = [
+  {
+    id: 'cyber',
+    name: 'Neon Protocol',
+    prompt: 'Brutalist cyberpunk: sharp edges, terminal fonts, and high-contrast phosphors.',
+    theme: {
+      bg: '#050505',
+      accent: '#39FF14',
+      card: '#0a0a0a',
+      text: '#FFFFFF',
+      radius: '0px',
+      border: '1px solid rgba(57, 255, 20, 0.2)',
+      glass: 'none'
+    },
+    icon: 'terminal'
+  },
+  {
+    id: 'minimal',
+    name: 'Swiss Archive',
+    prompt: 'Bauhaus-inspired: bone white, slate type, and rigid grid layouts.',
+    theme: {
+      bg: '#F2F2F2',
+      accent: '#000000',
+      card: '#FFFFFF',
+      text: '#000000',
+      radius: '8px',
+      border: '1px solid rgba(0,0,0,0.1)',
+      glass: 'none'
+    },
+    icon: 'type'
+  },
+  {
+    id: 'space',
+    name: 'Deep Orbit',
+    prompt: 'Telemetry glass: translucent cobalt, blurred depth, and rounded data nodes.',
+    theme: {
+      bg: '#020617',
+      accent: '#38bdf8',
+      card: 'rgba(15, 23, 42, 0.3)',
+      text: '#F8FAFC',
+      radius: '32px',
+      border: '1px solid rgba(56, 189, 248, 0.2)',
+      glass: 'blur(12px) saturate(150%)' // Added depth
+    },
+    icon: 'orbit'
+  }
+];
+
+export const PrototypeGallery: React.FC = () => {
+  const [activeVibe, setActiveVibe] = useState(VIBES[0]);
+
+  return (
+    <div className="space-y-12 py-12">
+      <div className="text-center space-y-4">
+        <h3 className="text-4xl font-black tracking-tighter uppercase">One Prototype. Infinite Vibes.</h3>
+        <p className="text-muted-foreground max-w-xl mx-auto font-medium">
+          In Ramme, you don't pick a theme. You prompt a <span className="text-foreground">Design DNA</span> that morphs your entire kernel in real-time.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
+        
+        {/* --- SELECTOR --- */}
+        <div className="lg:col-span-4 space-y-3">
+          {VIBES.map((vibe) => (
+            <button
+              key={vibe.id}
+              onClick={() => setActiveVibe(vibe)}
+              className={`w-full text-left p-5 rounded-2xl border transition-all duration-500 group relative overflow-hidden ${
+                activeVibe.id === vibe.id 
+                ? 'border-primary bg-primary/10 shadow-2xl translate-x-3' 
+                : 'border-transparent opacity-40 hover:opacity-100 hover:bg-white/5'
+              }`}
+            >
+              <div className="flex items-center gap-4 relative z-10">
+                <div className={`p-2 rounded-lg transition-colors ${activeVibe.id === vibe.id ? 'bg-primary text-black' : 'bg-muted'}`}>
+                  <Icon name={vibe.icon as any} size={18} />
+                </div>
+                <div>
+                  <div className="font-bold text-sm text-foreground">{vibe.name}</div>
+                  <div className="text-[10px] opacity-50 font-bold uppercase tracking-widest italic">Signal Locked</div>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* --- DYNAMIC SIMULATION --- */}
+        <div className="lg:col-span-8 relative group">
+          <div 
+            className="absolute -inset-10 blur-[120px] opacity-20 transition-colors duration-1000"
+            style={{ backgroundColor: activeVibe.theme.accent }}
+          />
+
+          <Card 
+            className="relative overflow-hidden shadow-2xl transition-all duration-1000 border-none"
+            style={{ 
+              backgroundColor: activeVibe.theme.bg, 
+              borderRadius: activeVibe.theme.radius,
+            }}
+          >
+            {/* Header Chrome */}
+            <div className="h-12 border-b border-white/5 flex items-center px-6 bg-black/20 justify-between">
+              <div className="flex gap-2">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/20" />
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/20" />
+              </div>
+              <span className="text-[9px] font-mono opacity-30 uppercase tracking-[0.3em]">Kernel Simulation</span>
+            </div>
+
+<div className="p-10 space-y-10">
+  {/* --- DNA BADGE --- */}
+  <div className="flex items-center gap-3">
+     <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+     <Badge 
+       variant="outline" 
+       className="text-[10px] font-mono py-1 px-4 border-white/10 backdrop-blur-md"
+       style={{ 
+         backgroundColor: activeVibe.id === 'minimal' ? 'rgba(0,0,0,0.05)' : 'rgba(0,0,0,0.4)',
+         color: activeVibe.theme.text 
+       }}
+     >
+       DNA: {activeVibe.id}
+     </Badge>
+     <div className="h-px flex-1 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div 
+      className="p-8 transition-all duration-1000 border"
+      style={{ 
+        backgroundColor: activeVibe.theme.card, 
+        borderRadius: activeVibe.theme.radius,
+        borderColor: activeVibe.id === 'minimal' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)',
+        backdropFilter: activeVibe.id === 'space' ? 'blur(16px)' : 'none'
+      }}
+    >
+       <div className="text-4xl font-black mb-2 transition-colors duration-1000" style={{ color: activeVibe.theme.accent }}>
+         88.4
+       </div>
+       <div className="text-[10px] font-bold uppercase tracking-widest opacity-60 transition-colors duration-1000" style={{ color: activeVibe.theme.text }}>
+         Metric Velocity
+       </div>
+       
+       {/* Metric Bars */}
+       <div className="flex items-end gap-1 mt-6 h-12">
+          {[40, 90, 60, 100, 75, 85].map((h, i) => (
+            <div 
+              key={i} 
+              className="flex-1 transition-all duration-1000" 
+              style={{ 
+                height: `${h}%`, 
+                backgroundColor: activeVibe.id === 'minimal' ? '#000000' : activeVibe.theme.accent, 
+                opacity: 0.2 + (i * 0.15),
+                borderRadius: activeVibe.id === 'cyber' ? '0px' : '99px'
+              }} 
+            />
+          ))}
+       </div>
+    </div>
+
+    <div className="flex flex-col justify-between py-2">
+       <div className="space-y-4">
+          <h4 className="text-2xl font-black transition-colors duration-1000" style={{ color: activeVibe.theme.text }}>
+            Simulation Active
+          </h4>
+          {/* CRITICAL: Text color fix for Swiss Archive prompt */}
+          <p className="text-xs leading-relaxed italic transition-colors duration-1000" style={{ color: activeVibe.theme.text, opacity: 0.7 }}>
+            "{activeVibe.prompt}"
+          </p>
+       </div>
+       
+       <Button 
+        className="w-full h-14 font-black text-xs uppercase tracking-[0.2em] transition-all duration-1000 border-none shadow-xl"
+        style={{ 
+          backgroundColor: activeVibe.theme.accent, 
+          color: activeVibe.id === 'minimal' ? '#FFFFFF' : '#000000',
+          borderRadius: activeVibe.id === 'cyber' ? '0px' : '99px'
+        }}
+       >
+         Deploy Vibe
+       </Button>
+    </div>
+  </div>
+</div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};

package/template/src/features/onboarding/pages/RammeFeatures.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Card, 
+  Icon, 
+  SectionHeader, 
+  Badge, 
+  Button 
+} from '@ramme-io/ui';
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+import { RammeCodeBlock } from '../../../components/RammeCodeBlock';
+
+const RammeFeatures: React.FC = () => {
+  const navigate = useNavigate();
+
+  const primaryColor = 'rgb(var(--app-primary-color))';
+  const successColor = 'rgb(var(--app-success-color))';
+  const infoColor = 'rgb(var(--app-info-color))';
+  const secondaryColor = 'rgb(var(--app-secondary-color))';
+
+  return (
+    <StandardPageLayout>
+      <div className="max-w-5xl mx-auto space-y-32 pb-40 animate-in fade-in duration-1000">
+        
+        {/* --- HERO: THE RADICAL TRANSPARENCY --- */}
+        <header className="pt-24 space-y-10">
+          <Badge variant="primary" className="uppercase tracking-[0.4em] text-[10px] px-4 py-2 border-white/10 bg-white/5">
+            Core Engine v4.2 // Open Protocol
+          </Badge>
+          <div className="space-y-6">
+            <h1 className="text-7xl md:text-[120px] font-black tracking-[-0.06em] leading-[0.8] text-foreground uppercase italic">
+              Code is the <br/>
+              <span style={{ color: primaryColor }}>Source of Truth.</span>
+            </h1>
+            <p className="text-2xl md:text-3xl text-muted-foreground max-w-3xl leading-tight font-medium">
+              Ramme is a local-first production engine. No cloud silos, no proprietary formats—just raw <span className="text-foreground border-b border-white/20">React, TypeScript, and your imagination.</span>
+            </p>
+          </div>
+        </header>
+
+        {/* --- PILLAR 01: THE PERSISTENCE KERNEL --- */}
+        <section className="relative group">
+          <div className="absolute -left-24 -top-12 text-[15rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.05] transition-opacity duration-700" style={{ color: successColor }}>01</div>
+          <SectionHeader title="The Persistence Kernel" icon={"database" as any} />
+          
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mt-12">
+            <div className="lg:col-span-7 space-y-8">
+               <div className="space-y-4">
+                 <h4 className="text-4xl font-black tracking-tight uppercase italic text-foreground">Living Memory</h4>
+                 <p className="text-xl leading-relaxed text-muted-foreground">
+                  Traditional prototypes "reset" when you refresh. Ramme’s kernel keeps your data alive by syncing state directly to the browser. Type once, keep it forever.
+                 </p>
+               </div>
+               <div className="rounded-3xl overflow-hidden border border-white/5 shadow-2xl">
+                 <RammeCodeBlock 
+                    variant="success"
+                    title="persistent_state.ts"
+                    language="tsx"
+                    code={`// Data lives in the "Living Memory" automatically\nconst [cart, setCart] = usePersistedState('shopping_cart', []);`}
+                 />
+               </div>
+            </div>
+            
+            <div className="lg:col-span-5 grid grid-cols-1 gap-4">
+              <Card className="p-10 bg-white/[0.03] border-white/5 backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-white/[0.06] hover:border-white/20 transition-all group">
+                <Icon name={"refresh-cw" as any} style={{ color: successColor }} size={40} className="group-hover:rotate-180 transition-transform duration-700" />
+                <div className="mt-8 space-y-2">
+                  <h5 className="font-black text-xl uppercase italic text-foreground tracking-tight">Hot-State Reload</h5>
+                  <p className="text-sm text-muted-foreground leading-relaxed">Change code and watch the UI update <strong>without losing your current scroll position or form data.</strong></p>
+                </div>
+              </Card>
+              <Card className="p-10 bg-white/[0.03] border-white/5 backdrop-blur-md rounded-[2.5rem] flex flex-col justify-between hover:bg-white/[0.06] hover:border-white/20 transition-all group">
+                <Icon name={"hard-drive" as any} style={{ color: successColor }} size={40} />
+                <div className="mt-8 space-y-2">
+                  <h5 className="font-black text-xl uppercase italic text-foreground tracking-tight">JSON Snapshots</h5>
+                  <p className="text-sm text-muted-foreground leading-relaxed">Export your entire prototype’s current state as a single JSON file to share specific user scenarios with teammates.</p>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* --- PILLAR 02: THE VIBE ENGINE --- */}
+        <section className="relative group">
+          <div className="absolute -left-24 -top-12 text-[15rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.05] transition-opacity duration-700" style={{ color: primaryColor }}>02</div>
+          <SectionHeader title="Evolutionary Aesthetics" icon={"sparkles" as any} />
+          
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mt-12 items-center">
+            <div className="order-2 lg:order-1">
+              <Card className="p-1.5 bg-gradient-to-br from-white/10 to-transparent rounded-[3.5rem] shadow-3xl overflow-hidden group/simulation">
+                 <div className="bg-[#0a0a0a] p-12 rounded-[3.2rem] space-y-8 border border-white/5">
+                    <div className="flex justify-between items-center">
+                       <Badge className="bg-primary/10 text-primary border-primary/20 font-mono text-[10px]">DNA_INJECTION_ACTIVE</Badge>
+                       <div className="flex gap-2">
+                          <div className="h-2 w-2 rounded-full bg-red-500/20" />
+                          <div className="h-2 w-2 rounded-full bg-amber-500/20" />
+                          <div className="h-2 w-2 rounded-full bg-primary/40 animate-pulse" />
+                       </div>
+                    </div>
+                    <div className="p-8 bg-white/5 rounded-3xl border border-white/10 italic text-lg leading-relaxed text-primary/80 font-medium">
+                      "Morph the system into a high-density tactical interface. Use monospace fonts, slate-900 backgrounds, and neon-cyan borders."
+                    </div>
+                    <Button className="w-full bg-primary text-black font-black uppercase tracking-[0.2em] h-16 rounded-2xl hover:brightness-110 transition-all shadow-lg">
+                       Apply Vibe Shift
+                    </Button>
+                 </div>
+              </Card>
+            </div>
+            
+            <div className="space-y-8 order-1 lg:order-2">
+              <h4 className="text-5xl font-black text-foreground leading-[0.9] uppercase italic tracking-tighter">The Vibe <br/> Engine.</h4>
+              <p className="text-xl text-muted-foreground leading-relaxed font-medium">
+                Stop fighting with CSS. Ramme’s Vibe Engine uses AI to map natural language onto your global design tokens. 
+              </p>
+              <ul className="space-y-5">
+                {[
+                  { label: 'Fluid Typography', desc: 'Type that scales perfectly across 4k and mobile.' },
+                  { label: 'Dynamic Spacing', desc: 'Intentional white space that breathes with your content.' },
+                  { label: 'Layered Glass', desc: 'Instant depth with real-time blur and refraction.' }
+                ].map((item, i) => (
+                  <li key={i} className="flex gap-4 items-start group/list">
+                    <div className="mt-2 h-1.5 w-1.5 rounded-full bg-primary group-hover/list:scale-150 transition-transform" />
+                    <div>
+                      <span className="font-black uppercase text-xs tracking-[0.2em] text-foreground">{item.label}</span>
+                      <p className="text-sm text-muted-foreground mt-1 leading-snug">{item.desc}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* --- PILLAR 03: ARCHITECTURAL FREEDOM --- */}
+        <section className="relative group">
+          <div className="absolute -left-24 -top-12 text-[15rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.05] transition-opacity duration-700" style={{ color: secondaryColor }}>03</div>
+          <SectionHeader title="Architectural Freedom" icon={"layout" as any} />
+          
+          <div className="mt-12 space-y-16">
+            <div className="max-w-3xl">
+              <h4 className="text-4xl font-black uppercase mb-6 italic text-foreground tracking-tight">No Ecosystem Lock-In.</h4>
+              <p className="text-xl text-muted-foreground leading-relaxed">
+                Ramme isn't a cloud sandbox. Everything you build here is standard code that can be moved to any host or production environment instantly.
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+               {[
+                 { title: "Smart Grids", desc: "Dashboards that don't break. Auto-wrapping components that handle data density.", icon: "grid", color: secondaryColor },
+                 { title: "Atomic Shell", desc: "Pre-engineered sidebars and navs that handle their own logic and state.", icon: "sidebar", color: infoColor },
+                 { title: "Mock Interceptors", desc: "Simulate real API traffic for production-ready testing without the backend.", icon: "terminal", color: primaryColor }
+               ].map((feature, i) => (
+                 <Card key={i} className="p-10 border-white/5 bg-white/[0.03] backdrop-blur-md hover:bg-white/[0.08] hover:border-white/20 transition-all rounded-[3rem] group/card">
+                    <Icon name={feature.icon as any} style={{ color: feature.color }} className="mb-8 group-hover/card:scale-110 transition-transform duration-500" size={32} />
+                    <h5 className="font-black uppercase text-lg mb-3 italic text-foreground tracking-tight">{feature.title}</h5>
+                    <p className="text-sm text-muted-foreground leading-relaxed font-medium">{feature.desc}</p>
+                 </Card>
+               ))}
+            </div>
+          </div>
+        </section>
+
+        {/* --- THE MANIFESTO FOOTER --- */}
+        <footer className="pt-32 text-center border-t border-white/5 relative">
+          <div className="space-y-12">
+            <h2 className="text-8xl md:text-[140px] font-black tracking-[-0.06em] text-foreground leading-[0.8] uppercase italic">
+              Build <br/> <span style={{ color: primaryColor }}>Better.</span>
+            </h2>
+            <div className="flex flex-col sm:flex-row justify-center items-center gap-6">
+              <Button 
+                size="lg" 
+                className="px-20 h-24 text-2xl font-black rounded-full shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:scale-105 transition-transform"
+                style={{ backgroundColor: primaryColor, color: '#000' }}
+                onClick={() => navigate('/dashboard')}
+              >
+                Launch Simulation
+              </Button>
+              <Button 
+                variant="ghost"
+                className="text-foreground/60 hover:text-foreground font-black uppercase tracking-[0.3em] text-xs transition-colors group"
+                onClick={() => navigate('/tutorial')}
+              >
+                Read the Manifesto
+                <Icon name="arrow-right" size={16} className="ml-2 group-hover:translate-x-2 transition-transform" />
+              </Button>
+            </div>
+            <p className="font-mono text-[9px] text-foreground/20 tracking-[0.4em] uppercase">v.4.2.0-STABLE // SYSTEM READY</p>
+          </div>
+        </footer>
+
+      </div>
+    </StandardPageLayout>
+  );
+};
+
+export default RammeFeatures;

package/template/src/features/onboarding/pages/RammeTutorial.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Card, 
+  Icon, 
+  SectionHeader, 
+  Badge, 
+  Button 
+} from '@ramme-io/ui';
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+import { RammeCodeBlock } from '../../../components/RammeCodeBlock';
+
+const RammeTutorial: React.FC = () => {
+  const navigate = useNavigate();
+
+  const primaryColor = 'rgb(var(--app-primary-color))';
+  const successColor = 'rgb(var(--app-success-color))';
+  const infoColor = 'rgb(var(--app-info-color))';
+  const secondaryColor = 'rgb(var(--app-secondary-color))';
+
+  return (
+    <StandardPageLayout>
+      <div className="max-w-5xl mx-auto space-y-32 pb-32 animate-in fade-in duration-700">
+        
+        {/* --- HERO SECTION --- */}
+        <div className="text-center space-y-8 pt-20">
+          <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-4 py-1.5 border-primary/20 bg-primary/5">
+            The Creator's Handbook
+          </Badge>
+          <h1 className="text-7xl md:text-[110px] font-black tracking-[-0.02em] leading-[0.8] text-foreground uppercase">
+            Build the <br/>
+            <span style={{ color: primaryColor }}>Undeniable.</span>
+          </h1>
+          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed font-medium">
+            Stop presenting flat images. Master the three pillars of Ramme: <span className="text-foreground">Structure</span>, <span className="text-foreground">State</span>, and <span className="text-foreground">Style</span>.
+          </p>
+        </div>
+
+        {/* --- STEP 01: THE CANVAS --- */}
+        <section className="relative group">
+          <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: infoColor }}>01</div>
+          <SectionHeader title="The Infinite Canvas" icon={"layout" as any} />
+          <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 mt-12">
+            <div className="lg:col-span-3 space-y-6">
+               <h4 className="text-3xl font-black tracking-tight uppercase">Standardize Your Layout</h4>
+               <p className="text-lg leading-relaxed text-muted-foreground">
+                In Ramme, your "screens" are just containers. Drop your elements inside the <code style={{ color: infoColor }} className="font-bold italic px-2 py-0.5 bg-info/5 border border-info/10 rounded">StandardPageLayout</code>.
+               </p>
+               <div className="rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+                 <RammeCodeBlock 
+                    variant="info"
+                    title="App.tsx"
+                    language="tsx"
+                    code={`<StandardPageLayout>\n  <h1>Welcome to My Product</h1>\n  <p>Your journey starts here...</p>\n</StandardPageLayout>`}
+                 />
+               </div>
+            </div>
+            <div className="lg:col-span-2">
+              <Card className="p-8 bg-black/40 border-white/5 h-full rounded-[2rem] flex flex-col justify-center">
+                <Icon name={"maximize" as any} style={{ color: infoColor }} className="mb-6" size={40} />
+                <h4 className="font-black mb-3 text-foreground text-xl uppercase tracking-tight">Auto-Responsive</h4>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  Every component is built with <span className="text-foreground font-semibold underline decoration-info/30">Fluid Dynamics</span>. Your design will scale from mobile to ultra-wide without a single media query.
+                </p>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* --- STEP 02: THE MEMORY --- */}
+        <section className="relative group">
+          <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: successColor }}>02</div>
+          <SectionHeader title="Interactive Memory" icon={"brain" as any} />
+          <div className="space-y-8 mt-12">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+              <div className="space-y-6">
+                <h4 className="text-3xl font-black tracking-tight uppercase">Persistence by Default</h4>
+                <p className="text-lg text-muted-foreground leading-relaxed">
+                  Most prototypes "break" when you refresh. Ramme uses <span className="text-foreground font-bold underline decoration-success/30">Living Memory</span> to ensure data survives refreshes and page hops.
+                </p>
+                <div className="flex items-start gap-5 p-6 rounded-[2rem] border bg-success/5 border-success/10">
+                   <Icon name={"save" as any} style={{ color: successColor }} size={28} className="mt-1" />
+                   <div>
+                      <div className="font-black text-foreground uppercase text-xs tracking-widest mb-1">Local-First Persistence</div>
+                      <p className="text-xs text-muted-foreground leading-relaxed">The <code className="text-success font-mono font-bold">usePersistedState</code> hook auto-syncs with the Ramme Kernel instantly.</p>
+                   </div>
+                </div>
+              </div>
+              <div className="rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+                <RammeCodeBlock 
+                  variant="success"
+                  title="ProfileSetup.tsx"
+                  language="tsx"
+                  code={`// This hook handles the logic AND the database\nconst [name, setName] = usePersistedState('user_name', '');`}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* --- STEP 03: THE SMART GRID --- */}
+        <section className="relative group">
+          <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: secondaryColor }}>03</div>
+          <SectionHeader title="Dynamic Smart Grids" icon={"grid" as any} />
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 mt-12">
+             <div className="lg:col-span-2 rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
+                <RammeCodeBlock 
+                  variant="secondary"
+                  title="Dashboard.tsx"
+                  language="tsx"
+                  code={`<SmartGrid columns={3}>\n  <MetricCard label="Velocity" value="98%" />\n  <MetricCard label="Latency" value="12ms" />\n  <MetricCard label="Uptime" value="100%" />\n</SmartGrid>`}
+                />
+             </div>
+             <div className="space-y-6 flex flex-col justify-center">
+               <h4 className="text-3xl font-black tracking-tight uppercase">Data-Driven Layouts</h4>
+               <p className="text-md text-muted-foreground leading-relaxed">
+                 Use the <span style={{ color: secondaryColor }} className="font-bold">SmartGrid</span> to create layouts that auto-arrange based on information density.
+               </p>
+               <Button variant="ghost" className="text-secondary p-0 h-auto hover:bg-transparent font-black uppercase text-[10px] tracking-widest group/btn" onClick={() => navigate('/dashboard')}>
+                 View Dashboard Sample 
+                 <Icon name="external-link" size={12} className="ml-2 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-transform" />
+               </Button>
+             </div>
+          </div>
+        </section>
+
+        {/* --- STEP 04: THE VIBE ENGINE --- */}
+        <section className="relative group">
+          <div className="absolute -left-20 -top-10 text-[12rem] font-black opacity-[0.03] italic select-none pointer-events-none group-hover:opacity-[0.06] transition-opacity duration-700" style={{ color: primaryColor }}>04</div>
+          <SectionHeader title="AI Vibe Engine" icon={"sparkles" as any} />
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-12">
+            <Card className="p-10 bg-black/40 border-white/5 flex flex-col gap-8 rounded-[3rem] shadow-2xl relative overflow-hidden group/card">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[100px] pointer-events-none" />
+              <div className="space-y-4">
+                <div className="text-[10px] font-black opacity-30 uppercase tracking-[0.3em] text-foreground">Global DNA Prompting</div>
+                <div className="p-6 bg-black/60 rounded-2xl border border-white/10 italic text-sm leading-relaxed" style={{ color: primaryColor }}>
+                  "Redesign the entire OS to feel like a high-altitude cockpit: muted slates, tactical orange accents, and blurred glass depth."
+                </div>
+              </div>
+              <Button 
+                className="w-full h-16 rounded-full bg-primary text-black text-sm font-black uppercase tracking-[0.2em] shadow-xl hover:scale-[1.02] transition-transform"
+                onClick={() => navigate('/settings/theme')}
+              >
+                Launch Theme Engine
+              </Button>
+            </Card>
+            <div className="space-y-6 flex flex-col justify-center pl-4">
+              <h4 className="text-4xl font-black text-foreground leading-tight uppercase">No more <br/> "Wireframes"</h4>
+              <p className="text-lg text-muted-foreground leading-relaxed">
+                Wireframes fail to capture emotion. Use the <span className="text-foreground font-bold border-b-2 border-primary/20">Vibe Engine</span> to apply visual treatments in a single click.
+              </p>
+              <div className="flex gap-4 items-center pt-4">
+                 <div className="h-8 w-8 rounded-full shadow-lg border-2 border-white/20" style={{ backgroundColor: primaryColor }} />
+                 <div className="h-8 w-8 rounded-full shadow-lg border-2 border-white/20" style={{ backgroundColor: secondaryColor }} />
+                 <div className="h-8 w-8 rounded-full shadow-lg border-2 border-white/20" style={{ backgroundColor: infoColor }} />
+                 <span className="text-[10px] font-black uppercase tracking-widest opacity-30 ml-2">Active DNA Palette</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* --- FINISH LINE --- */}
+        <div className="pt-32 text-center border-t border-white/5 relative">
+          <div className="space-y-8 relative z-10">
+            <h2 className="text-7xl md:text-9xl font-black tracking-[-0.02em] text-foreground leading-[0.8] uppercase italic">
+              Your Studio <br/> Is Ready.
+            </h2>
+            <p className="text-muted-foreground mb-12 max-w-lg mx-auto text-xl leading-relaxed font-medium">
+              You have the Shell, the Memory, and the Vibe. <br/>
+              <span className="text-foreground">What will you build?</span>
+            </p>
+            <Button 
+                size="lg" 
+                className="px-20 h-24 text-3xl font-black rounded-full shadow-[0_0_50px_rgba(var(--app-primary-color),0.2)] hover:scale-105 transition-transform"
+                style={{ backgroundColor: primaryColor, color: '#000' }}
+                onClick={() => navigate('/dashboard')}
+              >
+                Enter Dashboard
+              </Button>
+          </div>
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] blur-[150px] rounded-full opacity-[0.07] pointer-events-none" style={{ backgroundColor: primaryColor }} />
+        </div>
+
+      </div>
+    </StandardPageLayout>
+  );
+};
+
+export default RammeTutorial;