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

package/index.js

@@ -6,29 +6,26 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const projectPath = process.argv[2];
-if (!projectPath) {
+const projectName = process.argv[2];
+if (!projectName) {
   console.error('Error: Please specify the project directory.');
+  console.log('  Usage: npx @ramme-io/create-app <project-name>');
   process.exit(1);
 }
 
 const templatePath = path.resolve(__dirname, 'template');
-const destinationPath = path.resolve(process.cwd(), projectPath);
+const destinationPath = path.resolve(process.cwd(), projectName);
 
 // THE STABILITY PACT: Hardcoded target versions for the public release
 const RELEASE_VERSION = "^1.4.5";
 
 try {
-  console.log(`🚀 Creating new Ramme app in: ${destinationPath}`);
+  console.log(`\n🚀 Creating new Ramme app in: ${destinationPath}`);
   
-  // 1. Clean destination and copy template
-  if (fs.existsSync(destinationPath)) {
-    console.warn("⚠️  Directory exists. Overwriting...");
-  }
+  // 1. Copy template
   fs.copySync(templatePath, destinationPath);
 
-  // 2. Identify package.json
-  // We check for both names to ensure we catch it regardless of NPM filters
+  // 2. Identify package.json (handle renamed source)
   let targetPkgPath = path.join(destinationPath, 'package.json');
   const fallbackPkgPath = path.join(destinationPath, 'pkg.json');
 
@@ -38,21 +35,18 @@ try {
 
   // 3. HARDEN SUPPLY CHAIN (Force Injection)
   if (fs.existsSync(targetPkgPath)) {
-    console.log("🛠️  Hardening Supply Chain...");
     const pkg = fs.readJsonSync(targetPkgPath);
     
-    // Direct Overwrite - No logic, just results.
+    // Direct Overwrite
     pkg.dependencies["@ramme-io/kernel"] = RELEASE_VERSION;
     pkg.dependencies["@ramme-io/ui"] = RELEASE_VERSION;
     
-    // Clean up any internal metadata
+    // Cleanup
     delete pkg.devDependencies["@ramme-io/kernel"];
     delete pkg.devDependencies["@ramme-io/ui"];
 
     fs.writeJsonSync(targetPkgPath, pkg, { spaces: 2 });
-    console.log(`✅ Pinned dependencies to: ${RELEASE_VERSION}`);
-  } else {
-    throw new Error("Critical Failure: package.json not found in template.");
+    console.log(`✅ Hardened Supply Chain: Pinned to ${RELEASE_VERSION}`);
   }
 
   // 4. Handle Gitignore
@@ -61,7 +55,14 @@ try {
     fs.renameSync(gitignorePath, path.join(destinationPath, '.gitignore'));
   }
 
-  console.log(`\n✨ Success! Standalone app generated.`);
+  // 5. ONBOARDING INSTRUCTIONS
+  console.log(`\n✨ Success! Your Ramme project is ready.`);
+  console.log(`\nNext steps:`);
+  console.log(`  1. cd ${projectName}`);
+  console.log(`  2. pnpm install`);
+  console.log(`  3. pnpm dev`);
+  console.log(`\nHappy building! 🛠️\n`);
+
 } catch (err) {
   console.error('\n❌ Critical Failure:', err.message);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.3.18",
+  "version": "2.0.0-alpha.1",
   "description": "The official CLI to create Ramme applications.",
   "type": "module",
   "private": false,

package/template/package.json

@@ -11,9 +11,10 @@
   },
   "dependencies": {
     "@ai-sdk/google": "^0.0.10",
+    "@google/generative-ai": "^0.24.1",
     "@radix-ui/react-slot": "^1.2.4",
-    "@ramme-io/kernel": "^1.4.5",
-    "@ramme-io/ui": "^1.4.5",
+    "@ramme-io/kernel": "^2.0.0-alpha.1",
+    "@ramme-io/ui": "^2.0.0-alpha.1",
     "ag-charts-community": "^13.0.0",
     "ag-charts-react": "^13.0.0",
     "ag-grid-community": "^31.3.1",
@@ -48,4 +49,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.3.1"
   }
-}
+}

