create-flexireact 3.0.3 → 3.0.5

package/dist/templates/app-router-premium.d.ts

@@ -0,0 +1,2 @@
+export declare const PREMIUM_PAGE_CONTENT = "import React from 'react';\n\nconst coreFeatures = [\n  { icon: '\u26A1', title: '2ms Cold Start', desc: 'Edge runtime with instant response times' },\n  { icon: '\uD83E\uDDE9', title: '50+ UI Components', desc: 'FlexiUI ready to use out of the box' },\n  { icon: '\uD83D\uDEE1\uFE0F', title: 'Middleware Auth', desc: 'FlexiGuard powered authentication' },\n  { icon: '\uD83D\uDD25', title: 'Zero-config Dev', desc: 'Start coding immediately, no setup' },\n  { icon: '\uD83D\uDCBD', title: 'File-based API', desc: 'Intuitive API routes structure' },\n  { icon: '\uD83C\uDFDD\uFE0F', title: 'Islands Architecture', desc: 'Partial hydration for max performance' },\n  { icon: '\uD83D\uDCD8', title: 'TypeScript First', desc: 'Full type safety out of the box' },\n  { icon: '\uD83C\uDFA8', title: 'Tailwind v4', desc: 'Latest CSS framework integrated' },\n  { icon: '\uD83D\uDE80', title: 'SSR + PPR', desc: 'Streaming SSR & Partial Prerendering' },\n];\n\nconst timeline = [\n  { step: '1', title: 'File Routing', desc: 'Create pages in app/ directory' },\n  { step: '2', title: 'Layouts', desc: 'Shared UI across routes' },\n  { step: '3', title: 'Islands', desc: 'Interactive components' },\n  { step: '4', title: 'SSR/SSG', desc: 'Server or static rendering' },\n  { step: '5', title: 'Deploy', desc: 'Ship to Edge in seconds' },\n];\n\nconst benchmarks = [\n  { name: 'FlexiReact', time: 2, color: '#00FF9C' },\n  { name: 'Astro', time: 5, color: '#FF5D01' },\n  { name: 'Next.js', time: 8, color: '#000000' },\n];\n\nconst ecosystem = [\n  { icon: '\u269B\uFE0F', name: 'FlexiUI', desc: '50+ components', link: 'https://www.npmjs.com/package/@flexireact/flexi-ui' },\n  { icon: '\uD83D\uDD10', name: 'FlexiGuard', desc: 'Auth & RBAC', link: 'https://www.npmjs.com/package/flexiguard' },\n  { icon: '\uD83E\uDDF0', name: 'FlexiCLI', desc: 'Commands & scaffolding', link: 'https://www.npmjs.com/package/create-flexireact' },\n  { icon: '\uD83C\uDF10', name: 'FlexiEdge', desc: 'Deploy-ready runtime', link: 'https://github.com/flexireact/flexireact' },\n];\n\nconst whyFlexiReact = [\n  { icon: '\uD83D\uDE80', title: 'Ultra-fast dev experience', desc: 'Sub-second builds with esbuild' },\n  { icon: '\uD83C\uDFDD\uFE0F', title: 'Islands with zero config', desc: 'Automatic partial hydration' },\n  { icon: '\uD83E\uDDE9', title: 'UI components included', desc: 'FlexiUI with 50+ components' },\n  { icon: '\uD83D\uDD10', title: 'Authentication included', desc: 'FlexiGuard for auth & RBAC' },\n];\n\nconst backedBy = [\n  { name: 'Velcarius', logo: 'V' },\n  { name: 'Rayze Sol Energy', logo: 'R' },\n  { name: 'FramLink', logo: 'F' },\n];\n\nexport default function HomePage() {\n  return (\n    <div className=\"min-h-screen bg-[#0a0a0a]\">\n      {/* Premium Navbar */}\n      <header className=\"fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50\">\n        <nav className=\"max-w-7xl mx-auto px-4 h-16 flex items-center justify-between\">\n          <a href=\"/\" className=\"flex items-center gap-3\">\n            <div className=\"w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20\">\n              <span className=\"text-black font-bold text-lg\">F</span>\n            </div>\n            <span className=\"font-bold text-lg\">FlexiReact</span>\n            <span className=\"px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full\">v3.0</span>\n          </a>\n          \n          <div className=\"hidden md:flex items-center gap-8\">\n            <a href=\"https://github.com/flexireact/flexireact#readme\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Docs</a>\n            <a href=\"https://github.com/flexireact/flexireact\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">GitHub</a>\n            <a href=\"https://github.com/flexireact/flexireact/tree/main/examples\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Examples</a>\n            <a href=\"https://discord.gg/rFSZxFtpAA\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Discord</a>\n          </div>\n\n          <a \n            href=\"https://github.com/flexireact/flexireact\" \n            target=\"_blank\"\n            className=\"group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/>\n            </svg>\n            <span className=\"text-sm font-medium\">Star</span>\n          </a>\n        </nav>\n      </header>\n\n      <main className=\"pt-16\">\n        {/* Hero Section */}\n        <section className=\"relative py-24 lg:py-32 px-4 overflow-hidden animate-fade-in-up\">\n          <div className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent\" />\n          <div className=\"absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]\" />\n          \n          <div className=\"relative max-w-5xl mx-auto text-center\">\n            <div className=\"inline-flex items-center justify-center w-20 h-20 mb-8 rounded-2xl bg-gradient-to-br from-[#00FF9C] to-[#00D68F] shadow-lg shadow-[#00FF9C]/20\">\n              <span className=\"text-3xl font-black text-black\">F</span>\n            </div>\n            \n            <div className=\"inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm\">\n              <span className=\"w-2 h-2 rounded-full bg-[#00FF9C] animate-pulse\" />\n              <span className=\"text-sm text-gray-300\">v3.0 \u2014 The Future of React</span>\n            </div>\n            \n            <h1 className=\"text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 tracking-tight\">\n              Build faster with\n              <span className=\"block mt-2 bg-gradient-to-r from-[#00FF9C] via-[#00D68F] to-[#00FF9C] bg-clip-text text-transparent\">\n                FlexiReact\n              </span>\n            </h1>\n            \n            <p className=\"text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed\">\n              The modern React framework with TypeScript, Tailwind, SSR, Islands, \n              Edge Runtime, and 50+ UI components. <span className=\"text-white font-medium\">Better than Next.js.</span>\n            </p>\n            \n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center mb-16\">\n              <a href=\"https://github.com/flexireact/flexireact\" \n                 className=\"group inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105 hover:shadow-lg hover:shadow-[#00FF9C]/25\">\n                Get Started\n                <svg className=\"w-5 h-5 transition-transform group-hover:translate-x-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17 8l4 4m0 0l-4 4m4-4H3\" />\n                </svg>\n              </a>\n              <a href=\"https://github.com/flexireact/flexireact#readme\"\n                 className=\"inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/5 text-white font-semibold rounded-xl border border-white/10 hover:bg-white/10 hover:border-[#00FF9C]/50 transition-all\">\n                Documentation\n              </a>\n            </div>\n\n            <div className=\"max-w-lg mx-auto\">\n              <div className=\"rounded-xl bg-[#111] border border-gray-800 overflow-hidden shadow-2xl\">\n                <div className=\"flex items-center gap-2 px-4 py-3 bg-[#0d0d0d] border-b border-gray-800\">\n                  <div className=\"flex gap-1.5\">\n                    <div className=\"w-3 h-3 rounded-full bg-red-500/80\" />\n                    <div className=\"w-3 h-3 rounded-full bg-yellow-500/80\" />\n                    <div className=\"w-3 h-3 rounded-full bg-green-500/80\" />\n                  </div>\n                  <span className=\"text-xs text-gray-500 ml-2\">Terminal</span>\n                </div>\n                <div className=\"p-4 font-mono text-sm\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-[#00FF9C]\">$</span>\n                    <span className=\"text-gray-300\">npx create-flexireact my-app</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Core Features Premium */}\n        <section className=\"py-24 px-4 animate-fade-in-up animate-delay-100\">\n          <div className=\"max-w-7xl mx-auto\">\n            <div className=\"text-center mb-16\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Core Features</h2>\n              <p className=\"text-gray-400\">Everything you need to build modern web apps</p>\n            </div>\n            \n            <div className=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n              {coreFeatures.map((f, i) => (\n                <div key={i} className=\"group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-[#00FF9C]/10\">\n                  <div className=\"w-12 h-12 rounded-xl bg-[#00FF9C]/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform\">\n                    {f.icon}\n                  </div>\n                  <h3 className=\"font-semibold text-lg mb-2\">{f.title}</h3>\n                  <p className=\"text-gray-400 text-sm leading-relaxed\">{f.desc}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* How it Works Timeline */}\n        <section className=\"py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-200\">\n          <div className=\"max-w-6xl mx-auto\">\n            <div className=\"text-center mb-16\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">How it Works</h2>\n              <p className=\"text-gray-400\">From idea to production in 5 simple steps</p>\n            </div>\n            \n            <div className=\"relative\">\n              <div className=\"hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#00FF9C]/20 to-transparent\" />\n              \n              <div className=\"grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8\">\n                {timeline.map((item, i) => (\n                  <div key={i} className=\"relative text-center\">\n                    <div className=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-[#00FF9C] to-[#00D68F] text-black font-bold text-xl mb-4 shadow-lg shadow-[#00FF9C]/20\">\n                      {item.step}\n                    </div>\n                    <h3 className=\"font-semibold mb-2\">{item.title}</h3>\n                    <p className=\"text-sm text-gray-400\">{item.desc}</p>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Code Example */}\n        <section className=\"py-24 px-4 animate-fade-in-up animate-delay-300\">\n          <div className=\"max-w-4xl mx-auto\">\n            <div className=\"text-center mb-12\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Simple & Powerful</h2>\n              <p className=\"text-gray-400\">Write clean code that just works</p>\n            </div>\n            \n            <div className=\"rounded-2xl bg-[#111] border border-gray-800 overflow-hidden\">\n              <div className=\"flex items-center gap-4 px-6 py-3 bg-[#0d0d0d] border-b border-gray-800\">\n                <button className=\"px-3 py-1.5 text-sm bg-[#00FF9C]/20 text-[#00FF9C] rounded-lg\">Pages</button>\n                <button className=\"px-3 py-1.5 text-sm text-gray-400 hover:text-white transition\">API Route</button>\n                <button className=\"px-3 py-1.5 text-sm text-gray-400 hover:text-white transition\">Component</button>\n              </div>\n              <pre className=\"p-6 overflow-x-auto\"><code className=\"text-sm text-gray-300\">{`// app/page.tsx\nexport default function Home() {\n  return (\n    <div className=\"container mx-auto p-8\">\n      <h1 className=\"text-4xl font-bold\">\n        Hello from FlexiReact \u26A1\n      </h1>\n    </div>\n  );\n}`}</code></pre>\n            </div>\n          </div>\n        </section>\n\n        {/* Benchmarks */}\n        <section className=\"py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-400\">\n          <div className=\"max-w-4xl mx-auto\">\n            <div className=\"text-center mb-12\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Blazing Fast Performance</h2>\n              <p className=\"text-gray-400\">Cold start comparison (lower is better)</p>\n            </div>\n            \n            <div className=\"space-y-6\">\n              {benchmarks.map((bench, i) => (\n                <div key={i} className=\"flex items-center gap-4\">\n                  <div className=\"w-32 text-sm font-medium\">{bench.name}</div>\n                  <div className=\"flex-1 h-12 bg-white/5 rounded-lg overflow-hidden\">\n                    <div \n                      className=\"h-full flex items-center px-4 text-sm font-bold transition-all duration-1000\"\n                      style={{\n                        width: `${(bench.time / 10) * 100}%`,\n                        backgroundColor: bench.name === 'FlexiReact' ? '#00FF9C' : 'rgba(255,255,255,0.1)',\n                        color: bench.name === 'FlexiReact' ? '#000' : '#fff'\n                      }}\n                    >\n                      {bench.time}ms\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Why FlexiReact */}\n        <section className=\"py-24 px-4\">\n          <div className=\"max-w-6xl mx-auto\">\n            <div className=\"text-center mb-16\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Why FlexiReact?</h2>\n              <p className=\"text-gray-400\">Built for developers who value speed and simplicity</p>\n            </div>\n            \n            <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n              {whyFlexiReact.map((item, i) => (\n                <div key={i} className=\"p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5\">\n                  <div className=\"text-3xl mb-4\">{item.icon}</div>\n                  <h3 className=\"font-semibold mb-2\">{item.title}</h3>\n                  <p className=\"text-sm text-gray-400\">{item.desc}</p>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Ecosystem */}\n        <section className=\"py-24 px-4 bg-white/[0.02]\">\n          <div className=\"max-w-6xl mx-auto\">\n            <div className=\"text-center mb-16\">\n              <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Complete Ecosystem</h2>\n              <p className=\"text-gray-400\">Everything you need, batteries included</p>\n            </div>\n            \n            <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n              {ecosystem.map((item, i) => (\n                <a key={i} href={item.link} target=\"_blank\" className=\"group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-105\">\n                  <div className=\"text-4xl mb-4\">{item.icon}</div>\n                  <h3 className=\"font-semibold mb-1 group-hover:text-[#00FF9C] transition\">{item.name}</h3>\n                  <p className=\"text-sm text-gray-400\">{item.desc}</p>\n                </a>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Backed By */}\n        <section className=\"py-24 px-4\">\n          <div className=\"max-w-6xl mx-auto\">\n            <div className=\"text-center mb-12\">\n              <h2 className=\"text-2xl font-bold mb-8 text-gray-500\">Trusted By</h2>\n            </div>\n            \n            <div className=\"flex flex-wrap items-center justify-center gap-12\">\n              {backedBy.map((company, i) => (\n                <div key={i} className=\"group flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity\">\n                  <div className=\"w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center font-bold text-xl group-hover:bg-[#00FF9C]/20 group-hover:text-[#00FF9C] transition\">\n                    {company.logo}\n                  </div>\n                  <span className=\"font-semibold\">{company.name}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n\n        {/* Final CTA */}\n        <section className=\"py-24 px-4\">\n          <div className=\"max-w-3xl mx-auto\">\n            <div className=\"relative p-12 rounded-3xl bg-gradient-to-b from-[#111] to-[#0a0a0a] border border-gray-800 overflow-hidden\">\n              <div className=\"absolute top-0 right-0 w-64 h-64 bg-[#00FF9C]/10 rounded-full blur-[100px]\" />\n              <div className=\"relative text-center\">\n                <h2 className=\"text-3xl sm:text-4xl font-bold mb-4\">Ready to build?</h2>\n                <p className=\"text-gray-400 mb-8\">Create your first FlexiReact app in seconds</p>\n                \n                <div className=\"inline-block p-4 rounded-xl bg-black/50 border border-gray-800 font-mono text-sm mb-8\">\n                  <span className=\"text-[#00FF9C]\">$</span>\n                  <span className=\"text-gray-300 ml-2\">npx create-flexireact my-app</span>\n                </div>\n                \n                <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n                  <a href=\"https://github.com/flexireact/flexireact\"\n                     className=\"inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105\">\n                    Start Building \u2192\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Premium Footer */}\n        <footer className=\"border-t border-gray-800/50 py-16 px-4\">\n          <div className=\"max-w-7xl mx-auto\">\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-12\">\n              <div>\n                <h3 className=\"font-semibold mb-4\">Product</h3>\n                <ul className=\"space-y-2\">\n                  <li><a href=\"https://github.com/flexireact/flexireact#readme\" className=\"text-sm text-gray-400 hover:text-white transition\">Docs</a></li>\n                  <li><a href=\"https://github.com/flexireact/flexireact/tree/main/examples\" className=\"text-sm text-gray-400 hover:text-white transition\">Examples</a></li>\n                  <li><a href=\"https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md\" className=\"text-sm text-gray-400 hover:text-white transition\">Changelog</a></li>\n                  <li><a href=\"https://github.com/flexireact/flexireact/projects\" className=\"text-sm text-gray-400 hover:text-white transition\">Roadmap</a></li>\n                </ul>\n              </div>\n              <div>\n                <h3 className=\"font-semibold mb-4\">Community</h3>\n                <ul className=\"space-y-2\">\n                  <li><a href=\"https://github.com/flexireact/flexireact\" className=\"text-sm text-gray-400 hover:text-white transition\">GitHub</a></li>\n                  <li><a href=\"https://discord.gg/rFSZxFtpAA\" className=\"text-sm text-gray-400 hover:text-white transition\">Discord</a></li>\n                  <li><a href=\"https://github.com/flexireact/flexireact/discussions\" className=\"text-sm text-gray-400 hover:text-white transition\">Discussions</a></li>\n                </ul>\n              </div>\n              <div>\n                <h3 className=\"font-semibold mb-4\">Ecosystem</h3>\n                <ul className=\"space-y-2\">\n                  <li><a href=\"https://www.npmjs.com/package/@flexireact/flexi-ui\" className=\"text-sm text-gray-400 hover:text-white transition\">FlexiUI</a></li>\n                  <li><a href=\"https://www.npmjs.com/package/flexiguard\" className=\"text-sm text-gray-400 hover:text-white transition\">FlexiGuard</a></li>\n                  <li><a href=\"https://www.npmjs.com/package/create-flexireact\" className=\"text-sm text-gray-400 hover:text-white transition\">CLI</a></li>\n                </ul>\n              </div>\n              <div>\n                <h3 className=\"font-semibold mb-4\">Legal</h3>\n                <ul className=\"space-y-2\">\n                  <li><a href=\"https://github.com/flexireact/flexireact/blob/main/LICENSE\" className=\"text-sm text-gray-400 hover:text-white transition\">License</a></li>\n                  <li><a href=\"https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md\" className=\"text-sm text-gray-400 hover:text-white transition\">Contributing</a></li>\n                </ul>\n              </div>\n            </div>\n            \n            <div className=\"pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center\">\n                  <span className=\"text-black font-bold\">F</span>\n                </div>\n                <span className=\"text-sm text-gray-400\">Built with \u2764\uFE0F by Asuno</span>\n              </div>\n              <p className=\"text-sm text-gray-500\">\u00A9 {new Date().getFullYear()} FlexiReact. MIT License.</p>\n            </div>\n          </div>\n        </footer>\n      </main>\n    </div>\n  );\n}";
+//# sourceMappingURL=app-router-premium.d.ts.map

