@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

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

@@ -0,0 +1,522 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --dark: #111827;
+  --text: #374151;
+  --text-light: #6b7280;
+  --bg: #f9fafb;
+  --white: #ffffff;
+  --border: #e5e7eb;
+  --danger: #ef4444;
+  --success: #10b981;
+  --radius: 8px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  line-height: 1.6;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Header */
+.store-header {
+  background: var(--white);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.store-logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.store-nav {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.store-nav a {
+  color: var(--text);
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.store-nav a:hover,
+.store-nav a.active {
+  color: var(--primary);
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: var(--white);
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+
+.btn-secondary {
+  background: var(--white);
+  color: var(--primary);
+  border: 1px solid var(--primary);
+}
+
+.btn-secondary:hover {
+  background: #eef2ff;
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: var(--white);
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.btn-large {
+  padding: 0.75rem 2rem;
+  font-size: 1rem;
+  width: 100%;
+}
+
+.btn-small {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+/* Hero */
+.hero {
+  background: linear-gradient(135deg, var(--primary), #7c3aed);
+  color: var(--white);
+  padding: 4rem 2rem;
+  text-align: center;
+  border-radius: var(--radius);
+  margin: 2rem;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.125rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.hero .btn {
+  background: var(--white);
+  color: var(--primary);
+  font-size: 1rem;
+  padding: 0.75rem 2rem;
+}
+
+/* Categories */
+.categories {
+  padding: 2rem;
+}
+
+.categories h2 {
+  font-size: 1.5rem;
+  color: var(--dark);
+  margin-bottom: 1.5rem;
+}
+
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.category-card {
+  background: var(--white);
+  padding: 2rem;
+  border-radius: var(--radius);
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.category-card:hover {
+  border-color: var(--primary);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
+}
+
+/* Products */
+.store-main {
+  min-height: calc(100vh - 200px);
+}
+
+.featured {
+  padding: 2rem;
+}
+
+.featured h2 {
+  font-size: 1.5rem;
+  color: var(--dark);
+  margin-bottom: 1.5rem;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.product-card {
+  background: var(--white);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  padding: 1.5rem;
+  transition: all 0.2s;
+}
+
+.product-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.product-image {
+  font-size: 3rem;
+  text-align: center;
+  padding: 1.5rem;
+  background: var(--bg);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+
+.product-category {
+  display: inline-block;
+  font-size: 0.75rem;
+  color: var(--primary);
+  background: #eef2ff;
+  padding: 0.25rem 0.75rem;
+  border-radius: 100px;
+  margin-bottom: 0.5rem;
+}
+
+.product-card h3 {
+  font-size: 1rem;
+  color: var(--dark);
+  margin-bottom: 0.5rem;
+}
+
+.price {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 1rem;
+}
+
+.price-large {
+  font-size: 2rem;
+}
+
+.product-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.product-actions .btn {
+  flex: 1;
+  text-align: center;
+}
+
+/* Product Detail */
+.breadcrumb {
+  padding: 1rem 2rem;
+  color: var(--text-light);
+  font-size: 0.875rem;
+}
+
+.breadcrumb a {
+  color: var(--primary);
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+.product-detail {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  padding: 2rem;
+}
+
+.product-detail-image {
+  font-size: 8rem;
+  text-align: center;
+  padding: 4rem;
+  background: var(--white);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+
+.product-detail-info h1 {
+  font-size: 2rem;
+  color: var(--dark);
+  margin: 0.5rem 0;
+}
+
+.product-description {
+  color: var(--text-light);
+  margin-bottom: 1.5rem;
+  line-height: 1.8;
+}
+
+.product-meta {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+  color: var(--text-light);
+  font-size: 0.875rem;
+}
+
+.related-products {
+  padding: 2rem;
+}
+
+.related-products h2 {
+  font-size: 1.5rem;
+  color: var(--dark);
+  margin-bottom: 1.5rem;
+}
+
+/* Cart */
+.empty-cart {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.empty-cart-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.empty-cart h2 {
+  color: var(--dark);
+  margin-bottom: 0.5rem;
+}
+
+.empty-cart p {
+  color: var(--text-light);
+  margin-bottom: 2rem;
+}
+
+.cart-layout {
+  display: grid;
+  grid-template-columns: 1fr 350px;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.store-main > h1 {
+  padding: 2rem 2rem 0;
+  color: var(--dark);
+}
+
+.cart-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cart-item {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.cart-item-image {
+  font-size: 2.5rem;
+  width: 60px;
+  text-align: center;
+}
+
+.cart-item-info {
+  flex: 1;
+}
+
+.cart-item-info h3 {
+  font-size: 1rem;
+  color: var(--dark);
+}
+
+.cart-item-info h3 a:hover {
+  color: var(--primary);
+}
+
+.cart-item-category {
+  font-size: 0.8rem;
+  color: var(--text-light);
+}
+
+.cart-item-price,
+.cart-item-total {
+  font-weight: 600;
+  color: var(--dark);
+}
+
+.cart-item-quantity {
+  color: var(--text-light);
+  font-size: 0.875rem;
+}
+
+.cart-summary {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  height: fit-content;
+  position: sticky;
+  top: 80px;
+}
+
+.cart-summary h2 {
+  font-size: 1.25rem;
+  color: var(--dark);
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  font-size: 0.9rem;
+}
+
+.summary-total {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--dark);
+  border-top: 2px solid var(--border);
+  margin-top: 0.5rem;
+  padding-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.not-found {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+/* Footer */
+.store-footer {
+  background: var(--dark);
+  color: #9ca3af;
+  margin-top: 3rem;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  padding: 3rem 2rem;
+}
+
+.footer-section h4 {
+  color: var(--white);
+  margin-bottom: 1rem;
+}
+
+.footer-section a {
+  display: block;
+  color: #9ca3af;
+  padding: 0.25rem 0;
+  transition: color 0.2s;
+}
+
+.footer-section a:hover {
+  color: var(--white);
+}
+
+.footer-bottom {
+  text-align: center;
+  padding: 1.5rem 2rem;
+  border-top: 1px solid #1f2937;
+  font-size: 0.875rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .store-header {
+    padding: 1rem;
+  }
+
+  .hero {
+    margin: 1rem;
+    padding: 2rem 1rem;
+  }
+
+  .hero h1 {
+    font-size: 1.75rem;
+  }
+
+  .product-detail {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+
+  .cart-layout {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+
+  .cart-item {
+    flex-wrap: wrap;
+  }
+
+  .product-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+
+  .categories,
+  .featured,
+  .related-products {
+    padding: 1rem;
+  }
+}

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

@@ -1,44 +1,29 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, provide } from 'vue';
+import type { Product, CartItem } from './data';
 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));
+const cart = ref<CartItem[]>([]);
+const cartCount = computed(() => cart.value.reduce((sum, item) => sum + item.quantity, 0));
 
 function addToCart(product: Product) {
-  const existing = cartItems.value.find((item) => item.id === product.id);
+  const existing = cart.value.find(item => item.id === product.id);
   if (existing) { existing.quantity++; }
-  else { cartItems.value.push({ ...product, quantity: 1 }); }
+  else { cart.value.push({ ...product, quantity: 1 }); }
+}
+
+function removeFromCart(id: number) {
+  cart.value = cart.value.filter(item => item.id !== id);
 }
-function removeFromCart(id: number) { cartItems.value = cartItems.value.filter((item) => item.id !== id); }
+
+provide('cart', cart);
+provide('addToCart', addToCart);
+provide('removeFromCart', removeFromCart);
 </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>
+  <StoreHeader :cartCount="cartCount" />
+  <RouterView />
+  <StoreFooter />
 </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/ProductCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Product } from '../data';
+
+const props = defineProps<{ product: Product }>();
+const emit = defineEmits<{ 'add-to-cart': [product: Product] }>();
+</script>
+
+<template>
+  <div class="product-card">
+    <RouterLink :to="`/product/${product.id}`">
+      <div class="product-emoji">{{ product.emoji }}</div>
+    </RouterLink>
+    <div class="product-body">
+      <span class="product-category">{{ product.category }}</span>
+      <RouterLink :to="`/product/${product.id}`">
+        <h3 class="product-name">{{ product.name }}</h3>
+      </RouterLink>
+      <p class="product-desc">{{ product.description }}</p>
+      <div class="product-bottom">
+        <span class="product-price">${{ product.price.toFixed(2) }}</span>
+        <button class="btn-primary" @click="emit('add-to-cart', product)">Add to Cart</button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,17 +1,11 @@
 <template>
   <footer class="store-footer">
-    <div class="footer-content">
-      <h3>{{projectName}}</h3>
-      <p>Your one-stop shop for quality products.</p>
+    <div class="footer-inner">
+      <h3 class="footer-brand">{{projectName}}</h3>
+      <p class="footer-text">Your one-stop shop for quality products.</p>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy; 2025 {{projectName}}. All rights reserved.</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

@@ -1,33 +1,15 @@
 <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>
+    <div class="header-inner">
+      <RouterLink to="/" class="store-logo">{{projectName}}</RouterLink>
+      <nav class="nav-links">
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/cart" class="cart-link">Cart ({{ cartCount }})</RouterLink>
       </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/ecommerce/vue/src/data.ts

@@ -0,0 +1,23 @@
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  emoji: string;
+  description: string;
+  category: string;
+}
+
+export interface CartItem extends Product {
+  quantity: number;
+}
+
+export const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, emoji: '🎧', description: 'Premium noise-cancelling wireless headphones with 30-hour battery life.', category: 'Electronics' },
+  { id: 2, name: 'Leather Backpack', price: 129.99, emoji: '🎒', description: 'Handcrafted leather backpack with laptop compartment and multiple pockets.', category: 'Accessories' },
+  { id: 3, name: 'Running Shoes', price: 94.99, emoji: '👟', description: 'Lightweight running shoes with responsive cushioning for all-day comfort.', category: 'Footwear' },
+  { id: 4, name: 'Smart Watch', price: 199.99, emoji: '⌚', description: 'Fitness tracker and smartwatch with heart rate monitor and GPS.', category: 'Electronics' },
+  { id: 5, name: 'Coffee Maker', price: 64.99, emoji: '☕', description: 'Programmable drip coffee maker with thermal carafe and auto-shutoff.', category: 'Home' },
+  { id: 6, name: 'Sunglasses', price: 49.99, emoji: '🕶️', description: 'Polarized UV400 sunglasses with lightweight titanium frame.', category: 'Accessories' },
+  { id: 7, name: 'Yoga Mat', price: 34.99, emoji: '🧘', description: 'Non-slip eco-friendly yoga mat with alignment lines and carrying strap.', category: 'Fitness' },
+  { id: 8, name: 'Desk Lamp', price: 44.99, emoji: '💡', description: 'LED desk lamp with adjustable brightness, color temperature, and USB port.', category: 'Home' },
+];

package/templates/overlays/ecommerce/vue/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+import './style.css';
+
+createApp(App).use(router).mount('#app');