package/template/src/App.css

@@ -40,3 +40,13 @@
 .read-the-docs {
   color: #888;
 }
+
+
+/* Starter App local override */
+body {
+  font-family: var(--app-font-sans) !important;
+}
+
+h1, h2, h3, h4, .font-serif {
+  font-family: var(--app-font-serif) !important;
+}

package/template/src/components/AIChatWidget.tsx

@@ -1,68 +1,141 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
 import { 
-  Card, 
-  Conversation, 
-  Message, 
-  PromptInput, 
-  Button,
-  Icon,
+  Card, Conversation, Message, PromptInput, Button, Icon,
 } from '@ramme-io/ui';
-import { useMockChat } from '../features/assistant/useMockChat';
 
-interface AIChatWidgetProps {
-  onClose: () => void;
-}
+interface AIChatWidgetProps { onClose: () => void; }
+
+const systemInstruction = `
+  You are the Ramme OS Assistant, part of the internal dev team.
+  Ramme is a high-performance, browser-native modular web-OS (Kernel + UI).
+  It is NOT the Instagram wrapper by Niklas Higle. 
+  Answer as a Senior Engineer helping with a monorepo project.
+  Use numbered lists for steps and code blocks for commands.
+`;
 
 export const AIChatWidget: React.FC<AIChatWidgetProps> = ({ onClose }) => {
-  // 1. Use the shared "Brain"
-  const { messages, isLoading, sendMessage } = useMockChat();
   const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiHistory, setApiHistory] = useState<any[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [messages, setMessages] = useState([
+    { id: 'init', author: 'AI Agent', content: 'Ramme OS Assistant online. How can I help you build today?', isUser: false }
+  ]);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, isLoading]);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    sendMessage(input);
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!input.trim() || isLoading) return;
+
+    const userText = input;
+    setMessages(prev => [...prev, { id: `u-${Date.now()}`, author: 'You', content: userText, isUser: true }]);
     setInput('');
