create-ng-tailwind 1.0.0 → 2.0.1

package/lib/templates/starter/index.js

@@ -0,0 +1,4117 @@
+const fs = require('fs-extra');
+const path = require('path');
+const {
+  createContactComponent,
+  createRouting,
+  createAppConfig,
+  createAppComponent,
+  createStyles,
+} = require('./features');
+
+const {
+  createAuthInterceptor,
+  createErrorInterceptor,
+  createLoadingInterceptor,
+  createCachingInterceptor,
+  createToastService,
+  createToastComponent,
+  createLoadingService,
+  createCacheService,
+} = require('./advanced-features');
+
+const {
+  createModalService,
+  createModalComponent,
+  createTruncatePipe,
+  createClickOutsideDirective,
+  createTooltipDirective,
+} = require('./ui-features');
+
+const starter = {
+  info: {
+    name: 'Starter',
+    description: 'Professional Angular foundation with essential components and best practices',
+    features: [
+      'Modern standalone Angular 20+ architecture with signals',
+      'Complete routing setup with lazy loading',
+      'HTTP Interceptors (Auth, Error, Loading, Caching)',
+      'i18n translation support (English & Arabic) with RTL',
+      'Language switcher in header (desktop & mobile)',
+      'Toast/Notification system with auto-dismiss',
+      'Modal/Dialog system with confirm & alert',
+      'Essential UI components (Button, Card, Spinner, Toast, Modal)',
+      'Truncate pipe for text truncation',
+      'Useful Directives (ClickOutside, Tooltip)',
+      'Professional layout with header/footer',
+      'Authentication UI (Login, Register, Forgot Password)',
+      '3 example pages (Home, About, Contact)',
+      'Reactive forms with validation',
+      'API, Auth, Storage, Loading, Cache services',
+      'TypeScript interfaces and models',
+      'Responsive Tailwind design system',
+      'ESLint + Prettier + Husky pre-commit hooks',
+      'PWA-ready with service worker configuration',
+      'Icons library (@ng-icons/heroicons)',
+    ],
+  },
+
+  async apply(config, spinner) {
+    // Store spinner reference for progress updates
+    this.spinner = spinner;
+    const chalk = require('chalk');
+
+    // Helper function to show completed step with green checkmark
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green('  ✔') + chalk.white(' ' + message));
+        spinner.start();
+      }
+    };
+
+    // Create all components silently
+    if (spinner) spinner.update('Setting up project structure...');
+    await this.createDirectoryStructure(config);
+    await this.createEnvironments(config);
+    await this.createCoreServices(config);
+    await this.createHttpInterceptors(config);
+    await this.createI18n(config);
+    await this.createGuards(config);
+    await this.createSharedComponents(config);
+    await this.createToastSystem(config);
+    await this.createModalSystem(config);
+    await this.createPipes(config);
+    await this.createAdditionalPipes(config);
+    await this.createDirectives(config);
+    await this.createModels(config);
+    await this.createLayout(config);
+    await this.createAuthLayout(config);
+    await this.createFeatures(config);
+    await this.createRouting(config);
+    await this.createAppConfig(config);
+    await this.createAppComponent(config);
+    await this.createStyles(config);
+    await this.createAssets(config);
+    await this.createVSCodeSettings(config);
+    await this.updateTsConfig(config);
+    await this.setupLinting(config);
+    await this.setupPWA(config);
+    await this.formatCode(config);
+
+    // Stop spinner and show summary
+    if (spinner) spinner.stop();
+
+    // Show minimal, professional summary
+    console.log('');
+    completeStep('Angular 20+ project created');
+    completeStep('Tailwind CSS v4 configured');
+    completeStep('i18n translation support (English & Arabic)');
+    completeStep('HTTP interceptors (Auth, Error, Loading, Cache)');
+    completeStep('Core services (8 services)');
+    completeStep('UI components (Button, Card, Toast, Modal, Spinner)');
+    completeStep('Utility pipes & directives');
+    completeStep('Authentication pages & guards');
+    completeStep('PWA support configured');
+    completeStep('ESLint + Prettier + Husky');
+    console.log('');
+  },
+
+  async createDirectoryStructure(config) {
+    const directories = [
+      'src/environments',
+      'src/app/core/services',
+      'src/app/core/guards',
+      'src/app/core/i18n',
+      'src/app/core/interceptors',
+      'src/app/shared/components/button',
+      'src/app/shared/components/card',
+      'src/app/shared/components/loading-spinner',
+      'src/app/shared/components/toast',
+      'src/app/shared/components/modal',
+      'src/app/shared/pipes',
+      'src/app/shared/directives',
+      'src/app/shared/models',
+      'src/app/features/home',
+      'src/app/features/about',
+      'src/app/features/contact',
+      'src/app/features/auth/login',
+      'src/app/features/auth/register',
+      'src/app/features/auth/forgot-password',
+      'src/app/layout/header',
+      'src/app/layout/footer',
+      'src/app/layout/auth',
+      'public/assets/images',
+      'public/assets/i18n',
+      'public/images',
+      'public/styles',
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+
+  async createEnvironments(config) {
+    // Development environment
+    const devEnvironment = `export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:3000/api',
+  appName: '${config.projectName}',
+  version: '1.0.0',
+  enableDevTools: true,
+  logLevel: 'debug' as 'debug' | 'info' | 'warn' | 'error',
+  features: {
+    enableAnalytics: false,
+    enableLogging: true,
+    enableMocking: true
+  },
+  auth: {
+    tokenKey: 'auth_token',
+    refreshTokenKey: 'refresh_token',
+    tokenExpirationBuffer: 300000 // 5 minutes
+  },
+  api: {
+    timeout: 30000,
+    retryAttempts: 3
+  }
+};`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/environments/environment.ts'),
+      devEnvironment
+    );
+
+    // Production environment
+    const prodEnvironment = `export const environment = {
+  production: true,
+  apiUrl: 'https://api.${config.projectName}.com/api',
+  appName: '${config.projectName}',
+  version: '1.0.0',
+  enableDevTools: false,
+  logLevel: 'error' as 'debug' | 'info' | 'warn' | 'error',
+  features: {
+    enableAnalytics: true,
+    enableLogging: false,
+    enableMocking: false
+  },
+  auth: {
+    tokenKey: 'auth_token',
+    refreshTokenKey: 'refresh_token',
+    tokenExpirationBuffer: 300000 // 5 minutes
+  },
+  api: {
+    timeout: 30000,
+    retryAttempts: 1
+  }
+};`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/environments/environment.prod.ts'),
+      prodEnvironment
+    );
+  },
+
+  async createCoreServices(config) {
+    // API Service
+    const apiService = `import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+
+import { ApiResponse } from '@shared/models/api-response.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  private http = inject(HttpClient);
+  private readonly baseUrl = 'https://api.example.com'; // Configure your API URL
+
+  /**
+   * Generic GET request
+   */
+  get<T>(endpoint: string): Observable<ApiResponse<T>> {
+    return this.http.get<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`)
+      .pipe(
+        retry(1),
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic POST request
+   */
+  post<T, D = unknown>(endpoint: string, data: D): Observable<ApiResponse<T>> {
+    return this.http.post<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`, data)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic PUT request
+   */
+  put<T, D = unknown>(endpoint: string, data: D): Observable<ApiResponse<T>> {
+    return this.http.put<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`, data)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Generic DELETE request
+   */
+  delete<T>(endpoint: string): Observable<ApiResponse<T>> {
+    return this.http.delete<ApiResponse<T>>(\`\${this.baseUrl}/\${endpoint}\`)
+      .pipe(
+        catchError(this.handleError)
+      );
+  }
+
+  /**
+   * Handle HTTP errors
+   */
+  private handleError(error: HttpErrorResponse) {
+    let errorMessage = 'An unknown error occurred';
+
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = error.error.message;
+    } else {
+      // Server-side error
+      errorMessage = error.error?.message || \`Server returned code: \${error.status}, error message is: \${error.message}\`;
+    }
+
+    console.error('API Error:', errorMessage);
+    return throwError(() => new Error(errorMessage));
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/api.service.ts'),
+      apiService
+    );
+
+    // Auth Service with Reactive State
+    const authService = `import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Observable, throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import { environment } from '@environments/environment';
+import { StorageService } from './storage.service';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface AuthResponse {
+  token: string;
+  user: User;
+  refreshToken?: string;
+}
+
+interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+interface RegisterData {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private http = inject(HttpClient);
+  private router = inject(Router);
+  private storage = inject(StorageService);
+
+  private readonly API_URL = environment.apiUrl;
+
+  // Reactive state
+  private _isAuthenticated$ = new BehaviorSubject<boolean>(this.hasValidToken());
+  private _currentUser$ = new BehaviorSubject<User | null>(this.getCurrentUserFromStorage());
+
+  // Public observables
+  public readonly isAuthenticated$ = this._isAuthenticated$.asObservable();
+  public readonly currentUser$ = this._currentUser$.asObservable();
+
+  constructor() {
+    // Initialize authentication state on service creation
+    this.checkAuthenticationStatus();
+  }
+
+  login(credentials: LoginCredentials): Observable<AuthResponse> {
+    // For demo purposes, simulate login
+    if (credentials.email === 'demo@example.com' && credentials.password === 'password') {
+      const mockResponse: AuthResponse = {
+        token: 'mock_jwt_token_12345',
+        user: {
+          id: '1',
+          email: 'demo@example.com',
+          firstName: 'Demo',
+          lastName: 'User'
+        }
+      };
+
+      // Store auth data
+      this.storage.setItem(environment.auth.tokenKey, mockResponse.token);
+      this.storage.setItem('current_user', JSON.stringify(mockResponse.user));
+
+      // Update reactive state
+      this._isAuthenticated$.next(true);
+      this._currentUser$.next(mockResponse.user);
+
+      return new Observable(subscriber => {
+        setTimeout(() => {
+          subscriber.next(mockResponse);
+          subscriber.complete();
+        }, 1000);
+      });
+    }
+
+    // Real API call would be:
+    return this.http.post<AuthResponse>(\`\${this.API_URL}/auth/login\`, credentials)
+      .pipe(
+        tap(response => {
+          // Store tokens
+          this.storage.setItem(environment.auth.tokenKey, response.token);
+          this.storage.setItem('current_user', JSON.stringify(response.user));
+          if (response.refreshToken) {
+            this.storage.setItem(environment.auth.refreshTokenKey, response.refreshToken);
+          }
+
+          // Update reactive state
+          this._isAuthenticated$.next(true);
+          this._currentUser$.next(response.user);
+        }),
+        catchError(error => throwError(() => error))
+      );
+  }
+
+  logout(): void {
+    this.storage.removeItem(environment.auth.tokenKey);
+    this.storage.removeItem(environment.auth.refreshTokenKey);
+    this.storage.removeItem('current_user');
+
+    // Update reactive state
+    this._isAuthenticated$.next(false);
+    this._currentUser$.next(null);
+
+    this.router.navigate(['/auth/login']);
+  }
+
+  register(userData: RegisterData): Observable<AuthResponse> {
+    return this.http.post<AuthResponse>(\`\${this.API_URL}/auth/register\`, userData)
+      .pipe(
+        tap(response => {
+          // Store auth data after successful registration
+          this.storage.setItem(environment.auth.tokenKey, response.token);
+          this.storage.setItem('current_user', JSON.stringify(response.user));
+
+          // Update reactive state
+          this._isAuthenticated$.next(true);
+          this._currentUser$.next(response.user);
+        }),
+        catchError(error => throwError(() => error))
+      );
+  }
+
+  // Synchronous authentication check
+  isAuthenticated(): boolean {
+    return this.hasValidToken();
+  }
+
+  private hasValidToken(): boolean {
+    const token = this.storage.getItem(environment.auth.tokenKey);
+    return !!token && !this.isTokenExpired(token);
+  }
+
+  private isTokenExpired(token: string): boolean {
+    // For demo token, always return false
+    if (token === 'mock_jwt_token_12345') {
+      return false;
+    }
+
+    try {
+      const payload = JSON.parse(atob(token.split('.')[1]));
+      const now = Date.now() / 1000;
+      return payload.exp < now;
+    } catch {
+      return true;
+    }
+  }
+
+  private getCurrentUserFromStorage(): User | null {
+    try {
+      const userStr = this.storage.getItem('current_user');
+      return userStr ? JSON.parse(userStr) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private checkAuthenticationStatus(): void {
+    const isAuth = this.hasValidToken();
+    const user = this.getCurrentUserFromStorage();
+
+    this._isAuthenticated$.next(isAuth);
+    this._currentUser$.next(user);
+  }
+
+  getToken(): string | null {
+    return this.storage.getItem(environment.auth.tokenKey);
+  }
+
+  // Get current user synchronously
+  getCurrentUser(): User | null {
+    return this._currentUser$.getValue();
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/auth.service.ts'),
+      authService
+    );
+
+    // Storage Service
+    const storageService = `import { Injectable, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StorageService {
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  setItem(key: string, value: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.setItem(key, value);
+    } catch (error) {
+      console.error('Error storing to localStorage:', error);
+    }
+  }
+
+  getItem(key: string): string | null {
+    if (!this.isBrowser) {
+      return null;
+    }
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.error('Error retrieving from localStorage:', error);
+      return null;
+    }
+  }
+
+  removeItem(key: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error('Error removing from localStorage:', error);
+    }
+  }
+
+  clear(): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    try {
+      localStorage.clear();
+    } catch (error) {
+      console.error('Error clearing localStorage:', error);
+    }
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/storage.service.ts'),
+      storageService
+    );
+  },
+
+  async createHttpInterceptors(config) {
+    // Create all HTTP interceptors
+    await createAuthInterceptor(config);
+    await createErrorInterceptor(config);
+    await createLoadingInterceptor(config);
+    await createCachingInterceptor(config);
+
+    // Create supporting services
+    await createLoadingService(config);
+    await createCacheService(config);
+  },
+
+  async createToastSystem(config) {
+    await createToastService(config);
+    await createToastComponent(config);
+  },
+
+  async createModalSystem(config) {
+    await createModalService(config);
+    await createModalComponent(config);
+  },
+
+  async createAdditionalPipes(config) {
+    await createTruncatePipe(config);
+  },
+
+  async createDirectives(config) {
+    await createClickOutsideDirective(config);
+    await createTooltipDirective(config);
+  },
+
+  async createI18n(config) {
+    // Create Translation Service
+    const translationService = `import { Injectable, inject, signal, effect, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { StorageService } from '@core/services/storage.service';
+
+export type SupportedLanguage = 'en' | 'ar';
+
+export interface LanguageOption {
+  code: SupportedLanguage;
+  name: string;
+  nativeName: string;
+  dir: 'ltr' | 'rtl';
+  flag: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+  private translateService = inject(TranslateService);
+  private storage = inject(StorageService);
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  // Reactive current language
+  public currentLang = signal<SupportedLanguage>('en');
+
+  // Reactive text direction
+  public textDirection = signal<'ltr' | 'rtl'>('ltr');
+
+  // Available languages
+  public readonly languages: LanguageOption[] = [
+    {
+      code: 'en',
+      name: 'English',
+      nativeName: 'English',
+      dir: 'ltr',
+      flag: '🇺🇸'
+    },
+    {
+      code: 'ar',
+      name: 'Arabic',
+      nativeName: 'العربية',
+      dir: 'rtl',
+      flag: '🇸🇦'
+    }
+  ];
+
+  constructor() {
+    // Initialize translation service
+    this.translateService.setDefaultLang('en');
+
+    // Load saved language or detect browser language
+    const savedLang = this.getSavedLanguage();
+    const browserLang = this.translateService.getBrowserLang() as SupportedLanguage;
+    const initialLang = savedLang || (this.isSupportedLanguage(browserLang) ? browserLang : 'en');
+
+    this.setLanguage(initialLang);
+
+    // Effect to update document direction when language changes (browser only)
+    if (this.isBrowser) {
+      effect(() => {
+        const dir = this.textDirection();
+        document.documentElement.setAttribute('dir', dir);
+        document.documentElement.setAttribute('lang', this.currentLang());
+      });
+    }
+  }
+
+  /**
+   * Change the current language
+   */
+  setLanguage(lang: SupportedLanguage): void {
+    if (!this.isSupportedLanguage(lang)) {
+      console.warn(\`Language '\${lang}' is not supported. Falling back to 'en'.\`);
+      lang = 'en';
+    }
+
+    this.translateService.use(lang);
+    this.currentLang.set(lang);
+
+    const languageOption = this.languages.find(l => l.code === lang);
+    if (languageOption) {
+      this.textDirection.set(languageOption.dir);
+    }
+
+    this.saveLanguage(lang);
+  }
+
+  /**
+   * Get current language
+   */
+  getCurrentLanguage(): SupportedLanguage {
+    return this.currentLang();
+  }
+
+  /**
+   * Get language option by code
+   */
+  getLanguageOption(code: SupportedLanguage): LanguageOption | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  /**
+   * Check if language is supported
+   */
+  isSupportedLanguage(lang: string): lang is SupportedLanguage {
+    return ['en', 'ar'].includes(lang);
+  }
+
+  /**
+   * Toggle between English and Arabic
+   */
+  toggleLanguage(): void {
+    const newLang: SupportedLanguage = this.currentLang() === 'en' ? 'ar' : 'en';
+    this.setLanguage(newLang);
+  }
+
+  /**
+   * Get instant translation
+   */
+  instant(key: string, params?: object): string {
+    return this.translateService.instant(key, params);
+  }
+
+  /**
+   * Get translation as observable
+   */
+  get(key: string | string[], params?: object) {
+    return this.translateService.get(key, params);
+  }
+
+  /**
+   * Save language preference to storage
+   */
+  private saveLanguage(lang: SupportedLanguage): void {
+    this.storage.setItem('preferred_language', lang);
+  }
+
+  /**
+   * Get saved language from storage
+   */
+  private getSavedLanguage(): SupportedLanguage | null {
+    const saved = this.storage.getItem('preferred_language');
+    return saved && this.isSupportedLanguage(saved) ? saved : null;
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/i18n/translation.service.ts'),
+      translationService
+    );
+
+    // Create English translations
+    const enTranslations = {
+      app: {
+        title: config.projectName,
+        welcome: 'Welcome to {{name}}',
+        description: 'A professional Angular starter template with Tailwind CSS',
+      },
+      nav: {
+        home: 'Home',
+        about: 'About',
+        contact: 'Contact',
+        login: 'Sign In',
+        register: 'Get Started',
+        logout: 'Sign Out',
+        profile: 'Profile Settings',
+        account: 'Account Settings',
+      },
+      home: {
+        hero: {
+          title: 'Welcome to {{projectName}}',
+          subtitle:
+            'A professional Angular starter template with Tailwind CSS. Built with modern best practices and ready to scale.',
+          button: 'Get Started',
+          learnMore: 'Learn More',
+        },
+        features: {
+          title: 'Modern Angular Features',
+          subtitle: 'Everything you need to build professional web applications.',
+          standalone: {
+            title: 'Standalone Components',
+            description: 'Modern Angular architecture without NgModules',
+          },
+          tailwind: {
+            title: 'Tailwind CSS',
+            description: 'Utility-first CSS framework for rapid UI development',
+          },
+          typescript: {
+            title: 'TypeScript',
+            description: 'Full type safety and enhanced developer experience',
+          },
+        },
+        techStack: {
+          title: 'Leveraging the latest tools and frameworks for optimal performance',
+          angular: {
+            title: 'Angular 20+',
+            description: 'Modern standalone components with signals for reactive state management',
+          },
+          tailwind: {
+            title: 'Tailwind CSS v4',
+            description: 'Utility-first CSS framework with modern PostCSS configuration',
+          },
+          typescript: {
+            title: 'TypeScript',
+            description: 'Strongly-typed interfaces and models for enhanced developer experience',
+          },
+        },
+        readyToStart: {
+          title: 'Ready to Start Building?',
+          subtitle: 'Explore other pages or get in touch with us to learn more',
+          viewHome: 'View Home',
+          contactUs: 'Contact Us',
+        },
+        productionReady: {
+          sectionTitle: "What's Included in This Starter Template",
+          title:
+            'A production-ready Angular application with 20+ pre-configured features, services, and components',
+          modernArchitecture: {
+            title: 'Modern Architecture',
+            description: 'Standalone components, Signals, Zoneless support, Angular 20+',
+          },
+          i18n: {
+            title: 'i18n Translation',
+            description: 'English & Arabic with RTL support, language switcher in header',
+          },
+          interceptors: {
+            title: 'HTTP Interceptors',
+            description: 'Auth, Error handling, Loading state, Response caching (5min TTL)',
+          },
+          tailwind: {
+            title: 'Tailwind CSS v4',
+            description: 'Modern PostCSS setup, responsive utilities, dark mode ready',
+          },
+          uiComponents: {
+            title: 'UI Components',
+            description: 'Button, Card, Spinner, Toast, Modal with full customization',
+          },
+          typeSafe: {
+            title: 'Type-Safe',
+            description: 'TypeScript interfaces, models, strongly-typed services',
+          },
+        },
+        coreServices: {
+          title: 'Core Services (src/app/core/)',
+          authService: 'AuthService - Authentication & user management',
+          apiService: 'ApiService - Centralized HTTP request handling',
+          toastService: 'ToastService - Notification system (success, error, warning, info)',
+          modalService: 'ModalService - Dialog system with confirm & alert',
+          loadingService: 'LoadingService - Global loading state with signals',
+          cacheService: 'CacheService - Response caching with TTL',
+          storageService: 'StorageService - LocalStorage wrapper with type safety',
+          i18nService: 'i18nService - Internationalization management',
+        },
+        sharedComponents: {
+          title: 'Shared Components (src/app/shared/)',
+          button: 'ButtonComponent - Variants: primary, secondary, danger',
+          card: 'CardComponent - Flexible container with title & shadow',
+          spinner: 'LoadingSpinnerComponent - Animated loading indicator',
+          toast: 'ToastComponent - Auto-dismiss notifications',
+          modal: 'ModalComponent - Accessible dialog with sizes',
+          pipes: 'Pipes - Truncate, TimeAgo',
+          directives: 'Directives - ClickOutside, Tooltip',
+        },
+        preConfigured: {
+          title: 'Pre-Configured Packages & Tools',
+          subtitle: 'Production-ready dependencies and development tools included',
+          coreDependencies: 'Core Dependencies',
+          developmentTools: 'Development Tools',
+          latest: 'Latest',
+          i18n: 'i18n',
+          iconLibrary: 'Icon library',
+          linting: 'Linting',
+          formatting: 'Formatting',
+          gitHooks: 'Git hooks',
+          typeSafety: 'Type safety',
+          serviceWorker: 'Service worker',
+        },
+        pathAliases: {
+          title: 'TypeScript Path Aliases (tsconfig.json)',
+          core: '@core/* → src/app/core/*',
+          shared: '@shared/* → src/app/shared/*',
+          features: '@features/* → src/app/features/*',
+          environments: '@environments/* → src/environments/*',
+        },
+        projectStructure: {
+          title: 'Well-Organized Project Structure',
+          subtitle: 'Clean architecture following Angular best practices',
+          coreServices: 'services/ (8 services)',
+          guards: 'guards/ (auth guard)',
+          interceptors: 'interceptors/ (4 types)',
+          i18n: 'i18n/ (translation system)',
+          components: 'components/ (5 components)',
+          pipes: 'pipes/ (2 pipes)',
+          directives: 'directives/ (2 directives)',
+          models: 'models/ (TypeScript interfaces)',
+          home: 'home/',
+          about: 'about/',
+          contact: 'contact/',
+          auth: 'auth/ (login, register, forgot)',
+          mainLayout: 'main-layout/ (header + footer)',
+          authLayout: 'auth-layout/ (auth pages)',
+        },
+        interactiveExamples: {
+          title: 'Try Interactive Examples',
+          subtitle: 'Test the Toast and Modal services included in this starter template',
+          toastNotifications: {
+            title: 'Toast Notifications',
+            subtitle: 'Auto-dismiss alerts with 4 types',
+            description: 'Click any button to see different toast notification types:',
+            success: 'Success',
+            error: 'Error',
+            warning: 'Warning',
+            info: 'Info',
+          },
+          modalDialogs: {
+            title: 'Modal Dialogs',
+            subtitle: 'Accessible & responsive dialogs',
+            description: 'Test confirmation and alert modals with transitions:',
+            showConfirm: 'Show Confirm Dialog',
+            showAlert: 'Show Alert Dialog',
+          },
+          proTip: {
+            title: 'Pro Tip',
+            description:
+              'These services are fully typed and can be injected anywhere in your app. Check src/app/core/services/ to see the implementation.',
+          },
+        },
+        readyToBuild: {
+          title: 'Ready to Build Something Amazing?',
+          subtitle:
+            'Explore the other pages to see forms, routing, and authentication UI in action',
+          learnMore: 'Learn More',
+        },
+      },
+      about: {
+        title: 'About {{projectName}}',
+        subtitle:
+          'A modern Angular starter template built with best practices and developer experience in mind.',
+        overview: {
+          title: 'Project Overview',
+          paragraph1:
+            'This starter template provides a solid foundation for building modern Angular applications with Tailwind CSS, including essential components, services, and best practices.',
+          paragraph2:
+            'Built with the latest Angular features including standalone components, signals, and optimized for performance and developer experience.',
+        },
+        features: {
+          title: 'Features Included',
+          standalone: 'Standalone Angular components',
+          tailwind: 'Tailwind CSS integration',
+          responsive: 'Responsive design',
+          typescript: 'TypeScript ready',
+          production: 'Production optimized',
+        },
+        techStack: {
+          title: 'Built With Modern Technologies',
+        },
+      },
+      contact: {
+        title: 'Get in Touch',
+        subtitle:
+          "Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
+        form: {
+          title: 'Send us a message',
+          description: "Fill out the form below and we'll get back to you soon",
+          name: 'Full Name',
+          email: 'Email Address',
+          subject: 'Subject',
+          message: 'Message',
+          submit: 'Send Message',
+          sending: 'Sending...',
+          success: "Thank you for your message! We'll get back to you soon.",
+          errors: {
+            nameRequired: 'Name is required',
+            nameMinLength: 'Name must be at least 2 characters',
+            emailRequired: 'Email is required',
+            emailInvalid: 'Please enter a valid email',
+            subjectRequired: 'Subject is required',
+            messageRequired: 'Message is required',
+            messageMinLength: 'Message must be at least 10 characters',
+          },
+        },
+        info: {
+          title: 'Contact Information',
+          description: "We're here to help and answer any question you might have",
+          email: {
+            label: 'Email',
+            description: "We'll respond within 24 hours",
+          },
+          location: {
+            label: 'Location',
+            value: 'Remote & Global',
+            description: 'Working across all time zones',
+          },
+          responseTime: {
+            label: 'Response Time',
+            value: '24 hours',
+            description: 'Usually much faster',
+          },
+        },
+        help: {
+          title: 'Helpful Resources',
+          subtitle: 'Have questions about the starter template? Check out these resources:',
+          links: {
+            angular: 'Angular Documentation',
+            tailwind: 'Tailwind CSS Guide',
+            github: 'GitHub Repository',
+          },
+        },
+      },
+      auth: {
+        layout: {
+          welcome: 'Welcome back! Please sign in to continue.',
+          copyright: '© {{year}} {{name}}. All rights reserved.',
+        },
+        login: {
+          title: 'Sign In',
+          subtitle: 'Enter your credentials to access your account',
+          email: 'Email Address',
+          password: 'Password',
+          rememberMe: 'Remember me',
+          forgotPassword: 'Forgot password?',
+          submit: 'Sign In',
+          signing: 'Signing in...',
+          noAccount: "Don't have an account?",
+          createAccount: 'Create one here',
+          showPassword: 'Show password',
+          hidePassword: 'Hide password',
+        },
+        register: {
+          title: 'Create Account',
+          subtitle: 'Sign up to get started',
+          firstName: 'First Name',
+          lastName: 'Last Name',
+          email: 'Email',
+          password: 'Password',
+          submit: 'Create Account',
+          hasAccount: 'Already have an account?',
+        },
+        forgot: {
+          title: 'Forgot Password',
+          subtitle: 'Enter your email to reset password',
+          email: 'Email Address',
+          submit: 'Send Reset Link',
+          backToLogin: 'Back to Sign In',
+        },
+        validation: {
+          emailRequired: 'Email is required',
+          emailInvalid: 'Please enter a valid email',
+          passwordRequired: 'Password is required',
+          passwordMinLength: 'Password must be at least 6 characters',
+        },
+      },
+      footer: {
+        description:
+          'Built with Angular and Tailwind CSS. A modern, fast, and responsive web application starter template.',
+        quickLinks: 'Quick Links',
+        builtWith: 'Built With',
+        copyright: '© {{year}} {{name}}. Created with',
+        madeWith: 'Made with ❤️ by developers, for developers',
+      },
+      language: {
+        select: 'Select Language',
+        english: 'English',
+        arabic: 'العربية',
+      },
+    };
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/i18n/en.json'),
+      JSON.stringify(enTranslations, null, 2)
+    );
+
+    // Create Arabic translations
+    const arTranslations = {
+      app: {
+        title: config.projectName,
+        welcome: 'مرحباً بك في {{name}}',
+        description: 'قالب احترافي لتطبيقات Angular مع Tailwind CSS',
+      },
+      nav: {
+        home: 'الرئيسية',
+        about: 'حول',
+        contact: 'اتصل بنا',
+        login: 'تسجيل الدخول',
+        register: 'ابدأ الآن',
+        logout: 'تسجيل الخروج',
+        profile: 'إعدادات الملف الشخصي',
+        account: 'إعدادات الحساب',
+      },
+      home: {
+        hero: {
+          title: 'مرحباً بك في {{projectName}}',
+          subtitle:
+            'قالب احترافي لتطبيقات Angular مع Tailwind CSS. مبني بأحدث الممارسات وجاهز للتوسع.',
+          button: 'ابدأ الآن',
+          learnMore: 'معرفة المزيد',
+        },
+        features: {
+          title: 'ميزات Angular الحديثة',
+          subtitle: 'كل ما تحتاجه لبناء تطبيقات ويب احترافية.',
+          standalone: {
+            title: 'مكونات مستقلة',
+            description: 'بنية Angular الحديثة بدون NgModules',
+          },
+          tailwind: {
+            title: 'Tailwind CSS',
+            description: 'إطار عمل CSS سريع للتطوير',
+          },
+          typescript: {
+            title: 'TypeScript',
+            description: 'الأمان الكامل للأنواع وتجربة تطوير محسّنة',
+          },
+        },
+        techStack: {
+          title: 'الاستفادة من أحدث الأدوات والأطر لتحسين الأداء',
+          angular: {
+            title: 'Angular 20+',
+            description: 'مكونات مستقلة حديثة مع الإشارات لإدارة الحالة التفاعلية',
+          },
+          tailwind: {
+            title: 'Tailwind CSS v4',
+            description: 'إطار عمل CSS مبني على المرافق مع إعداد PostCSS حديث',
+          },
+          typescript: {
+            title: 'TypeScript',
+            description: 'واجهات ونماذج مُكتوبة بقوة لتحسين تجربة المطور',
+          },
+        },
+        readyToStart: {
+          title: 'جاهز لبدء البناء؟',
+          subtitle: 'استكشف الصفحات الأخرى أو تواصل معنا لمعرفة المزيد',
+          viewHome: 'عرض الرئيسية',
+          contactUs: 'تواصل معنا',
+        },
+        productionReady: {
+          sectionTitle: 'ما هو مُضمن في هذا القالب',
+          title: 'تطبيق Angular جاهز للإنتاج مع 20+ ميزة وخدمة ومكون مُعد مسبقاً',
+          modernArchitecture: {
+            title: 'معمارية حديثة',
+            description: 'مكونات مستقلة، إشارات، دعم بدون منطقة، Angular 20+',
+          },
+          i18n: {
+            title: 'ترجمة i18n',
+            description: 'الإنجليزية والعربية مع دعم RTL، مبدل اللغة في الرأس',
+          },
+          interceptors: {
+            title: 'مُعترِضات HTTP',
+            description:
+              'المصادقة، معالجة الأخطاء، حالة التحميل، تخزين الاستجابة مؤقتاً (5 دقائق TTL)',
+          },
+          tailwind: {
+            title: 'Tailwind CSS v4',
+            description: 'إعداد PostCSS حديث، مرافق متجاوبة، جاهز للوضع المظلم',
+          },
+          uiComponents: {
+            title: 'مكونات واجهة المستخدم',
+            description: 'زر، بطاقة، دوار، تنبيه، نافذة منبثقة مع تخصيص كامل',
+          },
+          typeSafe: {
+            title: 'آمن النوع',
+            description: 'واجهات TypeScript، نماذج، خدمات مُكتوبة بقوة',
+          },
+        },
+        coreServices: {
+          title: 'الخدمات الأساسية (src/app/core/)',
+          authService: 'AuthService - المصادقة وإدارة المستخدمين',
+          apiService: 'ApiService - معالجة طلبات HTTP مركزية',
+          toastService: 'ToastService - نظام الإشعارات (نجاح، خطأ، تحذير، معلومات)',
+          modalService: 'ModalService - نظام الحوار مع التأكيد والتنبيه',
+          loadingService: 'LoadingService - حالة التحميل العامة مع الإشارات',
+          cacheService: 'CacheService - تخزين الاستجابة مؤقتاً مع TTL',
+          storageService: 'StorageService - غلاف LocalStorage مع أمان النوع',
+          i18nService: 'i18nService - إدارة الترجمة',
+        },
+        sharedComponents: {
+          title: 'المكونات المشتركة (src/app/shared/)',
+          button: 'ButtonComponent - متغيرات: أساسي، ثانوي، خطر',
+          card: 'CardComponent - حاوية مرنة مع عنوان وظل',
+          spinner: 'LoadingSpinnerComponent - مؤشر تحميل متحرك',
+          toast: 'ToastComponent - إشعارات إغلاق تلقائي',
+          modal: 'ModalComponent - حوار قابل للوصول بأحجام',
+          pipes: 'الأنابيب - قطع، منذ',
+          directives: 'التوجيهات - خارج النقر، تلميح',
+        },
+        preConfigured: {
+          title: 'الحزم والأدوات المُعدة مسبقاً',
+          subtitle: 'التبعيات وأدوات التطوير الجاهزة للإنتاج مُضمنة',
+          coreDependencies: 'التبعيات الأساسية',
+          developmentTools: 'أدوات التطوير',
+          latest: 'الأحدث',
+          i18n: 'i18n',
+          iconLibrary: 'مكتبة الأيقونات',
+          linting: 'الفحص',
+          formatting: 'التنسيق',
+          gitHooks: 'خطافات Git',
+          typeSafety: 'أمان النوع',
+          serviceWorker: 'عامل الخدمة',
+        },
+        pathAliases: {
+          title: 'أسماء مسارات TypeScript (tsconfig.json)',
+          core: '@core/* → src/app/core/*',
+          shared: '@shared/* → src/app/shared/*',
+          features: '@features/* → src/app/features/*',
+          environments: '@environments/* → src/environments/*',
+        },
+        projectStructure: {
+          title: 'هيكل المشروع منظم جيداً',
+          subtitle: 'معمارية نظيفة تتبع أفضل ممارسات Angular',
+          coreServices: 'services/ (8 خدمات)',
+          guards: 'guards/ (حارس المصادقة)',
+          interceptors: 'interceptors/ (4 أنواع)',
+          i18n: 'i18n/ (نظام الترجمة)',
+          components: 'components/ (5 مكونات)',
+          pipes: 'pipes/ (2 أنابيب)',
+          directives: 'directives/ (2 توجيهات)',
+          models: 'models/ (واجهات TypeScript)',
+          home: 'home/',
+          about: 'about/',
+          contact: 'contact/',
+          auth: 'auth/ (تسجيل دخول، تسجيل، نسيان)',
+          mainLayout: 'main-layout/ (رأس + تذييل)',
+          authLayout: 'auth-layout/ (صفحات المصادقة)',
+        },
+        interactiveExamples: {
+          title: 'جرب الأمثلة التفاعلية',
+          subtitle: 'اختبر خدمات Toast و Modal المُضمنة في هذا القالب',
+          toastNotifications: {
+            title: 'إشعارات Toast',
+            subtitle: 'تنبيهات إغلاق تلقائي مع 4 أنواع',
+            description: 'انقر على أي زر لرؤية أنواع مختلفة من إشعارات Toast:',
+            success: 'نجح',
+            error: 'خطأ',
+            warning: 'تحذير',
+            info: 'معلومات',
+          },
+          modalDialogs: {
+            title: 'حوارات النافذة المنبثقة',
+            subtitle: 'حوارات قابلة للوصول ومتجاوبة',
+            description: 'اختبر حوارات التأكيد والتنبيه مع الانتقالات:',
+            showConfirm: 'إظهار حوار التأكيد',
+            showAlert: 'إظهار حوار التنبيه',
+          },
+          proTip: {
+            title: 'نصيحة احترافية',
+            description:
+              'هذه الخدمات مُكتوبة بالكامل ويمكن حقنها في أي مكان في تطبيقك. تحقق من src/app/core/services/ لرؤية التنفيذ.',
+          },
+        },
+        readyToBuild: {
+          title: 'جاهز لبناء شيء مذهل؟',
+          subtitle: 'استكشف الصفحات الأخرى لرؤية النماذج والتوجيه وواجهة المصادقة في العمل',
+          learnMore: 'معرفة المزيد',
+        },
+      },
+      about: {
+        title: 'حول {{projectName}}',
+        subtitle: 'قالب Angular حديث مبني بأفضل الممارسات وتجربة المطور في الاعتبار.',
+        overview: {
+          title: 'نظرة عامة على المشروع',
+          paragraph1:
+            'يوفر هذا القالب أساساً قوياً لبناء تطبيقات Angular الحديثة مع Tailwind CSS، بما في ذلك المكونات الأساسية والخدمات وأفضل الممارسات.',
+          paragraph2:
+            'مبني بأحدث ميزات Angular بما في ذلك المكونات المستقلة والإشارات، ومُحسّن للأداء وتجربة المطور.',
+        },
+        features: {
+          title: 'الميزات المتضمنة',
+          standalone: 'مكونات Angular المستقلة',
+          tailwind: 'تكامل Tailwind CSS',
+          responsive: 'تصميم متجاوب',
+          typescript: 'جاهز لـ TypeScript',
+          production: 'مُحسّن للإنتاج',
+        },
+        techStack: {
+          title: 'مبني بأحدث التقنيات',
+        },
+      },
+      contact: {
+        title: 'تواصل معنا',
+        subtitle: 'هل لديك أسئلة؟ نحب أن نسمع منك. أرسل لنا رسالة وسنرد في أقرب وقت ممكن.',
+        form: {
+          title: 'أرسل لنا رسالة',
+          description: 'املأ النموذج أدناه وسنعاود الاتصال بك قريباً',
+          name: 'الاسم الكامل',
+          email: 'عنوان البريد الإلكتروني',
+          subject: 'الموضوع',
+          message: 'الرسالة',
+          submit: 'إرسال الرسالة',
+          sending: 'جاري الإرسال...',
+          success: 'شكراً على رسالتك! سنعاود الاتصال بك قريباً.',
+          errors: {
+            nameRequired: 'الاسم مطلوب',
+            nameMinLength: 'يجب أن يكون الاسم على الأقل حرفين',
+            emailRequired: 'البريد الإلكتروني مطلوب',
+            emailInvalid: 'يرجى إدخال بريد إلكتروني صحيح',
+            subjectRequired: 'الموضوع مطلوب',
+            messageRequired: 'الرسالة مطلوبة',
+            messageMinLength: 'يجب أن تكون الرسالة على الأقل 10 أحرف',
+          },
+        },
+        info: {
+          title: 'معلومات الاتصال',
+          description: 'نحن هنا للمساعدة والإجابة على أي سؤال قد يكون لديك',
+          email: {
+            label: 'البريد الإلكتروني',
+            description: 'سنرد خلال 24 ساعة',
+          },
+          location: {
+            label: 'الموقع',
+            value: 'عن بُعد وعالمي',
+            description: 'نعمل عبر جميع المناطق الزمنية',
+          },
+          responseTime: {
+            label: 'وقت الاستجابة',
+            value: '24 ساعة',
+            description: 'عادة أسرع بكثير',
+          },
+        },
+        help: {
+          title: 'موارد مفيدة',
+          subtitle: 'هل لديك أسئلة حول القالب؟ تحقق من هذه الموارد:',
+          links: {
+            angular: 'وثائق Angular',
+            tailwind: 'دليل Tailwind CSS',
+            github: 'مستودع GitHub',
+          },
+        },
+      },
+      auth: {
+        layout: {
+          welcome: 'مرحبًا بعودتك! يرجى تسجيل الدخول للمتابعة.',
+          copyright: '© {{year}} {{name}}. جميع الحقوق محفوظة.',
+        },
+        login: {
+          title: 'تسجيل الدخول',
+          subtitle: 'أدخل بيانات الاعتماد للوصول إلى حسابك',
+          email: 'عنوان البريد الإلكتروني',
+          password: 'كلمة المرور',
+          rememberMe: 'تذكرني',
+          forgotPassword: 'نسيت كلمة المرور؟',
+          submit: 'تسجيل الدخول',
+          signing: 'جاري تسجيل الدخول...',
+          noAccount: 'ليس لديك حساب؟',
+          createAccount: 'أنشئ حساباً هنا',
+          showPassword: 'إظهار كلمة المرور',
+          hidePassword: 'إخفاء كلمة المرور',
+        },
+        register: {
+          title: 'إنشاء حساب',
+          subtitle: 'سجل للبدء',
+          firstName: 'الاسم الأول',
+          lastName: 'اسم العائلة',
+          email: 'البريد الإلكتروني',
+          password: 'كلمة المرور',
+          submit: 'إنشاء حساب',
+          hasAccount: 'لديك حساب بالفعل؟',
+        },
+        forgot: {
+          title: 'نسيت كلمة المرور',
+          subtitle: 'أدخل بريدك الإلكتروني لإعادة تعيين كلمة المرور',
+          email: 'عنوان البريد الإلكتروني',
+          submit: 'إرسال رابط إعادة التعيين',
+          backToLogin: 'العودة إلى تسجيل الدخول',
+        },
+        validation: {
+          emailRequired: 'البريد الإلكتروني مطلوب',
+          emailInvalid: 'يرجى إدخال بريد إلكتروني صحيح',
+          passwordRequired: 'كلمة المرور مطلوبة',
+          passwordMinLength: 'يجب أن تكون كلمة المرور 6 أحرف على الأقل',
+        },
+      },
+      footer: {
+        description: 'مبني بـ Angular و Tailwind CSS. قالب تطبيق ويب حديث وسريع ومتجاوب.',
+        quickLinks: 'روابط سريعة',
+        builtWith: 'مبني بـ',
+        copyright: '© {{year}} {{name}}. تم الإنشاء باستخدام',
+        madeWith: 'صُنع بـ ❤️ من قبل المطورين، للمطورين',
+      },
+      language: {
+        select: 'اختر اللغة',
+        english: 'English',
+        arabic: 'العربية',
+      },
+    };
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/i18n/ar.json'),
+      JSON.stringify(arTranslations, null, 2)
+    );
+
+    // Update package.json to include translation dependencies
+    const packageJsonPath = path.join(config.fullPath, 'package.json');
+    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+    const translationDependencies = {
+      '@ngx-translate/core': '^15.0.0',
+      '@ngx-translate/http-loader': '^8.0.0',
+    };
+
+    packageJson.dependencies = {
+      ...packageJson.dependencies,
+      ...translationDependencies,
+    };
+    await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  },
+
+  async createGuards(config) {
+    const authGuard = `import { CanActivateFn, Router } from '@angular/router';
+import { inject } from '@angular/core';
+
+/**
+ * Simple authentication guard
+ * Replace with your actual authentication logic
+ */
+export const authGuard: CanActivateFn = (_route, _state) => {
+  const router = inject(Router);
+
+  // Replace with your actual authentication check
+  const isAuthenticated = localStorage.getItem('auth-token') !== null;
+
+  if (!isAuthenticated) {
+    // Redirect to login page
+    router.navigate(['/auth/login']);
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Example: Check if user has specific role
+ */
+export const roleGuard = (requiredRole: string): CanActivateFn => {
+  return (_route, _state) => {
+    const router = inject(Router);
+
+    // Replace with your actual role checking logic
+    const userRole = localStorage.getItem('user-role');
+
+    if (userRole !== requiredRole) {
+      router.navigate(['/unauthorized']);
+      return false;
+    }
+
+    return true;
+  };
+};`;
+
+    await fs.writeFile(path.join(config.fullPath, 'src/app/core/guards/auth.guard.ts'), authGuard);
+  },
+
+  async createSharedComponents(config) {
+    // Button Component
+    const buttonComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <button
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      (click)="handleClick($event)"
+      [type]="type">
+
+      @if (loading) {
+        <svg class="animate-spin -ml-1 mr-3 h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      }
+
+      <ng-content></ng-content>
+    </button>
+  \`
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'md';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() fullWidth = false;
+
+  @Output() clicked = new EventEmitter<Event>();
+
+  get buttonClasses(): string {
+    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+
+    const sizeClasses = {
+      sm: 'text-sm px-3 py-2 h-9',
+      md: 'text-sm px-4 py-2 h-10',
+      lg: 'text-base px-8 py-3 h-11'
+    };
+
+    const variantClasses = {
+      primary: 'bg-blue-600 text-white hover:bg-blue-700',
+      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
+      outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white',
+      ghost: 'hover:bg-gray-100 hover:text-gray-900',
+      danger: 'bg-red-600 text-white hover:bg-red-700'
+    };
+
+    const widthClass = this.fullWidth ? 'w-full' : '';
+
+    return \`\${baseClasses} \${sizeClasses[this.size]} \${variantClasses[this.variant]} \${widthClass}\`.trim();
+  }
+
+  handleClick(event: Event): void {
+    if (!this.disabled && !this.loading) {
+      this.clicked.emit(event);
+    }
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/button/button.component.ts'),
+      buttonComponent
+    );
+
+    // Card Component
+    const cardComponent = `import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <div [class]="cardClasses">
+      @if (title || subtitle) {
+        <div class="px-6 py-4 border-b border-gray-200">
+          @if (title) {
+            <h3 class="text-lg font-semibold text-gray-900">
+              {{ title }}
+            </h3>
+          }
+          @if (subtitle) {
+            <p class="text-sm text-gray-600 mt-1">
+              {{ subtitle }}
+            </p>
+          }
+        </div>
+      }
+
+      <div [class]="contentClasses">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hasFooter) {
+        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
+          <ng-content select="[slot=footer]"></ng-content>
+        </div>
+      }
+    </div>
+  \`
+})
+export class CardComponent {
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  @Input() padding = true;
+  @Input() shadow = true;
+  @Input() hover = false;
+  @Input() hasFooter = false;
+
+  get cardClasses(): string {
+    const baseClasses = 'bg-white border border-gray-200 rounded-lg overflow-hidden';
+    const shadowClasses = this.shadow ? 'shadow-sm' : '';
+    const hoverClasses = this.hover ? 'hover:shadow-md transition-shadow duration-200' : '';
+
+    return \`\${baseClasses} \${shadowClasses} \${hoverClasses}\`.trim();
+  }
+
+  get contentClasses(): string {
+    return this.padding ? 'p-6' : '';
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/card/card.component.ts'),
+      cardComponent
+    );
+
+    // Loading Spinner Component
+    const spinnerComponent = `import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [CommonModule],
+  template: \`
+    <div [class]="containerClasses">
+      <svg [class]="spinnerClasses" fill="none" viewBox="0 0 24 24">
+        <circle
+          cx="12" cy="12" r="10"
+          stroke="currentColor"
+          stroke-width="4"
+          class="opacity-25">
+        </circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+      </svg>
+      @if (text) {
+        <span [class]="textClasses">{{ text }}</span>
+      }
+    </div>
+  \`
+})
+export class LoadingSpinnerComponent {
+  @Input() size: SpinnerSize = 'md';
+  @Input() text?: string;
+  @Input() centered = false;
+  @Input() color = 'blue';
+
+  private readonly sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16'
+  } as const;
+
+  private readonly colorClasses = {
+    blue: 'text-blue-600',
+    gray: 'text-gray-600',
+    white: 'text-white',
+    green: 'text-green-600',
+    red: 'text-red-600'
+  } as const;
+
+  protected readonly textClasses = 'text-sm text-gray-600';
+
+  get containerClasses(): string {
+    const baseClasses = 'flex items-center';
+    const centerClasses = this.centered ? 'justify-center' : '';
+    const directionClasses = this.text ? 'flex-col space-y-2' : '';
+
+    return \`\${baseClasses} \${centerClasses} \${directionClasses}\`.trim();
+  }
+
+  get spinnerClasses(): string {
+    const baseClasses = 'animate-spin';
+    return \`\${baseClasses} \${this.sizeClasses[this.size]} \${this.colorClasses[this.color as keyof typeof this.colorClasses] || this.colorClasses.blue}\`.trim();
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/loading-spinner/loading-spinner.component.ts'
+      ),
+      spinnerComponent
+    );
+  },
+
+  async createPipes(config) {
+    // Truncate Pipe
+    const truncatePipe = `import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  standalone: true
+})
+export class TruncatePipe implements PipeTransform {
+  transform(value: string | null | undefined, limit = 50, suffix = '...'): string {
+    if (!value) return '';
+
+    if (value.length <= limit) {
+      return value;
+    }
+
+    return value.substring(0, limit).trim() + suffix;
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/pipes/truncate.pipe.ts'),
+      truncatePipe
+    );
+
+    // Time Ago Pipe
+    const timeAgoPipe = `import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timeAgo',
+  standalone: true
+})
+export class TimeAgoPipe implements PipeTransform {
+  transform(value: string | number | Date | null | undefined): string {
+    if (!value) return '';
+
+    const date = new Date(value);
+    const now = new Date();
+    const secondsAgo = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (secondsAgo < 60) {
+      return 'just now';
+    }
+
+    const minutesAgo = Math.floor(secondsAgo / 60);
+    if (minutesAgo < 60) {
+      return \`\${minutesAgo} minute\${minutesAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const hoursAgo = Math.floor(minutesAgo / 60);
+    if (hoursAgo < 24) {
+      return \`\${hoursAgo} hour\${hoursAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const daysAgo = Math.floor(hoursAgo / 24);
+    if (daysAgo < 7) {
+      return \`\${daysAgo} day\${daysAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const weeksAgo = Math.floor(daysAgo / 7);
+    if (weeksAgo < 4) {
+      return \`\${weeksAgo} week\${weeksAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const monthsAgo = Math.floor(daysAgo / 30);
+    if (monthsAgo < 12) {
+      return \`\${monthsAgo} month\${monthsAgo === 1 ? '' : 's'} ago\`;
+    }
+
+    const yearsAgo = Math.floor(daysAgo / 365);
+    return \`\${yearsAgo} year\${yearsAgo === 1 ? '' : 's'} ago\`;
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/pipes/time-ago.pipe.ts'),
+      timeAgoPipe
+    );
+  },
+
+  async createModels(config) {
+    // User Interface
+    const userInterface = `export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  avatar?: string;
+  role: 'user' | 'admin' | 'moderator';
+  createdAt: Date;
+  updatedAt: Date;
+  isActive: boolean;
+}
+
+export interface UserProfile {
+  user: User;
+  preferences: {
+    notifications: boolean;
+    language: string;
+  };
+}
+
+export interface CreateUserRequest {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+}
+
+export interface UpdateUserRequest {
+  firstName?: string;
+  lastName?: string;
+  avatar?: string;
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/models/user.interface.ts'),
+      userInterface
+    );
+
+    // API Response Interface
+    const apiResponseInterface = `export interface ApiResponse<T = unknown> {
+  data: T;
+  message: string;
+  success: boolean;
+  errors?: string[];
+  meta?: {
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+  };
+}
+
+export interface ApiError {
+  message: string;
+  code: string;
+  field?: string;
+}
+
+export interface PaginationParams {
+  page: number;
+  perPage: number;
+  sortBy?: string;
+  sortOrder?: 'asc' | 'desc';
+}
+
+export interface ContactFormData {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/models/api-response.interface.ts'),
+      apiResponseInterface
+    );
+  },
+
+  async createLayout(config) {
+    // Header Component with Authentication and Language Switcher
+    const headerComponentTs = `import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Router } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage } from '@ng-icons/heroicons/outline';
+import { TranslateModule } from '@ngx-translate/core';
+import { AuthService } from '@core/services/auth.service';
+import { TranslationService, type SupportedLanguage, type LanguageOption } from '@core/i18n/translation.service';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule, RouterModule, NgIconComponent, TranslateModule],
+  viewProviders: [provideIcons({ heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage })],
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit {
+  private authService = inject(AuthService);
+  private router = inject(Router);
+  public translationService = inject(TranslationService);
+
+  protected readonly projectName = '${config.projectName}';
+
+  mobileMenuOpen = false;
+  userMenuOpen = false;
+  langMenuOpen = false;
+  isAuthenticated = false;
+  currentUser: User | null = null;
+  currentLang: SupportedLanguage = 'en';
+  currentLanguage: LanguageOption = this.translationService.languages[0];
+
+  ngOnInit() {
+    // Subscribe to authentication state
+    this.authService.isAuthenticated$.subscribe(
+      isAuth => this.isAuthenticated = isAuth
+    );
+
+    this.authService.currentUser$.subscribe(
+      user => this.currentUser = user
+    );
+
+    // Subscribe to language changes
+    this.currentLang = this.translationService.getCurrentLanguage();
+    const lang = this.translationService.getLanguageOption(this.currentLang);
+    if (lang) {
+      this.currentLanguage = lang;
+    }
+  }
+
+  changeLanguage(lang: SupportedLanguage) {
+    this.translationService.setLanguage(lang);
+    this.currentLang = lang;
+    const langOption = this.translationService.getLanguageOption(lang);
+    if (langOption) {
+      this.currentLanguage = langOption;
+    }
+    this.langMenuOpen = false;
+  }
+
+  onLogout() {
+    this.authService.logout();
+    this.userMenuOpen = false;
+    this.router.navigate(['/']);
+  }
+
+  closeAllMenus() {
+    this.mobileMenuOpen = false;
+    this.userMenuOpen = false;
+    this.langMenuOpen = false;
+  }
+}`;
+
+    const headerComponentHtml = `<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-200/80">
+  <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+
+      <!-- Logo -->
+      <div class="flex items-center space-x-4">
+        <a routerLink="/" class="flex items-center space-x-3">
+          <div class="h-8 w-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+            <span class="text-white font-bold text-sm">{{ projectName.charAt(0).toUpperCase() }}</span>
+          </div>
+          <span class="text-xl font-semibold text-gray-900">
+            {{ projectName }}
+          </span>
+        </a>
+      </div>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:block">
+        <div class="ml-10 flex items-center space-x-8">
+          <a
+            routerLink="/"
+            routerLinkActive="text-blue-600"
+            [routerLinkActiveOptions]="{exact: true}"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            <ng-icon name="heroHome" size="18"></ng-icon>
+            {{ 'nav.home' | translate }}
+          </a>
+          <a
+            routerLink="/about"
+            routerLinkActive="text-blue-600"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            <ng-icon name="heroInformationCircle" size="18"></ng-icon>
+            {{ 'nav.about' | translate }}
+          </a>
+          <a
+            routerLink="/contact"
+            routerLinkActive="text-blue-600"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            <ng-icon name="heroEnvelope" size="18"></ng-icon>
+            {{ 'nav.contact' | translate }}
+          </a>
+        </div>
+      </div>
+
+      <!-- Right side actions -->
+      <div class="flex items-center space-x-4">
+
+        <!-- Language Switcher -->
+        <div class="hidden md:block relative">
+          <button
+            (click)="langMenuOpen = !langMenuOpen"
+            class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 transition-colors px-3 py-2 rounded-lg hover:bg-gray-100"
+            [class.text-blue-600]="langMenuOpen"
+            [class.bg-gray-100]="langMenuOpen">
+            <ng-icon name="heroLanguage" size="20"></ng-icon>
+            <span class="font-medium text-sm">{{ currentLanguage.nativeName }}</span>
+            <ng-icon name="heroChevronDown" size="16"></ng-icon>
+          </button>
+
+          <!-- Language dropdown menu -->
+          @if (langMenuOpen) {
+            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+              <div class="py-1">
+                @for (lang of translationService.languages; track lang.code) {
+                  <button
+                    (click)="changeLanguage(lang.code)"
+                    class="w-full text-left px-4 py-2 text-sm transition-colors flex items-center justify-between"
+                    [class.bg-blue-50]="currentLang === lang.code"
+                    [class.text-blue-600]="currentLang === lang.code"
+                    [class.text-gray-700]="currentLang !== lang.code"
+                    [class.hover:bg-gray-100]="currentLang !== lang.code">
+                    <span class="flex items-center space-x-2">
+                      <span class="text-lg">{{ lang.flag }}</span>
+                      <span>{{ lang.nativeName }}</span>
+                    </span>
+                    @if (currentLang === lang.code) {
+                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                      </svg>
+                    }
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Authentication Section -->
+        <div class="hidden md:flex items-center space-x-3">
+          <!-- Logged out state -->
+          @if (!isAuthenticated) {
+            <a
+              routerLink="/auth/login"
+              class="text-gray-700 hover:text-blue-600 transition-colors font-medium">
+              {{ 'nav.login' | translate }}
+            </a>
+            <a
+              routerLink="/auth/register"
+              class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
+              {{ 'nav.register' | translate }}
+            </a>
+          }
+
+          <!-- Logged in state -->
+          @if (isAuthenticated) {
+            <div class="relative">
+            <button
+              (click)="userMenuOpen = !userMenuOpen"
+              class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 transition-colors"
+              [class.text-blue-600]="userMenuOpen">
+              <div class="h-8 w-8 bg-blue-600 rounded-full flex items-center justify-center">
+                <ng-icon name="heroUser" size="16" style="color: white;"></ng-icon>
+              </div>
+              <span class="font-medium">{{ currentUser?.firstName || 'User' }}</span>
+              <ng-icon name="heroChevronDown" size="16"></ng-icon>
+            </button>
+
+            <!-- User dropdown menu -->
+            @if (userMenuOpen) {
+              <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+              <div class="py-1">
+                <div class="px-4 py-2 text-sm text-gray-500 border-b border-gray-100">
+                  {{ currentUser?.email }}
+                </div>
+                <button
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                  {{ 'nav.profile' | translate }}
+                </button>
+                <button
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                  {{ 'nav.account' | translate }}
+                </button>
+                <hr class="my-1">
+                <button
+                  (click)="onLogout()"
+                  class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
+                  {{ 'nav.logout' | translate }}
+                </button>
+              </div>
+              </div>
+            }
+          </div>
+        }
+        </div>
+
+        <!-- Mobile menu button -->
+        <button
+          (click)="mobileMenuOpen = !mobileMenuOpen"
+          class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
+          @if (!mobileMenuOpen) {
+            <ng-icon name="heroBars3" size="24"></ng-icon>
+          }
+          @if (mobileMenuOpen) {
+            <ng-icon name="heroXMark" size="24"></ng-icon>
+          }
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile Navigation -->
+    @if (mobileMenuOpen) {
+      <div class="md:hidden pb-4">
+      <div class="flex flex-col space-y-2 mt-4">
+        <!-- Navigation Links -->
+        <a
+          routerLink="/"
+          routerLinkActive="text-blue-600 bg-blue-50"
+          [routerLinkActiveOptions]="{exact: true}"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.home' | translate }}
+        </a>
+        <a
+          routerLink="/about"
+          routerLinkActive="text-blue-600 bg-blue-50"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.about' | translate }}
+        </a>
+        <a
+          routerLink="/contact"
+          routerLinkActive="text-blue-600 bg-blue-50"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.contact' | translate }}
+        </a>
+
+        <!-- Mobile Language Switcher -->
+        <hr class="my-2">
+        <div class="px-3 py-2">
+          <p class="text-xs font-semibold text-gray-500 uppercase mb-2">{{ 'language.select' | translate }}</p>
+          <div class="flex flex-col space-y-1">
+            @for (lang of translationService.languages; track lang.code) {
+              <button
+                (click)="changeLanguage(lang.code)"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between"
+                [class.bg-blue-50]="currentLang === lang.code"
+                [class.text-blue-600]="currentLang === lang.code"
+                [class.text-gray-700]="currentLang !== lang.code"
+                [class.hover:bg-gray-100]="currentLang !== lang.code">
+                <span class="flex items-center space-x-2">
+                  <span class="text-lg">{{ lang.flag }}</span>
+                  <span>{{ lang.nativeName }}</span>
+                </span>
+                @if (currentLang === lang.code) {
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Mobile Auth Section -->
+        <hr class="my-2">
+        @if (!isAuthenticated) {
+          <a
+            routerLink="/auth/login"
+            (click)="mobileMenuOpen = false"
+            class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+            {{ 'nav.login' | translate }}
+          </a>
+          <a
+            routerLink="/auth/register"
+            (click)="mobileMenuOpen = false"
+            class="px-3 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors font-medium text-center">
+            {{ 'nav.register' | translate }}
+          </a>
+        }
+
+        @if (isAuthenticated) {
+          <div class="px-3 py-2 text-sm text-gray-500">
+            Welcome, {{ currentUser?.firstName || 'User' }}!
+          </div>
+          <button
+            class="w-full text-left px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
+            {{ 'nav.profile' | translate }}
+          </button>
+          <button
+            (click)="onLogout(); mobileMenuOpen = false"
+            class="w-full text-left px-3 py-2 rounded-lg text-red-600 hover:bg-red-50 transition-colors">
+            {{ 'nav.logout' | translate }}
+          </button>
+        }
+      </div>
+    </div>
+    }
+  </nav>
+</header>
+
+<!-- Backdrop for mobile menu and user dropdown -->
+@if (mobileMenuOpen || userMenuOpen || langMenuOpen) {
+  <button
+    (click)="closeAllMenus()"
+    (keydown.escape)="closeAllMenus()"
+    type="button"
+    aria-label="Close menu"
+    class="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm cursor-default">
+  </button>
+}
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/header/header.component.ts'),
+      headerComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/header/header.component.html'),
+      headerComponentHtml
+    );
+
+    // Footer Component
+    const footerComponentTs = `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [CommonModule, TranslateModule],
+  templateUrl: './footer.component.html'
+})
+export class FooterComponent {
+  protected readonly projectName = '${config.projectName}';
+  protected readonly currentYear = new Date().getFullYear();
+}`;
+
+    const footerComponentHtml = `<footer class="bg-white border-t border-gray-200">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+      <!-- Company Info -->
+      <div>
+        <div class="flex items-center space-x-3 mb-4">
+          <div class="h-8 w-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+          </div>
+          <span class="text-xl font-semibold text-gray-900">
+            {{ projectName }}
+          </span>
+        </div>
+        <p class="text-gray-600 text-sm max-w-md">
+          {{ 'footer.description' | translate }}
+        </p>
+      </div>
+
+      <!-- Quick Links -->
+      <div>
+        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">
+          {{ 'footer.quickLinks' | translate }}
+        </h3>
+        <ul class="space-y-2">
+          <li>
+            <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              {{ 'nav.home' | translate }}
+            </a>
+          </li>
+          <li>
+            <a href="/about" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              {{ 'nav.about' | translate }}
+            </a>
+          </li>
+          <li>
+            <a href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              {{ 'nav.contact' | translate }}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Tech Stack -->
+      <div>
+        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">
+          {{ 'footer.builtWith' | translate }}
+        </h3>
+        <ul class="space-y-2">
+          <li>
+            <a href="https://angular.dev" target="_blank" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              Angular
+            </a>
+          </li>
+          <li>
+            <a href="https://tailwindcss.com" target="_blank" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              Tailwind CSS
+            </a>
+          </li>
+          <li>
+            <a href="https://typescript.org" target="_blank" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+              TypeScript
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Bottom Bar -->
+    <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+      <p class="text-gray-500 text-sm">
+        {{ 'footer.copyright' | translate:{ year: currentYear, name: projectName } }}
+      </p>
+      <p class="text-gray-500 text-sm mt-2 md:mt-0">
+        {{ 'footer.madeWith' | translate }}
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/footer/footer.component.ts'),
+      footerComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/footer/footer.component.html'),
+      footerComponentHtml
+    );
+  },
+
+  async createAuthLayout(config) {
+    // Auth Layout Component
+    const authLayoutComponent = `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-auth-layout',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, TranslateModule],
+  template: \`
+    <div class="min-h-screen bg-linear-to-br from-blue-500 via-purple-600 to-indigo-700 flex items-center justify-center p-4">
+      <div class="w-full max-w-md">
+
+        <!-- Logo/Brand -->
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center h-16 w-16 bg-white/20 backdrop-blur-lg rounded-2xl mb-4">
+            <span class="text-2xl font-bold text-white">{{ firstLetter }}</span>
+          </div>
+          <h1 class="text-2xl font-bold text-white">{{ projectName }}</h1>
+          <p class="text-blue-100 mt-2">{{ 'auth.layout.welcome' | translate }}</p>
+        </div>
+
+        <!-- Auth Form Container -->
+        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-8">
+          <router-outlet />
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-8 text-blue-100 text-sm">
+          <p>{{ 'auth.layout.copyright' | translate:{ year: currentYear, name: projectName } }}</p>
+        </div>
+      </div>
+    </div>
+  \`
+})
+export class AuthLayoutComponent {
+  protected readonly projectName = '${config.projectName}';
+  protected readonly firstLetter = '${config.projectName}'.charAt(0).toUpperCase();
+  protected readonly currentYear = new Date().getFullYear();
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/auth/auth-layout.component.ts'),
+      authLayoutComponent
+    );
+
+    // Login Component
+    const loginComponentTs = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './login.component.html'
+})
+export class LoginComponent {
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+
+  showPassword = false;
+  isLoading = false;
+  errorMessage = '';
+
+  loginForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]],
+    rememberMe: [false]
+  });
+
+  togglePassword(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.valid) {
+      this.isLoading = true;
+      this.errorMessage = '';
+
+      // Simulate login API call
+      setTimeout(() => {
+        this.isLoading = false;
+
+        // Mock login logic - replace with actual authentication service
+        const { email, password } = this.loginForm.value;
+
+        if (email === 'demo@example.com' && password === 'password') {
+          // Store token (mock)
+          localStorage.setItem('auth_token', 'mock_token_12345');
+          this.router.navigate(['/']);
+        } else {
+          this.errorMessage = 'Invalid email or password. Try demo@example.com / password';
+        }
+      }, 1500);
+    } else {
+      // Mark all fields as touched to show validation errors
+      Object.keys(this.loginForm.controls).forEach(key => {
+        this.loginForm.get(key)?.markAsTouched();
+      });
+    }
+  }
+}`;
+
+    const loginComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.login.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.login.subtitle' | translate }}</p>
+  </div>
+
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
+
+    <!-- Email Field -->
+    <div>
+      <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+        {{ 'auth.login.email' | translate }}
+      </label>
+      <input
+        id="email"
+        type="email"
+        formControlName="email"
+        [placeholder]="'auth.login.email' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+        [class.border-red-500]="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
+      @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
+        <div class="mt-1 text-sm text-red-600">
+          @if (loginForm.get('email')?.errors?.['required']) {
+            <span>{{ 'auth.validation.emailRequired' | translate }}</span>
+          }
+          @if (loginForm.get('email')?.errors?.['email']) {
+            <span>{{ 'auth.validation.emailInvalid' | translate }}</span>
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Password Field -->
+    <div>
+      <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+        {{ 'auth.login.password' | translate }}
+      </label>
+      <div class="relative">
+        <input
+          id="password"
+          [type]="showPassword ? 'text' : 'password'"
+          formControlName="password"
+          [placeholder]="'auth.login.password' | translate"
+          class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+          [class.border-red-500]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
+        <button
+          type="button"
+          (click)="togglePassword()"
+          [attr.aria-label]="showPassword ? ('auth.login.hidePassword' | translate) : ('auth.login.showPassword' | translate)"
+          class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
+          @if (!showPassword) {
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+            </svg>
+          }
+          @if (showPassword) {
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
+            </svg>
+          }
+        </button>
+      </div>
+      @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+        <div class="mt-1 text-sm text-red-600">
+          @if (loginForm.get('password')?.errors?.['required']) {
+            <span>{{ 'auth.validation.passwordRequired' | translate }}</span>
+          }
+          @if (loginForm.get('password')?.errors?.['minlength']) {
+            <span>{{ 'auth.validation.passwordMinLength' | translate }}</span>
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Remember Me & Forgot Password -->
+    <div class="flex items-center justify-between">
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          formControlName="rememberMe"
+          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+        <span class="ml-2 rtl:mr-2 text-sm text-gray-600">{{ 'auth.login.rememberMe' | translate }}</span>
+      </label>
+      <a routerLink="/auth/forgot-password" class="text-sm text-blue-600 hover:text-blue-500">
+        {{ 'auth.login.forgotPassword' | translate }}
+      </a>
+    </div>
+
+    <!-- Submit Button -->
+    <app-button
+      type="submit"
+      [fullWidth]="true"
+      [loading]="isLoading"
+      [disabled]="loginForm.invalid">
+      {{ (isLoading ? 'auth.login.signing' : 'auth.login.submit') | translate }}
+    </app-button>
+
+    <!-- Error Message -->
+    @if (errorMessage) {
+      <div class="p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm">
+        {{ errorMessage }}
+      </div>
+    }
+  </form>
+
+  <!-- Sign Up Link -->
+  <div class="text-center pt-4 border-t border-gray-200">
+    <p class="text-sm text-gray-600">
+      {{ 'auth.login.noAccount' | translate }}
+      <a routerLink="/auth/register" class="text-blue-600 hover:text-blue-500 font-medium">
+        {{ 'auth.login.createAccount' | translate }}
+      </a>
+    </p>
+  </div>
+</div>
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/auth/login/login.component.ts'),
+      loginComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/auth/login/login.component.html'),
+      loginComponentHtml
+    );
+
+    // Register Component
+    const registerComponentTs = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './register.component.html'
+})
+export class RegisterComponent {
+  private fb = inject(FormBuilder);
+  registerForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: ['', Validators.required],
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]]
+  });
+  onSubmit() { /* Implementation */ }
+}`;
+
+    const registerComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.register.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.register.subtitle' | translate }}</p>
+  </div>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <input
+        type="text"
+        formControlName="firstName"
+        [placeholder]="'auth.register.firstName' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+      <input
+        type="text"
+        formControlName="lastName"
+        [placeholder]="'auth.register.lastName' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+    </div>
+    <input
+      type="email"
+      formControlName="email"
+      [placeholder]="'auth.register.email' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+    <input
+      type="password"
+      formControlName="password"
+      [placeholder]="'auth.register.password' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+    <app-button type="submit" [fullWidth]="true" [disabled]="registerForm.invalid">
+      {{ 'auth.register.submit' | translate }}
+    </app-button>
+    <div class="text-center">
+      <a routerLink="/auth/login" class="text-blue-600 hover:text-blue-500">
+        {{ 'auth.register.hasAccount' | translate }}
+      </a>
+    </div>
+  </form>
+</div>
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/auth/register/register.component.ts'),
+      registerComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/auth/register/register.component.html'),
+      registerComponentHtml
+    );
+
+    // Forgot Password Component
+    const forgotPasswordComponentTs = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './forgot-password.component.html'
+})
+export class ForgotPasswordComponent {
+  private fb = inject(FormBuilder);
+  forgotForm = this.fb.group({ email: ['', [Validators.required, Validators.email]] });
+  onSubmit() { /* Implementation */ }
+}`;
+
+    const forgotPasswordComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.forgot.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.forgot.subtitle' | translate }}</p>
+  </div>
+  <form [formGroup]="forgotForm" (ngSubmit)="onSubmit()" class="space-y-4">
+    <input
+      type="email"
+      formControlName="email"
+      [placeholder]="'auth.forgot.email' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+    <app-button type="submit" [fullWidth]="true" [disabled]="forgotForm.invalid">
+      {{ 'auth.forgot.submit' | translate }}
+    </app-button>
+    <div class="text-center">
+      <a routerLink="/auth/login" class="text-blue-600 hover:text-blue-500">
+        {{ 'auth.forgot.backToLogin' | translate }}
+      </a>
+    </div>
+  </form>
+</div>
+`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/features/auth/forgot-password/forgot-password.component.ts'
+      ),
+      forgotPasswordComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/features/auth/forgot-password/forgot-password.component.html'
+      ),
+      forgotPasswordComponentHtml
+    );
+  },
+
+  async createFeatures(config) {
+    await this.createHomeComponent(config);
+    await this.createAboutComponent(config);
+    await createContactComponent(config);
+  },
+
+  async createRouting(config) {
+    await createRouting(config);
+  },
+
+  async createAppConfig(config) {
+    await createAppConfig(config);
+  },
+
+  async createAppComponent(config) {
+    await createAppComponent(config);
+  },
+
+  async createStyles(config) {
+    await createStyles(config);
+  },
+
+  async createAssets(config) {
+    // Create a simple logo placeholder
+    const logoSvg = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="#3B82F6" rx="20"/>
+  <text x="50" y="60" text-anchor="middle" fill="white" font-size="24" font-family="Arial, sans-serif" font-weight="bold">
+    ${config.projectName.charAt(0).toUpperCase()}
+  </text>
+</svg>`;
+
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/logo.svg'), logoSvg);
+  },
+
+  async createVSCodeSettings(config) {
+    // Create .vscode directory
+    await fs.ensureDir(path.join(config.fullPath, '.vscode'));
+
+    // VSCode settings for format on save
+    const vscodeSettings = {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      'editor.codeActionsOnSave': {
+        'source.fixAll.eslint': 'explicit',
+      },
+      '[typescript]': {
+        'editor.formatOnSave': true,
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      },
+      '[html]': {
+        'editor.formatOnSave': true,
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      },
+      '[css]': {
+        'editor.formatOnSave': true,
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      },
+      '[json]': {
+        'editor.formatOnSave': true,
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      },
+      '[jsonc]': {
+        'editor.formatOnSave': true,
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      },
+      'files.eol': '\n',
+      'files.trimTrailingWhitespace': true,
+      'files.insertFinalNewline': true,
+      'editor.tabSize': 2,
+      'prettier.requireConfig': false,
+      'eslint.validate': ['javascript', 'typescript', 'html'],
+    };
+
+    // VSCode extensions recommendations
+    const vscodeExtensions = {
+      recommendations: [
+        'esbenp.prettier-vscode',
+        'dbaeumer.vscode-eslint',
+        'angular.ng-template',
+        'bradlc.vscode-tailwindcss',
+      ],
+    };
+
+    // Write settings.json
+    await fs.writeFile(
+      path.join(config.fullPath, '.vscode/settings.json'),
+      JSON.stringify(vscodeSettings, null, 2)
+    );
+
+    // Write extensions.json
+    await fs.writeFile(
+      path.join(config.fullPath, '.vscode/extensions.json'),
+      JSON.stringify(vscodeExtensions, null, 2)
+    );
+  },
+
+  async createHomeComponent(config) {
+    const homeComponentTs = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroRocketLaunch,
+  heroPaintBrush,
+  heroShieldCheck,
+  heroBolt,
+  heroCodeBracket,
+  heroUsers,
+  heroGlobeAlt,
+  heroCog,
+  heroCheckCircle,
+  heroServer,
+  heroFolder,
+  heroCube
+} from '@ng-icons/heroicons/outline';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+import { CardComponent } from '@shared/components/card/card.component';
+import { ToastService } from '@core/services/toast.service';
+import { ModalService } from '@core/services/modal.service';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, RouterModule, NgIconComponent, TranslateModule, ButtonComponent, CardComponent],
+  viewProviders: [provideIcons({
+    heroRocketLaunch,
+    heroPaintBrush,
+    heroShieldCheck,
+    heroBolt,
+    heroCodeBracket,
+    heroUsers,
+    heroGlobeAlt,
+    heroCog,
+    heroCheckCircle,
+    heroServer,
+    heroFolder,
+    heroCube
+  })],
+  templateUrl: './home.component.html'
+})
+export class HomeComponent {
+  protected readonly projectName = '${config.projectName}';
+
+  private toast = inject(ToastService);
+  private modal = inject(ModalService);
+
+  // Toast Examples
+  showSuccessToast(): void {
+    this.toast.success('Operation completed successfully!');
+  }
+
+  showErrorToast(): void {
+    this.toast.error('Something went wrong. Please try again.');
+  }
+
+  showWarningToast(): void {
+    this.toast.warning('This action requires your attention.');
+  }
+
+  showInfoToast(): void {
+    this.toast.info('Here is some useful information.');
+  }
+
+  // Modal Examples
+  async showConfirmModal(): Promise<void> {
+    const confirmed = await this.modal.confirm(
+      'Are you sure you want to proceed with this action?',
+      'Confirm Action'
+    );
+
+    if (confirmed) {
+      this.toast.success('Action confirmed!');
+    } else {
+      this.toast.info('Action cancelled');
+    }
+  }
+
+  async showAlertModal(): Promise<void> {
+    await this.modal.alert(
+      'This is an alert message. Click OK to close.',
+      'Alert'
+    );
+    this.toast.info('Alert closed');
+  }
+}`;
+
+    const homeComponentHtml = `<!-- Hero Section -->
+<section class="relative py-20 bg-linear-to-br from-blue-600 via-indigo-600 to-purple-700 overflow-hidden">
+  <!-- Animated Background Elements -->
+  <div class="absolute inset-0 opacity-20">
+    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
+    <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
+    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
+  </div>
+
+  <div class="relative container mx-auto px-4 text-center">
+    <div class="animate-fade-in">
+      <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 drop-shadow-lg">
+        {{ 'home.hero.title' | translate:{ projectName: projectName } }}
+      </h1>
+      <p class="text-lg md:text-xl lg:text-2xl text-blue-50 mb-8 max-w-3xl mx-auto leading-relaxed">
+        {{ 'home.hero.subtitle' | translate }}
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center animate-slide-up">
+        <app-button size="lg" class="transform hover:scale-105 transition-transform duration-200">
+          <span class="flex items-center gap-2">
+            <ng-icon name="heroRocketLaunch" size="20"></ng-icon>
+            {{ 'home.hero.button' | translate }}
+          </span>
+        </app-button>
+        <app-button size="lg" variant="secondary" [routerLink]="['/about']" class="transform hover:scale-105 transition-transform duration-200">
+          <span class="flex items-center gap-2">
+            {{ 'home.hero.learnMore' | translate }}
+            <ng-icon name="heroShieldCheck" size="20"></ng-icon>
+          </span>
+        </app-button>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- What's Included Section -->
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+        {{ 'home.productionReady.sectionTitle' | translate }}
+      </h2>
+      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+        {{ 'home.productionReady.title' | translate }}
+      </p>
+    </div>
+
+    <!-- Core Features Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+      <!-- Modern Architecture -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+              <ng-icon name="heroRocketLaunch" size="24" style="color: #2563eb;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Modern Architecture</h3>
+            <p class="text-sm text-gray-600">Standalone components, Signals, Zoneless support, Angular 20+</p>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- i18n System -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
+              <ng-icon name="heroGlobeAlt" size="24" style="color: #9333ea;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">i18n Translation</h3>
+            <p class="text-sm text-gray-600">English & Arabic with RTL support, language switcher in header</p>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- HTTP Interceptors -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
+              <ng-icon name="heroServer" size="24" style="color: #16a34a;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">HTTP Interceptors</h3>
+            <p class="text-sm text-gray-600">Auth, Error handling, Loading state, Response caching (5min TTL)</p>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- Tailwind CSS -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center">
+              <ng-icon name="heroPaintBrush" size="24" style="color: #0891b2;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Tailwind CSS v4</h3>
+            <p class="text-sm text-gray-600">Modern PostCSS setup, responsive utilities, dark mode ready</p>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- UI Components -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center">
+              <ng-icon name="heroCube" size="24" style="color: #4f46e5;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">UI Components</h3>
+            <p class="text-sm text-gray-600">Button, Card, Spinner, Toast, Modal with full customization</p>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- TypeScript -->
+      <app-card [hover]="true" [shadow]="true">
+        <div class="flex items-start space-x-4">
+          <div class="shrink-0">
+            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+              <ng-icon name="heroShieldCheck" size="24" style="color: #2563eb;"></ng-icon>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Type-Safe</h3>
+            <p class="text-sm text-gray-600">TypeScript interfaces, models, strongly-typed services</p>
+          </div>
+        </div>
+      </app-card>
+    </div>
+
+    <!-- Features Breakdown -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <!-- Core Services -->
+      <app-card [title]="'home.coreServices.title' | translate" [shadow]="true">
+        <ul class="space-y-2 text-gray-700">
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.authService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.apiService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.toastService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.modalService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.loadingService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.cacheService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.storageService' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <span>{{ 'home.coreServices.i18nService' | translate }}</span>
+          </li>
+        </ul>
+      </app-card>
+
+      <!-- Shared Components & Utils -->
+      <app-card [title]="'home.sharedComponents.title' | translate" [shadow]="true">
+        <ul class="space-y-2 text-gray-700">
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.button' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.card' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.spinner' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.toast' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.modal' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.pipes' | translate }}</span>
+          </li>
+          <li class="flex items-start">
+            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <span>{{ 'home.sharedComponents.directives' | translate }}</span>
+          </li>
+        </ul>
+      </app-card>
+    </div>
+  </div>
+</section>
+
+<!-- Package & Dependencies Section -->
+<section class="py-20 bg-gray-50">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+        {{ 'home.preConfigured.title' | translate }}
+      </h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+        {{ 'home.preConfigured.subtitle' | translate }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
+      <!-- Core Dependencies -->
+      <app-card [title]="'home.preConfigured.coreDependencies' | translate" [shadow]="true">
+        <div class="space-y-3 text-sm">
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">&#64;angular/core</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.latest' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">tailwindcss</span>
+            <span class="text-gray-500">^4.0.0</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">&#64;tailwindcss/postcss</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.latest' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">&#64;ngx-translate/core</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.i18n' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">&#64;ng-icons/heroicons</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.iconLibrary' | translate }}</span>
+          </div>
+        </div>
+      </app-card>
+
+      <!-- Dev Tools -->
+      <app-card [title]="'home.preConfigured.developmentTools' | translate" [shadow]="true">
+        <div class="space-y-3 text-sm">
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">ESLint</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.linting' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">Prettier</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.formatting' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">Husky</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.gitHooks' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">TypeScript</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.typeSafety' | translate }}</span>
+          </div>
+          <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
+            <span class="font-mono text-gray-700">PWA Config</span>
+            <span class="text-gray-500">{{ 'home.preConfigured.serviceWorker' | translate }}</span>
+          </div>
+        </div>
+      </app-card>
+    </div>
+
+    <!-- Path Aliases -->
+    <div class="mt-8 max-w-4xl mx-auto">
+      <app-card [title]="'home.pathAliases.title' | translate" [shadow]="true">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <div class="bg-gray-50 p-3 rounded font-mono">
+            <span class="text-purple-600">{{ 'home.pathAliases.core' | translate }}</span>
+          </div>
+          <div class="bg-gray-50 p-3 rounded font-mono">
+            <span class="text-purple-600">{{ 'home.pathAliases.shared' | translate }}</span>
+          </div>
+          <div class="bg-gray-50 p-3 rounded font-mono">
+            <span class="text-purple-600">{{ 'home.pathAliases.features' | translate }}</span>
+          </div>
+          <div class="bg-gray-50 p-3 rounded font-mono">
+            <span class="text-purple-600">{{ 'home.pathAliases.environments' | translate }}</span>
+          </div>
+        </div>
+      </app-card>
+    </div>
+  </div>
+</section>
+
+<!-- Project Structure Section -->
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+        {{ 'home.projectStructure.title' | translate }}
+      </h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+        {{ 'home.projectStructure.subtitle' | translate }}
+      </p>
+    </div>
+
+    <div class="max-w-4xl mx-auto">
+      <app-card [shadow]="true">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-mono">
+          <div>
+            <div class="flex items-center mb-2">
+              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #3b82f6;"></ng-icon>
+              <span class="font-semibold">src/app/core/</span>
+            </div>
+            <ul class="ml-6 space-y-1 text-gray-600">
+              <li>├─ services/ (8 services)</li>
+              <li>├─ guards/ (auth guard)</li>
+              <li>├─ interceptors/ (4 types)</li>
+              <li>└─ i18n/ (translation system)</li>
+            </ul>
+          </div>
+
+          <div>
+            <div class="flex items-center mb-2">
+              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #a855f7;"></ng-icon>
+              <span class="font-semibold">src/app/shared/</span>
+            </div>
+            <ul class="ml-6 space-y-1 text-gray-600">
+              <li>├─ components/ (5 components)</li>
+              <li>├─ pipes/ (4 pipes)</li>
+              <li>├─ directives/ (2 directives)</li>
+              <li>└─ models/ (TypeScript interfaces)</li>
+            </ul>
+          </div>
+
+          <div>
+            <div class="flex items-center mb-2">
+              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #22c55e;"></ng-icon>
+              <span class="font-semibold">src/app/features/</span>
+            </div>
+            <ul class="ml-6 space-y-1 text-gray-600">
+              <li>├─ home/</li>
+              <li>├─ about/</li>
+              <li>├─ contact/</li>
+              <li>└─ auth/ (login, register, forgot)</li>
+            </ul>
+          </div>
+
+          <div>
+            <div class="flex items-center mb-2">
+              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #f97316;"></ng-icon>
+              <span class="font-semibold">src/app/layout/</span>
+            </div>
+            <ul class="ml-6 space-y-1 text-gray-600">
+              <li>├─ main-layout/ (header + footer)</li>
+              <li>└─ auth-layout/ (auth pages)</li>
+            </ul>
+          </div>
+        </div>
+      </app-card>
+    </div>
+  </div>
+</section>
+
+<!-- Interactive Examples Section -->
+<section class="py-20 bg-gray-50">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12 animate-fade-in">
+      <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-blue-600 mb-4">
+        <ng-icon name="heroBolt" size="28" style="color: white;"></ng-icon>
+      </div>
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
+        {{ 'home.interactiveExamples.title' | translate }}
+      </h2>
+      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+        {{ 'home.interactiveExamples.subtitle' | translate }}
+      </p>
+    </div>
+
+    <div class="max-w-5xl mx-auto">
+      <div class="bg-white rounded-xl shadow-lg p-8 md:p-10 border border-gray-200">
+        <div class="space-y-10">
+          <!-- Toast Examples -->
+          <div class="animate-slide-up">
+            <div class="flex items-center gap-3 mb-5">
+              <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
+                <ng-icon name="heroCheckCircle" size="20" style="color: #374151;"></ng-icon>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold text-gray-900">
+                  {{ 'home.interactiveExamples.toastNotifications.title' | translate }}
+                </h3>
+                <p class="text-sm text-gray-500">{{ 'home.interactiveExamples.toastNotifications.subtitle' | translate }}</p>
+              </div>
+            </div>
+            <p class="text-gray-600 mb-5">
+              {{ 'home.interactiveExamples.toastNotifications.description' | translate }}
+            </p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+              <app-button (click)="showSuccessToast()">
+                <span class="flex items-center gap-2">
+                  <ng-icon name="heroCheckCircle" size="16"></ng-icon>
+                  {{ 'home.interactiveExamples.toastNotifications.success' | translate }}
+                </span>
+              </app-button>
+              <app-button variant="danger" (click)="showErrorToast()">
+                <span class="flex items-center gap-2">
+                  <ng-icon name="heroCheckCircle" size="16"></ng-icon>
+                  {{ 'home.interactiveExamples.toastNotifications.error' | translate }}
+                </span>
+              </app-button>
+              <app-button variant="secondary" (click)="showWarningToast()">
+                <span class="flex items-center gap-2">
+                  <ng-icon name="heroCheckCircle" size="16"></ng-icon>
+                  {{ 'home.interactiveExamples.toastNotifications.warning' | translate }}
+                </span>
+              </app-button>
+              <app-button variant="outline" (click)="showInfoToast()">
+                <span class="flex items-center gap-2">
+                  <ng-icon name="heroCheckCircle" size="16"></ng-icon>
+                  {{ 'home.interactiveExamples.toastNotifications.info' | translate }}
+                </span>
+              </app-button>
+            </div>
+          </div>
+
+          <div class="border-t border-gray-200"></div>
+
+          <!-- Modal Examples -->
+          <div class="animate-slide-up animation-delay-200">
+            <div class="flex items-center gap-3 mb-5">
+              <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
+                <ng-icon name="heroCube" size="20" style="color: #374151;"></ng-icon>
+              </div>
+              <div>
+                <h3 class="text-xl font-semibold text-gray-900">
+                  {{ 'home.interactiveExamples.modalDialogs.title' | translate }}
+                </h3>
+                <p class="text-sm text-gray-500">{{ 'home.interactiveExamples.modalDialogs.subtitle' | translate }}</p>
+              </div>
+            </div>
+            <p class="text-gray-600 mb-5">
+              {{ 'home.interactiveExamples.modalDialogs.description' | translate }}
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <app-button (click)="showConfirmModal()" size="lg">
+                <span class="flex items-center gap-2 justify-center">
+                  <ng-icon name="heroShieldCheck" size="18"></ng-icon>
+                  {{ 'home.interactiveExamples.modalDialogs.showConfirm' | translate }}
+                </span>
+              </app-button>
+              <app-button variant="secondary" (click)="showAlertModal()" size="lg">
+                <span class="flex items-center gap-2 justify-center">
+                  <ng-icon name="heroBolt" size="18"></ng-icon>
+                  {{ 'home.interactiveExamples.modalDialogs.showAlert' | translate }}
+                </span>
+              </app-button>
+            </div>
+          </div>
+
+          <!-- Pro Tip -->
+          <div class="bg-blue-50 rounded-lg p-5 border border-blue-100">
+            <div class="flex items-start gap-3">
+              <div class="shrink-0">
+                <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
+                  <ng-icon name="heroBolt" size="16" style="color: white;"></ng-icon>
+                </div>
+              </div>
+              <div>
+                <h4 class="font-semibold text-gray-900 mb-1 text-sm">{{ 'home.interactiveExamples.proTip.title' | translate }}</h4>
+                <p class="text-sm text-gray-600">
+                  {{ 'home.interactiveExamples.proTip.description' | translate }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Getting Started Section -->
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-4 text-center">
+    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
+      {{ 'home.readyToBuild.title' | translate }}
+    </h2>
+    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+      {{ 'home.readyToBuild.subtitle' | translate }}
+    </p>
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <app-button [routerLink]="['/about']" size="lg">
+        {{ 'home.readyToBuild.learnMore' | translate }}
+      </app-button>
+      <app-button [routerLink]="['/contact']" variant="secondary" size="lg">
+        {{ 'home.readyToStart.contactUs' | translate }}
+      </app-button>
+    </div>
+  </div>
+</section>
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/home/home.component.ts'),
+      homeComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/home/home.component.html'),
+      homeComponentHtml
+    );
+  },
+
+  async createAboutComponent(config) {
+    const aboutComponentTs = `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroRocketLaunch,
+  heroPaintBrush,
+  heroShieldCheck,
+  heroBolt,
+  heroCodeBracket,
+  heroCheckCircle,
+} from '@ng-icons/heroicons/outline';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  imports: [CommonModule, RouterModule, NgIconComponent, TranslateModule, ButtonComponent],
+  viewProviders: [provideIcons({
+    heroRocketLaunch,
+    heroPaintBrush,
+    heroShieldCheck,
+    heroBolt,
+    heroCodeBracket,
+    heroCheckCircle,
+  })],
+  templateUrl: './about.component.html'
+})
+export class AboutComponent {
+  protected readonly projectName = '${config.projectName}';
+}`;
+
+    const aboutComponentHtml = `<!-- Hero Section -->
+<section class="relative py-16 bg-linear-to-br from-indigo-600 via-purple-600 to-pink-600 overflow-hidden">
+  <div class="absolute inset-0 opacity-10">
+    <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
+    <div class="absolute top-0 right-0 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
+    <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
+  </div>
+
+  <div class="relative container mx-auto px-4 text-center">
+    <div class="animate-fade-in">
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 drop-shadow-lg">
+        {{ 'about.title' | translate:{ projectName: projectName } }}
+      </h1>
+      <p class="text-lg md:text-xl text-purple-50 max-w-3xl mx-auto leading-relaxed">
+        {{ 'about.subtitle' | translate }}
+      </p>
+    </div>
+  </div>
+</section>
+
+<!-- Overview Section -->
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+      <!-- Project Overview Card -->
+      <div class="animate-slide-up">
+        <div class="bg-linear-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-100 h-full">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-12 h-12 rounded-lg bg-linear-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
+              <ng-icon name="heroRocketLaunch" size="24" style="color: white;"></ng-icon>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900">
+              {{ 'about.overview.title' | translate }}
+            </h2>
+          </div>
+          <p class="text-gray-700 mb-4 leading-relaxed">
+            {{ 'about.overview.paragraph1' | translate }}
+          </p>
+          <p class="text-gray-700 leading-relaxed">
+            {{ 'about.overview.paragraph2' | translate }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Features Card -->
+      <div class="animate-slide-up animation-delay-200">
+        <div class="bg-linear-to-br from-purple-50 to-pink-50 rounded-2xl p-8 border border-purple-100 h-full">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-12 h-12 rounded-lg bg-linear-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-lg">
+              <ng-icon name="heroCheckCircle" size="24" style="color: white;"></ng-icon>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900">
+              {{ 'about.features.title' | translate }}
+            </h2>
+          </div>
+          <ul class="space-y-4">
+            <li class="flex items-start gap-3">
+              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
+                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              </div>
+              <span class="text-gray-700">{{ 'about.features.standalone' | translate }}</span>
+            </li>
+            <li class="flex items-start gap-3">
+              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
+                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              </div>
+              <span class="text-gray-700">{{ 'about.features.tailwind' | translate }}</span>
+            </li>
+            <li class="flex items-start gap-3">
+              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
+                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              </div>
+              <span class="text-gray-700">{{ 'about.features.responsive' | translate }}</span>
+            </li>
+            <li class="flex items-start gap-3">
+              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
+                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              </div>
+              <span class="text-gray-700">{{ 'about.features.typescript' | translate }}</span>
+            </li>
+            <li class="flex items-start gap-3">
+              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
+                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              </div>
+              <span class="text-gray-700">{{ 'about.features.production' | translate }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Tech Stack Section -->
+<section class="py-20 bg-linear-to-br from-gray-50 to-gray-100">
+  <div class="container mx-auto px-4">
+    <div class="text-center mb-12 animate-fade-in">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+        {{ 'about.techStack.title' | translate }}
+      </h2>
+      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+        {{ 'home.techStack.title' | translate }}
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+      <!-- Angular -->
+      <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center">
+            <ng-icon name="heroCodeBracket" size="24" style="color: #dc2626;"></ng-icon>
+          </div>
+          <h3 class="text-xl font-bold text-gray-900">{{ 'home.techStack.angular.title' | translate }}</h3>
+        </div>
+        <p class="text-gray-600 text-sm">
+          {{ 'home.techStack.angular.description' | translate }}
+        </p>
+      </div>
+
+      <!-- Tailwind CSS -->
+      <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center">
+            <ng-icon name="heroPaintBrush" size="24" style="color: #0891b2;"></ng-icon>
+          </div>
+          <h3 class="text-xl font-bold text-gray-900">{{ 'home.techStack.tailwind.title' | translate }}</h3>
+        </div>
+        <p class="text-gray-600 text-sm">
+          {{ 'home.techStack.tailwind.description' | translate }}
+        </p>
+      </div>
+
+      <!-- TypeScript -->
+      <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+            <ng-icon name="heroShieldCheck" size="24" style="color: #2563eb;"></ng-icon>
+          </div>
+          <h3 class="text-xl font-bold text-gray-900">{{ 'home.techStack.typescript.title' | translate }}</h3>
+        </div>
+        <p class="text-gray-600 text-sm">
+          {{ 'home.techStack.typescript.description' | translate }}
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- CTA Section -->
+<section class="py-20 bg-white">
+  <div class="container mx-auto px-4 text-center">
+    <div class="max-w-3xl mx-auto animate-slide-up">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
+        {{ 'home.readyToStart.title' | translate }}
+      </h2>
+      <p class="text-xl text-gray-600 mb-8">
+        {{ 'home.readyToStart.subtitle' | translate }}
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <app-button [routerLink]="['/']" size="lg">
+          <span class="flex items-center gap-2">
+            <ng-icon name="heroRocketLaunch" size="20"></ng-icon>
+            {{ 'home.readyToStart.viewHome' | translate }}
+          </span>
+        </app-button>
+        <app-button [routerLink]="['/contact']" variant="secondary" size="lg">
+          <span class="flex items-center gap-2">
+            {{ 'home.readyToStart.contactUs' | translate }}
+            <ng-icon name="heroBolt" size="20"></ng-icon>
+          </span>
+        </app-button>
+      </div>
+    </div>
+  </div>
+</section>
+`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/about/about.component.ts'),
+      aboutComponentTs
+    );
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/about/about.component.html'),
+      aboutComponentHtml
+    );
+  },
+
+  async updateTsConfig(config) {
+    // Define path mapping configuration
+    const pathMappingConfig = `    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "@app/*": ["src/app/*"],
+      "@core/*": ["src/app/core/*"],
+      "@shared/*": ["src/app/shared/*"],
+      "@features/*": ["src/app/features/*"],
+      "@layout/*": ["src/app/layout/*"],
+      "@environments/*": ["src/environments/*"]
+    },`;
+
+    // Helper function to add path mappings to a tsconfig file
+    const addPathMappings = (content) => {
+      if (content.includes('"compilerOptions": {')) {
+        const compilerOptionsStart =
+          content.indexOf('"compilerOptions": {') + '"compilerOptions": {'.length;
+        const beforeOptions = content.substring(0, compilerOptionsStart);
+        const afterOptions = content.substring(compilerOptionsStart);
+        return beforeOptions + '\n' + pathMappingConfig + afterOptions;
+      }
+      return content;
+    };
+
+    // Update tsconfig.json (base config) - CRITICAL for IDE support
+    const tsConfigPath = path.join(config.fullPath, 'tsconfig.json');
+    let tsConfigContent = await fs.readFile(tsConfigPath, 'utf8');
+    tsConfigContent = addPathMappings(tsConfigContent);
+    await fs.writeFile(tsConfigPath, tsConfigContent);
+
+    // Update tsconfig.app.json
+    const tsConfigAppPath = path.join(config.fullPath, 'tsconfig.app.json');
+    let tsConfigAppContent = await fs.readFile(tsConfigAppPath, 'utf8');
+    tsConfigAppContent = addPathMappings(tsConfigAppContent);
+    await fs.writeFile(tsConfigAppPath, tsConfigAppContent);
+
+    // Update tsconfig.spec.json
+    const tsConfigSpecPath = path.join(config.fullPath, 'tsconfig.spec.json');
+    let tsConfigSpecContent = await fs.readFile(tsConfigSpecPath, 'utf8');
+    tsConfigSpecContent = addPathMappings(tsConfigSpecContent);
+    await fs.writeFile(tsConfigSpecPath, tsConfigSpecContent);
+  },
+
+  async setupLinting(config) {
+    // Read current package.json
+    const packageJsonPath = path.join(config.fullPath, 'package.json');
+    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+
+    // Add icons and PWA to regular dependencies
+    if (!packageJson.dependencies) {
+      packageJson.dependencies = {};
+    }
+    packageJson.dependencies['@ng-icons/core'] = '^29.7.0';
+    packageJson.dependencies['@ng-icons/heroicons'] = '^29.7.0';
+    packageJson.dependencies['@angular/service-worker'] = packageJson.dependencies['@angular/core'];
+
+    // Add linting dev dependencies
+    const lintingDependencies = {
+      '@eslint/js': '^9.23.0',
+      eslint: '^9.23.0',
+      'angular-eslint': '19.3.0',
+      'typescript-eslint': '^8.20.0',
+      prettier: '^3.5.3',
+      'eslint-config-prettier': '^10.1.2',
+      'prettier-plugin-tailwindcss': '^0.6.11',
+      husky: '^9.0.11',
+      'lint-staged': '^15.2.0',
+    };
+
+    // Add enhanced scripts
+    const enhancedScripts = {
+      lint: 'ng lint',
+      'lint:fix': 'ng lint --fix',
+      format: 'prettier --write "**/*.{ts,html,css,json,md}"',
+      'format:check': 'prettier --check "**/*.{ts,html,css,json,md}"',
+      'format:ts': 'prettier --write "**/*.ts"',
+      'code:check': 'npm run format:check && npm run lint',
+      'code:fix': 'npm run format && npm run lint:fix',
+      prepare: 'husky install || true',
+    };
+
+    // Add prettier configuration
+    const prettierConfig = {
+      printWidth: 100,
+      singleQuote: true,
+      trailingComma: 'es5',
+      tabWidth: 2,
+      semi: true,
+      arrowParens: 'always',
+      endOfLine: 'lf',
+      plugins: ['prettier-plugin-tailwindcss'],
+      overrides: [
+        {
+          files: '*.html',
+          options: {
+            parser: 'angular',
+          },
+        },
+      ],
+    };
+
+    // lint-staged configuration
+    const lintStagedConfig = {
+      '*.{ts,html}': ['prettier --write', 'eslint --fix'],
+      '*.css': ['prettier --write'],
+    };
+
+    // Update package.json
+    packageJson.devDependencies = {
+      ...packageJson.devDependencies,
+      ...lintingDependencies,
+    };
+    packageJson.scripts = { ...packageJson.scripts, ...enhancedScripts };
+    packageJson.prettier = prettierConfig;
+    packageJson['lint-staged'] = lintStagedConfig;
+
+    // Write updated package.json
+    await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+    // Configure angular.json for ESLint
+    await this.configureAngularJson(config);
+
+    // Create ESLint configuration (ESLint 9+ flat config)
+    const eslintConfig = `// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+const eslintConfigPrettier = require("eslint-config-prettier");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      eslintConfigPrettier,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      "@angular-eslint/component-class-suffix": [
+        "error",
+        {
+          "suffixes": ["Component", "App"]
+        }
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);
+`;
+
+    await fs.writeFile(path.join(config.fullPath, 'eslint.config.js'), eslintConfig);
+
+    // Create VS Code extensions recommendation
+    await fs.ensureDir(path.join(config.fullPath, '.vscode'));
+
+    const vscodeExtensions = {
+      recommendations: [
+        'angular.ng-template',
+        'esbenp.prettier-vscode',
+        'dbaeumer.vscode-eslint',
+        'bradlc.vscode-tailwindcss',
+      ],
+    };
+
+    await fs.writeFile(
+      path.join(config.fullPath, '.vscode/extensions.json'),
+      JSON.stringify(vscodeExtensions, null, 2)
+    );
+
+    // Create VS Code settings for format-on-save
+    const vscodeSettings = {
+      'editor.formatOnSave': true,
+      'editor.defaultFormatter': 'esbenp.prettier-vscode',
+      'editor.codeActionsOnSave': {
+        'source.fixAll.eslint': 'explicit',
+      },
+      '[typescript]': {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+      },
+      '[html]': {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+      },
+      '[css]': {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+      },
+      '[json]': {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+      },
+      '[jsonc]': {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+      },
+      'prettier.requireConfig': false,
+      'eslint.validate': ['javascript', 'typescript', 'html'],
+      'files.eol': '\\n',
+      'files.trimTrailingWhitespace': true,
+      'files.insertFinalNewline': true,
+    };
+
+    await fs.writeFile(
+      path.join(config.fullPath, '.vscode/settings.json'),
+      JSON.stringify(vscodeSettings, null, 2)
+    );
+
+    // Create .prettierignore file
+    const prettierIgnore = `# Build outputs
+dist/
+coverage/
+node_modules/
+
+# Generated files
+*.d.ts
+`;
+
+    await fs.writeFile(path.join(config.fullPath, '.prettierignore'), prettierIgnore);
+
+    // Create .prettierrc.json file for better IDE support
+    await fs.writeFile(
+      path.join(config.fullPath, '.prettierrc.json'),
+      JSON.stringify(prettierConfig, null, 2)
+    );
+
+    // Install linting packages if not skipping install
+    if (!config.skipInstall) {
+      await this.installLintingPackages(config);
+      await this.setupHusky(config);
+    }
+  },
+
+  async configureAngularJson(config) {
+    const angularJsonPath = path.join(config.fullPath, 'angular.json');
+    const angularJson = JSON.parse(await fs.readFile(angularJsonPath, 'utf8'));
+
+    // Add lint architect target
+    if (angularJson.projects && angularJson.projects[config.projectName]) {
+      angularJson.projects[config.projectName].architect.lint = {
+        builder: '@angular-eslint/builder:lint',
+        options: {
+          lintFilePatterns: ['src/**/*.ts', 'src/**/*.html'],
+        },
+      };
+    }
+
+    await fs.writeFile(angularJsonPath, JSON.stringify(angularJson, null, 2));
+  },
+
+  async installLintingPackages(config) {
+    const execa = require('execa');
+
+    try {
+      const packages = [
+        '@eslint/js@^9.23.0',
+        'eslint@^9.23.0',
+        'angular-eslint@19.3.0',
+        'typescript-eslint@^8.20.0',
+        'prettier@^3.5.3',
+        'eslint-config-prettier@^10.1.2',
+        'prettier-plugin-tailwindcss@^0.6.11',
+        'husky@^9.0.11',
+        'lint-staged@^15.2.0',
+      ];
+
+      await execa.command(`npm install ${packages.join(' ')} --save-dev`, {
+        cwd: config.fullPath,
+        stdio: 'pipe',
+      });
+    } catch (error) {
+      // Silently fail - packages will be installed when user runs npm install
+      // Note: Linting packages will be installed with npm install
+    }
+  },
+
+  async formatCode(config) {
+    const execa = require('execa');
+
+    try {
+      // Run prettier to format all generated files (including config files)
+      await execa.command(
+        'npx prettier --write "**/*.{ts,html,css,json}" --ignore-path .gitignore --log-level silent',
+        {
+          cwd: config.fullPath,
+          stdio: 'pipe',
+        }
+      );
+    } catch (error) {
+      // If prettier fails, it's not critical - user can run it manually
+      // Silent failure - user can run "npm run format" later
+    }
+  },
+
+  async setupHusky(config) {
+    const execa = require('execa');
+
+    try {
+      // Initialize husky
+      await execa.command('npx husky install', {
+        cwd: config.fullPath,
+        stdio: 'pipe',
+      });
+
+      // Create pre-commit hook
+      const preCommitHook = `#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+`;
+
+      await fs.ensureDir(path.join(config.fullPath, '.husky'));
+      await fs.writeFile(path.join(config.fullPath, '.husky/pre-commit'), preCommitHook, {
+        mode: 0o755,
+      });
+    } catch (error) {
+      // If husky setup fails, it's not critical
+      // Silent failure - user can run "npm run prepare" later
+    }
+  },
+
+  async setupPWA(config) {
+    // Create manifest.json
+    const manifest = {
+      name: config.projectName,
+      short_name: config.projectName,
+      theme_color: '#3b82f6',
+      background_color: '#ffffff',
+      display: 'standalone',
+      scope: '/',
+      start_url: '/',
+      description: `${config.projectName} - Built with Angular and Tailwind CSS`,
+      icons: [
+        {
+          src: 'assets/icons/icon-72x72.svg',
+          sizes: '72x72',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-96x96.svg',
+          sizes: '96x96',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-128x128.svg',
+          sizes: '128x128',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-144x144.svg',
+          sizes: '144x144',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-152x152.svg',
+          sizes: '152x152',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-192x192.svg',
+          sizes: '192x192',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-384x384.svg',
+          sizes: '384x384',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+        {
+          src: 'assets/icons/icon-512x512.svg',
+          sizes: '512x512',
+          type: 'image/svg+xml',
+          purpose: 'maskable any',
+        },
+      ],
+    };
+
+    // Write manifest to public directory (new Angular structure)
+    await fs.ensureDir(path.join(config.fullPath, 'public'));
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/manifest.webmanifest'),
+      JSON.stringify(manifest, null, 2)
+    );
+
+    // Create ngsw-config.json (Service Worker configuration)
+    const ngswConfig = {
+      $schema: './node_modules/@angular/service-worker/config/schema.json',
+      index: '/index.html',
+      assetGroups: [
+        {
+          name: 'app',
+          installMode: 'prefetch',
+          resources: {
+            files: ['/favicon.ico', '/index.html', '/manifest.webmanifest', '/*.css', '/*.js'],
+          },
+        },
+        {
+          name: 'assets',
+          installMode: 'lazy',
+          updateMode: 'prefetch',
+          resources: {
+            files: [
+              '/assets/**',
+              '/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)',
+            ],
+          },
+        },
+      ],
+      dataGroups: [
+        {
+          name: 'api',
+          urls: ['https://api.example.com/**'],
+          cacheConfig: {
+            maxSize: 100,
+            maxAge: '1h',
+            timeout: '10s',
+            strategy: 'freshness',
+          },
+        },
+      ],
+    };
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'ngsw-config.json'),
+      JSON.stringify(ngswConfig, null, 2)
+    );
+
+    // Generate PWA icons (as SVG for now - users can replace with actual PNGs)
+    await fs.ensureDir(path.join(config.fullPath, 'public/assets/icons'));
+
+    const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];
+    const firstLetter = config.projectName.charAt(0).toUpperCase();
+
+    for (const size of iconSizes) {
+      const iconSvg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+  <rect width="${size}" height="${size}" fill="#3B82F6" rx="${size * 0.2}"/>
+  <text x="50%" y="55%" text-anchor="middle" fill="white" font-size="${
+    size * 0.5
+  }" font-family="Arial, sans-serif" font-weight="bold" dominant-baseline="middle">
+    ${firstLetter}
+  </text>
+</svg>`;
+
+      // Save as SVG (users can convert to PNG later or use tools)
+      await fs.writeFile(
+        path.join(config.fullPath, `public/assets/icons/icon-${size}x${size}.svg`),
+        iconSvg
+      );
+    }
+
+    // Create a README for icons
+    const iconReadme = `# PWA Icons
+
+These are placeholder SVG icons for your PWA.
+
+## Generating PNG Icons
+
+You should replace these with actual PNG icons for better compatibility. You can:
+
+1. Use online tools like https://realfavicongenerator.net/
+2. Use a design tool to export PNG icons
+3. Use command-line tools like ImageMagick to convert SVGs to PNGs
+
+## Required Sizes
+
+- 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512
+
+Update the paths in \`manifest.webmanifest\` if you change the file format.
+`;
+
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/icons/README.md'), iconReadme);
+
+    // Update index.html to include manifest and theme
+    const indexHtmlPath = path.join(config.fullPath, 'src/index.html');
+    let indexHtml = await fs.readFile(indexHtmlPath, 'utf8');
+
+    if (!indexHtml.includes('manifest.webmanifest')) {
+      indexHtml = indexHtml.replace(
+        '</head>',
+        `  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#3b82f6">
+</head>`
+      );
+      await fs.writeFile(indexHtmlPath, indexHtml);
+    }
+
+    // Update angular.json to include service worker
+    const angularJsonPath = path.join(config.fullPath, 'angular.json');
+    const angularJson = JSON.parse(await fs.readFile(angularJsonPath, 'utf8'));
+
+    const projectName = Object.keys(angularJson.projects)[0];
+    const buildConfigs = angularJson.projects[projectName].architect.build.configurations;
+
+    // Add service worker to production configuration
+    if (buildConfigs && buildConfigs.production && !buildConfigs.production.serviceWorker) {
+      buildConfigs.production.serviceWorker = 'ngsw-config.json';
+    }
+
+    await fs.writeFile(angularJsonPath, JSON.stringify(angularJson, null, 2));
+  },
+};
+
+module.exports = starter;