create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/starter/index.js

@@ -1,81 +1,47 @@
 const fs = require('fs-extra');
 const path = require('path');
-const {
-  createContactComponent,
-  createRouting,
-  createAppConfig,
-  createAppComponent,
-  createStyles,
-} = require('./features');
+const base = require('../base');
 
-const {
-  createAuthInterceptor,
-  createErrorInterceptor,
-  createLoadingInterceptor,
-  createCachingInterceptor,
-  createToastService,
-  createToastComponent,
-  createLoadingService,
-  createCacheService,
-} = require('./advanced-features');
-
-const {
-  createModalService,
-  createModalComponent,
-  createTruncatePipe,
-  createClickOutsideDirective,
-  createTooltipDirective,
-} = require('./ui-features');
-
-const { createSEOService, createStructuredDataUtil, createRobotsTxt } = require('./seo-features');
-
-const {
-  createDefaultOGImage,
-  createFavicon,
-  createAppleTouchIcon,
-  createAndroidIcon,
-  createAndroidIconLarge,
-  createLogo,
-} = require('./seo-assets');
+// Import modular components
+const { createLayout, createAuthLayout } = require('./layout');
+const { createPages } = require('./pages');
+const { createI18n, installI18nPackages } = require('./i18n');
+const { createRouting, createAppConfig, createAppComponent, createStyles } = require('./app');
 