package/dist/templates/app-router-premium.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-router-premium.d.ts","sourceRoot":"","sources":["../../src/templates/app-router-premium.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,oBAAoB,2rsBAoY/B,CAAC"}

package/dist/templates/app-router-premium.js

@@ -0,0 +1,391 @@
+// Premium landing page content for app-router template
+export const PREMIUM_PAGE_CONTENT = `import React from 'react';
+
+const coreFeatures = [
+  { icon: '⚡', title: '2ms Cold Start', desc: 'Edge runtime with instant response times' },
+  { icon: '🧩', title: '50+ UI Components', desc: 'FlexiUI ready to use out of the box' },
+  { icon: '🛡️', title: 'Middleware Auth', desc: 'FlexiGuard powered authentication' },
+  { icon: '🔥', title: 'Zero-config Dev', desc: 'Start coding immediately, no setup' },
+  { icon: '💽', title: 'File-based API', desc: 'Intuitive API routes structure' },
+  { icon: '🏝️', title: 'Islands Architecture', desc: 'Partial hydration for max performance' },
+  { icon: '📘', title: 'TypeScript First', desc: 'Full type safety out of the box' },
+  { icon: '🎨', title: 'Tailwind v4', desc: 'Latest CSS framework integrated' },
+  { icon: '🚀', title: 'SSR + PPR', desc: 'Streaming SSR & Partial Prerendering' },
+];
+
+const timeline = [
+  { step: '1', title: 'File Routing', desc: 'Create pages in app/ directory' },
+  { step: '2', title: 'Layouts', desc: 'Shared UI across routes' },
+  { step: '3', title: 'Islands', desc: 'Interactive components' },
+  { step: '4', title: 'SSR/SSG', desc: 'Server or static rendering' },
+  { step: '5', title: 'Deploy', desc: 'Ship to Edge in seconds' },
+];
+
+const benchmarks = [
+  { name: 'FlexiReact', time: 2, color: '#00FF9C' },
+  { name: 'Astro', time: 5, color: '#FF5D01' },
+  { name: 'Next.js', time: 8, color: '#000000' },
+];
+
+const ecosystem = [
+  { icon: '⚛️', name: 'FlexiUI', desc: '50+ components', link: 'https://www.npmjs.com/package/@flexireact/flexi-ui' },
+  { icon: '🔐', name: 'FlexiGuard', desc: 'Auth & RBAC', link: 'https://www.npmjs.com/package/flexiguard' },
+  { icon: '🧰', name: 'FlexiCLI', desc: 'Commands & scaffolding', link: 'https://www.npmjs.com/package/create-flexireact' },
+  { icon: '🌐', name: 'FlexiEdge', desc: 'Deploy-ready runtime', link: 'https://github.com/flexireact/flexireact' },
+];
+
+const whyFlexiReact = [
+  { icon: '🚀', title: 'Ultra-fast dev experience', desc: 'Sub-second builds with esbuild' },
+  { icon: '🏝️', title: 'Islands with zero config', desc: 'Automatic partial hydration' },
+  { icon: '🧩', title: 'UI components included', desc: 'FlexiUI with 50+ components' },
+  { icon: '🔐', title: 'Authentication included', desc: 'FlexiGuard for auth & RBAC' },
+];
+
+const backedBy = [
+  { name: 'Velcarius', logo: 'V' },
+  { name: 'Rayze Sol Energy', logo: 'R' },
+  { name: 'FramLink', logo: 'F' },
+];
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-[#0a0a0a]">
+      {/* Premium Navbar */}
+      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50">
+        <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+          <a href="/" className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20">
+              <span className="text-black font-bold text-lg">F</span>
+            </div>
+            <span className="font-bold text-lg">FlexiReact</span>
+            <span className="px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full">v3.0</span>
+          </a>
+          
+          <div className="hidden md:flex items-center gap-8">
+            <a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition-colors">Docs</a>
+            <a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition-colors">GitHub</a>
+            <a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition-colors">Examples</a>
+            <a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition-colors">Discord</a>
+          </div>
+
+          <a 
+            href="https://github.com/flexireact/flexireact" 
+            target="_blank"
+            className="group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all"
+          >
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+            </svg>
+            <span className="text-sm font-medium">Star</span>
+          </a>
+        </nav>
+      </header>
+
+      <main className="pt-16">
+        {/* Hero Section */}
+        <section className="relative py-24 lg:py-32 px-4 overflow-hidden animate-fade-in-up">
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent" />
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]" />
+          
+          <div className="relative max-w-5xl mx-auto text-center">
+            <div className="inline-flex items-center justify-center w-20 h-20 mb-8 rounded-2xl bg-gradient-to-br from-[#00FF9C] to-[#00D68F] shadow-lg shadow-[#00FF9C]/20">
+              <span className="text-3xl font-black text-black">F</span>
+            </div>
+            
+            <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
+              <span className="w-2 h-2 rounded-full bg-[#00FF9C] animate-pulse" />
+              <span className="text-sm text-gray-300">v3.0 — The Future of React</span>
+            </div>
+            
+            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 tracking-tight">
+              Build faster with
+              <span className="block mt-2 bg-gradient-to-r from-[#00FF9C] via-[#00D68F] to-[#00FF9C] bg-clip-text text-transparent">
+                FlexiReact
+              </span>
+            </h1>
+            
+            <p className="text-lg sm:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
+              The modern React framework with TypeScript, Tailwind, SSR, Islands, 
+              Edge Runtime, and 50+ UI components. <span className="text-white font-medium">Better than Next.js.</span>
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
+              <a href="https://github.com/flexireact/flexireact" 
+                 className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105 hover:shadow-lg hover:shadow-[#00FF9C]/25">
+                Get Started
+                <svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </a>
+              <a href="https://github.com/flexireact/flexireact#readme"
+                 className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/5 text-white font-semibold rounded-xl border border-white/10 hover:bg-white/10 hover:border-[#00FF9C]/50 transition-all">
+                Documentation
+              </a>
+            </div>
+
+            <div className="max-w-lg mx-auto">
+              <div className="rounded-xl bg-[#111] border border-gray-800 overflow-hidden shadow-2xl">
+                <div className="flex items-center gap-2 px-4 py-3 bg-[#0d0d0d] border-b border-gray-800">
+                  <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  </div>
+                  <span className="text-xs text-gray-500 ml-2">Terminal</span>
+                </div>
+                <div className="p-4 font-mono text-sm">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[#00FF9C]">$</span>
+                    <span className="text-gray-300">npx create-flexireact my-app</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Core Features Premium */}
+        <section className="py-24 px-4 animate-fade-in-up animate-delay-100">
+          <div className="max-w-7xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Core Features</h2>
+              <p className="text-gray-400">Everything you need to build modern web apps</p>
+            </div>
+            
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {coreFeatures.map((f, i) => (
+                <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-[#00FF9C]/10">
+                  <div className="w-12 h-12 rounded-xl bg-[#00FF9C]/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
+                    {f.icon}
+                  </div>
+                  <h3 className="font-semibold text-lg mb-2">{f.title}</h3>
+                  <p className="text-gray-400 text-sm leading-relaxed">{f.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* How it Works Timeline */}
+        <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-200">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">How it Works</h2>
+              <p className="text-gray-400">From idea to production in 5 simple steps</p>
+            </div>
+            
+            <div className="relative">
+              <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#00FF9C]/20 to-transparent" />
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
+                {timeline.map((item, i) => (
+                  <div key={i} className="relative text-center">
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-[#00FF9C] to-[#00D68F] text-black font-bold text-xl mb-4 shadow-lg shadow-[#00FF9C]/20">
+                      {item.step}
+                    </div>
+                    <h3 className="font-semibold mb-2">{item.title}</h3>
+                    <p className="text-sm text-gray-400">{item.desc}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Code Example */}
+        <section className="py-24 px-4 animate-fade-in-up animate-delay-300">
+          <div className="max-w-4xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Simple & Powerful</h2>
+              <p className="text-gray-400">Write clean code that just works</p>
+            </div>
+            
+            <div className="rounded-2xl bg-[#111] border border-gray-800 overflow-hidden">
+              <div className="flex items-center gap-4 px-6 py-3 bg-[#0d0d0d] border-b border-gray-800">
+                <button className="px-3 py-1.5 text-sm bg-[#00FF9C]/20 text-[#00FF9C] rounded-lg">Pages</button>
+                <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">API Route</button>
+                <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">Component</button>
+              </div>
+              <pre className="p-6 overflow-x-auto"><code className="text-sm text-gray-300">{\`// app/page.tsx
+export default function Home() {
+  return (
+    <div className="container mx-auto p-8">
+      <h1 className="text-4xl font-bold">
+        Hello from FlexiReact ⚡
+      </h1>
+    </div>
+  );
+}\`}</code></pre>
+            </div>
+          </div>
+        </section>
+
+        {/* Benchmarks */}
+        <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-400">
+          <div className="max-w-4xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Blazing Fast Performance</h2>
+              <p className="text-gray-400">Cold start comparison (lower is better)</p>
+            </div>
+            
+            <div className="space-y-6">
+              {benchmarks.map((bench, i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <div className="w-32 text-sm font-medium">{bench.name}</div>
+                  <div className="flex-1 h-12 bg-white/5 rounded-lg overflow-hidden">
+                    <div 
+                      className="h-full flex items-center px-4 text-sm font-bold transition-all duration-1000"
+                      style={{
+                        width: \`\${(bench.time / 10) * 100}%\`,
+                        backgroundColor: bench.name === 'FlexiReact' ? '#00FF9C' : 'rgba(255,255,255,0.1)',
+                        color: bench.name === 'FlexiReact' ? '#000' : '#fff'
+                      }}
+                    >
+                      {bench.time}ms
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Why FlexiReact */}
+        <section className="py-24 px-4">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Why FlexiReact?</h2>
+              <p className="text-gray-400">Built for developers who value speed and simplicity</p>
+            </div>
+            
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {whyFlexiReact.map((item, i) => (
+                <div key={i} className="p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5">
+                  <div className="text-3xl mb-4">{item.icon}</div>
+                  <h3 className="font-semibold mb-2">{item.title}</h3>
+                  <p className="text-sm text-gray-400">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Ecosystem */}
+        <section className="py-24 px-4 bg-white/[0.02]">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold mb-4">Complete Ecosystem</h2>
+              <p className="text-gray-400">Everything you need, batteries included</p>
+            </div>
+            
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {ecosystem.map((item, i) => (
+                <a key={i} href={item.link} target="_blank" className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-105">
+                  <div className="text-4xl mb-4">{item.icon}</div>
+                  <h3 className="font-semibold mb-1 group-hover:text-[#00FF9C] transition">{item.name}</h3>
+                  <p className="text-sm text-gray-400">{item.desc}</p>
+                </a>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Backed By */}
+        <section className="py-24 px-4">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-2xl font-bold mb-8 text-gray-500">Trusted By</h2>
+            </div>
+            
+            <div className="flex flex-wrap items-center justify-center gap-12">
+              {backedBy.map((company, i) => (
+                <div key={i} className="group flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity">
+                  <div className="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center font-bold text-xl group-hover:bg-[#00FF9C]/20 group-hover:text-[#00FF9C] transition">
+                    {company.logo}
+                  </div>
+                  <span className="font-semibold">{company.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Final CTA */}
+        <section className="py-24 px-4">
+          <div className="max-w-3xl mx-auto">
+            <div className="relative p-12 rounded-3xl bg-gradient-to-b from-[#111] to-[#0a0a0a] border border-gray-800 overflow-hidden">
+              <div className="absolute top-0 right-0 w-64 h-64 bg-[#00FF9C]/10 rounded-full blur-[100px]" />
+              <div className="relative text-center">
+                <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to build?</h2>
+                <p className="text-gray-400 mb-8">Create your first FlexiReact app in seconds</p>
+                
+                <div className="inline-block p-4 rounded-xl bg-black/50 border border-gray-800 font-mono text-sm mb-8">
+                  <span className="text-[#00FF9C]">$</span>
+                  <span className="text-gray-300 ml-2">npx create-flexireact my-app</span>
+                </div>
+                
+                <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                  <a href="https://github.com/flexireact/flexireact"
+                     className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[#00FF9C] text-black font-semibold rounded-xl hover:bg-[#00D68F] transition-all hover:scale-105">
+                    Start Building →
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Premium Footer */}
+        <footer className="border-t border-gray-800/50 py-16 px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+              <div>
+                <h3 className="font-semibold mb-4">Product</h3>
+                <ul className="space-y-2">
+                  <li><a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition">Docs</a></li>
+                  <li><a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition">Examples</a></li>
+                  <li><a href="https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md" className="text-sm text-gray-400 hover:text-white transition">Changelog</a></li>
+                  <li><a href="https://github.com/flexireact/flexireact/projects" className="text-sm text-gray-400 hover:text-white transition">Roadmap</a></li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-4">Community</h3>
+                <ul className="space-y-2">
+                  <li><a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition">GitHub</a></li>
+                  <li><a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition">Discord</a></li>
+                  <li><a href="https://github.com/flexireact/flexireact/discussions" className="text-sm text-gray-400 hover:text-white transition">Discussions</a></li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-4">Ecosystem</h3>
+                <ul className="space-y-2">
+                  <li><a href="https://www.npmjs.com/package/@flexireact/flexi-ui" className="text-sm text-gray-400 hover:text-white transition">FlexiUI</a></li>
+                  <li><a href="https://www.npmjs.com/package/flexiguard" className="text-sm text-gray-400 hover:text-white transition">FlexiGuard</a></li>
+                  <li><a href="https://www.npmjs.com/package/create-flexireact" className="text-sm text-gray-400 hover:text-white transition">CLI</a></li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-4">Legal</h3>
+                <ul className="space-y-2">
+                  <li><a href="https://github.com/flexireact/flexireact/blob/main/LICENSE" className="text-sm text-gray-400 hover:text-white transition">License</a></li>
+                  <li><a href="https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md" className="text-sm text-gray-400 hover:text-white transition">Contributing</a></li>
+                </ul>
+              </div>
+            </div>
+            
+            <div className="pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center">
+                  <span className="text-black font-bold">F</span>
+                </div>
+                <span className="text-sm text-gray-400">Built with ❤️ by Asuno</span>
+              </div>
+              <p className="text-sm text-gray-500">© {new Date().getFullYear()} FlexiReact. MIT License.</p>
+            </div>
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}`;
+//# sourceMappingURL=app-router-premium.js.map

