@beknurakhmed/webforge-cli 0.1.0

package/templates/overlays/ecommerce/react/src/components/ProductGrid.tsx

@@ -0,0 +1,32 @@
+import type { Product } from '../App';
+
+interface ProductGridProps {
+  products: Product[];
+  onAddToCart: (product: Product) => void;
+}
+
+export function ProductGrid({ products, onAddToCart }: ProductGridProps) {
+  return (
+    <section className="product-section">
+      <h2>All Products</h2>
+      <div className="product-grid">
+        {products.map((product) => (
+          <div key={product.id} className="product-card">
+            <div className="product-image">{product.image}</div>
+            <div className="product-info">
+              <span className="product-category">{product.category}</span>
+              <h3>{product.name}</h3>
+              <p>{product.description}</p>
+              <div className="product-footer">
+                <span className="product-price">${product.price.toFixed(2)}</span>
+                <button className="add-to-cart" onClick={() => onAddToCart(product)}>
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import StoreHeader from './components/StoreHeader.vue';
+import ProductGrid from './components/ProductGrid.vue';
+import CartPanel from './components/CartPanel.vue';
+import StoreFooter from './components/StoreFooter.vue';
+
+interface Product { id: number; name: string; price: number; image: string; category: string; description: string; }
+interface CartItem extends Product { quantity: number; }
+
+const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', description: 'Premium sound with noise cancellation.' },
+  { id: 2, name: 'Smart Watch', price: 199.99, image: '⌚', category: 'Electronics', description: 'Track fitness and stay connected.' },
+  { id: 3, name: 'Laptop Stand', price: 49.99, image: '💻', category: 'Accessories', description: 'Ergonomic aluminum stand.' },
+  { id: 4, name: 'Mechanical Keyboard', price: 129.99, image: '⌨️', category: 'Electronics', description: 'Tactile switches with RGB.' },
+  { id: 5, name: 'USB-C Hub', price: 39.99, image: '🔌', category: 'Accessories', description: '7-in-1 hub with 4K HDMI.' },
+  { id: 6, name: 'Webcam HD', price: 69.99, image: '📷', category: 'Electronics', description: '1080p with built-in mic.' },
+];
+
+const cartItems = ref<CartItem[]>([]);
+const isCartOpen = ref(false);
+const cartCount = computed(() => cartItems.value.reduce((sum, item) => sum + item.quantity, 0));
+
+function addToCart(product: Product) {
+  const existing = cartItems.value.find((item) => item.id === product.id);
+  if (existing) { existing.quantity++; }
+  else { cartItems.value.push({ ...product, quantity: 1 }); }
+}
+function removeFromCart(id: number) { cartItems.value = cartItems.value.filter((item) => item.id !== id); }
+</script>
+
+<template>
+  <div class="ecommerce">
+    <StoreHeader :cart-count="cartCount" @toggle-cart="isCartOpen = !isCartOpen" />
+    <main class="main"><ProductGrid :products="products" @add-to-cart="addToCart" /></main>
+    <CartPanel v-if="isCartOpen" :items="cartItems" @remove="removeFromCart" @close="isCartOpen = false" />
+    <StoreFooter />
+  </div>
+</template>
+
+<style>
+.ecommerce { min-height: 100vh; display: flex; flex-direction: column; }
+.main { flex: 1; max-width: 1200px; margin: 0 auto; padding: 2rem; width: 100%; }
+</style>

package/templates/overlays/ecommerce/vue/src/components/CartPanel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+interface CartItem { id: number; name: string; price: number; image: string; quantity: number; }
+const props = defineProps<{ items: CartItem[] }>();
+defineEmits<{ remove: [id: number]; close: [] }>();
+const total = computed(() => props.items.reduce((sum, item) => sum + item.price * item.quantity, 0));
+</script>
+
+<template>
+  <div class="cart-overlay" @click="$emit('close')">
+    <div class="cart-panel" @click.stop>
+      <div class="cart-header"><h2>Shopping Cart</h2><button @click="$emit('close')">X</button></div>
+      <p v-if="items.length === 0" class="cart-empty">Your cart is empty</p>
+      <template v-else>
+        <div class="cart-items">
+          <div v-for="item in items" :key="item.id" class="cart-item">
+            <span>{{ item.image }}</span>
+            <div><h4>{{ item.name }}</h4><p>Qty: {{ item.quantity }} x ${{ item.price.toFixed(2) }}</p></div>
+            <button @click="$emit('remove', item.id)">Remove</button>
+          </div>
+        </div>
+        <div class="cart-footer">
+          <div class="cart-total"><span>Total:</span><strong>${{ total.toFixed(2) }}</strong></div>
+          <button class="checkout-btn">Checkout</button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; }
+.cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: white; box-shadow: -4px 0 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
+.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
+.cart-header h2 { margin: 0; font-size: 1.25rem; }
+.cart-header button { background: none; border: none; font-size: 1.25rem; cursor: pointer; }
+.cart-empty { text-align: center; padding: 3rem; color: #9ca3af; }
+.cart-items { flex: 1; overflow-y: auto; padding: 1rem; }
+.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
+.cart-item h4 { margin: 0; font-size: 0.95rem; }
+.cart-item p { color: #6b7280; font-size: 0.85rem; margin: 0; }
+.cart-item button { background: none; border: none; color: #ef4444; cursor: pointer; margin-left: auto; }
+.cart-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; }
+.cart-total { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.1rem; }
+.checkout-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.75rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
+</style>

package/templates/overlays/ecommerce/vue/src/components/ProductGrid.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Product { id: number; name: string; price: number; image: string; category: string; description: string; }
+defineProps<{ products: Product[] }>();
+defineEmits<{ 'add-to-cart': [product: Product] }>();
+</script>
+
+<template>
+  <section class="product-section">
+    <h2>All Products</h2>
+    <div class="product-grid">
+      <div v-for="p in products" :key="p.id" class="product-card">
+        <div class="product-image">{{ p.image }}</div>
+        <div class="product-info">
+          <span class="product-category">{{ p.category }}</span>
+          <h3>{{ p.name }}</h3>
+          <p>{{ p.description }}</p>
+          <div class="product-footer">
+            <span class="product-price">${{ p.price.toFixed(2) }}</span>
+            <button class="add-to-cart" @click="$emit('add-to-cart', p)">Add to Cart</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.product-section h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
+.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
+.product-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
+.product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.product-image { font-size: 4rem; text-align: center; padding: 2rem; background: #f9fafb; }
+.product-info { padding: 1.25rem; }
+.product-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; }
+.product-info h3 { font-size: 1.1rem; margin: 0.25rem 0; }
+.product-info p { color: #6b7280; font-size: 0.9rem; margin-bottom: 1rem; }
+.product-footer { display: flex; justify-content: space-between; align-items: center; }
+.product-price { font-size: 1.25rem; font-weight: 700; }
+.add-to-cart { background: #4f46e5; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 500; }
+</style>

package/templates/overlays/ecommerce/vue/src/components/StoreFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <footer class="store-footer">
+    <div class="footer-content">
+      <h3>{{projectName}}</h3>
+      <p>Your one-stop shop for quality products.</p>
+    </div>
+    <div class="footer-bottom"><p>&copy; 2025 {{projectName}}. All rights reserved.</p></div>
+  </footer>
+</template>
+
+<style scoped>
+.store-footer { background: #111827; color: #d1d5db; padding: 3rem 2rem 1.5rem; margin-top: auto; }
+.footer-content { max-width: 1200px; margin: 0 auto; }
+.footer-content h3 { color: white; margin-bottom: 0.5rem; }
+.footer-bottom { border-top: 1px solid #374151; margin-top: 2rem; padding-top: 1rem; text-align: center; }
+.footer-bottom p { font-size: 0.8rem; color: #6b7280; }
+</style>

package/templates/overlays/ecommerce/vue/src/components/StoreHeader.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{ cartCount: number }>();
+defineEmits<{ 'toggle-cart': [] }>();
+</script>
+
+<template>
+  <header class="store-header">
+    <div class="header-content">
+      <h1 class="store-logo">{{projectName}}</h1>
+      <nav class="store-nav">
+        <a href="#" class="active">All Products</a>
+        <a href="#">Electronics</a>
+        <a href="#">Accessories</a>
+      </nav>
+      <div class="header-actions">
+        <input type="text" class="search-input" placeholder="Search products..." />
+        <button class="cart-btn" @click="$emit('toggle-cart')">Cart ({{ cartCount }})</button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.store-header { background: white; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 10; }
+.header-content { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
+.store-logo { font-size: 1.5rem; color: #4f46e5; margin: 0; }
+.store-nav { display: flex; gap: 1.5rem; }
+.store-nav a { text-decoration: none; color: #6b7280; font-weight: 500; }
+.store-nav a.active { color: #4f46e5; }
+.header-actions { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
+.search-input { padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 8px; }
+.cart-btn { background: #4f46e5; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
+</style>

package/templates/overlays/landing/angular/src/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { HeroComponent } from './components/hero.component';
+import { FeaturesComponent } from './components/features.component';
+import { CtaComponent } from './components/cta.component';
+import { FooterComponent } from './components/footer.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [HeroComponent, FeaturesComponent, CtaComponent, FooterComponent],
+  template: `
+    <div class="landing">
+      <app-hero />
+      <app-features />
+      <app-cta />
+      <app-footer />
+    </div>
+  `,
+  styles: [`.landing { min-height: 100vh; }`]
+})
+export class AppComponent {}

package/templates/overlays/landing/angular/src/app/components/cta.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cta',
+  standalone: true,
+  template: `
+    <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>
+  `,
+  styles: [`
+    .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; }
+    .btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; }
+    .btn-primary { background: #4f46e5; color: white; }
+    .btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
+  `]
+})
+export class CtaComponent {}

package/templates/overlays/landing/angular/src/app/components/features.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { NgFor } from '@angular/common';
+
+@Component({
+  selector: 'app-features',
+  standalone: true,
+  imports: [NgFor],
+  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 *ngFor="let f of features" class="card">
+          <span class="icon">{{ f.icon }}</span>
+          <h3>{{ f.title }}</h3>
+          <p>{{ f.description }}</p>
+        </div>
+      </div>
+    </section>
+  `,
+  styles: [`
+    .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; }
+  `]
+})
+export class FeaturesComponent {
+  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.' },
+  ];
+}

package/templates/overlays/landing/angular/src/app/components/footer.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  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>
+      </div>
+      <div class="bottom">
+        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  `,
+  styles: [`
+    .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; }
+    .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; }
+  `]
+})
+export class FooterComponent {}

package/templates/overlays/landing/angular/src/app/components/hero.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  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>
+  `,
+  styles: [`
+    .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; }
+    .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); }
+  `]
+})
+export class HeroComponent {}

package/templates/overlays/landing/nextjs/src/app/components/CTA.tsx

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

package/templates/overlays/landing/nextjs/src/app/components/Features.tsx

@@ -0,0 +1,26 @@
+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.' },
+];
+
+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((f, i) => (
+          <div key={i} className="feature-card">
+            <span className="feature-icon">{f.icon}</span>
+            <h3>{f.title}</h3>
+            <p>{f.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/overlays/landing/nextjs/src/app/components/Footer.tsx

@@ -0,0 +1,27 @@
+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.</p>
+        </div>
+        <div className="footer-links">
+          <div className="footer-col">
+            <h4>Product</h4>
+            <a href="#features">Features</a>
+            <a href="#cta">Pricing</a>
+          </div>
+          <div className="footer-col">
+            <h4>Company</h4>
+            <a href="#">About</a>
+            <a href="#">Blog</a>
+          </div>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}

package/templates/overlays/landing/nextjs/src/app/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.</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/nextjs/src/app/globals.css

@@ -0,0 +1,49 @@
+.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; }
+.features-subtitle { color: #6b7280; 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; }
+.feature-card p { color: #6b7280; line-height: 1.6; }
+.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; margin-bottom: 2rem; }
+.cta-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; }
+.footer-brand h3 { color: white; font-size: 1.5rem; margin-bottom: 0.5rem; }
+.footer-links { display: flex; gap: 4rem; }
+.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
+.footer-col h4 { color: white; font-size: 0.875rem; text-transform: uppercase; margin-bottom: 0.5rem; }
+.footer-col a { color: #9ca3af; text-decoration: none; }
+.footer-col a:hover { color: white; }
+.footer-bottom { border-top: 1px solid #374151; margin-top: 3rem; padding-top: 1.5rem; text-align: center; }
+.footer-bottom p { font-size: 0.875rem; color: #6b7280; }
+
+:root { font-family: Inter, system-ui, sans-serif; line-height: 1.5; color: #213547; background: #fff; }
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body { min-height: 100vh; }
+
+@media (prefers-color-scheme: dark) {
+  :root { color: rgba(255,255,255,0.87); background: #242424; }
+  .features h2, .feature-card h3, .cta h2 { color: rgba(255,255,255,0.87); }
+  .feature-card { border-color: #374151; }
+  .cta { background: #1f2937; }
+}

package/templates/overlays/landing/nextjs/src/app/page.tsx

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

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

@@ -0,0 +1,18 @@
+<template>
+  <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>
+</template>
+
+<style scoped>
+.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; }
+.btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: none; }
+.btn-primary { background: #4f46e5; color: white; }
+.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
+</style>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+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.' },
+];
+</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.desc }}</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/nuxt/components/LandingFooter.vue

@@ -0,0 +1,29 @@
+<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; }
+.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; }
+</style>