+/**
+ * Starter Template
+ * Extends base template with:
+ * - Professional layout (header/footer)
+ * - Authentication UI (login, register, forgot password)
+ * - Example pages (home, about, contact)
+ * - i18n support (English & Arabic with RTL)
+ *
+ * File Structure:
+ * - layout.js: Header, Footer, AuthLayout (Login, Register, Forgot Password)
+ * - pages.js: Home, About components
+ * - i18n.js: TranslationService and translation files (EN/AR)
+ * - features.js: Contact, Routes, AppConfig, AppComponent, Styles
+ */
 const starter = {
   info: {
     name: 'Starter',
     description: 'Professional Angular foundation with essential components and best practices',
     features: [
-      'Modern standalone Angular 20+ architecture with signals',
+      ...base.info.features,
       '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)',
-      'Comprehensive SEO service (meta tags, Open Graph, Twitter Cards)',
-      'Structured data (JSON-LD) for rich search results',
-      'Multi-language SEO with hreflang tags',
-      'robots.txt and favicon set included',
-      '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, SEO services',
-      'TypeScript interfaces and models',
-      'Responsive Tailwind design system',
-      'ESLint + Prettier + simple-git-hooks (pre-commit)',
-      '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();
@@ -84,40 +50,40 @@ const starter = {
       }
     };
 
-    // 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.createSEOFeatures(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);
+    // Step 1: Apply base template (infrastructure: services, guards, interceptors, etc.)
+    if (spinner) spinner.update('Setting up base infrastructure...');
+    await base.apply(config, null);
+
+    // Step 2: Create UI-specific directories
+    if (spinner) spinner.update('Setting up starter UI...');
+    await this.createUIDirectories(config);
+
+    // Step 3: Add i18n translations
+    await createI18n(config);
+    await installI18nPackages(config);
+
+    // Step 4: Create layout components (header, footer)
+    await createLayout(config);
+
+    // Step 5: Create auth layout (login, register, forgot password)
+    await createAuthLayout(config);
+
+    // Step 6: Create feature pages (home, about, contact)
+    await createPages(config);
+
+    // Step 7: Create app routing, config, component, styles
+    await createRouting(config);
+    await createAppConfig(config);
+    await createAppComponent(config);
+    await 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
+    // Step 8: Format code
+    await base.formatCode(config);
+
     if (spinner) spinner.stop();
 
-    // Show minimal, professional summary
+    // Show summary
     console.log('');
     completeStep('Angular 20+ project created');
     completeStep('Tailwind CSS v4 configured');
@@ -133,22 +99,9 @@ const starter = {
     console.log('');
   },
 
-  async createDirectoryStructure(config) {
+  async createUIDirectories(config) {
     const directories = [
-      'src/environments',
-      'src/app/core/services',
-      'src/app/core/guards',
       'src/app/core/i18n',
-      'src/app/core/interceptors',
-      'src/app/core/utils',
-      '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',
@@ -158,9 +111,7 @@ const starter = {
       'src/app/layout/header',
       'src/app/layout/footer',
       'src/app/layout/auth',
-      'public/assets/images',
       'public/assets/i18n',
-      'public/assets/icons',
     ];
 
     for (const dir of directories) {
@@ -168,2565 +119,7 @@ const starter = {
     }
   },
 
-  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 createSEOFeatures(config) {
-    // Create SEO Service
-    const seoService = createSEOService();
-    await fs.writeFile(
-      path.join(config.fullPath, 'src/app/core/services/seo.service.ts'),
-      seoService
-    );
-
-    // Create Structured Data Utility
-    const structuredDataUtil = createStructuredDataUtil();
-    await fs.writeFile(
-      path.join(config.fullPath, 'src/app/core/utils/structured-data.ts'),
-      structuredDataUtil
-    );
-
-    // Create robots.txt in public folder
-    const robotsTxt = createRobotsTxt();
-    await fs.writeFile(path.join(config.fullPath, 'public/robots.txt'), robotsTxt);
-
-    // Create default OG image (SVG as placeholder)
-    const ogImage = createDefaultOGImage(config.projectName);
-    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/og-default.svg'), ogImage);
-
-    // Create favicon
-    const favicon = createFavicon(config.projectName);
-    await fs.writeFile(path.join(config.fullPath, 'public/favicon.svg'), favicon);
-
-    // Create Apple Touch Icon (SVG as placeholder)
-    const appleTouchIcon = createAppleTouchIcon(config.projectName);
-    await fs.writeFile(
-      path.join(config.fullPath, 'public/assets/icons/apple-touch-icon.svg'),
-      appleTouchIcon
-    );
-
-    // Create Android Chrome icons (SVG as placeholder)
-    const androidIcon = createAndroidIcon(config.projectName);
-    await fs.writeFile(
-      path.join(config.fullPath, 'public/assets/icons/android-chrome-192x192.svg'),
-      androidIcon
-    );
-
-    const androidIconLarge = createAndroidIconLarge(config.projectName);
-    await fs.writeFile(
-      path.join(config.fullPath, 'public/assets/icons/android-chrome-512x512.svg'),
-      androidIconLarge
-    );
-
-    // Create logo
-    const logo = createLogo(config.projectName);
-    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/logo.svg'), logo);
-  },
-
-  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}}. All rights reserved.',
-      },
-      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}}. جميع الحقوق محفوظة.',
-      },
-      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';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-@Component({
-  selector: 'app-button',
-  standalone: true,
-  imports: [],
-  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-primary-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-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
-      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400',
-      outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white focus:ring-primary-500',
-      ghost: 'hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-400',
-      danger: 'bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500'
-    };
-
-    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';
-
-@Component({
-  selector: 'app-card',
-  standalone: true,
-  imports: [],
-  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';
-
-export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
-
-@Component({
-  selector: 'app-loading-spinner',
-  standalone: true,
-  imports: [],
-  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 = 'primary';
-
-  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 = {
-    primary: 'text-primary-600',
-    secondary: 'text-secondary-600',
-    accent: 'text-accent-600',
-    success: 'text-success-600',
-    danger: 'text-danger-600',
-    warning: 'text-warning-600',
-    info: 'text-info-600',
-    gray: 'text-gray-600',
-    white: 'text-white'
-  } 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.primary}\`.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 { 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: [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="flex rounded-lg">
-            <img src="assets/images/logo.svg" alt="Logo" class="h-10 w-10" />
-            <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-primary-600"
-            [routerLinkActiveOptions]="{exact: true}"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-600 transition-colors font-medium">
-            <ng-icon name="heroHome" size="18"></ng-icon>
-            {{ 'nav.home' | translate }}
-          </a>
-          <a
-            routerLink="/about"
-            routerLinkActive="text-primary-600"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-600 transition-colors font-medium">
-            <ng-icon name="heroInformationCircle" size="18"></ng-icon>
-            {{ 'nav.about' | translate }}
-          </a>
-          <a
-            routerLink="/contact"
-            routerLinkActive="text-primary-600"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-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-primary-600 transition-colors px-3 py-2 rounded-lg hover:bg-gray-100"
-            [class.text-primary-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-primary-50]="currentLang === lang.code"
-                    [class.text-primary-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-primary-600 transition-colors font-medium">
-              {{ 'nav.login' | translate }}
-            </a>
-            <a
-              routerLink="/auth/register"
-              class="bg-primary-600 hover:bg-primary-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-primary-600 transition-colors"
-              [class.text-primary-600]="userMenuOpen">
-              <div class="h-8 w-8 bg-primary-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-danger-600 hover:bg-danger-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-primary-600 bg-primary-50"
-          [routerLinkActiveOptions]="{exact: true}"
-          (click)="mobileMenuOpen = false"
-          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
-          {{ 'nav.home' | translate }}
-        </a>
-        <a
-          routerLink="/about"
-          routerLinkActive="text-primary-600 bg-primary-50"
-          (click)="mobileMenuOpen = false"
-          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
-          {{ 'nav.about' | translate }}
-        </a>
-        <a
-          routerLink="/contact"
-          routerLinkActive="text-primary-600 bg-primary-50"
-          (click)="mobileMenuOpen = false"
-          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-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-primary-50]="currentLang === lang.code"
-                [class.text-primary-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-primary-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-primary-600 text-white hover:bg-primary-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-danger-600 hover:bg-danger-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 { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-footer',
-  standalone: true,
-  imports: [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">
-          <img src="assets/images/logo.svg" alt="Logo" class="h-10 w-10" />
-          <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-primary-600 transition-colors text-sm">
-              {{ 'nav.home' | translate }}
-            </a>
-          </li>
-          <li>
-            <a href="/about" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
-              {{ 'nav.about' | translate }}
-            </a>
-          </li>
-          <li>
-            <a href="/contact" class="text-gray-600 hover:text-primary-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-primary-600 transition-colors text-sm">
-              Angular
-            </a>
-          </li>
-          <li>
-            <a href="https://tailwindcss.com" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
-              Tailwind CSS
-            </a>
-          </li>
-          <li>
-            <a href="https://typescript.org" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
-              TypeScript
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <!-- Bottom Bar -->
-    <div class="border-t border-gray-200 mt-8 pt-8">
-      <p class="text-gray-500 text-sm text-center">
-        {{ 'footer.copyright' | translate:{ year: currentYear, name: projectName } }}
-      </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 { RouterOutlet } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-auth-layout',
-  standalone: true,
-  imports: [RouterOutlet, TranslateModule],
-  template: \`
-    <div class="min-h-screen bg-linear-to-br from-primary-500 via-accent-600 to-secondary-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-primary-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-primary-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 { 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: [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"
-        autocomplete="email"
-        [placeholder]="'auth.login.email' | translate"
-        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
-        [class.border-danger-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-danger-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"
-          autocomplete="current-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-primary-500 focus:border-transparent transition-colors"
-          [class.border-danger-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-danger-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-primary-600 focus:ring-primary-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-primary-600 hover:text-primary-700">
-        {{ '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-danger-100 border border-danger-300 text-danger-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-primary-600 hover:text-primary-700 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 { 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: [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"
-        autocomplete="given-name"
-        [placeholder]="'auth.register.firstName' | translate"
-        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-      <input
-        type="text"
-        formControlName="lastName"
-        autocomplete="family-name"
-        [placeholder]="'auth.register.lastName' | translate"
-        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-    </div>
-    <input
-      type="email"
-      formControlName="email"
-      autocomplete="email"
-      [placeholder]="'auth.register.email' | translate"
-      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
-    <input
-      type="password"
-      formControlName="password"
-      autocomplete="new-password"
-      [placeholder]="'auth.register.password' | translate"
-      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-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-primary-600 hover:text-primary-700">
-        {{ '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 { 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: [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"
-      autocomplete="email"
-      [placeholder]="'auth.forgot.email' | translate"
-      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-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-primary-600 hover:text-primary-700">
-        {{ '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">
@@ -2736,1407 +129,6 @@ export class ForgotPasswordComponent {
 
     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'],
-      // Suppress CSS linting warnings for Tailwind CSS directives
-      'css.lint.unknownAtRules': 'ignore',
-    };
-
-    // 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, OnInit, inject } from '@angular/core';
-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';
-import { SeoService } from '@core/services/seo.service';
-
-@Component({
-  selector: 'app-home',
-  standalone: true,
-  imports: [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 implements OnInit {
-  protected readonly projectName = '${config.projectName}';
-
-  private toast = inject(ToastService);
-  private modal = inject(ModalService);
-  private seo = inject(SeoService);
-
-  ngOnInit(): void {
-    // Set SEO meta tags for Home page
-    this.seo.updateMeta({
-      title: 'Home',
-      description: 'Welcome to ${config.projectName} - A modern Angular application with Tailwind CSS, SEO optimization, and i18n support.',
-      keywords: 'angular, tailwind, seo, i18n, typescript',
-      ogType: 'website'
-    });
-  }
-
-  // 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-primary-600 via-secondary-600 to-accent-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-accent-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
-    <div class="absolute top-0 -right-4 w-72 h-72 bg-warning-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-accent-400 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-primary-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-primary-100 flex items-center justify-center">
-              <ng-icon name="heroRocketLaunch" size="24" style="color: var(--color-primary-600);"></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-accent-100 flex items-center justify-center">
-              <ng-icon name="heroGlobeAlt" size="24" style="color: var(--color-accent-600);"></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-success-100 flex items-center justify-center">
-              <ng-icon name="heroServer" size="24" style="color: var(--color-success-600);"></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-secondary-100 flex items-center justify-center">
-              <ng-icon name="heroPaintBrush" size="24" style="color: var(--color-secondary-600);"></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-accent-100 flex items-center justify-center">
-              <ng-icon name="heroCube" size="24" style="color: var(--color-accent-600);"></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-primary-100 flex items-center justify-center">
-              <ng-icon name="heroShieldCheck" size="24" style="color: var(--color-primary-600);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-success-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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: var(--color-primary-500);"></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">simple-git-hooks</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 style="color: var(--color-accent-600);">{{ 'home.pathAliases.core' | translate }}</span>
-          </div>
-          <div class="bg-gray-50 p-3 rounded font-mono">
-            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.shared' | translate }}</span>
-          </div>
-          <div class="bg-gray-50 p-3 rounded font-mono">
-            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.features' | translate }}</span>
-          </div>
-          <div class="bg-gray-50 p-3 rounded font-mono">
-            <span style="color: var(--color-accent-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: var(--color-primary-500);"></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: var(--color-accent-500);"></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: var(--color-success-500);"></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: var(--color-warning-500);"></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-primary-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" class="text-gray-700"></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" class="text-gray-700"></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-info-50 rounded-lg p-5 border border-info-100">
-            <div class="flex items-start gap-3">
-              <div class="shrink-0">
-                <div class="w-8 h-8 rounded-lg bg-primary-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, OnInit, inject } from '@angular/core';
-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';
-import { SeoService } from '@core/services/seo.service';
-
-@Component({
-  selector: 'app-about',
-  standalone: true,
-  imports: [RouterModule, NgIconComponent, TranslateModule, ButtonComponent],
-  viewProviders: [provideIcons({
-    heroRocketLaunch,
-    heroPaintBrush,
-    heroShieldCheck,
-    heroBolt,
-    heroCodeBracket,
-    heroCheckCircle,
-  })],
-  templateUrl: './about.component.html'
-})
-export class AboutComponent implements OnInit {
-  protected readonly projectName = '${config.projectName}';
-  private seo = inject(SeoService);
-
-  ngOnInit(): void {
-    // Set SEO meta tags for About page
-    this.seo.updateMeta({
-      title: 'About Us',
-      description: 'Learn more about ${config.projectName} and our mission to create modern web applications.',
-      keywords: 'about, team, mission, company',
-      ogType: 'website'
-    });
-  }
-}`;
-
-    const aboutComponentHtml = `<!-- Hero Section -->
-<section class="relative py-16 bg-linear-to-br from-primary-600 via-accent-600 to-secondary-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-warning-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-accent-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-accent-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-primary-50 to-accent-50 rounded-2xl p-8 border border-primary-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-primary-500 to-accent-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-accent-50 to-secondary-50 rounded-2xl p-8 border border-accent-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-accent-500 to-secondary-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-success-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: var(--color-success-600);"></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-success-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: var(--color-success-600);"></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-success-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: var(--color-success-600);"></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-success-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: var(--color-success-600);"></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-success-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: var(--color-success-600);"></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-danger-100 flex items-center justify-center">
-            <ng-icon name="heroCodeBracket" size="24" style="color: var(--color-danger-600);"></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-secondary-100 flex items-center justify-center">
-            <ng-icon name="heroPaintBrush" size="24" style="color: var(--color-secondary-600);"></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-primary-100 flex items-center justify-center">
-            <ng-icon name="heroShieldCheck" size="24" style="color: var(--color-primary-600);"></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',
-      'simple-git-hooks': '^2.11.1',
-    };
-
-    // 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: 'simple-git-hooks',
-    };
-
-    // 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',
-          },
-        },
-      ],
-    };
-
-    // simple-git-hooks configuration (lightweight pre-commit hooks)
-    const simpleGitHooksConfig = {
-      'pre-commit': 'npm run lint',
-    };
-
-    // Update package.json
-    packageJson.devDependencies = {
-      ...packageJson.devDependencies,
-      ...lintingDependencies,
-    };
-    packageJson.scripts = { ...packageJson.scripts, ...enhancedScripts };
-    packageJson.prettier = prettierConfig;
-    packageJson['simple-git-hooks'] = simpleGitHooksConfig;
-
-    // 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,
-      // Suppress CSS linting warnings for Tailwind CSS directives
-      'css.lint.unknownAtRules': 'ignore',
-    };
-
-    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);
-    }
-  },
-
-  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',
-        'simple-git-hooks@^2.11.1',
-      ];
-
-      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 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/android-chrome-192x192.svg',
-          sizes: '192x192',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/android-chrome-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;