package/dist/templates/app-router-premium.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-router-premium.js","sourceRoot":"","sources":["../../src/templates/app-router-premium.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoYlC,CAAC"}

package/dist/templates/app-router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-router.d.ts","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CA+WpE"}
+{"version":3,"file":"app-router.d.ts","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAkoBpE"}

package/dist/templates/app-router.js

@@ -85,27 +85,89 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 `,
         'app/page.tsx': `import React from 'react';
 
-const features = [
-  { icon: '⚡', title: 'Lightning Fast', desc: 'Powered by esbuild for instant builds and HMR' },
-  { icon: '🎨', title: 'FlexiUI', desc: '50+ beautiful, accessible components' },
-  { icon: '📘', title: 'TypeScript', desc: 'Full type safety out of the box' },
-  { icon: '🏝️', title: 'Islands', desc: 'Partial hydration for max performance' },
-  { icon: '🌐', title: 'Edge Ready', desc: 'Deploy anywhere: Node, Bun, Deno, CF' },
+const coreFeatures = [
+  { icon: '⚡', title: '2ms Cold Start', desc: 'Edge runtime with instant response times' },
+  { icon: '🧩', title: '50+ UI Components', desc: 'FlexiUI ready to use out of the box' },
+  { icon: '🛡️', title: 'Middleware Auth', desc: 'FlexiGuard powered authentication' },
+  { icon: '🔥', title: 'Zero-config Dev', desc: 'Start coding immediately, no setup' },
+  { icon: '💽', title: 'File-based API', desc: 'Intuitive API routes structure' },
+  { icon: '🏝️', title: 'Islands Architecture', desc: 'Partial hydration for max performance' },
+  { icon: '📘', title: 'TypeScript First', desc: 'Full type safety out of the box' },
+  { icon: '🎨', title: 'Tailwind v4', desc: 'Latest CSS framework integrated' },
   { icon: '🚀', title: 'SSR + PPR', desc: 'Streaming SSR & Partial Prerendering' },
 ];
 
-const stats = [
-  { label: 'Components', value: '50+' },
-  { label: 'Bundle Size', value: '~90kb' },
-  { label: 'Build Time', value: '<1s' },
-  { label: 'Lighthouse', value: '100' },
+const timeline = [
+  { step: '1', title: 'File Routing', desc: 'Create pages in app/ directory' },
+  { step: '2', title: 'Layouts', desc: 'Shared UI across routes' },
+  { step: '3', title: 'Islands', desc: 'Interactive components' },
+  { step: '4', title: 'SSR/SSG', desc: 'Server or static rendering' },
+  { step: '5', title: 'Deploy', desc: 'Ship to Edge in seconds' },
+];
+
+const benchmarks = [
+  { name: 'FlexiReact', time: 2, color: '#00FF9C' },
+  { name: 'Astro', time: 5, color: '#FF5D01' },
+  { name: 'Next.js', time: 8, color: '#000000' },
+];
+
+const ecosystem = [
+  { icon: '⚛️', name: 'FlexiUI', desc: '50+ components', link: 'https://www.npmjs.com/package/@flexireact/flexi-ui' },
+  { icon: '🔐', name: 'FlexiGuard', desc: 'Auth & RBAC', link: 'https://www.npmjs.com/package/flexiguard' },
+  { icon: '🧰', name: 'FlexiCLI', desc: 'Commands & scaffolding', link: 'https://www.npmjs.com/package/create-flexireact' },
+  { icon: '🌐', name: 'FlexiEdge', desc: 'Deploy-ready runtime', link: 'https://github.com/flexireact/flexireact' },
+];
+
+const whyFlexiReact = [
+  { icon: '🚀', title: 'Ultra-fast dev experience', desc: 'Sub-second builds with esbuild' },
+  { icon: '🏝️', title: 'Islands with zero config', desc: 'Automatic partial hydration' },
+  { icon: '🧩', title: 'UI components included', desc: 'FlexiUI with 50+ components' },
+  { icon: '🔐', title: 'Authentication included', desc: 'FlexiGuard for auth & RBAC' },
+];
+
+const backedBy = [
+  { name: 'Velcarius', logo: 'V' },
+  { name: 'Rayze Sol Energy', logo: 'R' },
+  { name: 'FramLink', logo: 'F' },
 ];
 
 export default function HomePage() {
   return (
-    <main className="min-h-screen bg-[#0a0a0a]">
-      {/* Hero */}
-      <section className="relative py-24 lg:py-32 px-4 overflow-hidden">
+    <div className="min-h-screen bg-[#0a0a0a]">
+      {/* Premium Navbar */}
+      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50">
+        <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+          <a href="/" className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20">
+              <span className="text-black font-bold text-lg">F</span>
+            </div>
+            <span className="font-bold text-lg">FlexiReact</span>
+            <span className="px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full">v3.0</span>
+          </a>
+          
+          <div className="hidden md:flex items-center gap-8">
+            <a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition-colors">Docs</a>
+            <a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition-colors">GitHub</a>
+            <a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition-colors">Examples</a>
+            <a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition-colors">Discord</a>
+          </div>
+
+          <a 
+            href="https://github.com/flexireact/flexireact" 
+            target="_blank"
+            className="group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all"
+          >
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+            </svg>
+            <span className="text-sm font-medium">Star</span>
+          </a>
+        </nav>
+      </header>
+
+      <main className="pt-16">
+        {/* Hero Section */}
+        <section className="relative py-24 lg:py-32 px-4 overflow-hidden animate-fade-in-up">
         {/* Gradient background */}
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#00FF9C]/10 via-transparent to-transparent" />
         <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-[#00FF9C]/5 rounded-full blur-[120px]" />
@@ -185,17 +247,17 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Features */}
-      <section className="py-24 px-4">
-        <div className="max-w-5xl mx-auto">
+      {/* Core Features Premium */}
+      <section className="py-24 px-4 animate-fade-in-up animate-delay-100">
+        <div className="max-w-7xl mx-auto">
           <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-400">A complete toolkit for building modern React apps</p>
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Core Features</h2>
+            <p className="text-gray-400">Everything you need to build modern web apps</p>
           </div>
           
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {features.map((f, i) => (
-              <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:-translate-y-1">
+            {coreFeatures.map((f, i) => (
+              <div key={i} className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-[1.02] hover:shadow-lg hover:shadow-[#00FF9C]/10">
                 <div className="w-12 h-12 rounded-xl bg-[#00FF9C]/10 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
                   {f.icon}
                 </div>
@@ -207,7 +269,151 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* CTA */}
+      {/* How it Works Timeline */}
+      <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-200">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">How it Works</h2>
+            <p className="text-gray-400">From idea to production in 5 simple steps</p>
+          </div>
+          
+          <div className="relative">
+            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#00FF9C]/20 to-transparent" />
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
+              {timeline.map((item, i) => (
+                <div key={i} className="relative text-center">
+                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-[#00FF9C] to-[#00D68F] text-black font-bold text-xl mb-4 shadow-lg shadow-[#00FF9C]/20">
+                    {item.step}
+                  </div>
+                  <h3 className="font-semibold mb-2">{item.title}</h3>
+                  <p className="text-sm text-gray-400">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Code Example */}
+      <section className="py-24 px-4 animate-fade-in-up animate-delay-300">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Simple & Powerful</h2>
+            <p className="text-gray-400">Write clean code that just works</p>
+          </div>
+          
+          <div className="rounded-2xl bg-[#111] border border-gray-800 overflow-hidden">
+            <div className="flex items-center gap-4 px-6 py-3 bg-[#0d0d0d] border-b border-gray-800">
+              <button className="px-3 py-1.5 text-sm bg-[#00FF9C]/20 text-[#00FF9C] rounded-lg">Pages</button>
+              <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">API Route</button>
+              <button className="px-3 py-1.5 text-sm text-gray-400 hover:text-white transition">Component</button>
+            </div>
+            <pre className="p-6 overflow-x-auto"><code className="text-sm text-gray-300">{\`// app/page.tsx
+export default function Home() {
+  return (
+    <div className="container mx-auto p-8">
+      <h1 className="text-4xl font-bold">
+        Hello from FlexiReact ⚡
+      </h1>
+    </div>
+  );
+}\`}</code></pre>
+          </div>
+        </div>
+      </section>
+
+      {/* Benchmarks */}
+      <section className="py-24 px-4 bg-white/[0.02] animate-fade-in-up animate-delay-400">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Blazing Fast Performance</h2>
+            <p className="text-gray-400">Cold start comparison (lower is better)</p>
+          </div>
+          
+          <div className="space-y-6">
+            {benchmarks.map((bench, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <div className="w-32 text-sm font-medium">{bench.name}</div>
+                <div className="flex-1 h-12 bg-white/5 rounded-lg overflow-hidden">
+                  <div 
+                    className="h-full flex items-center px-4 text-sm font-bold transition-all duration-1000"
+                    style={{
+                      width: \`\${(bench.time / 10) * 100}%\`,
+                      backgroundColor: bench.name === 'FlexiReact' ? '#00FF9C' : 'rgba(255,255,255,0.1)',
+                      color: bench.name === 'FlexiReact' ? '#000' : '#fff'
+                    }}
+                  >
+                    {bench.time}ms
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Why FlexiReact */}
+      <section className="py-24 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Why FlexiReact?</h2>
+            <p className="text-gray-400">Built for developers who value speed and simplicity</p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {whyFlexiReact.map((item, i) => (
+              <div key={i} className="p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5">
+                <div className="text-3xl mb-4">{item.icon}</div>
+                <h3 className="font-semibold mb-2">{item.title}</h3>
+                <p className="text-sm text-gray-400">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ecosystem */}
+      <section className="py-24 px-4 bg-white/[0.02]">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Complete Ecosystem</h2>
+            <p className="text-gray-400">Everything you need, batteries included</p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {ecosystem.map((item, i) => (
+              <a key={i} href={item.link} target="_blank" className="group p-6 rounded-2xl bg-gradient-to-b from-white/5 to-transparent border border-white/5 hover:border-[#00FF9C]/30 transition-all hover:scale-105">
+                <div className="text-4xl mb-4">{item.icon}</div>
+                <h3 className="font-semibold mb-1 group-hover:text-[#00FF9C] transition">{item.name}</h3>
+                <p className="text-sm text-gray-400">{item.desc}</p>
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Backed By */}
+      <section className="py-24 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl font-bold mb-8 text-gray-500">Trusted By</h2>
+          </div>
+          
+          <div className="flex flex-wrap items-center justify-center gap-12">
+            {backedBy.map((company, i) => (
+              <div key={i} className="group flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity">
+                <div className="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center font-bold text-xl group-hover:bg-[#00FF9C]/20 group-hover:text-[#00FF9C] transition">
+                  {company.logo}
+                </div>
+                <span className="font-semibold">{company.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
       <section className="py-24 px-4">
         <div className="max-w-3xl mx-auto">
           <div className="relative p-8 sm:p-12 rounded-3xl bg-gradient-to-b from-[#111] to-[#0a0a0a] border border-gray-800 overflow-hidden">
@@ -232,24 +438,57 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="py-12 px-4 border-t border-gray-800/50">
-        <div className="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center">
-              <span className="text-sm font-bold text-black">F</span>
+      {/* Premium Footer */}
+      <footer className="border-t border-gray-800/50 py-16 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+            <div>
+              <h3 className="font-semibold mb-4">Product</h3>
+              <ul className="space-y-2">
+                <li><a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition">Docs</a></li>
+                <li><a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition">Examples</a></li>
+                <li><a href="https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md" className="text-sm text-gray-400 hover:text-white transition">Changelog</a></li>
+                <li><a href="https://github.com/flexireact/flexireact/projects" className="text-sm text-gray-400 hover:text-white transition">Roadmap</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-4">Community</h3>
+              <ul className="space-y-2">
+                <li><a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition">GitHub</a></li>
+                <li><a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition">Discord</a></li>
+                <li><a href="https://github.com/flexireact/flexireact/discussions" className="text-sm text-gray-400 hover:text-white transition">Discussions</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-4">Ecosystem</h3>
+              <ul className="space-y-2">
+                <li><a href="https://www.npmjs.com/package/@flexireact/flexi-ui" className="text-sm text-gray-400 hover:text-white transition">FlexiUI</a></li>
+                <li><a href="https://www.npmjs.com/package/flexiguard" className="text-sm text-gray-400 hover:text-white transition">FlexiGuard</a></li>
+                <li><a href="https://www.npmjs.com/package/create-flexireact" className="text-sm text-gray-400 hover:text-white transition">CLI</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-4">Legal</h3>
+              <ul className="space-y-2">
+                <li><a href="https://github.com/flexireact/flexireact/blob/main/LICENSE" className="text-sm text-gray-400 hover:text-white transition">License</a></li>
+                <li><a href="https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md" className="text-sm text-gray-400 hover:text-white transition">Contributing</a></li>
+              </ul>
             </div>
-            <span className="font-semibold">FlexiReact</span>
           </div>
-          <p className="text-sm text-gray-500">Built with ❤️ by FlexiReact Team</p>
-          <div className="flex items-center gap-6">
-            <a href="https://github.com/flexireact/flexireact" className="text-gray-400 hover:text-white transition-colors">GitHub</a>
-            <a href="https://discord.gg/rFSZxFtpAA" className="text-gray-400 hover:text-white transition-colors">Discord 💬</a>
-            <a href="https://npmjs.com/package/@flexireact/core" className="text-gray-400 hover:text-white transition-colors">npm</a>
+          
+          <div className="pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center">
+                <span className="text-black font-bold">F</span>
+              </div>
+              <span className="text-sm text-gray-400">Built with ❤️ by Asuno</span>
+            </div>
+            <p className="text-sm text-gray-500">© {new Date().getFullYear()} FlexiReact. MIT License.</p>
           </div>
         </div>
       </footer>
-    </main>
+      </main>
+    </div>
   );
 }
 `,
@@ -325,6 +564,42 @@ export default function NotFound() {
 body {
   font-family: var(--font-sans);
 }
+
+/* Fade-in and slide-up animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+}
+
+.animate-delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+
+.animate-delay-300 {
+  animation-delay: 0.3s;
+  opacity: 0;
+}
+
+.animate-delay-400 {
+  animation-delay: 0.4s;
+  opacity: 0;
+}
 `,
         // Lib
         'lib/utils.ts': `import { clsx, type ClassValue } from 'clsx';

package/dist/templates/app-router.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-router.js","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,UAAU,iBAAiB,CAAC,WAAmB;IACnD,OAAO;QACL,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,GAAG,EAAE,+BAA+B;gBACpC,KAAK,EAAE,iCAAiC;gBACxC,KAAK,EAAE,kBAAkB;gBACzB,GAAG,EAAE,kEAAkE;aACxE;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;gBACtB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;gBAChC,IAAI,EAAE,QAAQ;gBACd,gBAAgB,EAAE,QAAQ;aAC3B;YACD,eAAe,EAAE;gBACf,cAAc,EAAE,SAAS;gBACzB,kBAAkB,EAAE,SAAS;gBAC7B,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,QAAQ;gBACrB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;aACjC;SACF,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC;YAC9B,eAAe,EAAE;gBACf,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,CAAC;gBACtC,MAAM,EAAE,QAAQ;gBAChB,gBAAgB,EAAE,SAAS;gBAC3B,GAAG,EAAE,WAAW;gBAChB,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,IAAI;gBACvB,eAAe,EAAE,IAAI;gBACrB,MAAM,EAAE,IAAI;gBACZ,OAAO,EAAE,GAAG;gBACZ,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC,KAAK,CAAC;iBACf;aACF;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;YAChC,OAAO,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC9C,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,mBAAmB,EAAE;;;;;CAKxB;QAEG,sBAAsB,EAAE;;;;CAI3B;QAEG,gBAAgB;QAChB,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;CAkBrB;QAEG,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKnB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;CAYtB;QAEG,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpB;QAEG,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;CAoBxB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;CAYtB;QAEG,MAAM;QACN,cAAc,EAAE;;;;;;CAMnB;QAEG,SAAS;QACT,oBAAoB,EAAE;;;;;;;;;OASnB;QAEH,iBAAiB,EAAE,EAAE;QAErB,YAAY,EAAE;;;;;;;CAOjB;KACE,CAAC;AACJ,CAAC"}
+{"version":3,"file":"app-router.js","sourceRoot":"","sources":["../../src/templates/app-router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,UAAU,iBAAiB,CAAC,WAAmB;IACnD,OAAO;QACL,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;gBACP,GAAG,EAAE,+BAA+B;gBACpC,KAAK,EAAE,iCAAiC;gBACxC,KAAK,EAAE,kBAAkB;gBACzB,GAAG,EAAE,kEAAkE;aACxE;YACD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;gBACtB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;gBAChC,IAAI,EAAE,QAAQ;gBACd,gBAAgB,EAAE,QAAQ;aAC3B;YACD,eAAe,EAAE;gBACf,cAAc,EAAE,SAAS;gBACzB,kBAAkB,EAAE,SAAS;gBAC7B,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,QAAQ;gBACrB,kBAAkB,EAAE,QAAQ;gBAC5B,sBAAsB,EAAE,QAAQ;aACjC;SACF,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC;YAC9B,eAAe,EAAE;gBACf,MAAM,EAAE,QAAQ;gBAChB,GAAG,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,CAAC;gBACtC,MAAM,EAAE,QAAQ;gBAChB,gBAAgB,EAAE,SAAS;gBAC3B,GAAG,EAAE,WAAW;gBAChB,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,IAAI;gBAClB,eAAe,EAAE,IAAI;gBACrB,iBAAiB,EAAE,IAAI;gBACvB,eAAe,EAAE,IAAI;gBACrB,MAAM,EAAE,IAAI;gBACZ,OAAO,EAAE,GAAG;gBACZ,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC,KAAK,CAAC;iBACf;aACF;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;YAChC,OAAO,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC9C,EAAE,IAAI,EAAE,CAAC,CAAC;QAEX,mBAAmB,EAAE;;;;;CAKxB;QAEG,sBAAsB,EAAE;;;;CAI3B;QAEG,gBAAgB;QAChB,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;CAkBrB;QAEG,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwZnB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;CAYtB;QAEG,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpB;QAEG,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;CAoBxB;QAEG,iBAAiB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDtB;QAEG,MAAM;QACN,cAAc,EAAE;;;;;;CAMnB;QAEG,SAAS;QACT,oBAAoB,EAAE;;;;;;;;;OASnB;QAEH,iBAAiB,EAAE,EAAE;QAErB,YAAY,EAAE;;;;;;;CAOjB;KACE,CAAC;AACJ,CAAC"}

package/dist/templates/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAmkBlE"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,CAumBlE"}

package/dist/templates/default.js

@@ -320,6 +320,42 @@ body {
   color: var(--color-foreground);
   -webkit-font-smoothing: antialiased;
 }
+
+/* Fade-in and slide-up animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+}
+
+.animate-delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+
+.animate-delay-300 {
+  animation-delay: 0.3s;
+  opacity: 0;
+}
+
+.animate-delay-400 {
+  animation-delay: 0.4s;
+  opacity: 0;
+}
 `,
         // ========================================================================
         // Routes Directory - FlexiReact v3 Routing

package/dist/templates/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../src/templates/default.ts"],"names":[],"mappings":"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"}

package/dist/templates/premium-sections.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Premium sections for FlexiReact templates
+ * Reusable components for landing pages
+ */
+export declare const PREMIUM_NAVBAR = "import React from 'react';\n\nexport function PremiumNavbar() {\n  return (\n    <header className=\"fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50\">\n      <nav className=\"max-w-7xl mx-auto px-4 h-16 flex items-center justify-between\">\n        <a href=\"/\" className=\"flex items-center gap-3\">\n          <div className=\"w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20\">\n            <span className=\"text-black font-bold text-lg\">F</span>\n          </div>\n          <span className=\"font-bold text-lg\">FlexiReact</span>\n          <span className=\"px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full\">v3.0</span>\n        </a>\n        \n        <div className=\"hidden md:flex items-center gap-8\">\n          <a href=\"https://github.com/flexireact/flexireact#readme\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Docs</a>\n          <a href=\"https://github.com/flexireact/flexireact\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">GitHub</a>\n          <a href=\"https://github.com/flexireact/flexireact/tree/main/examples\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Examples</a>\n          <a href=\"https://discord.gg/rFSZxFtpAA\" className=\"text-sm text-gray-400 hover:text-white transition-colors\">Discord</a>\n        </div>\n\n        <a \n          href=\"https://github.com/flexireact/flexireact\" \n          target=\"_blank\"\n          className=\"group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all\"\n        >\n          <svg className=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/>\n          </svg>\n          <span className=\"text-sm font-medium\">Star</span>\n        </a>\n      </nav>\n    </header>\n  );\n}";
+export declare const PREMIUM_FOOTER = "import React from 'react';\n\nexport function PremiumFooter() {\n  return (\n    <footer className=\"border-t border-gray-800/50 py-16 px-4\">\n      <div className=\"max-w-7xl mx-auto\">\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-12\">\n          <div>\n            <h3 className=\"font-semibold mb-4\">Product</h3>\n            <ul className=\"space-y-2\">\n              <li><a href=\"https://github.com/flexireact/flexireact#readme\" className=\"text-sm text-gray-400 hover:text-white transition\">Docs</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/tree/main/examples\" className=\"text-sm text-gray-400 hover:text-white transition\">Examples</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md\" className=\"text-sm text-gray-400 hover:text-white transition\">Changelog</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/projects\" className=\"text-sm text-gray-400 hover:text-white transition\">Roadmap</a></li>\n            </ul>\n          </div>\n          <div>\n            <h3 className=\"font-semibold mb-4\">Community</h3>\n            <ul className=\"space-y-2\">\n              <li><a href=\"https://github.com/flexireact/flexireact\" className=\"text-sm text-gray-400 hover:text-white transition\">GitHub</a></li>\n              <li><a href=\"https://discord.gg/rFSZxFtpAA\" className=\"text-sm text-gray-400 hover:text-white transition\">Discord</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/discussions\" className=\"text-sm text-gray-400 hover:text-white transition\">Discussions</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/issues\" className=\"text-sm text-gray-400 hover:text-white transition\">Issues</a></li>\n            </ul>\n          </div>\n          <div>\n            <h3 className=\"font-semibold mb-4\">Ecosystem</h3>\n            <ul className=\"space-y-2\">\n              <li><a href=\"https://www.npmjs.com/package/@flexireact/flexi-ui\" className=\"text-sm text-gray-400 hover:text-white transition\">FlexiUI</a></li>\n              <li><a href=\"https://www.npmjs.com/package/flexiguard\" className=\"text-sm text-gray-400 hover:text-white transition\">FlexiGuard</a></li>\n              <li><a href=\"https://www.npmjs.com/package/create-flexireact\" className=\"text-sm text-gray-400 hover:text-white transition\">CLI</a></li>\n            </ul>\n          </div>\n          <div>\n            <h3 className=\"font-semibold mb-4\">Legal</h3>\n            <ul className=\"space-y-2\">\n              <li><a href=\"https://github.com/flexireact/flexireact/blob/main/LICENSE\" className=\"text-sm text-gray-400 hover:text-white transition\">License</a></li>\n              <li><a href=\"https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md\" className=\"text-sm text-gray-400 hover:text-white transition\">Contributing</a></li>\n            </ul>\n          </div>\n        </div>\n        \n        <div className=\"pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center\">\n              <span className=\"text-black font-bold\">F</span>\n            </div>\n            <span className=\"text-sm text-gray-400\">Built with \u2764\uFE0F by Asuno</span>\n          </div>\n          <p className=\"text-sm text-gray-500\">\u00A9 {new Date().getFullYear()} FlexiReact. MIT License.</p>\n        </div>\n      </div>\n    </footer>\n  );\n}";
+export declare const ANIMATIONS_CSS = "\n/* Fade-in and slide-up animations */\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fadeInUp 0.6s ease-out forwards;\n}\n\n.animate-delay-100 {\n  animation-delay: 0.1s;\n  opacity: 0;\n}\n\n.animate-delay-200 {\n  animation-delay: 0.2s;\n  opacity: 0;\n}\n\n.animate-delay-300 {\n  animation-delay: 0.3s;\n  opacity: 0;\n}\n\n.animate-delay-400 {\n  animation-delay: 0.4s;\n  opacity: 0;\n}\n\n/* Glow effects */\n.glow-green {\n  box-shadow: 0 0 20px rgba(0, 255, 156, 0.3);\n}\n\n.hover-glow:hover {\n  box-shadow: 0 0 30px rgba(0, 255, 156, 0.4);\n  transform: scale(1.02);\n  transition: all 0.3s ease;\n}\n\n/* Gradient text */\n.gradient-text {\n  background: linear-gradient(135deg, #00FF9C 0%, #00D68F 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n";
+//# sourceMappingURL=premium-sections.d.ts.map

package/dist/templates/premium-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium-sections.d.ts","sourceRoot":"","sources":["../../src/templates/premium-sections.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,mjEAkCzB,CAAC;AAEH,eAAO,MAAM,cAAc,+mHAsDzB,CAAC;AAEH,eAAO,MAAM,cAAc,g9BAuD1B,CAAC"}

package/dist/templates/premium-sections.js

@@ -0,0 +1,151 @@
+/**
+ * Premium sections for FlexiReact templates
+ * Reusable components for landing pages
+ */
+export const PREMIUM_NAVBAR = `import React from 'react';
+
+export function PremiumNavbar() {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-gray-800/50">
+      <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+        <a href="/" className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00FF9C] to-[#00D68F] flex items-center justify-center shadow-lg shadow-[#00FF9C]/20">
+            <span className="text-black font-bold text-lg">F</span>
+          </div>
+          <span className="font-bold text-lg">FlexiReact</span>
+          <span className="px-2 py-0.5 text-xs bg-[#00FF9C]/20 text-[#00FF9C] rounded-full">v3.0</span>
+        </a>
+        
+        <div className="hidden md:flex items-center gap-8">
+          <a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition-colors">Docs</a>
+          <a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition-colors">GitHub</a>
+          <a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition-colors">Examples</a>
+          <a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition-colors">Discord</a>
+        </div>
+
+        <a 
+          href="https://github.com/flexireact/flexireact" 
+          target="_blank"
+          className="group flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-[#00FF9C]/50 rounded-lg transition-all"
+        >
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+          </svg>
+          <span className="text-sm font-medium">Star</span>
+        </a>
+      </nav>
+    </header>
+  );
+}`;
+export const PREMIUM_FOOTER = `import React from 'react';
+
+export function PremiumFooter() {
+  return (
+    <footer className="border-t border-gray-800/50 py-16 px-4">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+          <div>
+            <h3 className="font-semibold mb-4">Product</h3>
+            <ul className="space-y-2">
+              <li><a href="https://github.com/flexireact/flexireact#readme" className="text-sm text-gray-400 hover:text-white transition">Docs</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/tree/main/examples" className="text-sm text-gray-400 hover:text-white transition">Examples</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/blob/main/CHANGELOG-v3.md" className="text-sm text-gray-400 hover:text-white transition">Changelog</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/projects" className="text-sm text-gray-400 hover:text-white transition">Roadmap</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-4">Community</h3>
+            <ul className="space-y-2">
+              <li><a href="https://github.com/flexireact/flexireact" className="text-sm text-gray-400 hover:text-white transition">GitHub</a></li>
+              <li><a href="https://discord.gg/rFSZxFtpAA" className="text-sm text-gray-400 hover:text-white transition">Discord</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/discussions" className="text-sm text-gray-400 hover:text-white transition">Discussions</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/issues" className="text-sm text-gray-400 hover:text-white transition">Issues</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-4">Ecosystem</h3>
+            <ul className="space-y-2">
+              <li><a href="https://www.npmjs.com/package/@flexireact/flexi-ui" className="text-sm text-gray-400 hover:text-white transition">FlexiUI</a></li>
+              <li><a href="https://www.npmjs.com/package/flexiguard" className="text-sm text-gray-400 hover:text-white transition">FlexiGuard</a></li>
+              <li><a href="https://www.npmjs.com/package/create-flexireact" className="text-sm text-gray-400 hover:text-white transition">CLI</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-4">Legal</h3>
+            <ul className="space-y-2">
+              <li><a href="https://github.com/flexireact/flexireact/blob/main/LICENSE" className="text-sm text-gray-400 hover:text-white transition">License</a></li>
+              <li><a href="https://github.com/flexireact/flexireact/blob/main/CONTRIBUTING.md" className="text-sm text-gray-400 hover:text-white transition">Contributing</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div className="pt-8 border-t border-gray-800/50 flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-[#00FF9C] flex items-center justify-center">
+              <span className="text-black font-bold">F</span>
+            </div>
+            <span className="text-sm text-gray-400">Built with ❤️ by Asuno</span>
+          </div>
+          <p className="text-sm text-gray-500">© {new Date().getFullYear()} FlexiReact. MIT License.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}`;
+export const ANIMATIONS_CSS = `
+/* Fade-in and slide-up animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+}
+
+.animate-delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+
+.animate-delay-300 {
+  animation-delay: 0.3s;
+  opacity: 0;
+}
+
+.animate-delay-400 {
+  animation-delay: 0.4s;
+  opacity: 0;
+}
+
+/* Glow effects */
+.glow-green {
+  box-shadow: 0 0 20px rgba(0, 255, 156, 0.3);
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 30px rgba(0, 255, 156, 0.4);
+  transform: scale(1.02);
+  transition: all 0.3s ease;
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #00FF9C 0%, #00D68F 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+`;
+//# sourceMappingURL=premium-sections.js.map

package/dist/templates/premium-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium-sections.js","sourceRoot":"","sources":["../../src/templates/premium-sections.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC5B,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsD5B,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-flexireact",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Create FlexiReact v3 apps with one command - The Modern React Framework",
   "author": "FlexiReact Team",
   "license": "MIT",