@beknurakhmed/webforge-cli 0.1.0

package/templates/overlays/landing/nuxt/components/LandingHero.vue

@@ -0,0 +1,35 @@
+<template>
+  <header class="hero">
+    <nav class="nav">
+      <div class="logo">{{projectName}}</div>
+      <div class="nav-links">
+        <a href="#features">Features</a>
+        <a href="#cta">Pricing</a>
+        <a href="#contact">Contact</a>
+      </div>
+    </nav>
+    <div class="hero-content">
+      <h1>Build Something Amazing</h1>
+      <p>A modern landing page template to kickstart your next project.</p>
+      <div class="hero-actions">
+        <button class="btn btn-primary">Get Started</button>
+        <button class="btn btn-secondary">Learn More</button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding-bottom: 4rem; }
+.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
+.logo { font-size: 1.5rem; font-weight: 700; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; }
+.hero-content { text-align: center; padding: 4rem 2rem; max-width: 800px; margin: 0 auto; }
+.hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; }
+.hero-content p { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; }
+.hero-actions { display: flex; gap: 1rem; justify-content: center; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; }
+.btn-primary { background: #4f46e5; color: white; border-color: #4f46e5; }
+.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.5); }
+</style>

package/templates/overlays/landing/nuxt/pages/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="landing">
+    <LandingHero />
+    <LandingFeatures />
+    <LandingCta />
+    <LandingFooter />
+  </div>
+</template>
+
+<style>
+.landing { min-height: 100vh; }
+</style>

package/templates/overlays/landing/react/src/App.css

