@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/ecommerce/nuxt/components/ProductCard.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineProps<{
+  product: {
+    id: number;
+    name: string;
+    price: number;
+    image: string;
+    category: string;
+    description: string;
+  };
+}>();
+</script>
+
+<template>
+  <NuxtLink :to="`/product/${product.id}`" class="product-card">
+    <div class="card-image">
+      <span class="emoji">{{ product.image }}</span>
+    </div>
+    <div class="card-body">
+      <span class="card-category">{{ product.category }}</span>
+      <h3 class="card-name">{{ product.name }}</h3>
+      <p class="card-price">${{ product.price.toFixed(2) }}</p>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.product-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: block;
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-image {
+  background: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.emoji {
+  font-size: 4rem;
+}
+
+.card-body {
+  padding: 1.25rem;
+}
+
+.card-category {
+  font-size: 0.75rem;
+  color: #4f46e5;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.card-name {
+  font-size: 1.05rem;
+  color: #111827;
+  margin: 0.35rem 0 0.5rem;
+}
+
+.card-price {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #4f46e5;
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <footer class="store-footer">
+    <div class="footer-inner">
+      <p>&copy; 2024 {{projectName}}. All rights reserved.</p>
+      <div class="footer-links">
+        <NuxtLink to="/">Home</NuxtLink>
+        <NuxtLink to="/cart">Cart</NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.store-footer {
+  background: #111827;
+  color: #9ca3af;
+  padding: 1.5rem 1rem;
+  margin-top: auto;
+}
+
+.footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer-inner p {
+  font-size: 0.875rem;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.footer-links a {
+  color: #9ca3af;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+}
+
+.footer-links a:hover {
+  color: white;
+}
+</style>

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

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+defineProps<{
+  cartCount: number;
+}>();
+</script>
+
+<template>
+  <header class="store-header">
+    <div class="header-inner">
+      <NuxtLink to="/" class="logo">🛍️ {{projectName}}</NuxtLink>
+      <nav class="header-nav">
+        <NuxtLink to="/" class="nav-link">Home</NuxtLink>
+        <NuxtLink to="/cart" class="cart-link">
+          🛒 Cart
+          <span v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</span>
+        </NuxtLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.store-header {
+  background: #111827;
+  color: white;
+  padding: 0 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+
+.logo {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: white;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: #d1d5db;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: white;
+}
+
+.cart-link {
+  color: #d1d5db;
+  font-weight: 500;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  transition: color 0.2s;
+}
+
+.cart-link:hover {
+  color: white;
+}
+
+.cart-badge {
+  background: #4f46e5;
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 700;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+}
+</style>

package/templates/overlays/ecommerce/nuxt/layouts/default.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+export interface CartItem extends Product {
+  quantity: number;
+}
+
+const cart = useState<CartItem[]>('cart', () => []);
+const cartCount = computed(() => cart.value.reduce((sum, i) => sum + i.quantity, 0));
+</script>
+
+<template>
+  <div class="store-layout">
+    <StoreHeader :cart-count="cartCount" />
+    <main class="store-main">
+      <slot />
+    </main>
+    <StoreFooter />
+  </div>
+</template>
+
+<style>
+.store-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.store-main {
+  flex: 1;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+</style>

package/templates/overlays/ecommerce/nuxt/pages/cart.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+interface CartItem extends Product {
+  quantity: number;
+}
+
+const cart = useState<CartItem[]>('cart');
+
+const total = computed(() =>
+  cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+);
+
+function removeItem(id: number) {
+  cart.value = cart.value.filter(item => item.id !== id);
+}
+
+function updateQuantity(id: number, delta: number) {
+  const item = cart.value.find(i => i.id === id);
+  if (item) {
+    item.quantity += delta;
+    if (item.quantity <= 0) {
+      removeItem(id);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="cart-page">
+    <h1 class="cart-title">Shopping Cart</h1>
+
+    <div v-if="cart.length > 0" class="cart-content">
+      <div class="cart-items">
+        <div v-for="item in cart" :key="item.id" class="cart-item">
+          <span class="item-image">{{ item.image }}</span>
+          <div class="item-details">
+            <h3>{{ item.name }}</h3>
+            <p class="item-price">${{ item.price.toFixed(2) }}</p>
+          </div>
+          <div class="item-quantity">
+            <button @click="updateQuantity(item.id, -1)">-</button>
+            <span>{{ item.quantity }}</span>
+            <button @click="updateQuantity(item.id, 1)">+</button>
+          </div>
+          <p class="item-subtotal">${{ (item.price * item.quantity).toFixed(2) }}</p>
+          <button class="remove-btn" @click="removeItem(item.id)">✕</button>
+        </div>
+      </div>
+
+      <div class="cart-summary">
+        <h2>Order Summary</h2>
+        <div class="summary-row">
+          <span>Subtotal</span>
+          <span>${{ total.toFixed(2) }}</span>
+        </div>
+        <div class="summary-row">
+          <span>Shipping</span>
+          <span>Free</span>
+        </div>
+        <div class="summary-row total">
+          <span>Total</span>
+          <span>${{ total.toFixed(2) }}</span>
+        </div>
+        <button class="checkout-btn">Proceed to Checkout</button>
+      </div>
+    </div>
+
+    <div v-else class="empty-cart">
+      <p class="empty-icon">🛒</p>
+      <h2>Your cart is empty</h2>
+      <p>Start adding some products!</p>
+      <NuxtLink to="/" class="continue-btn">Continue Shopping</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cart-title {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 2rem;
+}
+
+.cart-content {
+  display: grid;
+  grid-template-columns: 1fr 350px;
+  gap: 2rem;
+  align-items: start;
+}
+
+.cart-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cart-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: white;
+  padding: 1.25rem;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.item-image {
+  font-size: 2.5rem;
+}
+
+.item-details {
+  flex: 1;
+}
+
+.item-details h3 {
+  color: #111827;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.item-price {
+  color: #6b7280;
+  font-size: 0.9rem;
+}
+
+.item-quantity {
+  display: flex;
+  align-items: center;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.item-quantity button {
+  background: #f3f4f6;
+  border: none;
+  padding: 0.35rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.item-quantity button:hover {
+  background: #e5e7eb;
+}
+
+.item-quantity span {
+  padding: 0.35rem 0.75rem;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.item-subtotal {
+  font-weight: 700;
+  color: #111827;
+  min-width: 70px;
+  text-align: right;
+}
+
+.remove-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  font-size: 1.1rem;
+  padding: 0.25rem;
+}
+
+.remove-btn:hover {
+  color: #ef4444;
+}
+
+.cart-summary {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.cart-summary h2 {
+  font-size: 1.25rem;
+  color: #111827;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  color: #6b7280;
+}
+
+.summary-row.total {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: #111827;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 0.75rem;
+  padding-top: 1rem;
+}
+
+.checkout-btn {
+  width: 100%;
+  background: #4f46e5;
+  color: white;
+  border: none;
+  padding: 0.875rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 1.25rem;
+  transition: background 0.2s;
+}
+
+.checkout-btn:hover {
+  background: #4338ca;
+}
+
+.empty-cart {
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.empty-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.empty-cart h2 {
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+
+.empty-cart p {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+
+.continue-btn {
+  display: inline-block;
+  background: #4f46e5;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 0.2s;
+}
+
+.continue-btn:hover {
+  background: #4338ca;
+}
+
+@media (max-width: 768px) {
+  .cart-content {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+const products: Product[] = [
+  { id: 1, name: 'Wireless Headphones', price: 79.99, image: '🎧', category: 'Electronics', description: 'Premium wireless headphones with noise cancellation.' },
+  { id: 2, name: 'Running Shoes', price: 129.99, image: '👟', category: 'Sports', description: 'Lightweight running shoes for daily training.' },
+  { id: 3, name: 'Coffee Maker', price: 49.99, image: '☕', category: 'Home', description: 'Programmable coffee maker with thermal carafe.' },
+  { id: 4, name: 'Backpack', price: 59.99, image: '🎒', category: 'Accessories', description: 'Water-resistant laptop backpack.' },
+  { id: 5, name: 'Smartwatch', price: 199.99, image: '⌚', category: 'Electronics', description: 'Fitness tracking smartwatch.' },
+  { id: 6, name: 'Desk Lamp', price: 34.99, image: '💡', category: 'Home', description: 'LED desk lamp with adjustable brightness.' },
+  { id: 7, name: 'Yoga Mat', price: 29.99, image: '🧘', category: 'Sports', description: 'Non-slip yoga mat with carrying strap.' },
+  { id: 8, name: 'Sunglasses', price: 89.99, image: '🕶️', category: 'Accessories', description: 'Polarized sunglasses with UV protection.' },
+];
+
+const search = ref('');
+const selectedCategory = ref('All');
+
+const categories = computed(() => ['All', ...new Set(products.map(p => p.category))]);
+
+const filteredProducts = computed(() => {
+  return products.filter(p => {
+    const matchSearch = p.name.toLowerCase().includes(search.value.toLowerCase());
+    const matchCategory = selectedCategory.value === 'All' || p.category === selectedCategory.value;
+    return matchSearch && matchCategory;
+  });
+});
+</script>
+
+<template>
+  <div class="shop-page">
+    <div class="shop-hero">
+      <h1>Welcome to Our Store</h1>
+      <p>Discover amazing products at great prices</p>
+    </div>
+
+    <div class="shop-controls">
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search products..."
+        class="search-input"
+      />
+      <div class="category-filters">
+        <button
+          v-for="cat in categories"
+          :key="cat"
+          :class="['cat-btn', { active: selectedCategory === cat }]"
+          @click="selectedCategory = cat"
+        >
+          {{ cat }}
+        </button>
+      </div>
+    </div>
+
+    <div class="product-grid">
+      <ProductCard
+        v-for="product in filteredProducts"
+        :key="product.id"
+        :product="product"
+      />
+    </div>
+
+    <p v-if="filteredProducts.length === 0" class="no-results">
+      No products found matching your search.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.shop-hero {
+  text-align: center;
+  padding: 2rem 0 1.5rem;
+}
+
+.shop-hero h1 {
+  font-size: 2rem;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+
+.shop-hero p {
+  color: #6b7280;
+  font-size: 1.1rem;
+}
+
+.shop-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.category-filters {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.cat-btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 20px;
+  background: white;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.cat-btn:hover {
+  border-color: #4f46e5;
+  color: #4f46e5;
+}
+
+.cat-btn.active {
+  background: #4f46e5;
+  color: white;
+  border-color: #4f46e5;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.5rem;
+}
+
+.no-results {
+  text-align: center;
+  color: #6b7280;
+  padding: 3rem 0;
+  font-size: 1.1rem;
+}
+</style>