create-ereo 0.1.21 → 0.1.23

package/dist/index.js

@@ -44,7 +44,18 @@ function parseArgs(args) {
       process.exit(0);
     }
     if (arg === "-t" || arg === "--template") {
-      options.template = args[++i];
+      if (i + 1 >= args.length) {
+        console.error(`  \x1B[31m\u2717\x1B[0m --template requires a value (minimal, default, tailwind)
+`);
+        process.exit(1);
+      }
+      const tmpl = args[++i];
+      if (tmpl !== "minimal" && tmpl !== "default" && tmpl !== "tailwind") {
+        console.error(`  \x1B[31m\u2717\x1B[0m Unknown template "${tmpl}". Valid options: minimal, default, tailwind
+`);
+        process.exit(1);
+      }
+      options.template = tmpl;
     } else if (arg === "--no-typescript") {
       options.typescript = false;
     } else if (arg === "--no-git") {
@@ -107,6 +118,88 @@ export default function RootLayout({ children }${typescript ? ": { children: Rea
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>${projectName}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+        <style dangerouslySetInnerHTML={{ __html: \`
+          *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+          :root {
+            --brand-500: #6366f1;
+            --brand-600: #4f46e5;
+            --brand-400: #818cf8;
+            --purple-500: #8b5cf6;
+            --violet-500: #a855f7;
+            --bg: #ffffff;
+            --bg-soft: #f8fafc;
+            --bg-card: #ffffff;
+            --text: #0f172a;
+            --text-soft: #64748b;
+            --border: #e2e8f0;
+            --code-bg: #1e1e2e;
+          }
+          @media (prefers-color-scheme: dark) {
+            :root {
+              --bg: #0f172a;
+              --bg-soft: #1e293b;
+              --bg-card: #1e293b;
+              --text: #f1f5f9;
+              --text-soft: #94a3b8;
+              --border: #334155;
+              --code-bg: #0f172a;
+            }
+          }
+          body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+          }
+          @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(24px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+          @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+          }
+          @keyframes gradientShift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+          .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; position: relative; overflow: hidden; }
+          .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 70%); pointer-events: none; }
+          .hero-logo { animation: float 4s ease-in-out infinite; margin-bottom: 2rem; }
+          .gradient-text { background: linear-gradient(135deg, var(--brand-500), var(--purple-500), var(--violet-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradientShift 6s ease infinite; }
+          .hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; animation: fadeInUp 0.6s ease both; }
+          .hero p { font-size: 1.25rem; color: var(--text-soft); max-width: 540px; margin-bottom: 2rem; animation: fadeInUp 0.6s ease 0.15s both; }
+          .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; animation: fadeInUp 0.6s ease 0.3s both; }
+          .cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; }
+          .cta-btn-primary { background: var(--brand-500); color: white; }
+          .cta-btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,0.3); }
+          .cta-btn-secondary { border: 2px solid var(--border); color: var(--text); background: transparent; }
+          .cta-btn-secondary:hover { border-color: var(--brand-500); color: var(--brand-500); }
+          .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 72rem; margin: 0 auto; padding: 5rem 2rem; }
+          .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; transition: all 0.25s; }
+          .feature-card:hover { border-color: var(--brand-400); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(99,102,241,0.1); }
+          .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)); }
+          .feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
+          .feature-card p { color: var(--text-soft); font-size: 0.925rem; }
+          .code-window { background: var(--code-bg); border-radius: 1rem; overflow: hidden; max-width: 540px; margin: 0 auto; text-align: left; animation: fadeInUp 0.6s ease 0.45s both; }
+          .code-header { display: flex; align-items: center; gap: 6px; padding: 0.875rem 1.25rem; background: rgba(255,255,255,0.05); }
+          .code-dot { width: 12px; height: 12px; border-radius: 50%; }
+          .code-dot-r { background: #ff5f57; }
+          .code-dot-y { background: #febc2e; }
+          .code-dot-g { background: #28c840; }
+          .code-body { padding: 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: #a5b4fc; line-height: 1.8; }
+          .code-body .prompt { color: #6ee7b7; }
+          .quickstart-section { background: var(--bg-soft); padding: 5rem 2rem; text-align: center; }
+          .quickstart-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
+          .quickstart-section .subtitle { color: var(--text-soft); margin-bottom: 2rem; }
+          .site-footer { text-align: center; padding: 3rem 2rem; color: var(--text-soft); font-size: 0.875rem; border-top: 1px solid var(--border); }
+          .site-footer a { color: var(--brand-500); text-decoration: none; }
+          .site-footer a:hover { text-decoration: underline; }
+        \` }} />
       </head>
       <body>
         {children}
@@ -119,10 +212,102 @@ export default function RootLayout({ children }${typescript ? ": { children: Rea
   const indexPage = `
 export default function HomePage() {
   return (
-    <main>
-      <h1>Welcome to EreoJS!</h1>
-      <p>Edit app/routes/index.${ext} to get started.</p>
-    </main>
+    <>
+      {/* Hero */}
+      <section className="hero">
+        <div className="hero-logo">
+          <svg width="72" height="72" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M40 8L72 24V56L40 72L8 56V24L40 8Z" stroke="url(#logo-grad)" strokeWidth="3" fill="none" />
+            <path d="M40 20L60 30V50L40 60L20 50V30L40 20Z" fill="url(#logo-grad)" opacity="0.15" />
+            <path d="M40 28L52 34V46L40 52L28 46V34L40 28Z" fill="url(#logo-grad)" />
+            <defs>
+              <linearGradient id="logo-grad" x1="8" y1="8" x2="72" y2="72">
+                <stop stopColor="#6366f1" />
+                <stop offset="1" stopColor="#a855f7" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+        <h1><span className="gradient-text">EreoJS</span></h1>
+        <p>A React fullstack framework built on Bun. Fast server-side rendering, file-based routing, and islands architecture.</p>
+        <div className="btn-group">
+          <a href="https://ereo.dev/docs" className="cta-btn cta-btn-primary">Get Started</a>
+          <a href="https://github.com/nicholasgriffintn/ereo" className="cta-btn cta-btn-secondary">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+            GitHub
+          </a>
+        </div>
+      </section>
+
+      {/* Features */}
+      <div className="feature-grid">
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+          </div>
+          <h3>Bun-Powered</h3>
+          <p>Built on Bun for blazing-fast startup, builds, and runtime performance.</p>
+        </div>
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+          </div>
+          <h3>File Routing</h3>
+          <p>Intuitive file-based routing with nested layouts and dynamic segments.</p>
+        </div>
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+          </div>
+          <h3>Server-Side Rendering</h3>
+          <p>Stream HTML from the server for fast, SEO-friendly initial page loads.</p>
+        </div>
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
+          </div>
+          <h3>Islands Architecture</h3>
+          <p>Selective hydration \u2014 only interactive parts ship JavaScript to the client.</p>
+        </div>
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          </div>
+          <h3>Loaders &amp; Actions</h3>
+          <p>Server-side data loading and form handling with simple async functions.</p>
+        </div>
+        <div className="feature-card">
+          <div className="feature-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+          </div>
+          <h3>TypeScript First</h3>
+          <p>Full type safety out of the box with zero-config TypeScript support.</p>
+        </div>
+      </div>
+
+      {/* Quick Start */}
+      <section className="quickstart-section">
+        <h2>Get Started in Seconds</h2>
+        <p className="subtitle">One command to scaffold your project.</p>
+        <div className="code-window">
+          <div className="code-header">
+            <span className="code-dot code-dot-r" />
+            <span className="code-dot code-dot-y" />
+            <span className="code-dot code-dot-g" />
+          </div>
+          <div className="code-body">
+            <div><span className="prompt">$</span> bunx create-ereo my-app</div>
+            <div><span className="prompt">$</span> cd my-app</div>
+            <div><span className="prompt">$</span> bun run dev</div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="site-footer">
+        <p>Built with EreoJS &mdash; <a href="https://ereo.dev/docs">Docs</a> &middot; <a href="https://github.com/nicholasgriffintn/ereo">GitHub</a></p>
+      </footer>
+    </>
   );
 }
 `.trim();
@@ -249,18 +434,48 @@ export default {
   darkMode: 'class',
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
       colors: {
         primary: {
-          50: '#eff6ff',
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
+          50: '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+          950: '#1e1b4b',
+        },
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease forwards',
+        'slide-up': 'slideUp 0.6s ease forwards',
+        'float': 'float 4s ease-in-out infinite',
+        'gradient': 'gradientShift 6s ease infinite',
+        'pulse-slow': 'pulse 3s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        gradientShift: {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
         },
       },
     },
@@ -270,22 +485,24 @@ export default {
 `.trim();
   await Bun.write(join(projectDir, "tailwind.config.js"), tailwindConfig);
   const styles = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   body {
-    @apply antialiased;
+    @apply antialiased font-sans;
   }
 }
 
 @layer components {
   .btn {
-    @apply px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
   }
   .btn-primary {
-    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 hover:-translate-y-0.5 hover:shadow-lg;
   }
   .btn-secondary {
     @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600;
@@ -296,6 +513,33 @@ export default {
   .card {
     @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6;
   }
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 via-purple-500 to-violet-500;
+    background-size: 200% 200%;
+    animation: gradientShift 6s ease infinite;
+  }
+  .code-window {
+    @apply rounded-xl overflow-hidden;
+    background: #1e1e2e;
+  }
+  .code-window-header {
+    @apply flex items-center gap-1.5 px-4 py-3;
+    background: rgba(255, 255, 255, 0.05);
+  }
+  .code-window-dot {
+    @apply w-3 h-3 rounded-full;
+  }
+  .glow {
+    box-shadow: 0 0 40px rgba(99, 102, 241, 0.15), 0 0 80px rgba(99, 102, 241, 0.05);
+  }
+}
+
+@layer utilities {
+  .delay-100 { animation-delay: 100ms; }
+  .delay-200 { animation-delay: 200ms; }
+  .delay-300 { animation-delay: 300ms; }
+  .delay-400 { animation-delay: 400ms; }
+  .delay-500 { animation-delay: 500ms; }
 }
 `.trim();
   await Bun.write(join(projectDir, "app/styles.css"), styles);
@@ -495,8 +739,17 @@ export function Navigation() {
       <div className="max-w-6xl mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
-          <a href="/" className="flex items-center space-x-2">
-            <span className="text-2xl">\u2B21</span>
+          <a href="/" className="flex items-center space-x-2 group">
+            <svg width="28" height="28" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" className="transition-transform group-hover:scale-110">
+              <path d="M40 8L72 24V56L40 72L8 56V24L40 8Z" stroke="url(#nav-grad)" strokeWidth="3" fill="none" />
+              <path d="M40 28L52 34V46L40 52L28 46V34L40 28Z" fill="url(#nav-grad)" />
+              <defs>
+                <linearGradient id="nav-grad" x1="8" y1="8" x2="72" y2="72">
+                  <stop stopColor="#6366f1" />
+                  <stop offset="1" stopColor="#a855f7" />
+                </linearGradient>
+              </defs>
+            </svg>
             <span className="font-bold text-xl">EreoJS</span>
           </a>
 
@@ -671,6 +924,9 @@ export default function RootLayout({ children }${ts ? ": RootLayoutProps" : ""})
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="A modern web application built with EreoJS" />
         <title>${projectName}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
         <link rel="stylesheet" href="/app/styles.css" />
       </head>
       <body className="min-h-screen flex flex-col bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
@@ -726,100 +982,210 @@ export default function HomePage({ loaderData }${ts ? ": HomePageProps" : ""}) {
   const { featuredPost, stats } = loaderData;
 
   return (
-    <div className="min-h-screen">
-      {/* Hero Section */}
-      <section className="py-20 px-4 bg-gradient-to-br from-primary-500 to-purple-600 text-white">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-5xl md:text-6xl font-bold mb-6">
-            Welcome to EreoJS
+    <div>
+      {/* Hero */}
+      <section className="relative min-h-[90vh] flex flex-col items-center justify-center text-center px-4 overflow-hidden">
+        {/* Background */}
+        <div className="absolute inset-0 bg-gradient-to-b from-primary-50/50 via-transparent to-transparent dark:from-primary-950/30 dark:via-transparent dark:to-transparent" />
+        <div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 60%)' }} />
+
+        <div className="relative z-10 max-w-4xl mx-auto">
+          {/* Logo */}
+          <div className="animate-float mb-8 opacity-0 animate-fade-in">
+            <svg width="72" height="72" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M40 8L72 24V56L40 72L8 56V24L40 8Z" stroke="url(#hero-grad)" strokeWidth="3" fill="none" />
+              <path d="M40 20L60 30V50L40 60L20 50V30L40 20Z" fill="url(#hero-grad)" opacity="0.15" />
+              <path d="M40 28L52 34V46L40 52L28 46V34L40 28Z" fill="url(#hero-grad)" />
+              <defs>
+                <linearGradient id="hero-grad" x1="8" y1="8" x2="72" y2="72">
+                  <stop stopColor="#6366f1" />
+                  <stop offset="1" stopColor="#a855f7" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+
+          {/* Version Badge */}
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 text-sm font-medium mb-6 opacity-0 animate-slide-up">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse-slow" />
+            v0.1.7
+          </div>
+
+          <h1 className="text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight mb-6 opacity-0 animate-slide-up delay-100">
+            Build Faster with <span className="gradient-text">EreoJS</span>
           </h1>
-          <p className="text-xl md:text-2xl mb-8 text-primary-100">
-            A React fullstack framework built on Bun.
-            <br />
-            Fast, simple, and powerful.
+
+          <p className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10 opacity-0 animate-slide-up delay-200">
+            A React fullstack framework built on Bun. Server-side rendering, file-based routing, and islands architecture out of the box.
           </p>
-          <div className="flex flex-wrap gap-4 justify-center">
-            <a href="/blog" className="btn bg-white text-primary-600 hover:bg-primary-50">
-              Read the Blog
+
+          {/* Terminal Preview */}
+          <div className="code-window glow max-w-md mx-auto text-left opacity-0 animate-slide-up delay-300">
+            <div className="code-window-header">
+              <span className="code-window-dot bg-red-500" />
+              <span className="code-window-dot bg-yellow-500" />
+              <span className="code-window-dot bg-green-500" />
+            </div>
+            <div className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed">
+              <div><span className="text-emerald-400">$</span> bunx create-ereo my-app</div>
+              <div><span className="text-emerald-400">$</span> cd my-app</div>
+              <div><span className="text-emerald-400">$</span> bun run dev</div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-wrap gap-4 justify-center mt-10 opacity-0 animate-slide-up delay-400">
+            <a href="https://ereo.dev/docs" className="btn btn-primary text-base px-6 py-3">
+              Get Started
             </a>
-            <a
-              href="https://github.com/ereo-js/ereo"
-              target="_blank"
-              rel="noopener"
-              className="btn border-2 border-white text-white hover:bg-white/10"
-            >
-              View on GitHub
+            <a href="/blog" className="btn btn-secondary text-base px-6 py-3">
+              Read the Blog
             </a>
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="py-16 px-4">
+      {/* Features */}
+      <section className="py-20 px-4">
         <div className="max-w-6xl mx-auto">
-          <h2 className="text-3xl font-bold text-center mb-12">Why EreoJS?</h2>
-          <div className="grid md:grid-cols-3 gap-8">
-            <div className="card text-center">
-              <div className="text-4xl mb-4">\u26A1</div>
-              <h3 className="text-xl font-bold mb-2">Blazing Fast</h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Built on Bun for exceptional performance. Server-side rendering with streaming support.
-              </p>
-            </div>
-            <div className="card text-center">
-              <div className="text-4xl mb-4">\uD83C\uDFAF</div>
-              <h3 className="text-xl font-bold mb-2">Simple Data Loading</h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                One pattern for data fetching. Loaders and actions make it easy to build dynamic apps.
-              </p>
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Everything You Need</h2>
+            <p className="text-gray-600 dark:text-gray-400 text-lg max-w-2xl mx-auto">
+              EreoJS combines the best of React with Bun's performance to deliver a complete fullstack framework.
+            </p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              { icon: 'bolt', title: 'Bun-Powered', desc: 'Lightning-fast startup, builds, and runtime. 10x faster than Node.js for common operations.' },
+              { icon: 'folder', title: 'File Routing', desc: 'Intuitive file-based routing with nested layouts, dynamic segments, and automatic code splitting.' },
+              { icon: 'server', title: 'Server-Side Rendering', desc: 'Stream HTML from the server for fast initial loads with full SEO support.' },
+              { icon: 'island', title: 'Islands Architecture', desc: 'Selective hydration means only interactive parts ship JavaScript to the client.' },
+              { icon: 'data', title: 'Loaders & Actions', desc: 'Simple async functions for server-side data loading and form handling.' },
+              { icon: 'ts', title: 'TypeScript First', desc: 'Full type safety with zero-config TypeScript. Types flow from server to client.' },
+            ].map((feature) => (
+              <div key={feature.title} className="group card hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-transparent hover:border-primary-200 dark:hover:border-primary-800">
+                <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 bg-gradient-to-br from-primary-100 to-purple-100 dark:from-primary-900/40 dark:to-purple-900/40 group-hover:from-primary-200 group-hover:to-purple-200 dark:group-hover:from-primary-900/60 dark:group-hover:to-purple-900/60 transition-colors">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    {feature.icon === 'bolt' && <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />}
+                    {feature.icon === 'folder' && <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />}
+                    {feature.icon === 'server' && <><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>}
+                    {feature.icon === 'island' && <><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></>}
+                    {feature.icon === 'data' && <><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>}
+                    {feature.icon === 'ts' && <><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></>}
+                  </svg>
+                </div>
+                <h3 className="text-lg font-bold mb-2">{feature.title}</h3>
+                <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Code Showcase */}
+      <section className="py-20 px-4 bg-gray-50 dark:bg-gray-800/50">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Simple, Powerful APIs</h2>
+            <p className="text-gray-600 dark:text-gray-400 text-lg">Loaders fetch data. Actions handle mutations. It's that simple.</p>
+          </div>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="code-window">
+              <div className="code-window-header">
+                <span className="code-window-dot bg-red-500" />
+                <span className="code-window-dot bg-yellow-500" />
+                <span className="code-window-dot bg-green-500" />
+                <span className="ml-3 text-xs text-gray-500 font-mono">routes/users.tsx</span>
+              </div>
+              <pre className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed overflow-x-auto">
+{\`// Data runs on the server
+export async function loader() {
+  const users = await db.user.findMany();
+  return { users };
+}
+
+// Component renders on server + client
+export default function Users({ loaderData }) {
+  return (
+    <ul>
+      {loaderData.users.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}\`}
+              </pre>
             </div>
-            <div className="card text-center">
-              <div className="text-4xl mb-4">\uD83C\uDFDD\uFE0F</div>
-              <h3 className="text-xl font-bold mb-2">Islands Architecture</h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                Selective hydration means smaller bundles and faster interactivity where it matters.
-              </p>
+            <div className="code-window">
+              <div className="code-window-header">
+                <span className="code-window-dot bg-red-500" />
+                <span className="code-window-dot bg-yellow-500" />
+                <span className="code-window-dot bg-green-500" />
+                <span className="ml-3 text-xs text-gray-500 font-mono">routes/contact.tsx</span>
+              </div>
+              <pre className="px-5 py-4 font-mono text-sm text-primary-300 leading-relaxed overflow-x-auto">
+{\`// Actions handle form submissions
+export async function action({ request }) {
+  const form = await request.formData();
+  await db.message.create({
+    data: {
+      name: form.get('name'),
+      email: form.get('email'),
+      body: form.get('message'),
+    }
+  });
+  return { success: true };
+}\`}
+              </pre>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Interactive Demo Section */}
-      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl font-bold mb-4">Interactive Islands</h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-8">
-            This counter component is an "island" - only this part of the page is hydrated with JavaScript.
-          </p>
-          <div className="flex justify-center">
-            <Counter initialCount={0} />
+      {/* Interactive Demo */}
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="card text-center border border-gray-200 dark:border-gray-700">
+            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 text-xs font-medium mb-6">
+              Interactive Island
+            </div>
+            <h2 className="text-3xl font-bold mb-3">Islands Architecture</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-8 max-w-lg mx-auto">
+              This counter is an island \u2014 it's the only part of this page that ships JavaScript. The rest is pure HTML from the server.
+            </p>
+            <div className="flex justify-center">
+              <Counter initialCount={0} />
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Server Data Section */}
-      <section className="py-16 px-4">
+      {/* Server Data */}
+      <section className="py-20 px-4 bg-gray-50 dark:bg-gray-800/50">
         <div className="max-w-4xl mx-auto">
-          <div className="card">
-            <h2 className="text-2xl font-bold mb-6">Server-Side Data</h2>
+          <div className="card border border-gray-200 dark:border-gray-700">
+            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 text-xs font-medium mb-6">
+              Server Loader Data
+            </div>
+            <h2 className="text-2xl font-bold mb-2">Loaded at Build Time</h2>
             <p className="text-gray-600 dark:text-gray-400 mb-6">
-              This data was loaded on the server using a loader function:
+              This data was fetched on the server via a loader function \u2014 zero client-side fetching.
             </p>
-            <div className="grid md:grid-cols-2 gap-6">
-              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+            <div className="grid sm:grid-cols-2 gap-4 mb-6">
+              <div className="p-5 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
                 <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Blog Posts</div>
-                <div className="text-3xl font-bold">{stats.posts}</div>
+                <div className="text-4xl font-extrabold">{stats.posts}</div>
               </div>
-              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+              <div className="p-5 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
                 <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">Rendered At</div>
-                <div className="text-3xl font-bold">{stats.serverTime}</div>
+                <div className="text-4xl font-extrabold font-mono">{stats.serverTime}</div>
               </div>
             </div>
             {featuredPost && (
-              <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+              <div className="pt-6 border-t border-gray-200 dark:border-gray-700">
                 <div className="text-sm text-gray-500 dark:text-gray-400 mb-2">Featured Post</div>
                 <h3 className="text-xl font-bold mb-2">
-                  <a href={\`/blog/\${featuredPost.slug}\`} className="hover:text-primary-600">
+                  <a href={\`/blog/\${featuredPost.slug}\`} className="hover:text-primary-600 transition-colors">
                     {featuredPost.title}
                   </a>
                 </h3>
@@ -829,6 +1195,26 @@ export default function HomePage({ loaderData }${ts ? ": HomePageProps" : ""}) {
           </div>
         </div>
       </section>
+
+      {/* CTA Footer */}
+      <section className="py-24 px-4 text-center">
+        <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to Build?</h2>
+        <p className="text-gray-600 dark:text-gray-400 text-lg mb-8">Get started with a single command.</p>
+        <div className="code-window glow max-w-sm mx-auto mb-8">
+          <div className="code-window-header">
+            <span className="code-window-dot bg-red-500" />
+            <span className="code-window-dot bg-yellow-500" />
+            <span className="code-window-dot bg-green-500" />
+          </div>
+          <div className="px-5 py-3 font-mono text-sm text-primary-300">
+            <span className="text-emerald-400">$</span> bunx create-ereo my-app
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-4 justify-center">
+          <a href="https://ereo.dev/docs" className="btn btn-primary text-base px-6 py-3">Documentation</a>
+          <a href="https://github.com/ereo-js/ereo" target="_blank" rel="noopener" className="btn btn-secondary text-base px-6 py-3">GitHub</a>
+        </div>
+      </section>
     </div>
   );
 }
@@ -1438,8 +1824,18 @@ async function main() {
     printHelp();
     process.exit(1);
   }
+  if (/[<>:"|?*]/.test(projectName) || projectName.startsWith(".")) {
+    console.error(`  \x1B[31m\u2717\x1B[0m Invalid project name. Avoid special characters and leading dots.
+`);
+    process.exit(1);
+  }
   const finalOptions = { ...defaultOptions, ...options };
   const projectDir = resolve(process.cwd(), projectName);
+  if (!projectDir.startsWith(process.cwd())) {
+    console.error(`  \x1B[31m\u2717\x1B[0m Invalid project name: path traversal detected.
+`);
+    process.exit(1);
+  }
   console.log(`  Creating \x1B[36m${projectName}\x1B[0m...
 `);
   console.log(`  Template: ${finalOptions.template}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ereo",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "license": "MIT",
   "author": "Ereo Team",
   "homepage": "https://ereo.dev",