+    setIsLoading(true);
+
+    try {
+      const apiKey = localStorage.getItem('ramme_vault_gemini_key');
+      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contents: [
+            { role: "user", parts: [{ text: `INSTRUCTION: ${systemInstruction}` }] },
+            { role: "model", parts: [{ text: "Understood." }] },
+            ...apiHistory, 
+            { role: "user", parts: [{ text: userText }] }
+          ]
+        })
+      });
+
+      const data = await response.json();
+      const aiText = data.candidates?.[0]?.content?.parts?.[0]?.text || "No response.";
+
+      setMessages(prev => [...prev, { id: `ai-${Date.now()}`, author: 'AI Agent', content: aiText, isUser: false }]);
+      setApiHistory([...apiHistory, { role: "user", parts: [{ text: userText }] }, { role: "model", parts: [{ text: aiText }] }]);
+    } catch (err: any) {
+      setMessages(prev => [...prev, { id: `err-${Date.now()}`, author: 'System', content: `Error: ${err.message}`, isUser: false }]);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
-    <Card className="fixed bottom-24 right-6 w-96 h-[500px] shadow-2xl flex flex-col z-50 animate-in slide-in-from-bottom-5 border-border">
-      
-      {/* Header */}
-      <div className="p-4 border-b flex justify-between items-center bg-muted/50 rounded-t-lg">
+    <Card className="fixed bottom-24 right-6 w-[680px] h-[650px] shadow-2xl flex flex-col z-50 border-border overflow-hidden bg-background/95 backdrop-blur-md" style={{ borderRadius: 'var(--app-radius)' }}>
+      <div className="px-4 py-2 border-b flex justify-between items-center bg-muted/20">
         <div className="flex items-center gap-2">
-          <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-          <span className="font-semibold text-sm">AI Chat</span>
+          <div className={`w-2 h-2 rounded-full ${isLoading ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500'}`} />
+          <span className="font-bold text-[10px] uppercase tracking-widest opacity-60">Ramme Assistant</span>
         </div>
-        <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
-          <Icon name="x" size={16} />
-        </Button>
+        <Button variant="ghost" size="icon" onClick={onClose} className="h-7 w-7"><Icon name="x" size={16} /></Button>
       </div>
-
-      {/* Chat History Area */}
-      <div className="flex-1 overflow-hidden p-0 bg-background">
+      
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 custom-scrollbar">
         <Conversation>
           {messages.map((msg) => (
-            <Message
-              key={msg.id}
-              author={msg.author}
-              content={msg.content}
-              isUser={msg.isUser}
-              suggestions={msg.suggestions}
-              onSuggestionClick={(s) => sendMessage(s)}
-            />
+            <div key={msg.id} className={`flex ${msg.isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+              <div className="max-w-[98%] w-full">
+                <Message
+                  author={msg.author}
+                  isUser={msg.isUser}
+                  // @ts-ignore
+                  content={
+                    <div className="prose prose-sm dark:prose-invert max-w-none text-foreground leading-relaxed">
+                      <ReactMarkdown 
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                          // FORCE PARAGRAPH SPACING
+                          p: ({children}) => <p className="mb-4 last:mb-0">{children}</p>,
+                          // FORCE LISTS TO RENDER
+                          ol: ({children}) => <ol className="list-decimal pl-8 mb-4 space-y-2">{children}</ol>,
+                          ul: ({children}) => <ul className="list-disc pl-8 mb-4 space-y-2">{children}</ul>,
+                          li: ({children}) => <li className="pl-1">{children}</li>,
+                          // CODE BLOCKS
+                          code({ node, inline, className, children, ...props }: any) {
+                            const match = /language-(\w+)/.exec(className || '');
+                            return !inline && match ? (
+                              <div className="my-5 rounded-lg overflow-hidden border border-border bg-[#0d0d0d] shadow-xl">
+                                <div className="px-3 py-1 bg-white/5 border-b border-white/10 flex justify-between">
+                                  <span className="text-[9px] text-muted-foreground uppercase">{match[1]}</span>
+                                </div>
+                                <SyntaxHighlighter
+                                  style={oneDark}
+                                  language={match[1]}
+                                  PreTag="div"
+                                  customStyle={{ margin: 0, padding: '1.2rem', fontSize: '0.8rem', background: 'transparent' }}
+                                  {...props}
+                                >
+                                  {String(children).replace(/\n$/, '')}
+                                </SyntaxHighlighter>
+                              </div>
+                            ) : (
+                              <code className="bg-muted px-1.5 py-0.5 rounded font-mono text-primary text-[0.9em]" {...props}>
+                                {children}
+                              </code>
+                            );
+                          },
+                        }}
+                      >
+                        {msg.content}
+                      </ReactMarkdown>
+                    </div>
+                  }
+                />
+              </div>
+            </div>
           ))}
-          {isLoading && <Message author="AI Agent" isUser={false} loading />}
         </Conversation>
       </div>
 
-      {/* Input Footer */}
-      <div className="p-4 border-t bg-card">
-        <PromptInput
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onSubmit={handleSubmit}
-          placeholder="Ask to adjust temperature..."
-        />
+      <div className="p-4 border-t bg-card/40 backdrop-blur-sm">
+        <PromptInput value={input} onChange={(e) => setInput(e.target.value)} onSubmit={handleSubmit} placeholder="Ask about Ramme..." />
       </div>
     </Card>
   );

package/template/src/components/RammeCodeBlock.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Icon, Button } from '@ramme-io/ui';
+
+interface RammeCodeBlockProps {
+  code: string;
+  language?: string;
+  variant?: 'info' | 'success' | 'secondary' | 'primary';
+  title?: string;
+}
+
+export const RammeCodeBlock: React.FC<RammeCodeBlockProps> = ({ 
+  code, 
+  language = 'tsx', 
+  variant = 'primary',
+  title
+}) => {
+  const [copied, setCopied] = useState(false);
+  
+  const accentColor = `var(--app-${variant}-color)`;
+
+  const copy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="group relative rounded-xl overflow-hidden border border-border bg-[#0d0d0d]  animate-in fade-in zoom-in-95 duration-500">
+      {/* Header / Title Bar */}
+      <div className="px-4 py-2 bg-white/5 border-b border-white/10 flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: accentColor }} />
+          <span className="text-[10px] font-bold uppercase tracking-widest opacity-60 text-foreground">
+            {title || language}
+          </span>
+        </div>
+        <Button variant="ghost" size="icon" className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity" onClick={copy}>
+          <Icon name={copied ? "check" : "copy"} size={12} style={{ color: copied ? 'var(--app-success-color)' : 'inherit' }} />
+        </Button>
+      </div>
+
+      {/* Syntax Highlighting */}
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{
+          margin: 0,
+          padding: '1.5rem',
+          fontSize: '0.85rem',
+          background: 'transparent',
+          lineHeight: '1.6',
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+
+      {/* Dynamic Background Glow (Compliant with Theme) */}
+      <div 
+        className="absolute -right-20 -bottom-20 w-40 h-40 blur-[80px] opacity-10 pointer-events-none"
+        style={{ backgroundColor: accentColor }}
+      />
+    </div>
+  );
+};

package/template/src/features/config/AppConfigContext.tsx

@@ -1,31 +1,41 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 
-interface AppConfig {
+interface AppConfigContextType {
   appName: string;
   setAppName: (name: string) => void;
+  enableCRT: boolean;
+  setEnableCRT: (enabled: boolean) => void;
 }
 
-const AppConfigContext = createContext<AppConfig | undefined>(undefined);
+const AppConfigContext = createContext<AppConfigContextType | undefined>(undefined);
 
-export const AppConfigProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  // Load from local storage or default to 'Ramme'
-  const [appName, setAppNameState] = useState(() => {
-    return localStorage.getItem('app_name') || 'Ramme';
+export const AppConfigProvider = ({ children }: { children: ReactNode }) => {
+  const [appName, setAppName] = useState(() => localStorage.getItem('app_name') || 'Ramme App');
+  
+  const [enableCRT, setEnableCRT] = useState(() => {
+      const stored = localStorage.getItem('app_enable_crt');
+      // Default to true for that retro-first experience
+      return stored !== null ? JSON.parse(stored) : true; 
   });
 
-  const setAppName = (name: string) => {
-    setAppNameState(name);
-    localStorage.setItem('app_name', name);
-    document.title = name; // Update browser tab title
-  };
-
-  // Sync title on load
   useEffect(() => {
+    localStorage.setItem('app_name', appName);
     document.title = appName;
   }, [appName]);
 
+  // Sync state to LocalStorage and DOM
+  useEffect(() => {
+    localStorage.setItem('app_enable_crt', JSON.stringify(enableCRT));
+    
+    if (enableCRT) {
+        document.body.classList.add('crt-mode');
+    } else {
+        document.body.classList.remove('crt-mode');
+    }
+  }, [enableCRT]);
+
   return (
-    <AppConfigContext.Provider value={{ appName, setAppName }}>
+    <AppConfigContext.Provider value={{ appName, setAppName, enableCRT, setEnableCRT }}>
       {children}
     </AppConfigContext.Provider>
   );

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Card, 
+  Icon, 
+  Badge,
+  Button 
+} from '@ramme-io/ui';
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
+import { RammeCodeBlock } from '../../../components/RammeCodeBlock';
+
+const AboutRamme: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <StandardPageLayout>
+      <div className="max-w-5xl mx-auto space-y-32 pb-32 animate-in fade-in slide-in-from-bottom-4 duration-1000">        
+        
+        {/* --- 01: THE MANIFESTO --- */}
+        <header className="space-y-8 pt-20 border-l-4 pl-12" style={{ borderColor: 'rgb(var(--app-primary-color))' }}>
+          <Badge variant="primary" className="uppercase tracking-[0.3em] text-[10px] px-4 py-1.5 border-primary/20 bg-primary/5">
+            Core Philosophy
+          </Badge>
+          <h1 className="text-7xl md:text-[110px] font-black tracking-[-0.02em] leading-[0.8] text-foreground uppercase">
+            Death to the <br/>
+            <span style={{ color: 'rgb(var(--app-primary-color))' }}>Static Mockup.</span>
+          </h1>
+          <p className="text-2xl md:text-3xl text-muted-foreground max-w-3xl leading-tight font-medium tracking-tight">
+            In the time it takes to link Figma frames, you could have built a <span className="text-foreground border-b-2 border-primary/20">fully functional kernel-driven application</span>. 
+          </p>
+          <p className="text-lg text-muted-foreground max-w-2xl leading-relaxed">
+            Ramme exists to turn high-fidelity visions into <span style={{ color: 'rgb(var(--app-secondary-color))' }} className="font-bold italic">verifiable products</span> in hours, not weeks. We don't build mimes; we build engines.
+          </p>
+        </header>
+
+        {/* --- 02: THE KERNEL STORY --- */}
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+          <div className="space-y-8">
+            <h3 className="text-4xl font-black tracking-tight uppercase">The "Living" Prototype</h3>
+            <p className="text-muted-foreground leading-relaxed text-lg">
+              Traditional prototypes are fragile. They break when a user clicks outside a hotspot or refreshes the page. Ramme uses a <span style={{ color: 'rgb(var(--app-info-color))' }} className="font-bold underline decoration-info/20">Local-First Kernel</span> that simulates a real database, real authentication, and real logic.
+            </p>
+            <div className="p-8 rounded-3xl bg-muted/5 border border-white/5 italic text-sm text-foreground/60 leading-relaxed shadow-inner">
+              "We didn't just want a UI kit. We wanted an OS for ideas—a environment where the data lives and breathes alongside the design."
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-6">
+            <Card className="p-8 bg-black/40 border-white/5 flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
+              <Icon name="database" style={{ color: 'rgb(var(--app-success-color))' }} size={28} />
+              <div className="space-y-2">
+                <div className="text-[10px] font-black uppercase tracking-widest text-success/60">Local Engine</div>
+                <p className="text-xs text-muted-foreground font-medium leading-relaxed">Auto-persisted JSON state that lives in the browser's kernel.</p>
+              </div>
+            </Card>
+            <Card className="p-8 bg-black/40 border-white/5 flex flex-col gap-5 rounded-[2rem] hover:translate-y-[-4px] transition-transform">
+              <Icon name="shield-check" style={{ color: 'rgb(var(--app-primary-color))' }} size={28} />
+              <div className="space-y-2">
+                <div className="text-[10px] font-black uppercase tracking-widest text-primary/60">Auth Simulation</div>
+                <p className="text-xs text-muted-foreground font-medium leading-relaxed">Test gated features without a single server request.</p>
+              </div>
+            </Card>
+          </div>
+        </section>
+
+        {/* --- 03: THE INSTALLATION --- */}
+        <section className="space-y-6">
+          <div className="flex items-center gap-2 px-2">
+            <div className="h-2 w-2 rounded-full shadow-[0_0_10px_rgba(var(--app-info-color),0.5)]" style={{ backgroundColor: 'rgb(var(--app-info-color))' }} />
+            <h3 className="text-[10px] font-black uppercase tracking-widest opacity-40 text-foreground">Entry Point</h3>
+          </div>
+          <Card className="p-0 overflow-hidden rounded-3xl border-white/5 shadow-2xl">
+            <RammeCodeBlock 
+              variant="info"
+              title="Interactive Terminal"
+              language="bash"
+              code="npx @ramme-io/create-app@latest my-prototype"
+            />
+          </Card>
+        </section>
+
+        {/* --- 04: PERSISTENCE ENGINE --- */}
+        <section className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="relative group">
+            <div 
+                className="absolute -inset-8 blur-[100px] opacity-10 rounded-full transition-opacity group-hover:opacity-20" 
+                style={{ backgroundColor: 'rgb(var(--app-success-color))' }} 
+            />
+            <RammeCodeBlock 
+              variant="success"
+              title="KernelStore.tsx"
+              language="tsx"
+              code={`const { state, set } = useKernelStore({
+  key: 'user_session',
+  strategy: 'local-first'
+});
+
+// Updates are instant and persistent
+set({ lastLogin: new Date() });`}
+            />
+          </div>
+          <div className="space-y-8">
+            <h3 className="text-5xl font-black tracking-[-0.02em] leading-tight text-foreground uppercase">
+              Persistence <br/>
+              <span style={{ color: 'rgb(var(--app-success-color))' }}>without Infrastructure.</span>
+            </h3>
+            <p className="text-muted-foreground text-lg leading-relaxed">
+              Ramme treats your browser as the <span className="text-foreground font-bold">Source of Truth</span>. By leveraging a custom state-syncing engine, we eliminate the need for backends during the validation phase. 
+            </p>
+            <div className="flex gap-4">
+              <Badge variant="outline" className="border-success/30 text-success uppercase tracking-widest text-[9px] font-black py-1">Zero Latency</Badge>
+              <Badge variant="outline" className="border-success/30 text-success uppercase tracking-widest text-[9px] font-black py-1">Offline First</Badge>
+            </div>
+          </div>
+        </section>
+
+        {/* --- 05: THE TECH STACK --- */}
+        <section className="space-y-16">
+           <div className="text-center space-y-4">
+             <h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-primary">Modern DNA</h3>
+             <p className="text-4xl font-black tracking-tight italic">Built on industry standards.</p>
+           </div>
+           <div className="grid grid-cols-2 md:grid-cols-4 gap-12 max-w-4xl mx-auto">
+              {[
+                { label: 'TypeScript 5.0', icon: 'code', color: 'text-blue-400' },
+                { label: 'React 18', icon: 'layers', color: 'text-cyan-400' },
+                { label: 'Vite 5', icon: 'zap', color: 'text-amber-400' },
+                { label: 'Tailwind CSS', icon: 'wind', color: 'text-sky-400' }
+              ].map((tech) => (
+                <div key={tech.label} className="flex flex-col items-center gap-4 group cursor-default">
+                  <div className="p-5 rounded-2xl bg-white/5 border border-white/5 group-hover:border-white/10 transition-all">
+                    <Icon name={tech.icon as any} className={tech.color} size={32} />
+                  </div>
+                  <span className="font-bold tracking-tight text-sm opacity-50 group-hover:opacity-100 transition-opacity">{tech.label}</span>
+                </div>
+              ))}
+           </div>
+        </section>
+
+        {/* --- FINAL CTA --- */}
+        <footer className="text-center space-y-12 bg-black/40 border border-white/5 p-20 rounded-[4rem] shadow-2xl relative overflow-hidden group">
+          <div className="relative z-10 space-y-8">
+            <h2 className="text-6xl font-black tracking-tight text-foreground uppercase leading-[0.9]">
+              Ready to bypass the <br/>
+              <span style={{ color: 'rgb(var(--app-primary-color))' }}>boilerplate?</span>
+            </h2>
+            <div className="flex flex-col sm:flex-row justify-center gap-6 pt-4">
+              <Button size="lg" className="px-12 h-20 text-xl font-black rounded-full shadow-2xl hover:scale-105 transition-transform" onClick={() => navigate('/dashboard')}>
+                Initialize Kernel
+              </Button>
+              <Button size="lg" variant="outline" className="px-12 h-20 text-xl font-black rounded-full border-white/10 hover:bg-white/5" onClick={() => navigate('/tutorial')}>
+                View Tutorial
+              </Button>
+            </div>
+          </div>
+          {/* Background Branding */}
+          <div className="absolute inset-0 flex items-center justify-center opacity-[0.02] pointer-events-none select-none group-hover:opacity-[0.04] transition-opacity duration-1000">
+            <span className="text-[20rem] font-black text-foreground tracking-tight italic">RAMME</span>
+          </div>
+        </footer>
+      </div>
+    </StandardPageLayout>
+  );
+};
+
+export default AboutRamme;