feat(web): vibe coding pazzo

frontend/src/app/features/about/about-page.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContactFormComponent } from './components/contact-form/contact-form.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+
+@Component({
+  selector: 'app-about-page',
+  standalone: true,
+  imports: [TranslateModule, ContactFormComponent, AppCardComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
+    </div>
+
+    <div class="container content">
+      <div class="info">
+        <h2>Our Mission</h2>
+        <p>
+          We make high-quality 3D printing accessible to everyone. 
+          Whether you are a hobbyist or an industrial designer, 
+          PrintCalc provides instant quotes and professional production.
+        </p>
+
+        <h3>How it Works</h3>
+        <ol class="steps">
+          <li>Upload your STL file</li>
+          <li>Choose material & quality</li>
+          <li>Get instant quote</li>
+          <li>We print & ship</li>
+        </ol>
+      </div>
+
+      <div class="contact">
+        <app-card>
+          <h2>{{ 'ABOUT.CONTACT_US' | translate }}</h2>
+          <app-contact-form></app-contact-form>
+        </app-card>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-8) 0; text-align: center; }
+    .content {
+      display: grid;
+      gap: var(--space-12);
+      @media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
+    }
+    .steps {
+      padding-left: var(--space-4);
+      li { margin-bottom: var(--space-2); color: var(--color-text-muted); }
+    }
+  `]
+})
+export class AboutPageComponent {}

frontend/src/app/features/about/about.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { AboutPageComponent } from './about-page.component';
+
+export const ABOUT_ROUTES: Routes = [
+  { path: '', component: AboutPageComponent }
+];

frontend/src/app/features/about/components/contact-form/contact-form.component.ts

@@ -0,0 +1,66 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-contact-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <app-input formControlName="name" label="Name" placeholder="Your Name"></app-input>
+      <app-input formControlName="email" type="email" label="Email" placeholder="your@email.com"></app-input>
+      
+      <div class="form-group">
+        <label>Message</label>
+        <textarea formControlName="message" class="form-control" rows="4"></textarea>
+      </div>
+
+      <div class="actions">
+        <app-button type="submit" [disabled]="form.invalid || sent()">
+          {{ sent() ? 'Sent!' : ('ABOUT.SEND' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      font-family: inherit;
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+  `]
+})
+export class ContactFormComponent {
+  form: FormGroup;
+  sent = signal(false);
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      message: ['', Validators.required]
+    });
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      // Mock submit
+      this.sent.set(true);
+      setTimeout(() => {
+        this.sent.set(false);
+        this.form.reset();
+      }, 3000);
+    }
+  }
+}

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -0,0 +1,139 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTabsComponent } from '../../shared/components/app-tabs/app-tabs.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.component';
+import { UploadFormComponent } from './components/upload-form/upload-form.component';
+import { QuoteResultComponent } from './components/quote-result/quote-result.component';
+import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quote-estimator.service';
+
+@Component({
+  selector: 'app-calculator-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppTabsComponent, AppCardComponent, AppAlertComponent, UploadFormComponent, QuoteResultComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'CALC.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'CALC.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container content-grid">
+      <!-- Left Column: Input -->
+      <div class="col-input">
+        <app-card>
+          <div class="tabs-wrapper">
+             <app-tabs 
+               [tabs]="clientTabs" 
+               [activeTab]="clientType()" 
+               (tabChange)="clientType.set($event)">
+             </app-tabs>
+             
+             <div class="sub-tabs">
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'easy'"
+                  (click)="mode.set('easy')">
+                  {{ 'CALC.MODE_EASY' | translate }}
+                </span>
+                <span class="divider">/</span>
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'advanced'"
+                  (click)="mode.set('advanced')">
+                  {{ 'CALC.MODE_ADVANCED' | translate }}
+                </span>
+             </div>
+          </div>
+
+          <app-upload-form
+            [clientType]="clientType()"
+            [mode]="mode()"
+            [loading]="loading()"
+            (submitRequest)="onCalculate($event)"
+          ></app-upload-form>
+        </app-card>
+      </div>
+
+      <!-- Right Column: Result or Info -->
+      <div class="col-result">
+        @if (error()) {
+          <app-alert type="error">An error occurred while calculating quote.</app-alert>
+        }
+
+        @if (result()) {
+          <app-quote-result [result]="result()!"></app-quote-result>
+        } @else {
+          <app-card>
+            <h3>Why choose PrintCalc?</h3>
+            <ul class="benefits">
+               <li>Instant AI-powered quotes</li>
+               <li>Industrial grade materials</li>
+               <li>Fast shipping worldwide</li>
+            </ul>
+          </app-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-12) 0; text-align: center; }
+    .subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }
+    
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1.5fr 1fr;
+      }
+    }
+
+    .tabs-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-6);
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: var(--space-2);
+    }
+    
+    .sub-tabs { font-size: 0.875rem; color: var(--color-text-muted); }
+    .mode-switch { cursor: pointer; &:hover { color: var(--color-text); } }
+    .mode-switch.active { font-weight: 700; color: var(--color-brand); }
+    .divider { margin: 0 var(--space-2); }
+
+    .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
+  `]
+})
+export class CalculatorPageComponent {
+  clientType = signal<any>('private');
+  mode = signal<any>('easy');
+  loading = signal(false);
+  result = signal<QuoteResult | null>(null);
+  error = signal<boolean>(false);
+
+  clientTabs = [
+    { label: 'Private', value: 'private' },
+    { label: 'Business', value: 'business' }
+  ];
+
+  constructor(private estimator: QuoteEstimatorService) {}
+
+  onCalculate(req: QuoteRequest) {
+    this.loading.set(true);
+    this.error.set(false);
+    this.result.set(null);
+    
+    this.estimator.calculate(req).subscribe({
+      next: (res) => {
+        this.result.set(res);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set(true);
+        this.loading.set(false);
+      }
+    });
+  }
+}

frontend/src/app/features/calculator/calculator.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { CalculatorPageComponent } from './calculator-page.component';
+
+export const CALCULATOR_ROUTES: Routes = [
+  { path: '', component: CalculatorPageComponent }
+];

frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts

@@ -0,0 +1,63 @@
+import { Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppCardComponent } from '../../../../shared/components/app-card/app-card.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { QuoteResult } from '../../services/quote-estimator.service';
+
+@Component({
+  selector: 'app-quote-result',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent],
+  template: `
+    <app-card>
+      <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
+      
+      <div class="result-grid">
+        <div class="item">
+          <span class="label">{{ 'CALC.COST' | translate }}</span>
+          <span class="value price">{{ result().price | currency:result().currency }}</span>
+        </div>
+        <div class="item">
+          <span class="label">{{ 'CALC.TIME' | translate }}</span>
+          <span class="value">{{ result().printTimeHours }}h</span>
+        </div>
+        <div class="item">
+          <span class="label">Material</span>
+          <span class="value">{{ result().materialUsageGrams }}g</span>
+        </div>
+      </div>
+
+      <div class="actions">
+        <app-button variant="primary" [fullWidth]="true">{{ 'CALC.ORDER' | translate }}</app-button>
+        <app-button variant="outline" [fullWidth]="true">{{ 'CALC.CONSULT' | translate }}</app-button>
+      </div>
+    </app-card>
+  `,
+  styles: [`
+    .title { margin-bottom: var(--space-6); text-align: center; }
+    .result-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--space-3);
+      background: var(--color-neutral-50);
+      border-radius: var(--radius-md);
+    }
+    .item:first-child { grid-column: span 2; background: var(--color-neutral-100); }
+    .label { font-size: 0.875rem; color: var(--color-text-muted); }
+    .value { font-size: 1.25rem; font-weight: 700; }
+    .price { font-size: 2rem; color: var(--color-brand); }
+    
+    .actions { display: flex; flex-direction: column; gap: var(--space-3); }
+  `]
+})
+export class QuoteResultComponent {
+  result = input.required<QuoteResult>();
+}

frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts

@@ -0,0 +1,120 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+import { AppSelectComponent } from '../../../../shared/components/app-select/app-select.component';
+import { AppDropzoneComponent } from '../../../../shared/components/app-dropzone/app-dropzone.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { QuoteRequest } from '../../services/quote-estimator.service';
+
+@Component({
+  selector: 'app-upload-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      
+      <div class="section">
+        <app-dropzone 
+          [label]="'CALC.UPLOAD_LABEL' | translate" 
+          [subtext]="'CALC.UPLOAD_SUB' | translate"
+          (fileDropped)="onFileDropped($event)">
+        </app-dropzone>
+        @if (form.get('file')?.invalid && form.get('file')?.touched) {
+          <div class="error-msg">File required</div>
+        }
+      </div>
+
+      <div class="grid">
+        <app-select
+          formControlName="material"
+          [label]="'CALC.MATERIAL' | translate"
+          [options]="materials"
+        ></app-select>
+
+        <app-select
+          formControlName="quality"
+          [label]="'CALC.QUALITY' | translate"
+          [options]="qualities"
+        ></app-select>
+      </div>
+
+      <app-input
+        formControlName="quantity"
+        type="number"
+        [label]="'CALC.QUANTITY' | translate"
+      ></app-input>
+
+      @if (mode() === 'advanced') {
+        <app-input
+          formControlName="notes"
+          [label]="'CALC.NOTES' | translate"
+          placeholder="Specific instructions..."
+        ></app-input>
+      }
+
+      <div class="actions">
+        <app-button 
+          type="submit" 
+          [disabled]="form.invalid || loading()" 
+          [fullWidth]="true">
+          {{ loading() ? '...' : ('CALC.CALCULATE' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .section { margin-bottom: var(--space-6); }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
+    .actions { margin-top: var(--space-6); }
+    .error-msg { color: var(--color-danger-500); font-size: 0.875rem; margin-top: var(--space-2); text-align: center; }
+  `]
+})
+export class UploadFormComponent {
+  clientType = input<'business' | 'private'>('private');
+  mode = input<'easy' | 'advanced'>('easy');
+  loading = input<boolean>(false);
+  submitRequest = output<QuoteRequest>();
+
+  form: FormGroup;
+  
+  materials = [
+    { label: 'PLA (Standard)', value: 'PLA' },
+    { label: 'PETG (Durable)', value: 'PETG' },
+    { label: 'TPU (Flexible)', value: 'TPU' }
+  ];
+
+  qualities = [
+    { label: 'Draft (Fast)', value: 'Draft' },
+    { label: 'Standard', value: 'Standard' },
+    { label: 'High Detail', value: 'High' }
+  ];
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      file: [null, Validators.required],
+      material: ['PLA', Validators.required],
+      quality: ['Standard', Validators.required],
+      quantity: [1, [Validators.required, Validators.min(1)]],
+      notes: ['']
+    });
+  }
+
+  onFileDropped(file: File) {
+    this.form.patchValue({ file });
+    this.form.get('file')?.markAsTouched();
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      this.submitRequest.emit({
+        ...this.form.value,
+        clientType: this.clientType(),
+        mode: this.mode()
+      });
+    } else {
+      this.form.markAllAsTouched();
+    }
+  }
+}