@@ -0,0 +1,70 @@
+.landing { min-height: 100vh; }
+
+/* Nav */
+.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
+.logo { font-size: 1.5rem; font-weight: 700; color: #4f46e5; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: #374151; text-decoration: none; font-weight: 500; transition: color 0.2s; }
+.nav-links a:hover { color: #4f46e5; }
+
+/* Hero */
+.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding-bottom: 4rem; }
+.hero .logo { color: white; }
+.hero .nav-links a { color: rgba(255,255,255,0.9); }
+.hero-content { text-align: center; padding: 4rem 2rem; max-width: 800px; margin: 0 auto; }
+.hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; }
+.hero-content p { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; line-height: 1.6; }
+.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
+
+/* Buttons */
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
+.btn-primary { background: #4f46e5; color: white; border-color: #4f46e5; }
+.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
+.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.5); }
+.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }
+.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
+
+/* Features */
+.features { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
+.features h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; color: #111827; }
+.features-subtitle { color: #6b7280; font-size: 1.1rem; margin-bottom: 3rem; }
+.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; text-align: left; }
+.feature-card { padding: 2rem; border-radius: 12px; border: 1px solid #e5e7eb; transition: all 0.2s; }
+.feature-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.feature-icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
+.feature-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #111827; }
+.feature-card p { color: #6b7280; line-height: 1.6; }
+
+/* CTA */
+.cta { background: #f9fafb; padding: 5rem 2rem; text-align: center; }
+.cta-content { max-width: 600px; margin: 0 auto; }
+.cta h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: #111827; }
+.cta p { color: #6b7280; font-size: 1.1rem; margin-bottom: 2rem; }
+.cta-note { margin-top: 0.75rem; font-size: 0.875rem; color: #9ca3af; }
+
+/* Footer */
+.footer { background: #111827; color: #d1d5db; padding: 4rem 2rem 2rem; }
+.footer-content { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 4rem; flex-wrap: wrap; }
+.footer-brand h3 { color: white; font-size: 1.5rem; margin-bottom: 0.5rem; }
+.footer-brand p { max-width: 300px; line-height: 1.6; }
+.footer-links { display: flex; gap: 4rem; flex-wrap: wrap; }
+.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
+.footer-col h4 { color: white; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+.footer-col a { color: #9ca3af; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
+.footer-col a:hover { color: white; }
+.footer-bottom { border-top: 1px solid #374151; margin-top: 3rem; padding-top: 1.5rem; text-align: center; max-width: 1200px; margin-left: auto; margin-right: auto; }
+.footer-bottom p { font-size: 0.875rem; color: #6b7280; }
+
+@media (max-width: 768px) {
+  .hero-content h1 { font-size: 2.5rem; }
+  .nav { flex-direction: column; gap: 1rem; }
+  .footer-content { flex-direction: column; }
+}
+
+@media (prefers-color-scheme: dark) {
+  .features h2, .feature-card h3, .cta h2 { color: rgba(255,255,255,0.87); }
+  .features-subtitle, .feature-card p, .cta p { color: #9ca3af; }
+  .feature-card { border-color: #374151; }
+  .cta { background: #1f2937; }
+  .nav-links a { color: #d1d5db; }
+}

package/templates/overlays/landing/react/src/App.tsx

@@ -0,0 +1,18 @@
+import { Hero } from './components/Hero';
+import { Features } from './components/Features';
+import { CTA } from './components/CTA';
+import { Footer } from './components/Footer';
+import './App.css';
+
+function App() {
+  return (
+    <div className="landing">
+      <Hero />
+      <Features />
+      <CTA />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

package/templates/overlays/landing/react/src/components/CTA.tsx

@@ -0,0 +1,14 @@
+export function CTA() {
+  return (
+    <section id="cta" className="cta">
+      <div className="cta-content">
+        <h2>Ready to Get Started?</h2>
+        <p>Join thousands of developers who are building amazing products.</p>
+        <div className="cta-actions">
+          <button className="btn btn-primary btn-large">Start Free Trial</button>
+          <p className="cta-note">No credit card required</p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/overlays/landing/react/src/components/Features.tsx

@@ -0,0 +1,50 @@
+const features = [
+  {
+    icon: '⚡',
+    title: 'Lightning Fast',
+    description: 'Optimized for performance with lazy loading, code splitting, and modern build tools.',
+  },
+  {
+    icon: '🎨',
+    title: 'Beautiful Design',
+    description: 'Clean, modern UI with responsive layouts that look great on any device.',
+  },
+  {
+    icon: '🔒',
+    title: 'Secure by Default',
+    description: 'Built with security best practices including HTTPS, CSP headers, and input validation.',
+  },
+  {
+    icon: '🧩',
+    title: 'Modular Architecture',
+    description: 'Component-based structure makes it easy to customize and extend functionality.',
+  },
+  {
+    icon: '📱',
+    title: 'Mobile First',
+    description: 'Designed for mobile devices first, then scaled up for tablets and desktops.',
+  },
+  {
+    icon: '🚀',
+    title: 'Easy Deployment',
+    description: 'Deploy anywhere — Vercel, Netlify, AWS, or your own server in minutes.',
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="features">
+      <h2>Features</h2>
+      <p className="features-subtitle">Everything you need to build a modern web application</p>
+      <div className="feature-grid">
+        {features.map((feature, index) => (
+          <div key={index} className="feature-card">
+            <span className="feature-icon">{feature.icon}</span>
+            <h3>{feature.title}</h3>
+            <p>{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/overlays/landing/react/src/components/Footer.tsx

@@ -0,0 +1,34 @@
+export function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-content">
+        <div className="footer-brand">
+          <h3>{{projectName}}</h3>
+          <p>Building the future of the web, one project at a time.</p>
+        </div>
+        <div className="footer-links">
+          <div className="footer-col">
+            <h4>Product</h4>
+            <a href="#features">Features</a>
+            <a href="#cta">Pricing</a>
+            <a href="#">Documentation</a>
+          </div>
+          <div className="footer-col">
+            <h4>Company</h4>
+            <a href="#">About</a>
+            <a href="#">Blog</a>
+            <a href="#contact">Contact</a>
+          </div>
+          <div className="footer-col">
+            <h4>Legal</h4>
+            <a href="#">Privacy Policy</a>
+            <a href="#">Terms of Service</a>
+          </div>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}

package/templates/overlays/landing/react/src/components/Hero.tsx

@@ -0,0 +1,22 @@
+export function Hero() {
+  return (
+    <header className="hero">
+      <nav className="nav">
+        <div className="logo">{{projectName}}</div>
+        <div className="nav-links">
+          <a href="#features">Features</a>
+          <a href="#cta">Pricing</a>
+          <a href="#contact">Contact</a>
+        </div>
+      </nav>
+      <div className="hero-content">
+        <h1>Build Something Amazing</h1>
+        <p>A modern landing page template to kickstart your next project. Fast, responsive, and ready for production.</p>
+        <div className="hero-actions">
+          <button className="btn btn-primary">Get Started</button>
+          <button className="btn btn-secondary">Learn More</button>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/overlays/landing/vanilla/src/main.ts

@@ -0,0 +1,68 @@
+import './style.css';
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+
+app.innerHTML = `
+  <div class="landing">
+    <header class="hero">
+      <nav class="nav">
+        <div class="logo">{{projectName}}</div>
+        <div class="nav-links">
+          <a href="#features">Features</a>
+          <a href="#cta">Pricing</a>
+          <a href="#contact">Contact</a>
+        </div>
+      </nav>
+      <div class="hero-content">
+        <h1>Build Something Amazing</h1>
+        <p>A modern landing page template to kickstart your next project.</p>
+        <div class="hero-actions">
+          <button class="btn btn-primary">Get Started</button>
+          <button class="btn btn-secondary">Learn More</button>
+        </div>
+      </div>
+    </header>
+
+    <section id="features" class="features">
+      <h2>Features</h2>
+      <p class="subtitle">Everything you need to build a modern web application</p>
+      <div class="grid" id="feature-grid"></div>
+    </section>
+
+    <section id="cta" class="cta">
+      <h2>Ready to Get Started?</h2>
+      <p>Join thousands of developers building amazing products.</p>
+      <button class="btn btn-primary btn-large">Start Free Trial</button>
+      <p class="note">No credit card required</p>
+    </section>
+
+    <footer class="footer">
+      <div class="footer-content">
+        <div class="brand">
+          <h3>{{projectName}}</h3>
+          <p>Building the future of the web.</p>
+        </div>
+        <div class="links">
+          <div class="col"><h4>Product</h4><a href="#features">Features</a><a href="#cta">Pricing</a></div>
+          <div class="col"><h4>Company</h4><a href="#">About</a><a href="#">Blog</a></div>
+          <div class="col"><h4>Legal</h4><a href="#">Privacy</a><a href="#">Terms</a></div>
+        </div>
+      </div>
+      <div class="bottom"><p>&copy; 2025 {{projectName}}. All rights reserved.</p></div>
+    </footer>
+  </div>
+`;
+
+const features = [
+  { icon: '⚡', title: 'Lightning Fast', desc: 'Optimized for performance with lazy loading and code splitting.' },
+  { icon: '🎨', title: 'Beautiful Design', desc: 'Clean, modern UI with responsive layouts.' },
+  { icon: '🔒', title: 'Secure by Default', desc: 'Built with security best practices.' },
+  { icon: '🧩', title: 'Modular Architecture', desc: 'Component-based structure for easy customization.' },
+  { icon: '📱', title: 'Mobile First', desc: 'Designed for mobile, scaled up for desktop.' },
+  { icon: '🚀', title: 'Easy Deployment', desc: 'Deploy anywhere in minutes.' },
+];
+
+const grid = document.getElementById('feature-grid')!;
+grid.innerHTML = features
+  .map(f => `<div class="card"><span class="icon">${f.icon}</span><h3>${f.title}</h3><p>${f.desc}</p></div>`)
+  .join('');

package/templates/overlays/landing/vanilla/src/style.css

@@ -0,0 +1,43 @@
+.landing { min-height: 100vh; }
+.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
+.logo { font-size: 1.5rem; font-weight: 700; color: white; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; }
+.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding-bottom: 4rem; }
+.hero-content { text-align: center; padding: 4rem 2rem; max-width: 800px; margin: 0 auto; }
+.hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; }
+.hero-content p { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; }
+.hero-actions { display: flex; gap: 1rem; justify-content: center; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; }
+.btn-primary { background: #4f46e5; color: white; border-color: #4f46e5; }
+.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.5); }
+.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
+.features { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
+.features h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
+.subtitle { color: #6b7280; margin-bottom: 3rem; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; text-align: left; }
+.card { padding: 2rem; border-radius: 12px; border: 1px solid #e5e7eb; transition: all 0.2s; }
+.card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
+.card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
+.card p { color: #6b7280; line-height: 1.6; }
+.cta { background: #f9fafb; padding: 5rem 2rem; text-align: center; }
+.cta h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
+.cta p { color: #6b7280; margin-bottom: 2rem; }
+.note { font-size: 0.875rem; color: #9ca3af; }
+.footer { background: #111827; color: #d1d5db; padding: 4rem 2rem 2rem; }
+.footer-content { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 4rem; flex-wrap: wrap; }
+.brand h3 { color: white; font-size: 1.5rem; margin-bottom: 0.5rem; }
+.links { display: flex; gap: 4rem; }
+.col { display: flex; flex-direction: column; gap: 0.5rem; }
+.col h4 { color: white; font-size: 0.875rem; text-transform: uppercase; margin-bottom: 0.5rem; }
+.col a { color: #9ca3af; text-decoration: none; }
+.col a:hover { color: white; }
+.bottom { border-top: 1px solid #374151; margin-top: 3rem; padding-top: 1.5rem; text-align: center; }
+.bottom p { font-size: 0.875rem; color: #6b7280; }
+
+@media (max-width: 768px) {
+  .hero-content h1 { font-size: 2.5rem; }
+  .nav { flex-direction: column; gap: 1rem; }
+  .footer-content { flex-direction: column; }
+}

package/templates/overlays/landing/vue/src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Hero from './components/Hero.vue';
+import Features from './components/Features.vue';
+import CTA from './components/CTA.vue';
+import AppFooter from './components/AppFooter.vue';
+</script>
+
+<template>
+  <div class="landing">
+    <Hero />
+    <Features />
+    <CTA />
+    <AppFooter />
+  </div>
+</template>
+
+<style>
+.landing { min-height: 100vh; }
+</style>

package/templates/overlays/landing/vue/src/components/AppFooter.vue

@@ -0,0 +1,44 @@
+<template>
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="brand">
+        <h3>{{projectName}}</h3>
+        <p>Building the future of the web.</p>
+      </div>
+      <div class="links">
+        <div class="col">
+          <h4>Product</h4>
+          <a href="#features">Features</a>
+          <a href="#cta">Pricing</a>
+        </div>
+        <div class="col">
+          <h4>Company</h4>
+          <a href="#">About</a>
+          <a href="#">Blog</a>
+        </div>
+        <div class="col">
+          <h4>Legal</h4>
+          <a href="#">Privacy</a>
+          <a href="#">Terms</a>
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer { background: #111827; color: #d1d5db; padding: 4rem 2rem 2rem; }
+.footer-content { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 4rem; flex-wrap: wrap; }
+.brand h3 { color: white; font-size: 1.5rem; margin-bottom: 0.5rem; }
+.brand p { max-width: 300px; line-height: 1.6; }
+.links { display: flex; gap: 4rem; flex-wrap: wrap; }
+.col { display: flex; flex-direction: column; gap: 0.5rem; }
+.col h4 { color: white; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+.col a { color: #9ca3af; text-decoration: none; font-size: 0.9rem; }
+.col a:hover { color: white; }
+.bottom { border-top: 1px solid #374151; margin-top: 3rem; padding-top: 1.5rem; text-align: center; }
+.bottom p { font-size: 0.875rem; color: #6b7280; }
+</style>

package/templates/overlays/landing/vue/src/components/CTA.vue

@@ -0,0 +1,21 @@
+<template>
+  <section id="cta" class="cta">
+    <div class="cta-content">
+      <h2>Ready to Get Started?</h2>
+      <p>Join thousands of developers building amazing products.</p>
+      <button class="btn btn-primary btn-large">Start Free Trial</button>
+      <p class="note">No credit card required</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cta { background: #f9fafb; padding: 5rem 2rem; text-align: center; }
+.cta-content { max-width: 600px; margin: 0 auto; }
+.cta h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
+.cta p { color: #6b7280; font-size: 1.1rem; margin-bottom: 2rem; }
+.note { font-size: 0.875rem; color: #9ca3af; margin-top: 0.75rem; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; }
+.btn-primary { background: #4f46e5; color: white; }
+.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
+</style>

package/templates/overlays/landing/vue/src/components/Features.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const features = [
+  { icon: '⚡', title: 'Lightning Fast', description: 'Optimized for performance with lazy loading and code splitting.' },
+  { icon: '🎨', title: 'Beautiful Design', description: 'Clean, modern UI with responsive layouts.' },
+  { icon: '🔒', title: 'Secure by Default', description: 'Built with security best practices.' },
+  { icon: '🧩', title: 'Modular Architecture', description: 'Component-based structure for easy customization.' },
+  { icon: '📱', title: 'Mobile First', description: 'Designed for mobile, scaled up for desktop.' },
+  { icon: '🚀', title: 'Easy Deployment', description: 'Deploy anywhere in minutes.' },
+];
+</script>
+
+<template>
+  <section id="features" class="features">
+    <h2>Features</h2>
+    <p class="subtitle">Everything you need to build a modern web application</p>
+    <div class="grid">
+      <div v-for="(f, i) in features" :key="i" class="card">
+        <span class="icon">{{ f.icon }}</span>
+        <h3>{{ f.title }}</h3>
+        <p>{{ f.description }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.features { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; text-align: center; }
+.features h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
+.subtitle { color: #6b7280; margin-bottom: 3rem; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; text-align: left; }
+.card { padding: 2rem; border-radius: 12px; border: 1px solid #e5e7eb; transition: all 0.2s; }
+.card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
+.card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
+.card p { color: #6b7280; line-height: 1.6; }
+</style>

package/templates/overlays/landing/vue/src/components/Hero.vue

@@ -0,0 +1,35 @@
+<template>
+  <header class="hero">
+    <nav class="nav">
+      <div class="logo">{{projectName}}</div>
+      <div class="nav-links">
+        <a href="#features">Features</a>
+        <a href="#cta">Pricing</a>
+        <a href="#contact">Contact</a>
+      </div>
+    </nav>
+    <div class="hero-content">
+      <h1>Build Something Amazing</h1>
+      <p>A modern landing page template to kickstart your next project.</p>
+      <div class="hero-actions">
+        <button class="btn btn-primary">Get Started</button>
+        <button class="btn btn-secondary">Learn More</button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding-bottom: 4rem; }
+.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
+.logo { font-size: 1.5rem; font-weight: 700; color: white; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; }
+.hero-content { text-align: center; padding: 4rem 2rem; max-width: 800px; margin: 0 auto; }
+.hero-content h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; }
+.hero-content p { font-size: 1.25rem; opacity: 0.9; margin-bottom: 2rem; }
+.hero-actions { display: flex; gap: 1rem; justify-content: center; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; }
+.btn-primary { background: #4f46e5; color: white; border-color: #4f46e5; }
+.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.5); }
+</style>

package/templates/overlays/portfolio/react/src/App.css

@@ -0,0 +1,81 @@
+.portfolio { min-height: 100vh; }
+
+/* Nav */
+.portfolio-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1100px; margin: 0 auto; }
+.logo { font-size: 1.5rem; font-weight: 700; color: white; }
+.nav-links { display: flex; gap: 2rem; }
+.nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 500; }
+
+/* Hero */
+.portfolio-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); color: white; padding-bottom: 5rem; }
+.hero-content { text-align: center; max-width: 700px; margin: 0 auto; padding: 4rem 2rem; }
+.hero-greeting { font-size: 1.1rem; color: #4f46e5; font-weight: 600; }
+.hero-content h1 { font-size: 4rem; font-weight: 800; margin: 0.5rem 0; }
+.hero-role { font-size: 1.25rem; color: #94a3b8; margin-bottom: 1rem; }
+.hero-desc { color: #cbd5e1; line-height: 1.7; margin-bottom: 2rem; }
+.hero-actions { display: flex; gap: 1rem; justify-content: center; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; display: inline-block; }
+.btn-primary { background: #4f46e5; color: white; border-color: #4f46e5; }
+.btn-primary:hover { background: #4338ca; }
+.btn-outline { background: transparent; color: white; border-color: #475569; }
+.btn-outline:hover { border-color: white; }
+
+/* Sections */
+.section-subtitle { color: #6b7280; text-align: center; margin-bottom: 3rem; }
+
+/* Projects */
+.projects-section { max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; }
+.projects-section h2 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; }
+.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
+.project-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
+.project-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-3px); }
+.project-image { font-size: 3rem; text-align: center; padding: 2rem; background: #f9fafb; }
+.project-info { padding: 1.25rem; }
+.project-info h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
+.project-info p { color: #6b7280; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
+.project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.tag { background: #eef2ff; color: #4f46e5; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
+
+/* Skills */
+.skills-section { background: #f9fafb; padding: 5rem 2rem; }
+.skills-section h2 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; }
+.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
+.skill-group { background: white; padding: 1.5rem; border-radius: 12px; border: 1px solid #e5e7eb; }
+.skill-group h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: #4f46e5; }
+.skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.skill-tag { background: #f3f4f6; padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.85rem; color: #374151; }
+
+/* Contact */
+.contact-section { max-width: 600px; margin: 0 auto; padding: 5rem 2rem; }
+.contact-section h2 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; }
+.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
+.form-group label { font-size: 0.85rem; font-weight: 600; color: #374151; }
+.form-group input, .form-group textarea { padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; font-family: inherit; }
+.form-group textarea { resize: vertical; }
+
+/* Footer */
+.portfolio-footer { background: #111827; color: #9ca3af; padding: 2rem; text-align: center; }
+.footer-content { max-width: 1100px; margin: 0 auto; }
+.footer-links { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1rem; }
+.footer-links a { color: #9ca3af; text-decoration: none; }
+.footer-links a:hover { color: white; }
+.portfolio-footer p { font-size: 0.85rem; }
+
+@media (max-width: 768px) {
+  .hero-content h1 { font-size: 2.5rem; }
+  .form-row { grid-template-columns: 1fr; }
+}
+
+@media (prefers-color-scheme: dark) {
+  .projects-section h2, .skills-section h2, .contact-section h2 { color: white; }
+  .project-card { border-color: #374151; }
+  .project-image { background: #1f2937; }
+  .project-info h3 { color: white; }
+  .skills-section { background: #1f2937; }
+  .skill-group { background: #111827; border-color: #374151; }
+  .skill-tag { background: #374151; color: #d1d5db; }
+  .form-group label { color: #d1d5db; }
+  .form-group input, .form-group textarea { background: #1f2937; border-color: #374151; color: white; }
+}

package/templates/overlays/portfolio/react/src/App.tsx

@@ -0,0 +1,20 @@
+import { HeroSection } from './components/HeroSection';
+import { Projects } from './components/Projects';
+import { Skills } from './components/Skills';
+import { ContactForm } from './components/ContactForm';
+import { PortfolioFooter } from './components/PortfolioFooter';
+import './App.css';
+
+function App() {
+  return (
+    <div className="portfolio">
+      <HeroSection />
+      <Projects />
+      <Skills />
+      <ContactForm />
+      <PortfolioFooter />
+    </div>
+  );
+}
+
+export default App;