create-ng-tailwind 2.0.2 → 3.0.0

package/lib/templates/starter/index.js

@@ -27,6 +27,17 @@ const {
   createTooltipDirective,
 } = require('./ui-features');
 
+const { createSEOService, createStructuredDataUtil, createRobotsTxt } = require('./seo-features');
+
+const {
+  createDefaultOGImage,
+  createFavicon,
+  createAppleTouchIcon,
+  createAndroidIcon,
+  createAndroidIconLarge,
+  createLogo,
+} = require('./seo-assets');
+
 const starter = {
   info: {
     name: 'Starter',
@@ -37,6 +48,10 @@ const starter = {
       '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)',
@@ -46,7 +61,7 @@ const starter = {
       'Authentication UI (Login, Register, Forgot Password)',
       '3 example pages (Home, About, Contact)',
       'Reactive forms with validation',
-      'API, Auth, Storage, Loading, Cache services',
+      'API, Auth, Storage, Loading, Cache, SEO services',
       'TypeScript interfaces and models',
       'Responsive Tailwind design system',
       'ESLint + Prettier + Husky pre-commit hooks',
@@ -74,6 +89,7 @@ const starter = {
     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);
@@ -97,17 +113,18 @@ const starter = {
     await this.setupLinting(config);
     await this.setupPWA(config);
     await this.formatCode(config);
-    
+
     // Stop spinner and show summary
     if (spinner) spinner.stop();
-    
+
     // Show minimal, professional summary
     console.log('');
     completeStep('Angular 20+ project created');
     completeStep('Tailwind CSS v4 configured');
     completeStep('i18n translation support (English & Arabic)');
+    completeStep('SEO optimization (meta tags, Open Graph, structured data)');
     completeStep('HTTP interceptors (Auth, Error, Loading, Cache)');
-    completeStep('Core services (8 services)');
+    completeStep('Core services (9 services including SEO)');
     completeStep('UI components (Button, Card, Toast, Modal, Spinner)');
     completeStep('Utility pipes & directives');
     completeStep('Authentication pages & guards');
@@ -123,6 +140,7 @@ const starter = {
       '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',
@@ -142,8 +160,7 @@ const starter = {
       'src/app/layout/auth',
       'public/assets/images',
       'public/assets/i18n',
-      'public/images',
-      'public/styles',
+      'public/assets/icons',
     ];
 
     for (const dir of directories) {
@@ -545,6 +562,58 @@ export class 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);
@@ -1037,8 +1106,7 @@ export class TranslationService {
           'Built with Angular and Tailwind CSS. A modern, fast, and responsive web application starter template.',
         quickLinks: 'Quick Links',
         builtWith: 'Built With',
-        copyright: '© {{year}} {{name}}. Created with',
-        madeWith: 'Made with ❤️ by developers, for developers',
+        copyright: '© {{year}} {{name}}. All rights reserved.',
       },
       language: {
         select: 'Select Language',
@@ -1354,8 +1422,7 @@ export class TranslationService {
         description: 'مبني بـ Angular و Tailwind CSS. قالب تطبيق ويب حديث وسريع ومتجاوب.',
         quickLinks: 'روابط سريعة',
         builtWith: 'مبني بـ',
-        copyright: '© {{year}} {{name}}. تم الإنشاء باستخدام',
-        madeWith: 'صُنع بـ ❤️ من قبل المطورين، للمطورين',
+        copyright: '© {{year}} {{name}}. جميع الحقوق محفوظة.',
       },
       language: {
         select: 'اختر اللغة',
@@ -1433,7 +1500,6 @@ export const roleGuard = (requiredRole: string): CanActivateFn => {
   async createSharedComponents(config) {
     // Button Component
     const buttonComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -1441,7 +1507,7 @@ export type ButtonSize = 'sm' | 'md' | 'lg';
 @Component({
   selector: 'app-button',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   template: \`
     <button
       [class]="buttonClasses"
@@ -1471,7 +1537,7 @@ export class ButtonComponent {
   @Output() clicked = new EventEmitter<Event>();
 
   get buttonClasses(): string {
-    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+    const 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',
@@ -1480,11 +1546,11 @@ export class ButtonComponent {
     };
 
     const variantClasses = {
-      primary: 'bg-blue-600 text-white hover:bg-blue-700',
-      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
-      outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white',
-      ghost: 'hover:bg-gray-100 hover:text-gray-900',
-      danger: 'bg-red-600 text-white hover:bg-red-700'
+      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' : '';
@@ -1506,12 +1572,11 @@ export class ButtonComponent {
 
     // Card Component
     const cardComponent = `import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-card',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   template: \`
     <div [class]="cardClasses">
       @if (title || subtitle) {
@@ -1569,14 +1634,13 @@ export class CardComponent {
 
     // Loading Spinner Component
     const spinnerComponent = `import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
 
 @Component({
   selector: 'app-loading-spinner',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   template: \`
     <div [class]="containerClasses">
       <svg [class]="spinnerClasses" fill="none" viewBox="0 0 24 24">
@@ -1602,7 +1666,7 @@ export class LoadingSpinnerComponent {
   @Input() size: SpinnerSize = 'md';
   @Input() text?: string;
   @Input() centered = false;
-  @Input() color = 'blue';
+  @Input() color = 'primary';
 
   private readonly sizeClasses = {
     sm: 'h-4 w-4',
@@ -1612,11 +1676,15 @@ export class LoadingSpinnerComponent {
   } as const;
 
   private readonly colorClasses = {
-    blue: 'text-blue-600',
+    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',
-    green: 'text-green-600',
-    red: 'text-red-600'
+    white: 'text-white'
   } as const;
 
   protected readonly textClasses = 'text-sm text-gray-600';
@@ -1631,7 +1699,7 @@ export class LoadingSpinnerComponent {
 
   get spinnerClasses(): string {
     const baseClasses = 'animate-spin';
-    return \`\${baseClasses} \${this.sizeClasses[this.size]} \${this.colorClasses[this.color as keyof typeof this.colorClasses] || this.colorClasses.blue}\`.trim();
+    return \`\${baseClasses} \${this.sizeClasses[this.size]} \${this.colorClasses[this.color as keyof typeof this.colorClasses] || this.colorClasses.primary}\`.trim();
   }
 }`;
 
@@ -1807,7 +1875,6 @@ export interface ContactFormData {
   async createLayout(config) {
     // Header Component with Authentication and Language Switcher
     const headerComponentTs = `import { Component, inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterModule, Router } from '@angular/router';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage } from '@ng-icons/heroicons/outline';
@@ -1825,7 +1892,7 @@ interface User {
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [CommonModule, RouterModule, NgIconComponent, TranslateModule],
+  imports: [RouterModule, NgIconComponent, TranslateModule],
   viewProviders: [provideIcons({ heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage })],
   templateUrl: './header.component.html'
 })
@@ -1892,7 +1959,8 @@ export class HeaderComponent implements OnInit {
       <!-- Logo -->
       <div class="flex items-center space-x-4">
         <a routerLink="/" class="flex items-center space-x-3">
-          <div class="h-8 w-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+         <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">
@@ -1906,23 +1974,23 @@ export class HeaderComponent implements OnInit {
         <div class="ml-10 flex items-center space-x-8">
           <a
             routerLink="/"
-            routerLinkActive="text-blue-600"
+            routerLinkActive="text-primary-600"
             [routerLinkActiveOptions]="{exact: true}"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            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-blue-600"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            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-blue-600"
-            class="flex items-center gap-1.5 text-gray-700 hover:text-blue-600 transition-colors font-medium">
+            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>
@@ -1936,8 +2004,8 @@ export class HeaderComponent implements OnInit {
         <div class="hidden md:block relative">
           <button
             (click)="langMenuOpen = !langMenuOpen"
-            class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 transition-colors px-3 py-2 rounded-lg hover:bg-gray-100"
-            [class.text-blue-600]="langMenuOpen"
+            class="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>
@@ -1952,8 +2020,8 @@ export class HeaderComponent implements OnInit {
                   <button
                     (click)="changeLanguage(lang.code)"
                     class="w-full text-left px-4 py-2 text-sm transition-colors flex items-center justify-between"
-                    [class.bg-blue-50]="currentLang === lang.code"
-                    [class.text-blue-600]="currentLang === lang.code"
+                    [class.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">
@@ -1978,12 +2046,12 @@ export class HeaderComponent implements OnInit {
           @if (!isAuthenticated) {
             <a
               routerLink="/auth/login"
-              class="text-gray-700 hover:text-blue-600 transition-colors font-medium">
+              class="text-gray-700 hover:text-primary-600 transition-colors font-medium">
               {{ 'nav.login' | translate }}
             </a>
             <a
               routerLink="/auth/register"
-              class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
+              class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
               {{ 'nav.register' | translate }}
             </a>
           }
@@ -1993,9 +2061,9 @@ export class HeaderComponent implements OnInit {
             <div class="relative">
             <button
               (click)="userMenuOpen = !userMenuOpen"
-              class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 transition-colors"
-              [class.text-blue-600]="userMenuOpen">
-              <div class="h-8 w-8 bg-blue-600 rounded-full flex items-center justify-center">
+              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>
@@ -2020,7 +2088,7 @@ export class HeaderComponent implements OnInit {
                 <hr class="my-1">
                 <button
                   (click)="onLogout()"
-                  class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
+                  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>
@@ -2051,24 +2119,24 @@ export class HeaderComponent implements OnInit {
         <!-- Navigation Links -->
         <a
           routerLink="/"
-          routerLinkActive="text-blue-600 bg-blue-50"
+          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-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          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-blue-600 bg-blue-50"
+          routerLinkActive="text-primary-600 bg-primary-50"
           (click)="mobileMenuOpen = false"
-          class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          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-blue-600 bg-blue-50"
+          routerLinkActive="text-primary-600 bg-primary-50"
           (click)="mobileMenuOpen = false"
-          class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+          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>
 
@@ -2081,8 +2149,8 @@ export class HeaderComponent implements OnInit {
               <button
                 (click)="changeLanguage(lang.code)"
                 class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between"
-                [class.bg-blue-50]="currentLang === lang.code"
-                [class.text-blue-600]="currentLang === lang.code"
+                [class.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">
@@ -2105,13 +2173,13 @@ export class HeaderComponent implements OnInit {
           <a
             routerLink="/auth/login"
             (click)="mobileMenuOpen = false"
-            class="px-3 py-2 rounded-lg text-gray-700 hover:text-blue-600 hover:bg-gray-100 transition-colors font-medium">
+            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-blue-600 text-white hover:bg-blue-700 transition-colors font-medium text-center">
+            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>
         }
@@ -2126,7 +2194,7 @@ export class HeaderComponent implements OnInit {
           </button>
           <button
             (click)="onLogout(); mobileMenuOpen = false"
-            class="w-full text-left px-3 py-2 rounded-lg text-red-600 hover:bg-red-50 transition-colors">
+            class="w-full text-left px-3 py-2 rounded-lg text-danger-600 hover:bg-danger-50 transition-colors">
             {{ 'nav.logout' | translate }}
           </button>
         }
@@ -2160,13 +2228,12 @@ export class HeaderComponent implements OnInit {
 
     // Footer Component
     const footerComponentTs = `import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [CommonModule, TranslateModule],
+  imports: [TranslateModule],
   templateUrl: './footer.component.html'
 })
 export class FooterComponent {
@@ -2181,8 +2248,7 @@ export class FooterComponent {
       <!-- Company Info -->
       <div>
         <div class="flex items-center space-x-3 mb-4">
-          <div class="h-8 w-8 bg-linear-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-          </div>
+          <img src="assets/images/logo.svg" alt="Logo" class="h-10 w-10" />
           <span class="text-xl font-semibold text-gray-900">
             {{ projectName }}
           </span>
@@ -2199,17 +2265,17 @@ export class FooterComponent {
         </h3>
         <ul class="space-y-2">
           <li>
-            <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+            <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-blue-600 transition-colors text-sm">
+            <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-blue-600 transition-colors text-sm">
+            <a href="/contact" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
               {{ 'nav.contact' | translate }}
             </a>
           </li>
@@ -2223,17 +2289,17 @@ export class FooterComponent {
         </h3>
         <ul class="space-y-2">
           <li>
-            <a href="https://angular.dev" target="_blank" class="text-gray-600 hover:text-blue-600 transition-colors text-sm">
+            <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-blue-600 transition-colors text-sm">
+            <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-blue-600 transition-colors text-sm">
+            <a href="https://typescript.org" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
               TypeScript
             </a>
           </li>
@@ -2242,13 +2308,10 @@ export class FooterComponent {
     </div>
 
     <!-- Bottom Bar -->
-    <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
-      <p class="text-gray-500 text-sm">
+    <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>
-      <p class="text-gray-500 text-sm mt-2 md:mt-0">
-        {{ 'footer.madeWith' | translate }}
-      </p>
     </div>
   </div>
 </footer>
@@ -2268,16 +2331,15 @@ export class FooterComponent {
   async createAuthLayout(config) {
     // Auth Layout Component
     const authLayoutComponent = `import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-auth-layout',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, TranslateModule],
+  imports: [RouterOutlet, TranslateModule],
   template: \`
-    <div class="min-h-screen bg-linear-to-br from-blue-500 via-purple-600 to-indigo-700 flex items-center justify-center p-4">
+    <div class="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 -->
@@ -2286,7 +2348,7 @@ import { TranslateModule } from '@ngx-translate/core';
             <span class="text-2xl font-bold text-white">{{ firstLetter }}</span>
           </div>
           <h1 class="text-2xl font-bold text-white">{{ projectName }}</h1>
-          <p class="text-blue-100 mt-2">{{ 'auth.layout.welcome' | translate }}</p>
+          <p class="text-primary-100 mt-2">{{ 'auth.layout.welcome' | translate }}</p>
         </div>
 
         <!-- Auth Form Container -->
@@ -2295,7 +2357,7 @@ import { TranslateModule } from '@ngx-translate/core';
         </div>
 
         <!-- Footer -->
-        <div class="text-center mt-8 text-blue-100 text-sm">
+        <div class="text-center mt-8 text-primary-100 text-sm">
           <p>{{ 'auth.layout.copyright' | translate:{ year: currentYear, name: projectName } }}</p>
         </div>
       </div>
@@ -2315,7 +2377,6 @@ export class AuthLayoutComponent {
 
     // Login Component
     const loginComponentTs = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -2324,7 +2385,7 @@ import { ButtonComponent } from '@shared/components/button/button.component';
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
   templateUrl: './login.component.html'
 })
 export class LoginComponent {
@@ -2391,11 +2452,12 @@ export class LoginComponent {
         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-blue-500 focus:border-transparent transition-colors"
-        [class.border-red-500]="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
+        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-red-600">
+        <div class="mt-1 text-sm text-danger-600">
           @if (loginForm.get('email')?.errors?.['required']) {
             <span>{{ 'auth.validation.emailRequired' | translate }}</span>
           }
@@ -2416,9 +2478,10 @@ export class LoginComponent {
           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-blue-500 focus:border-transparent transition-colors"
-          [class.border-red-500]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
+          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()"
@@ -2438,7 +2501,7 @@ export class LoginComponent {
         </button>
       </div>
       @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
-        <div class="mt-1 text-sm text-red-600">
+        <div class="mt-1 text-sm text-danger-600">
           @if (loginForm.get('password')?.errors?.['required']) {
             <span>{{ 'auth.validation.passwordRequired' | translate }}</span>
           }
@@ -2455,10 +2518,10 @@ export class LoginComponent {
         <input
           type="checkbox"
           formControlName="rememberMe"
-          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+          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-blue-600 hover:text-blue-500">
+      <a routerLink="/auth/forgot-password" class="text-sm text-primary-600 hover:text-primary-700">
         {{ 'auth.login.forgotPassword' | translate }}
       </a>
     </div>
@@ -2474,7 +2537,7 @@ export class LoginComponent {
 
     <!-- Error Message -->
     @if (errorMessage) {
-      <div class="p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm">
+      <div class="p-3 bg-danger-100 border border-danger-300 text-danger-700 rounded-lg text-sm">
         {{ errorMessage }}
       </div>
     }
@@ -2484,7 +2547,7 @@ export class LoginComponent {
   <div class="text-center pt-4 border-t border-gray-200">
     <p class="text-sm text-gray-600">
       {{ 'auth.login.noAccount' | translate }}
-      <a routerLink="/auth/register" class="text-blue-600 hover:text-blue-500 font-medium">
+      <a routerLink="/auth/register" class="text-primary-600 hover:text-primary-700 font-medium">
         {{ 'auth.login.createAccount' | translate }}
       </a>
     </p>
@@ -2504,7 +2567,6 @@ export class LoginComponent {
 
     // Register Component
     const registerComponentTs = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -2513,7 +2575,7 @@ import { ButtonComponent } from '@shared/components/button/button.component';
 @Component({
   selector: 'app-register',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
   templateUrl: './register.component.html'
 })
 export class RegisterComponent {
@@ -2537,29 +2599,33 @@ export class RegisterComponent {
       <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-blue-500 focus:border-transparent">
+        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-blue-500 focus:border-transparent">
+        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-blue-500 focus:border-transparent">
+      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-blue-500 focus:border-transparent">
+      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-blue-600 hover:text-blue-500">
+      <a routerLink="/auth/login" class="text-primary-600 hover:text-primary-700">
         {{ 'auth.register.hasAccount' | translate }}
       </a>
     </div>
@@ -2579,7 +2645,6 @@ export class RegisterComponent {
 
     // Forgot Password Component
     const forgotPasswordComponentTs = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -2588,7 +2653,7 @@ import { ButtonComponent } from '@shared/components/button/button.component';
 @Component({
   selector: 'app-forgot-password',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
   templateUrl: './forgot-password.component.html'
 })
 export class ForgotPasswordComponent {
@@ -2606,13 +2671,14 @@ export class ForgotPasswordComponent {
     <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-blue-500 focus:border-transparent">
+      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-blue-600 hover:text-blue-500">
+      <a routerLink="/auth/login" class="text-primary-600 hover:text-primary-700">
         {{ 'auth.forgot.backToLogin' | translate }}
       </a>
     </div>
@@ -2708,6 +2774,8 @@ export class ForgotPasswordComponent {
       '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
@@ -2734,8 +2802,7 @@ export class ForgotPasswordComponent {
   },
 
   async createHomeComponent(config) {
-    const homeComponentTs = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+    const homeComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import {
@@ -2757,11 +2824,12 @@ 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: [CommonModule, RouterModule, NgIconComponent, TranslateModule, ButtonComponent, CardComponent],
+  imports: [RouterModule, NgIconComponent, TranslateModule, ButtonComponent, CardComponent],
   viewProviders: [provideIcons({
     heroRocketLaunch,
     heroPaintBrush,
@@ -2778,11 +2846,22 @@ import { ModalService } from '@core/services/modal.service';
   })],
   templateUrl: './home.component.html'
 })
-export class HomeComponent {
+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 {
@@ -2825,12 +2904,12 @@ export class HomeComponent {
 }`;
 
     const homeComponentHtml = `<!-- Hero Section -->
-<section class="relative py-20 bg-linear-to-br from-blue-600 via-indigo-600 to-purple-700 overflow-hidden">
+<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-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
-    <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
-    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
+    <div 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">
@@ -2838,7 +2917,7 @@ export class HomeComponent {
       <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 drop-shadow-lg">
         {{ 'home.hero.title' | translate:{ projectName: projectName } }}
       </h1>
-      <p class="text-lg md:text-xl lg:text-2xl text-blue-50 mb-8 max-w-3xl mx-auto leading-relaxed">
+      <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">
@@ -2877,8 +2956,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
-              <ng-icon name="heroRocketLaunch" size="24" style="color: #2563eb;"></ng-icon>
+            <div 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>
@@ -2892,8 +2971,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
-              <ng-icon name="heroGlobeAlt" size="24" style="color: #9333ea;"></ng-icon>
+            <div 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>
@@ -2907,8 +2986,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
-              <ng-icon name="heroServer" size="24" style="color: #16a34a;"></ng-icon>
+            <div 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>
@@ -2922,8 +3001,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center">
-              <ng-icon name="heroPaintBrush" size="24" style="color: #0891b2;"></ng-icon>
+            <div 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>
@@ -2937,8 +3016,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center">
-              <ng-icon name="heroCube" size="24" style="color: #4f46e5;"></ng-icon>
+            <div 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>
@@ -2952,8 +3031,8 @@ export class HomeComponent {
       <app-card [hover]="true" [shadow]="true">
         <div class="flex items-start space-x-4">
           <div class="shrink-0">
-            <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
-              <ng-icon name="heroShieldCheck" size="24" style="color: #2563eb;"></ng-icon>
+            <div 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>
@@ -2970,35 +3049,35 @@ export class HomeComponent {
       <app-card [title]="'home.coreServices.title' | translate" [shadow]="true">
         <ul class="space-y-2 text-gray-700">
           <li class="flex items-start">
-            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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: #22c55e;"></ng-icon>
+            <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>
@@ -3008,31 +3087,31 @@ export class HomeComponent {
       <app-card [title]="'home.sharedComponents.title' | translate" [shadow]="true">
         <ul class="space-y-2 text-gray-700">
           <li class="flex items-start">
-            <ng-icon name="heroCheckCircle" size="20" class="mr-2 mt-0.5" style="color: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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: #3b82f6;"></ng-icon>
+            <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>
@@ -3112,16 +3191,16 @@ export class HomeComponent {
       <app-card [title]="'home.pathAliases.title' | translate" [shadow]="true">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
           <div class="bg-gray-50 p-3 rounded font-mono">
-            <span class="text-purple-600">{{ 'home.pathAliases.core' | translate }}</span>
+            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.core' | translate }}</span>
           </div>
           <div class="bg-gray-50 p-3 rounded font-mono">
-            <span class="text-purple-600">{{ 'home.pathAliases.shared' | translate }}</span>
+            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.shared' | translate }}</span>
           </div>
           <div class="bg-gray-50 p-3 rounded font-mono">
-            <span class="text-purple-600">{{ 'home.pathAliases.features' | translate }}</span>
+            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.features' | translate }}</span>
           </div>
           <div class="bg-gray-50 p-3 rounded font-mono">
-            <span class="text-purple-600">{{ 'home.pathAliases.environments' | translate }}</span>
+            <span style="color: var(--color-accent-600);">{{ 'home.pathAliases.environments' | translate }}</span>
           </div>
         </div>
       </app-card>
@@ -3146,7 +3225,7 @@ export class HomeComponent {
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-mono">
           <div>
             <div class="flex items-center mb-2">
-              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #3b82f6;"></ng-icon>
+              <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">
@@ -3159,7 +3238,7 @@ export class HomeComponent {
 
           <div>
             <div class="flex items-center mb-2">
-              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #a855f7;"></ng-icon>
+              <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">
@@ -3172,7 +3251,7 @@ export class HomeComponent {
 
           <div>
             <div class="flex items-center mb-2">
-              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #22c55e;"></ng-icon>
+              <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">
@@ -3185,7 +3264,7 @@ export class HomeComponent {
 
           <div>
             <div class="flex items-center mb-2">
-              <ng-icon name="heroFolder" size="18" class="mr-2" style="color: #f97316;"></ng-icon>
+              <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">
@@ -3203,7 +3282,7 @@ export class HomeComponent {
 <section class="py-20 bg-gray-50">
   <div class="container mx-auto px-4">
     <div class="text-center mb-12 animate-fade-in">
-      <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-blue-600 mb-4">
+      <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">
@@ -3221,7 +3300,7 @@ export class HomeComponent {
           <div class="animate-slide-up">
             <div class="flex items-center gap-3 mb-5">
               <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
-                <ng-icon name="heroCheckCircle" size="20" style="color: #374151;"></ng-icon>
+                <ng-icon name="heroCheckCircle" size="20" class="text-gray-700"></ng-icon>
               </div>
               <div>
                 <h3 class="text-xl font-semibold text-gray-900">
@@ -3267,7 +3346,7 @@ export class HomeComponent {
           <div class="animate-slide-up animation-delay-200">
             <div class="flex items-center gap-3 mb-5">
               <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
-                <ng-icon name="heroCube" size="20" style="color: #374151;"></ng-icon>
+                <ng-icon name="heroCube" size="20" class="text-gray-700"></ng-icon>
               </div>
               <div>
                 <h3 class="text-xl font-semibold text-gray-900">
@@ -3296,10 +3375,10 @@ export class HomeComponent {
           </div>
 
           <!-- Pro Tip -->
-          <div class="bg-blue-50 rounded-lg p-5 border border-blue-100">
+          <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-blue-600 flex items-center justify-center">
+                <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>
@@ -3350,8 +3429,7 @@ export class HomeComponent {
   },
 
   async createAboutComponent(config) {
-    const aboutComponentTs = `import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+    const aboutComponentTs = `import { Component, OnInit, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import {
@@ -3364,11 +3442,12 @@ import {
 } 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: [CommonModule, RouterModule, NgIconComponent, TranslateModule, ButtonComponent],
+  imports: [RouterModule, NgIconComponent, TranslateModule, ButtonComponent],
   viewProviders: [provideIcons({
     heroRocketLaunch,
     heroPaintBrush,
@@ -3379,16 +3458,27 @@ import { ButtonComponent } from '@shared/components/button/button.component';
   })],
   templateUrl: './about.component.html'
 })
-export class AboutComponent {
+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-indigo-600 via-purple-600 to-pink-600 overflow-hidden">
+<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-yellow-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
-    <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
+    <div 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">
@@ -3396,7 +3486,7 @@ export class AboutComponent {
       <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 drop-shadow-lg">
         {{ 'about.title' | translate:{ projectName: projectName } }}
       </h1>
-      <p class="text-lg md:text-xl text-purple-50 max-w-3xl mx-auto leading-relaxed">
+      <p class="text-lg md:text-xl text-accent-50 max-w-3xl mx-auto leading-relaxed">
         {{ 'about.subtitle' | translate }}
       </p>
     </div>
@@ -3409,9 +3499,9 @@ export class AboutComponent {
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
       <!-- Project Overview Card -->
       <div class="animate-slide-up">
-        <div class="bg-linear-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-100 h-full">
+        <div class="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-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
+            <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">
@@ -3429,9 +3519,9 @@ export class AboutComponent {
 
       <!-- Features Card -->
       <div class="animate-slide-up animation-delay-200">
-        <div class="bg-linear-to-br from-purple-50 to-pink-50 rounded-2xl p-8 border border-purple-100 h-full">
+        <div class="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-purple-500 to-pink-600 flex items-center justify-center shadow-lg">
+            <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">
@@ -3440,32 +3530,32 @@ export class AboutComponent {
           </div>
           <ul class="space-y-4">
             <li class="flex items-start gap-3">
-              <div class="shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              <div 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-green-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              <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-green-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              <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-green-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              <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-green-100 flex items-center justify-center mt-0.5">
-                <ng-icon name="heroCheckCircle" size="16" style="color: #16a34a;"></ng-icon>
+              <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>
@@ -3492,8 +3582,8 @@ export class AboutComponent {
       <!-- Angular -->
       <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
         <div class="flex items-center gap-4 mb-4">
-          <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center">
-            <ng-icon name="heroCodeBracket" size="24" style="color: #dc2626;"></ng-icon>
+          <div 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>
@@ -3505,8 +3595,8 @@ export class AboutComponent {
       <!-- Tailwind CSS -->
       <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
         <div class="flex items-center gap-4 mb-4">
-          <div class="w-12 h-12 rounded-lg bg-cyan-100 flex items-center justify-center">
-            <ng-icon name="heroPaintBrush" size="24" style="color: #0891b2;"></ng-icon>
+          <div 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>
@@ -3518,8 +3608,8 @@ export class AboutComponent {
       <!-- TypeScript -->
       <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl border border-gray-100 transform hover:-translate-y-1 transition-all">
         <div class="flex items-center gap-4 mb-4">
-          <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
-            <ng-icon name="heroShieldCheck" size="24" style="color: #2563eb;"></ng-icon>
+          <div 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>
@@ -3806,6 +3896,8 @@ module.exports = tseslint.config(
       'files.eol': '\\n',
       'files.trimTrailingWhitespace': true,
       'files.insertFinalNewline': true,
+      // Suppress CSS linting warnings for Tailwind CSS directives
+      'css.lint.unknownAtRules': 'ignore',
     };
 
     await fs.writeFile(
@@ -3939,49 +4031,13 @@ npx lint-staged
       description: `${config.projectName} - Built with Angular and Tailwind CSS`,
       icons: [
         {
-          src: 'assets/icons/icon-72x72.svg',
-          sizes: '72x72',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-96x96.svg',
-          sizes: '96x96',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-128x128.svg',
-          sizes: '128x128',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-144x144.svg',
-          sizes: '144x144',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-152x152.svg',
-          sizes: '152x152',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-192x192.svg',
+          src: 'assets/icons/android-chrome-192x192.svg',
           sizes: '192x192',
           type: 'image/svg+xml',
           purpose: 'maskable any',
         },
         {
-          src: 'assets/icons/icon-384x384.svg',
-          sizes: '384x384',
-          type: 'image/svg+xml',
-          purpose: 'maskable any',
-        },
-        {
-          src: 'assets/icons/icon-512x512.svg',
+          src: 'assets/icons/android-chrome-512x512.svg',
           sizes: '512x512',
           type: 'image/svg+xml',
           purpose: 'maskable any',