frontend/src/app/features/calculator/services/quote-estimator.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+export interface QuoteRequest {
+  file: File;
+  material: string;
+  quality: string;
+  quantity: number;
+  notes?: string;
+  clientType: 'business' | 'private';
+  mode: 'easy' | 'advanced';
+}
+
+export interface QuoteResult {
+  price: number;
+  currency: string;
+  printTimeHours: number;
+  materialUsageGrams: number;
+  setupCost: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QuoteEstimatorService {
+  
+  calculate(request: QuoteRequest): Observable<QuoteResult> {
+    // Mock logic
+    const basePrice = request.clientType === 'business' ? 50 : 20;
+    const materialCost = request.material === 'PETG' ? 1.5 : (request.material === 'TPU' ? 2 : 1);
+    const qualityMult = request.quality === 'High' ? 1.5 : (request.quality === 'Draft' ? 0.8 : 1);
+    
+    const estimatedPrice = (basePrice * materialCost * qualityMult * request.quantity) + 10; // +10 setup
+    
+    return of({
+      price: Math.round(estimatedPrice * 100) / 100,
+      currency: 'EUR',
+      printTimeHours: Math.floor(Math.random() * 24) + 2,
+      materialUsageGrams: Math.floor(Math.random() * 500) + 50,
+      setupCost: 10
+    }).pipe(delay(1500)); // Simulate network latency
+  }
+}

frontend/src/app/features/shop/components/product-card/product-card.component.ts

@@ -0,0 +1,48 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { Product } from '../../services/shop.service';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <div class="product-card">
+      <div class="image-placeholder"></div>
+      <div class="content">
+        <span class="category">{{ product().category }}</span>
+        <h3 class="name">
+            <a [routerLink]="['/shop', product().id]">{{ product().name }}</a>
+        </h3>
+        <div class="footer">
+          <span class="price">{{ product().price | currency:'EUR' }}</span>
+          <a [routerLink]="['/shop', product().id]" class="view-btn">View</a>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .product-card {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      transition: box-shadow 0.2s;
+      &:hover { box-shadow: var(--shadow-md); }
+    }
+    .image-placeholder {
+      height: 200px;
+      background-color: var(--color-neutral-200);
+    }
+    .content { padding: var(--space-4); }
+    .category { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+    .name { font-size: 1.125rem; margin: var(--space-2) 0; a { color: var(--color-text); text-decoration: none; &:hover { color: var(--color-brand); } } }
+    .footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); }
+    .price { font-weight: 700; color: var(--color-brand); }
+    .view-btn { font-size: 0.875rem; font-weight: 500; }
+  `]
+})
+export class ProductCardComponent {
+  product = input.required<Product>();
+}

frontend/src/app/features/shop/product-detail.component.ts

@@ -0,0 +1,80 @@
+import { Component, input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent],
+  template: `
+    <div class="container wrapper">
+      <a routerLink="/shop" class="back-link">← {{ 'SHOP.BACK' | translate }}</a>
+      
+      @if (product(); as p) {
+        <div class="detail-grid">
+          <div class="image-box"></div>
+          
+          <div class="info">
+            <span class="category">{{ p.category }}</span>
+            <h1>{{ p.name }}</h1>
+            <p class="price">{{ p.price | currency:'EUR' }}</p>
+            
+            <p class="desc">{{ p.description }}</p>
+            
+            <div class="actions">
+              <app-button variant="primary" (click)="addToCart()">
+                {{ 'SHOP.ADD_CART' | translate }}
+              </app-button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <p>Product not found.</p>
+      }
+    </div>
+  `,
+  styles: [`
+    .wrapper { padding-top: var(--space-8); }
+    .back-link { display: inline-block; margin-bottom: var(--space-6); color: var(--color-text-muted); }
+    
+    .detail-grid {
+      display: grid;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    
+    .image-box {
+      background-color: var(--color-neutral-200);
+      border-radius: var(--radius-lg);
+      aspect-ratio: 1;
+    }
+
+    .category { color: var(--color-brand); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; }
+    .price { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: var(--space-4) 0; }
+    .desc { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-8); }
+  `]
+})
+export class ProductDetailComponent {
+  // Input binding from router
+  id = input<string>();
+  
+  product = signal<Product | undefined>(undefined);
+
+  constructor(private shopService: ShopService) {}
+
+  ngOnInit() {
+    const productId = this.id();
+    if (productId) {
+      this.shopService.getProductById(productId).subscribe(p => this.product.set(p));
+    }
+  }
+
+  addToCart() {
+    alert('Added to cart (Mock)');
+  }
+}

frontend/src/app/features/shop/services/shop.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  category: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShopService {
+  // Dati statici per ora
+  private staticProducts: Product[] = [
+    {
+      id: '1',
+      name: 'Filamento PLA Standard',
+      description: 'Il classico per ogni stampa, facile e affidabile.',
+      price: 24.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '2',
+      name: 'Filamento PETG Tough',
+      description: 'Resistente agli urti e alle temperature.',
+      price: 29.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '3',
+      name: 'Kit Ugelli (0.4mm)',
+      description: 'Set di ricambio per estrusore FDM.',
+      price: 15.00,
+      category: 'Accessori'
+    }
+  ];
+
+  getProducts(): Observable<Product[]> {
+    return of(this.staticProducts);
+  }
+
+  getProductById(id: string): Observable<Product | undefined> {
+    return of(this.staticProducts.find(p => p.id === id));
+  }
+}

frontend/src/app/features/shop/shop-page.component.ts

@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { ProductCardComponent } from './components/product-card/product-card.component';
+
+@Component({
+  selector: 'app-shop-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ProductCardComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'SHOP.TITLE' | translate }}</h1>
+      <p class="subtitle">Componenti e materiali selezionati per la tua stampa 3D.</p>
+    </div>
+
+    <div class="container">
+      <div class="grid">
+        @for (product of products(); track product.id) {
+          <app-product-card [product]="product"></app-product-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-8) 0; text-align: center; }
+    .subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--space-6);
+    }
+  `]
+})
+export class ShopPageComponent {
+  products = signal<Product[]>([]);
+
+  constructor(private shopService: ShopService) {
+    this.shopService.getProducts().subscribe(data => {
+      this.products.set(data);
+    });
+  }
+}

frontend/src/app/features/shop/shop.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { ShopPageComponent } from './shop-page.component';
+import { ProductDetailComponent } from './product-detail.component';
+
+export const SHOP_ROUTES: Routes = [
+  { path: '', component: ShopPageComponent },
+  { path: ':id', component: ProductDetailComponent }
+];