create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/ecommerce/pages.js

@@ -0,0 +1,969 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Ecommerce Pages
+ * - Home (hero, features, featured products, categories)
+ * - Products (with filters)
+ * - ProductDetail (with gallery, related products)
+ * - Cart (with order summary)
+ * - Checkout (with form validation)
+ * - Wishlist
+ */
+
+async function createPages(config) {
+  // Home Page - Clean design with key sections
+  const homeComponent = `import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroArrowRight,
+  heroTruck,
+  heroShieldCheck,
+  heroArrowPath,
+  heroSparkles,
+  heroDevicePhoneMobile,
+  heroComputerDesktop,
+  heroShoppingBag,
+  heroHome,
+  heroHeart,
+  heroBolt,
+} from '@ng-icons/heroicons/outline';
+import { heroStarSolid } from '@ng-icons/heroicons/solid';
+import { ProductGridComponent } from '@shared/components/product-grid/product-grid.component';
+import { ProductService } from '@core/services/product.service';
+
+interface CategoryItem {
+  name: string;
+  icon: string;
+  color: string;
+  bgColor: string;
+}
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, ProductGridComponent],
+  viewProviders: [
+    provideIcons({
+      heroArrowRight,
+      heroTruck,
+      heroShieldCheck,
+      heroArrowPath,
+      heroSparkles,
+      heroStarSolid,
+      heroDevicePhoneMobile,
+      heroComputerDesktop,
+      heroShoppingBag,
+      heroHome,
+      heroHeart,
+      heroBolt,
+    }),
+  ],
+  template: \`
+    <div>
+      <!-- Hero Section - Enhanced Dark Design -->
+      <section class="relative min-h-[600px] overflow-hidden bg-linear-to-br from-slate-900 via-purple-900 to-slate-900">
+        <!-- Animated Background Elements -->
+        <div class="absolute inset-0">
+          <div class="animate-blob absolute -left-4 top-0 h-72 w-72 rounded-full bg-purple-500 opacity-20 mix-blend-multiply blur-xl filter"></div>
+          <div class="animate-blob animation-delay-2000 absolute -right-4 top-0 h-72 w-72 rounded-full bg-yellow-500 opacity-20 mix-blend-multiply blur-xl filter"></div>
+          <div class="animate-blob animation-delay-4000 absolute -bottom-8 left-20 h-72 w-72 rounded-full bg-pink-500 opacity-20 mix-blend-multiply blur-xl filter"></div>
+        </div>
+
+        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+          <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
+            <!-- Left Content -->
+            <div class="text-center lg:text-start">
+              <!-- Sale Badge -->
+              <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 px-4 py-2 text-sm font-semibold text-white shadow-lg">
+                <span class="relative flex h-2 w-2">
+                  <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
+                  <span class="relative inline-flex h-2 w-2 rounded-full bg-white"></span>
+                </span>
+                {{ 'home.saleBadge' | translate }}
+              </div>
+
+              <h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
+                {{ 'home.heroTitle' | translate }}
+              </h1>
+              <p class="mt-6 text-lg text-gray-300">
+                {{ 'home.heroSubtitle' | translate }}
+              </p>
+
+              <!-- Stats -->
+              <div class="mt-8 flex flex-wrap justify-center gap-8 lg:justify-start">
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-white">50K+</div>
+                  <div class="text-sm text-gray-400">{{ 'home.happyCustomers' | translate }}</div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-white">10K+</div>
+                  <div class="text-sm text-gray-400">{{ 'home.products' | translate }}</div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-white">4.9</div>
+                  <div class="flex items-center justify-center gap-1 text-sm text-gray-400">
+                    <ng-icon name="heroStarSolid" size="14" class="text-amber-400"></ng-icon>
+                    {{ 'home.rating' | translate }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- CTA Buttons -->
+              <div class="mt-10 flex flex-wrap justify-center gap-4 lg:justify-start">
+                <a routerLink="/products" class="group inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-gray-900 shadow-xl transition-all hover:bg-gray-100 hover:shadow-2xl">
+                  {{ 'home.shopNow' | translate }}
+                  <ng-icon name="heroArrowRight" size="20" class="transition-transform group-hover:translate-x-1"></ng-icon>
+                </a>
+                <a routerLink="/products" [queryParams]="{sale: true}" class="inline-flex items-center gap-2 rounded-full border-2 border-white/30 px-8 py-4 font-semibold text-white backdrop-blur-sm transition-all hover:border-white hover:bg-white/10">
+                  {{ 'home.viewDeals' | translate }}
+                </a>
+              </div>
+            </div>
+
+            <!-- Right Content - Hero Image with Floating Elements -->
+            <div class="relative hidden lg:block">
+              <div class="relative">
+                <img
+                  src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=600"
+                  alt="Shopping"
+                  class="rounded-3xl shadow-2xl"
+                />
+                <!-- Floating Discount Badge -->
+                <div class="absolute -left-6 top-8 animate-bounce rounded-2xl bg-gradient-to-r from-rose-500 to-pink-500 p-4 shadow-xl">
+                  <div class="text-center text-white">
+                    <div class="text-2xl font-bold">-50%</div>
+                    <div class="text-xs">{{ 'home.sale' | translate }}</div>
+                  </div>
+                </div>
+                <!-- Floating Product Card -->
+                <div class="absolute -bottom-4 -right-4 rounded-2xl bg-white p-4 shadow-xl">
+                  <div class="flex items-center gap-3">
+                    <div class="h-12 w-12 rounded-xl bg-linear-to-br from-purple-500 to-pink-500"></div>
+                    <div>
+                      <div class="text-sm font-semibold text-gray-900">{{ 'home.newCollection' | translate }}</div>
+                      <div class="text-xs text-gray-500">{{ 'home.justArrived' | translate }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features Bar -->
+      <section class="border-b border-gray-200 bg-white">
+        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div class="flex items-center justify-center gap-3 p-4">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 text-primary-600">
+                <ng-icon name="heroTruck" size="20"></ng-icon>
+              </div>
+              <div>
+                <p class="font-semibold text-gray-900">{{ 'home.freeShipping' | translate }}</p>
+                <p class="text-sm text-gray-500">{{ 'home.freeShippingDesc' | translate }}</p>
+              </div>
+            </div>
+            <div class="flex items-center justify-center gap-3 p-4">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-success-100 text-success-600">
+                <ng-icon name="heroShieldCheck" size="20"></ng-icon>
+              </div>
+              <div>
+                <p class="font-semibold text-gray-900">{{ 'home.securePayment' | translate }}</p>
+                <p class="text-sm text-gray-500">{{ 'home.securePaymentDesc' | translate }}</p>
+              </div>
+            </div>
+            <div class="flex items-center justify-center gap-3 p-4">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-warning-100 text-warning-600">
+                <ng-icon name="heroArrowPath" size="20"></ng-icon>
+              </div>
+              <div>
+                <p class="font-semibold text-gray-900">{{ 'home.easyReturns' | translate }}</p>
+                <p class="text-sm text-gray-500">{{ 'home.easyReturnsDesc' | translate }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Shop by Category -->
+      <section class="py-16 bg-gray-50">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'home.shopByCategory' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'home.categorySubtitle' | translate }}</p>
+          </div>
+
+          <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-6">
+            @for (cat of categoryItems; track cat.name) {
+              <a
+                [routerLink]="['/products']"
+                [queryParams]="{category: cat.name}"
+                class="group relative overflow-hidden rounded-2xl bg-white p-6 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2">
+                <div class="flex flex-col items-center gap-4">
+                  <div
+                    class="flex h-16 w-16 items-center justify-center rounded-2xl transition-transform group-hover:scale-110"
+                    [class]="cat.bgColor">
+                    <ng-icon [name]="cat.icon" size="32" [class]="cat.color"></ng-icon>
+                  </div>
+                  <span class="font-semibold text-gray-900 text-center">{{ cat.name }}</span>
+                </div>
+                <div class="absolute inset-0 bg-gradient-to-t from-primary-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              </a>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- Featured Products -->
+      <section class="py-16">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between mb-8">
+            <h2 class="text-2xl font-bold text-gray-900">{{ 'home.featuredProducts' | translate }}</h2>
+            <a routerLink="/products" class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium">
+              {{ 'home.viewAll' | translate }}
+              <ng-icon name="heroArrowRight" size="16"></ng-icon>
+            </a>
+          </div>
+          <app-product-grid [products]="featuredProducts"></app-product-grid>
+        </div>
+      </section>
+
+      <!-- New Arrivals -->
+      <section class="py-16 bg-gray-50">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between mb-8">
+            <div class="flex items-center gap-3">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-r from-green-500 to-emerald-500">
+                <ng-icon name="heroSparkles" size="20" class="text-white"></ng-icon>
+              </div>
+              <div>
+                <h2 class="text-2xl font-bold text-gray-900">{{ 'home.newArrivals' | translate }}</h2>
+                <p class="text-gray-600">{{ 'home.newArrivalsSubtitle' | translate }}</p>
+              </div>
+            </div>
+            <a routerLink="/products" [queryParams]="{sort: 'newest'}" class="hidden sm:inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium">
+              {{ 'home.seeMore' | translate }}
+              <ng-icon name="heroArrowRight" size="16"></ng-icon>
+            </a>
+          </div>
+          <app-product-grid [products]="newArrivals"></app-product-grid>
+        </div>
+      </section>
+
+      <!-- Testimonials -->
+      <section class="py-16 bg-white">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'home.testimonials' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'home.testimonialsSubtitle' | translate }}</p>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
+            @for (testimonial of testimonials; track testimonial.name) {
+              <div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-lg transition-shadow">
+                <div class="flex gap-1 mb-4">
+                  @for (star of [1, 2, 3, 4, 5]; track star) {
+                    <ng-icon name="heroStarSolid" size="20" class="text-amber-400"></ng-icon>
+                  }
+                </div>
+                <p class="text-gray-600 mb-6">"{{ testimonial.text }}"</p>
+                <div class="flex items-center gap-4">
+                  <div class="h-12 w-12 rounded-full bg-linear-to-br" [class]="testimonial.avatarColor"></div>
+                  <div>
+                    <p class="font-semibold text-gray-900">{{ testimonial.name }}</p>
+                    <p class="text-sm text-gray-500">{{ testimonial.role }}</p>
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      </section>
+    </div>
+  \`,
+})
+export class HomeComponent {
+  private productService = inject(ProductService);
+
+  featuredProducts = this.productService.getProducts().slice(0, 4);
+  newArrivals = this.productService.getProducts().slice(4, 8);
+  categories = this.productService.getCategories();
+
+  categoryItems: CategoryItem[] = [
+    { name: 'Electronics', icon: 'heroDevicePhoneMobile', color: 'text-blue-600', bgColor: 'bg-blue-100' },
+    { name: 'Computers', icon: 'heroComputerDesktop', color: 'text-purple-600', bgColor: 'bg-purple-100' },
+    { name: 'Fashion', icon: 'heroShoppingBag', color: 'text-pink-600', bgColor: 'bg-pink-100' },
+    { name: 'Home', icon: 'heroHome', color: 'text-amber-600', bgColor: 'bg-amber-100' },
+    { name: 'Beauty', icon: 'heroHeart', color: 'text-rose-600', bgColor: 'bg-rose-100' },
+    { name: 'Sports', icon: 'heroBolt', color: 'text-green-600', bgColor: 'bg-green-100' },
+  ];
+
+  testimonials = [
+    {
+      name: 'Sarah Johnson',
+      role: 'Verified Buyer',
+      text: 'Amazing quality products and super fast delivery. The customer service is top-notch!',
+      avatarColor: 'from-pink-400 to-rose-400',
+    },
+    {
+      name: 'Michael Chen',
+      role: 'Verified Buyer',
+      text: 'Best shopping experience ever. Great prices and the products always exceed expectations.',
+      avatarColor: 'from-blue-400 to-indigo-400',
+    },
+    {
+      name: 'Emily Davis',
+      role: 'Verified Buyer',
+      text: 'Love the variety of products available. Returns are hassle-free and shipping is always on time.',
+      avatarColor: 'from-green-400 to-emerald-400',
+    },
+  ];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/home/home.component.ts'),
+    homeComponent
+  );
+
+  // Products Page
+  const productsComponent = `import { Component, inject, signal, computed } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ProductGridComponent } from '@shared/components/product-grid/product-grid.component';
+import { ProductFiltersComponent, ProductFilters } from '@shared/components/product-filters/product-filters.component';
+import { ProductService, Product } from '@core/services/product.service';
+
+@Component({
+  selector: 'app-products',
+  standalone: true,
+  imports: [TranslateModule, ProductGridComponent, ProductFiltersComponent],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div class="mb-8">
+        <h1 class="text-3xl font-bold text-gray-900">{{ 'shop.title' | translate }}</h1>
+        <p class="mt-2 text-gray-600">{{ 'shop.subtitle' | translate }}</p>
+      </div>
+
+      <div class="grid grid-cols-1 gap-8 lg:grid-cols-4">
+        <!-- Filters Sidebar -->
+        <aside class="lg:col-span-1">
+          <app-product-filters
+            [categories]="categories"
+            (filtersChange)="onFiltersChange($event)">
+          </app-product-filters>
+        </aside>
+
+        <!-- Products Grid -->
+        <div class="lg:col-span-3">
+          <div class="mb-4 text-sm text-gray-500">
+            {{ filteredProducts().length }} {{ 'shop.productsFound' | translate }}
+          </div>
+          <app-product-grid [products]="filteredProducts()"></app-product-grid>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class ProductsComponent {
+  private productService = inject(ProductService);
+  private route = inject(ActivatedRoute);
+
+  categories = this.productService.getCategories();
+  private allProducts = this.productService.getProducts();
+
+  private filters = signal<ProductFilters>({
+    category: '',
+    minPrice: null,
+    maxPrice: null,
+    sortBy: 'newest',
+  });
+
+  filteredProducts = computed(() => {
+    let products = [...this.allProducts];
+    const f = this.filters();
+
+    // Filter by category
+    if (f.category) {
+      products = products.filter(p => p.category === f.category);
+    }
+
+    // Filter by price
+    if (f.minPrice !== null) {
+      products = products.filter(p => p.price >= f.minPrice!);
+    }
+    if (f.maxPrice !== null) {
+      products = products.filter(p => p.price <= f.maxPrice!);
+    }
+
+    // Sort
+    switch (f.sortBy) {
+      case 'price-low':
+        products.sort((a, b) => a.price - b.price);
+        break;
+      case 'price-high':
+        products.sort((a, b) => b.price - a.price);
+        break;
+      case 'rating':
+        products.sort((a, b) => b.rating - a.rating);
+        break;
+    }
+
+    return products;
+  });
+
+  constructor() {
+    // Check for category query param
+    this.route.queryParams.subscribe(params => {
+      if (params['category']) {
+        this.filters.update(f => ({ ...f, category: params['category'] }));
+      }
+    });
+  }
+
+  onFiltersChange(newFilters: ProductFilters): void {
+    this.filters.set(newFilters);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/products/products.component.ts'),
+    productsComponent
+  );
+
+  // Product Detail Page
+  const productDetailComponent = `import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { CurrencyPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroHeart, heroShoppingCart, heroCheck } from '@ng-icons/heroicons/outline';
+import { heroHeartSolid } from '@ng-icons/heroicons/solid';
+import { RatingComponent } from '@shared/components/rating/rating.component';
+import { QuantitySelectorComponent } from '@shared/components/quantity-selector/quantity-selector.component';
+import { ProductGridComponent } from '@shared/components/product-grid/product-grid.component';
+import { ProductService, Product } from '@core/services/product.service';
+import { CartService } from '@core/services/cart.service';
+import { WishlistService } from '@core/services/wishlist.service';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [RouterModule, CurrencyPipe, TranslateModule, NgIconComponent, RatingComponent, QuantitySelectorComponent, ProductGridComponent],
+  viewProviders: [provideIcons({ heroHeart, heroHeartSolid, heroShoppingCart, heroCheck })],
+  template: \`
+    @if (product) {
+      <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+          <!-- Image Gallery -->
+          <div class="space-y-4">
+            <div class="aspect-square overflow-hidden rounded-2xl bg-gray-100">
+              <img [src]="selectedImage()" [alt]="product.name" class="h-full w-full object-cover" />
+            </div>
+            @if (product.images && product.images.length > 1) {
+              <div class="flex gap-2">
+                @for (img of product.images; track img) {
+                  <button
+                    (click)="selectedImage.set(img)"
+                    class="h-20 w-20 overflow-hidden rounded-lg border-2 transition-all"
+                    [class.border-primary-500]="selectedImage() === img"
+                    [class.border-transparent]="selectedImage() !== img">
+                    <img [src]="img" [alt]="product.name" class="h-full w-full object-cover" />
+                  </button>
+                }
+              </div>
+            }
+          </div>
+
+          <!-- Product Info -->
+          <div class="space-y-6">
+            <div>
+              <p class="text-sm text-gray-500">{{ product.category }}</p>
+              <h1 class="mt-1 text-3xl font-bold text-gray-900">{{ product.name }}</h1>
+            </div>
+
+            <div class="flex items-center gap-4">
+              <app-rating [rating]="product.rating" [reviewCount]="product.reviewCount"></app-rating>
+            </div>
+
+            <div class="flex items-center gap-4">
+              <span class="text-3xl font-bold text-gray-900">{{ product.price | currency }}</span>
+              @if (product.originalPrice) {
+                <span class="text-xl text-gray-400 line-through">{{ product.originalPrice | currency }}</span>
+                <span class="rounded-full bg-danger-100 px-3 py-1 text-sm font-semibold text-danger-700">
+                  -{{ discountPercent }}%
+                </span>
+              }
+            </div>
+
+            <p class="text-gray-600">{{ product.description }}</p>
+
+            @if (product.features) {
+              <div>
+                <h3 class="font-semibold text-gray-900 mb-2">{{ 'product.features' | translate }}</h3>
+                <ul class="space-y-2">
+                  @for (feature of product.features; track feature) {
+                    <li class="flex items-center gap-2 text-gray-600">
+                      <ng-icon name="heroCheck" size="18" class="text-success-500"></ng-icon>
+                      {{ feature }}
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+
+            <div class="flex items-center gap-4">
+              <app-quantity-selector
+                [quantity]="quantity"
+                (quantityChange)="quantity = $event">
+              </app-quantity-selector>
+
+              <button
+                (click)="addToCart()"
+                class="flex-1 flex items-center justify-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all">
+                <ng-icon name="heroShoppingCart" size="20"></ng-icon>
+                {{ 'product.addToCart' | translate }}
+              </button>
+
+              <button
+                (click)="toggleWishlist()"
+                class="flex h-12 w-12 items-center justify-center rounded-full border-2 transition-all"
+                [class.border-danger-500]="isInWishlist"
+                [class.border-gray-300]="!isInWishlist">
+                <ng-icon
+                  [name]="isInWishlist ? 'heroHeartSolid' : 'heroHeart'"
+                  size="24"
+                  [class]="isInWishlist ? 'text-danger-500' : 'text-gray-600'">
+                </ng-icon>
+              </button>
+            </div>
+
+            @if (product.inStock) {
+              <p class="flex items-center gap-2 text-success-600">
+                <ng-icon name="heroCheck" size="18"></ng-icon>
+                {{ 'product.inStock' | translate }}
+              </p>
+            }
+          </div>
+        </div>
+
+        <!-- Related Products -->
+        <div class="mt-16">
+          <h2 class="text-2xl font-bold text-gray-900 mb-8">{{ 'product.relatedProducts' | translate }}</h2>
+          <app-product-grid [products]="relatedProducts"></app-product-grid>
+        </div>
+      </div>
+    }
+  \`,
+})
+export class ProductDetailComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private productService = inject(ProductService);
+  private cartService = inject(CartService);
+  private wishlistService = inject(WishlistService);
+
+  product?: Product;
+  relatedProducts: Product[] = [];
+  quantity = 1;
+  selectedImage = signal('');
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      const id = Number(params['id']);
+      this.product = this.productService.getProductById(id);
+
+      if (this.product) {
+        this.selectedImage.set(this.product.image);
+        this.relatedProducts = this.productService
+          .getProductsByCategory(this.product.category)
+          .filter(p => p.id !== id)
+          .slice(0, 4);
+      } else {
+        this.router.navigate(['/products']);
+      }
+    });
+  }
+
+  get discountPercent(): number {
+    if (!this.product?.originalPrice) return 0;
+    return Math.round((1 - this.product.price / this.product.originalPrice) * 100);
+  }
+
+  get isInWishlist(): boolean {
+    return this.product ? this.wishlistService.isInWishlist(this.product.id) : false;
+  }
+
+  addToCart(): void {
+    if (this.product) {
+      this.cartService.addItem(this.product, this.quantity);
+    }
+  }
+
+  toggleWishlist(): void {
+    if (this.product) {
+      this.wishlistService.toggle(this.product);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/product-detail/product-detail.component.ts'),
+    productDetailComponent
+  );
+
+  // Cart Page
+  const cartComponent = `import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CurrencyPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroShoppingBag, heroArrowRight } from '@ng-icons/heroicons/outline';
+import { CartItemComponent } from '@shared/components/cart-item/cart-item.component';
+import { CartService } from '@core/services/cart.service';
+
+@Component({
+  selector: 'app-cart',
+  standalone: true,
+  imports: [RouterModule, CurrencyPipe, TranslateModule, NgIconComponent, CartItemComponent],
+  viewProviders: [provideIcons({ heroShoppingBag, heroArrowRight })],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ 'cart.title' | translate }}</h1>
+
+      @if (cartService.itemCount() > 0) {
+        <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          <!-- Cart Items -->
+          <div class="lg:col-span-2 space-y-4">
+            @for (item of cartService.cartItems(); track item.product.id) {
+              <app-cart-item [item]="item"></app-cart-item>
+            }
+          </div>
+
+          <!-- Order Summary -->
+          <div class="lg:col-span-1">
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm sticky top-24">
+              <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ 'cart.orderSummary' | translate }}</h2>
+
+              <div class="space-y-3">
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.subtotal' | translate }}</span>
+                  <span>{{ cartService.subtotal() | currency }}</span>
+                </div>
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.shipping' | translate }}</span>
+                  <span>{{ cartService.shipping() === 0 ? ('cart.free' | translate) : (cartService.shipping() | currency) }}</span>
+                </div>
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.tax' | translate }}</span>
+                  <span>{{ cartService.tax() | currency }}</span>
+                </div>
+                <div class="border-t border-gray-200 pt-3 flex justify-between font-semibold text-gray-900">
+                  <span>{{ 'cart.total' | translate }}</span>
+                  <span>{{ cartService.total() | currency }}</span>
+                </div>
+              </div>
+
+              <a
+                routerLink="/checkout"
+                class="mt-6 flex w-full items-center justify-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all">
+                {{ 'cart.checkout' | translate }}
+                <ng-icon name="heroArrowRight" size="20"></ng-icon>
+              </a>
+
+              <a
+                routerLink="/products"
+                class="mt-4 flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 px-8 py-3 font-semibold text-gray-700 hover:bg-gray-50 transition-all">
+                {{ 'cart.continueShopping' | translate }}
+              </a>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div class="py-16 text-center">
+          <div class="mx-auto h-24 w-24 rounded-full bg-gray-100 flex items-center justify-center mb-6">
+            <ng-icon name="heroShoppingBag" size="40" class="text-gray-400"></ng-icon>
+          </div>
+          <h2 class="text-xl font-semibold text-gray-900 mb-2">{{ 'cart.empty' | translate }}</h2>
+          <p class="text-gray-500 mb-6">{{ 'cart.emptyDesc' | translate }}</p>
+          <a
+            routerLink="/products"
+            class="inline-flex items-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all">
+            {{ 'cart.startShopping' | translate }}
+            <ng-icon name="heroArrowRight" size="20"></ng-icon>
+          </a>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class CartComponent {
+  cartService = inject(CartService);
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/cart/cart.component.ts'),
+    cartComponent
+  );
+
+  // Checkout Page
+  const checkoutComponent = `import { Component, inject } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroLockClosed, heroCheck } from '@ng-icons/heroicons/outline';
+import { CartService } from '@core/services/cart.service';
+
+@Component({
+  selector: 'app-checkout',
+  standalone: true,
+  imports: [RouterModule, ReactiveFormsModule, CurrencyPipe, TranslateModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroLockClosed, heroCheck })],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ 'checkout.title' | translate }}</h1>
+
+      @if (!orderPlaced) {
+        <form [formGroup]="checkoutForm" (ngSubmit)="placeOrder()" class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+          <!-- Checkout Form -->
+          <div class="space-y-6">
+            <!-- Contact -->
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ 'checkout.contact' | translate }}</h2>
+              <div class="space-y-4">
+                <div>
+                  <label for="email" class="block text-sm font-medium text-gray-700">{{ 'checkout.email' | translate }}</label>
+                  <input id="email" type="email" formControlName="email"
+                    class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                    [class.border-danger-500]="checkoutForm.get('email')?.invalid && checkoutForm.get('email')?.touched" />
+                </div>
+                <div>
+                  <label for="phone" class="block text-sm font-medium text-gray-700">{{ 'checkout.phone' | translate }}</label>
+                  <input id="phone" type="tel" formControlName="phone"
+                    class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                </div>
+              </div>
+            </div>
+
+            <!-- Shipping -->
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ 'checkout.shipping' | translate }}</h2>
+              <div class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label for="firstName" class="block text-sm font-medium text-gray-700">{{ 'checkout.firstName' | translate }}</label>
+                    <input id="firstName" type="text" formControlName="firstName"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                  <div>
+                    <label for="lastName" class="block text-sm font-medium text-gray-700">{{ 'checkout.lastName' | translate }}</label>
+                    <input id="lastName" type="text" formControlName="lastName"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                </div>
+                <div>
+                  <label for="address" class="block text-sm font-medium text-gray-700">{{ 'checkout.address' | translate }}</label>
+                  <input id="address" type="text" formControlName="address"
+                    class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label for="city" class="block text-sm font-medium text-gray-700">{{ 'checkout.city' | translate }}</label>
+                    <input id="city" type="text" formControlName="city"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                  <div>
+                    <label for="zip" class="block text-sm font-medium text-gray-700">{{ 'checkout.zip' | translate }}</label>
+                    <input id="zip" type="text" formControlName="zip"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Payment -->
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ 'checkout.payment' | translate }}</h2>
+              <div class="space-y-4">
+                <div>
+                  <label for="cardNumber" class="block text-sm font-medium text-gray-700">{{ 'checkout.cardNumber' | translate }}</label>
+                  <input id="cardNumber" type="text" formControlName="cardNumber" placeholder="1234 5678 9012 3456"
+                    class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label for="expiry" class="block text-sm font-medium text-gray-700">{{ 'checkout.expiry' | translate }}</label>
+                    <input id="expiry" type="text" formControlName="expiry" placeholder="MM/YY"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                  <div>
+                    <label for="cvv" class="block text-sm font-medium text-gray-700">{{ 'checkout.cvv' | translate }}</label>
+                    <input id="cvv" type="text" formControlName="cvv" placeholder="123"
+                      class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Order Summary -->
+          <div class="lg:col-span-1">
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm sticky top-24">
+              <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ 'cart.orderSummary' | translate }}</h2>
+
+              <!-- Items -->
+              <div class="space-y-3 mb-4">
+                @for (item of cartService.cartItems(); track item.product.id) {
+                  <div class="flex items-center gap-3">
+                    <img [src]="item.product.image" [alt]="item.product.name" class="h-12 w-12 rounded-lg object-cover" />
+                    <div class="flex-1">
+                      <p class="text-sm font-medium text-gray-900 line-clamp-1">{{ item.product.name }}</p>
+                      <p class="text-sm text-gray-500">{{ 'cart.qty' | translate }}: {{ item.quantity }}</p>
+                    </div>
+                    <span class="text-sm font-medium">{{ item.product.price * item.quantity | currency }}</span>
+                  </div>
+                }
+              </div>
+
+              <div class="border-t border-gray-200 pt-4 space-y-3">
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.subtotal' | translate }}</span>
+                  <span>{{ cartService.subtotal() | currency }}</span>
+                </div>
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.shipping' | translate }}</span>
+                  <span>{{ cartService.shipping() === 0 ? ('cart.free' | translate) : (cartService.shipping() | currency) }}</span>
+                </div>
+                <div class="flex justify-between text-gray-600">
+                  <span>{{ 'cart.tax' | translate }}</span>
+                  <span>{{ cartService.tax() | currency }}</span>
+                </div>
+                <div class="border-t border-gray-200 pt-3 flex justify-between font-semibold text-gray-900 text-lg">
+                  <span>{{ 'cart.total' | translate }}</span>
+                  <span>{{ cartService.total() | currency }}</span>
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                [disabled]="checkoutForm.invalid"
+                class="mt-6 flex w-full items-center justify-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                <ng-icon name="heroLockClosed" size="20"></ng-icon>
+                {{ 'checkout.placeOrder' | translate }}
+              </button>
+
+              <p class="mt-4 text-xs text-center text-gray-500">
+                {{ 'checkout.secureNote' | translate }}
+              </p>
+            </div>
+          </div>
+        </form>
+      } @else {
+        <!-- Order Confirmation -->
+        <div class="py-16 text-center">
+          <div class="mx-auto h-24 w-24 rounded-full bg-success-100 flex items-center justify-center mb-6">
+            <ng-icon name="heroCheck" size="40" class="text-success-600"></ng-icon>
+          </div>
+          <h2 class="text-2xl font-bold text-gray-900 mb-2">{{ 'checkout.orderPlaced' | translate }}</h2>
+          <p class="text-gray-500 mb-2">{{ 'checkout.orderNumber' | translate }}: #{{ orderNumber }}</p>
+          <p class="text-gray-500 mb-8">{{ 'checkout.confirmationEmail' | translate }}</p>
+          <a
+            routerLink="/"
+            class="inline-flex items-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all">
+            {{ 'checkout.backToHome' | translate }}
+          </a>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class CheckoutComponent {
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+  cartService = inject(CartService);
+
+  orderPlaced = false;
+  orderNumber = '';
+
+  checkoutForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    phone: [''],
+    firstName: ['', Validators.required],
+    lastName: ['', Validators.required],
+    address: ['', Validators.required],
+    city: ['', Validators.required],
+    zip: ['', Validators.required],
+    cardNumber: ['', Validators.required],
+    expiry: ['', Validators.required],
+    cvv: ['', Validators.required],
+  });
+
+  placeOrder(): void {
+    if (this.checkoutForm.valid) {
+      // Generate order number
+      this.orderNumber = Math.random().toString(36).substr(2, 9).toUpperCase();
+      this.orderPlaced = true;
+      this.cartService.clearCart();
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/checkout/checkout.component.ts'),
+    checkoutComponent
+  );
+
+  // Wishlist Page
+  const wishlistComponent = `import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroHeart, heroArrowRight } from '@ng-icons/heroicons/outline';
+import { ProductGridComponent } from '@shared/components/product-grid/product-grid.component';
+import { WishlistService } from '@core/services/wishlist.service';
+
+@Component({
+  selector: 'app-wishlist',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, ProductGridComponent],
+  viewProviders: [provideIcons({ heroHeart, heroArrowRight })],
+  template: \`
+    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ 'wishlist.title' | translate }}</h1>
+
+      @if (wishlistService.itemCount() > 0) {
+        <app-product-grid [products]="wishlistService.wishlistItems()"></app-product-grid>
+      } @else {
+        <div class="py-16 text-center">
+          <div class="mx-auto h-24 w-24 rounded-full bg-gray-100 flex items-center justify-center mb-6">
+            <ng-icon name="heroHeart" size="40" class="text-gray-400"></ng-icon>
+          </div>
+          <h2 class="text-xl font-semibold text-gray-900 mb-2">{{ 'wishlist.empty' | translate }}</h2>
+          <p class="text-gray-500 mb-6">{{ 'wishlist.emptyDesc' | translate }}</p>
+          <a
+            routerLink="/products"
+            class="inline-flex items-center gap-2 rounded-full bg-primary-500 px-8 py-3 font-semibold text-white shadow-lg shadow-primary-500/30 hover:bg-primary-600 transition-all">
+            {{ 'wishlist.browseProducts' | translate }}
+            <ng-icon name="heroArrowRight" size="20"></ng-icon>
+          </a>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class WishlistComponent {
+  wishlistService = inject(WishlistService);
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/wishlist/wishlist.component.ts'),
+    wishlistComponent
+  );
+}
+
+module.exports = { createPages };