create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/starter/features.js

@@ -1,867 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-
-async function createContactComponent(config) {
-  const contactComponentTs = `import { Component, OnInit, inject } from '@angular/core';
-import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-import {
-  heroEnvelope,
-  heroMapPin,
-  heroClock,
-  heroCheckCircle,
-  heroPaperAirplane,
-} from '@ng-icons/heroicons/outline';
-import { ButtonComponent } from '@shared/components/button/button.component';
-import { SeoService } from '@core/services/seo.service';
-
-@Component({
-  selector: 'app-contact',
-  standalone: true,
-  imports: [ReactiveFormsModule, NgIconComponent, ButtonComponent, TranslateModule],
-  viewProviders: [provideIcons({
-    heroEnvelope,
-    heroMapPin,
-    heroClock,
-    heroCheckCircle,
-    heroPaperAirplane,
-  })],
-  templateUrl: './contact.component.html'
-})
-export class ContactComponent implements OnInit {
-  private fb = inject(FormBuilder);
-  private seo = inject(SeoService);
-
-  isSubmitting = false;
-  submitted = false;
-
-  ngOnInit(): void {
-    // Set SEO meta tags for Contact page
-    this.seo.updateMeta({
-      title: 'Contact Us',
-      description: 'Get in touch with us. We would love to hear from you and answer any questions you may have.',
-      keywords: 'contact, support, get in touch, email',
-      ogType: 'website'
-    });
-  }
-
-  contactForm = this.fb.group({
-    name: ['', [Validators.required, Validators.minLength(2)]],
-    email: ['', [Validators.required, Validators.email]],
-    subject: ['', Validators.required],
-    message: ['', [Validators.required, Validators.minLength(10)]]
-  });
-
-  onSubmit(): void {
-    if (this.contactForm.valid) {
-      this.isSubmitting = true;
-
-      // Simulate form submission
-      setTimeout(() => {
-        this.isSubmitting = false;
-        this.submitted = true;
-        this.contactForm.reset();
-
-        // Hide success message after 5 seconds
-        setTimeout(() => {
-          this.submitted = false;
-        }, 5000);
-      }, 1500);
-    } else {
-      // Mark all fields as touched to show validation errors
-      Object.keys(this.contactForm.controls).forEach(key => {
-        this.contactForm.get(key)?.markAsTouched();
-      });
-    }
-  }
-}`;
-
-  const contactComponentHtml = `<!-- Hero Section -->
-<section class="relative py-20 bg-linear-to-br from-primary-600 via-secondary-600 to-accent-600 overflow-hidden">
-  <div class="absolute inset-0 opacity-10">
-    <div class="absolute top-0 -left-4 w-96 h-96 bg-white rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
-    <div class="absolute top-0 -right-4 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-success-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">
-      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-white/20 backdrop-blur-sm mb-6 shadow-xl">
-        <ng-icon name="heroEnvelope" size="40" style="color: white;"></ng-icon>
-      </div>
-      <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 drop-shadow-lg">
-        {{ 'contact.title' | translate }}
-      </h1>
-      <p class="text-xl md:text-2xl text-secondary-50 max-w-3xl mx-auto leading-relaxed">
-        {{ 'contact.subtitle' | translate }}
-      </p>
-    </div>
-  </div>
-</section>
-
-<!-- Main Content -->
-<div class="bg-linear-to-br from-gray-50 to-primary-50 py-16 -mt-8">
-  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
-
-      <!-- Contact Form Card -->
-      <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100 hover:shadow-2xl transition-shadow animate-fade-in">
-        <div class="mb-6">
-          <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-primary-500 to-secondary-500 mb-4">
-            <ng-icon name="heroPaperAirplane" size="24" style="color: white;"></ng-icon>
-          </div>
-          <h2 class="text-2xl font-bold text-gray-900">{{ 'contact.form.title' | translate }}</h2>
-          <p class="text-gray-600 mt-1">{{ 'contact.form.description' | translate }}</p>
-        </div>
-
-        <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="space-y-5">
-          <!-- Name Field -->
-          <div>
-            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
-              {{ 'contact.form.name' | translate }} *
-            </label>
-            <input
-              id="name"
-              type="text"
-              formControlName="name"
-              autocomplete="name"
-              placeholder="John Doe"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
-              [class.border-danger-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched"
-              [class.focus:ring-danger-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched">
-            @if (contactForm.get('name')?.invalid && contactForm.get('name')?.touched) {
-              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
-                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
-                </svg>
-                @if (contactForm.get('name')?.errors?.['required']) {
-                  <span>{{ 'contact.form.errors.nameRequired' | translate }}</span>
-                }
-                @if (contactForm.get('name')?.errors?.['minlength']) {
-                  <span>{{ 'contact.form.errors.nameMinLength' | translate }}</span>
-                }
-              </div>
-            }
-          </div>
-
-          <!-- Email Field -->
-          <div>
-            <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
-              {{ 'contact.form.email' | translate }} *
-            </label>
-            <input
-              id="email"
-              type="email"
-              formControlName="email"
-              autocomplete="email"
-              placeholder="john@example.com"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
-              [class.border-danger-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched"
-              [class.focus:ring-danger-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
-            @if (contactForm.get('email')?.invalid && contactForm.get('email')?.touched) {
-              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
-                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
-                </svg>
-                @if (contactForm.get('email')?.errors?.['required']) {
-                  <span>{{ 'contact.form.errors.emailRequired' | translate }}</span>
-                }
-                @if (contactForm.get('email')?.errors?.['email']) {
-                  <span>{{ 'contact.form.errors.emailInvalid' | translate }}</span>
-                }
-              </div>
-            }
-          </div>
-
-          <!-- Subject Field -->
-          <div>
-            <label for="subject" class="block text-sm font-semibold text-gray-700 mb-2">
-              {{ 'contact.form.subject' | translate }} *
-            </label>
-            <input
-              id="subject"
-              type="text"
-              formControlName="subject"
-              placeholder="How can we help?"
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
-              [class.border-danger-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched"
-              [class.focus:ring-danger-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched">
-            @if (contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched) {
-              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
-                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
-                </svg>
-                <span>{{ 'contact.form.errors.subjectRequired' | translate }}</span>
-              </div>
-            }
-          </div>
-
-          <!-- Message Field -->
-          <div>
-            <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
-              {{ 'contact.form.message' | translate }} *
-            </label>
-            <textarea
-              id="message"
-              formControlName="message"
-              rows="5"
-              placeholder="Tell us more about your inquiry..."
-              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all resize-vertical"
-              [class.border-danger-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
-              [class.focus:ring-danger-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"></textarea>
-            @if (contactForm.get('message')?.invalid && contactForm.get('message')?.touched) {
-              <div class="mt-2 text-sm text-danger-600 flex items-center gap-1">
-                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
-                </svg>
-                @if (contactForm.get('message')?.errors?.['required']) {
-                  <span>{{ 'contact.form.errors.messageRequired' | translate }}</span>
-                }
-                @if (contactForm.get('message')?.errors?.['minlength']) {
-                  <span>{{ 'contact.form.errors.messageMinLength' | translate }}</span>
-                }
-              </div>
-            }
-          </div>
-
-          <!-- Success Message -->
-          @if (submitted && !contactForm.invalid) {
-            <div class="p-4 bg-linear-to-r from-success-50 to-success-100 border-2 border-success-300 rounded-xl animate-fade-in">
-              <div class="flex items-center gap-2">
-                <ng-icon name="heroCheckCircle" size="20" style="color: var(--color-success-600);"></ng-icon>
-                <p class="text-success-700 font-medium">
-                  {{ 'contact.form.success' | translate }}
-                </p>
-              </div>
-            </div>
-          }
-
-          <!-- Submit Button -->
-          <app-button
-            type="submit"
-            [fullWidth]="true"
-            [loading]="isSubmitting"
-            [disabled]="contactForm.invalid">
-            <span class="flex items-center justify-center gap-2">
-              @if (!isSubmitting) {
-                <ng-icon name="heroPaperAirplane" size="18"></ng-icon>
-              }
-              {{ isSubmitting ? ('contact.form.sending' | translate) : ('contact.form.submit' | translate) }}
-            </span>
-          </app-button>
-        </form>
-      </div>
-
-      <!-- Contact Info & Resources -->
-      <div class="space-y-6 animate-fade-in animation-delay-200">
-        <!-- Contact Information Card -->
-        <div class="bg-linear-to-br from-primary-600 to-secondary-600 rounded-2xl shadow-xl p-8 text-white">
-          <div class="mb-6">
-            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm mb-4">
-              <ng-icon name="heroMapPin" size="24" style="color: white;"></ng-icon>
-            </div>
-            <h2 class="text-2xl font-bold">{{ 'contact.info.title' | translate }}</h2>
-            <p class="text-primary-100 mt-1">{{ 'contact.info.description' | translate }}</p>
-          </div>
-
-          <div class="space-y-6">
-            <div class="flex items-start gap-4">
-              <div class="shrink-0">
-                <div class="h-12 w-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
-                  <ng-icon name="heroEnvelope" size="24" style="color: white;"></ng-icon>
-                </div>
-              </div>
-              <div>
-                <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.email.label' | translate }}</h3>
-                <p class="text-primary-100">hello&#64;example.com</p>
-                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.email.description' | translate }}</p>
-              </div>
-            </div>
-
-            <div class="flex items-start gap-4">
-              <div class="shrink-0">
-                <div class="h-12 w-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
-                  <ng-icon name="heroMapPin" size="24" style="color: white;"></ng-icon>
-                </div>
-              </div>
-              <div>
-                <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.location.label' | translate }}</h3>
-                <p class="text-primary-100">{{ 'contact.info.location.value' | translate }}</p>
-                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.location.description' | translate }}</p>
-              </div>
-            </div>
-
-            <div class="flex items-start gap-4">
-              <div class="shrink-0">
-                <div class="h-12 w-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
-                  <ng-icon name="heroClock" size="24" style="color: white;"></ng-icon>
-                </div>
-              </div>
-              <div>
-                <h3 class="text-lg font-semibold mb-1">{{ 'contact.info.responseTime.label' | translate }}</h3>
-                <p class="text-primary-100">{{ 'contact.info.responseTime.value' | translate }}</p>
-                <p class="text-sm text-primary-200 mt-1">{{ 'contact.info.responseTime.description' | translate }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Resources Card -->
-        <div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
-          <div class="mb-6">
-            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-linear-to-br from-accent-500 to-secondary-500 mb-4">
-              <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
-              </svg>
-            </div>
-            <h2 class="text-2xl font-bold text-gray-900">{{ 'contact.help.title' | translate }}</h2>
-            <p class="text-gray-600 mt-1">{{ 'contact.help.subtitle' | translate }}</p>
-          </div>
-
-          <ul class="space-y-3">
-            <li>
-              <a href="https://angular.dev/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-primary-50 transition-colors">
-                <div class="flex items-center gap-3">
-                  <div class="h-10 w-10 bg-danger-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
-                    <svg class="h-5 w-5 text-danger-600" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M12 2L2 6l10 5 10-5-10-4zm0 18.5l-7-3.5v-6l7 3.5 7-3.5v6l-7 3.5z"/>
-                    </svg>
-                  </div>
-                  <span class="font-medium text-gray-700 group-hover:text-primary-600 transition-colors">{{ 'contact.help.links.angular' | translate }}</span>
-                </div>
-                <svg class="h-5 w-5 text-gray-400 group-hover:text-primary-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
-              </a>
-            </li>
-            <li>
-              <a href="https://tailwindcss.com/" target="_blank" class="group flex items-center justify-between p-3 rounded-xl hover:bg-primary-50 transition-colors">
-                <div class="flex items-center gap-3">
-                  <div class="h-10 w-10 bg-secondary-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
-                    <svg class="h-5 w-5 text-secondary-600" fill="currentColor" viewBox="0 0 24 24">
-                      <path d="M12 6c-2.67 0-4.33 1.33-5 4 1-1.33 2.17-1.83 3.5-1.5.76.19 1.31.75 1.91 1.36.98 1 2.09 2.14 4.59 2.14 2.67 0 4.33-1.33 5-4-1 1.33-2.17 1.83-3.5 1.5-.76-.19-1.3-.75-1.91-1.36C15.61 7.14 14.5 6 12 6zM7 12c-2.67 0-4.33 1.33-5 4 1-1.33 2.17-1.83 3.5-1.5.76.19 1.3.75 1.91 1.36C8.39 16.86 9.5 18 12 18c2.67 0 4.33-1.33 5-4-1 1.33-2.17 1.83-3.5 1.5-.76-.19-1.3-.75-1.91-1.36C10.61 13.14 9.5 12 7 12z"/>
-                    </svg>
-                  </div>
-                  <span class="font-medium text-gray-700 group-hover:text-primary-600 transition-colors">{{ 'contact.help.links.tailwind' | translate }}</span>
-                </div>
-                <svg class="h-5 w-5 text-gray-400 group-hover:text-primary-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-  await fs.writeFile(
-    path.join(config.fullPath, 'src/app/features/contact/contact.component.ts'),
-    contactComponentTs
-  );
-
-  await fs.writeFile(
-    path.join(config.fullPath, 'src/app/features/contact/contact.component.html'),
-    contactComponentHtml
-  );
-}
-
-async function createRouting(config) {
-  const routes = `import { Routes } from '@angular/router';
-// import { authGuard } from './core/guards/auth.guard';
-
-export const routes: Routes = [
-  // Public routes
-  {
-    path: '',
-    loadComponent: () => import('./features/home/home.component').then(c => c.HomeComponent)
-  },
-  {
-    path: 'about',
-    loadComponent: () => import('./features/about/about.component').then(c => c.AboutComponent)
-  },
-  {
-    path: 'contact',
-    loadComponent: () => import('./features/contact/contact.component').then(c => c.ContactComponent)
-  },
-
-  // Auth routes with layout
-  {
-    path: 'auth',
-    loadComponent: () => import('./layout/auth/auth-layout.component').then(c => c.AuthLayoutComponent),
-    children: [
-      {
-        path: '',
-        redirectTo: 'login',
-        pathMatch: 'full'
-      },
-      {
-        path: 'login',
-        loadComponent: () => import('./features/auth/login/login.component').then(c => c.LoginComponent)
-      },
-      {
-        path: 'register',
-        loadComponent: () => import('./features/auth/register/register.component').then(c => c.RegisterComponent)
-      },
-      {
-        path: 'forgot-password',
-        loadComponent: () => import('./features/auth/forgot-password/forgot-password.component').then(c => c.ForgotPasswordComponent)
-      }
-    ]
-  },
-
-  // Example protected route (uncomment authGuard import above when you need authentication)
-  // {
-  //   path: 'dashboard',
-  //   loadComponent: () => import('./features/dashboard/dashboard.component').then(c => c.DashboardComponent),
-  //   canActivate: [authGuard]
-  // },
-
-  // Catch-all redirect
-  {
-    path: '**',
-    redirectTo: ''
-  }
-];`;
-
-  await fs.writeFile(path.join(config.fullPath, 'src/app/app.routes.ts'), routes);
-}
-
-async function createAppConfig(config) {
-  // Check if SSR and zoneless are enabled
-  const isSSR = config.ssr || false;
-  const isZoneless = config.zoneless || false;
-
-  // Build imports based on configuration
-  const changeDetectionImport = isZoneless
-    ? 'provideZonelessChangeDetection'
-    : 'provideZoneChangeDetection';
-
-  const coreImports = `import { ApplicationConfig, provideBrowserGlobalErrorListeners, ${changeDetectionImport}, isDevMode, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';${
-    isSSR
-      ? "\nimport { provideClientHydration, withEventReplay } from '@angular/platform-browser';"
-      : ''
-  }
-import { provideServiceWorker } from '@angular/service-worker';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { HttpClient } from '@angular/common/http';
-
-import { routes } from './app.routes';
-import { environment } from '@environments/environment';
-import { authInterceptor } from '@core/interceptors/auth.interceptor';
-import { errorInterceptor } from '@core/interceptors/error.interceptor';
-import { loadingInterceptor } from '@core/interceptors/loading.interceptor';
-import { cachingInterceptor } from '@core/interceptors/caching.interceptor';`;
-
-  // Build providers array based on configuration
-  const ssrProvider = isSSR ? '\n    provideClientHydration(withEventReplay()),' : '';
-  const changeDetectionProvider = isZoneless
-    ? 'provideZonelessChangeDetection()'
-    : 'provideZoneChangeDetection({ eventCoalescing: true })';
-
-  const appConfig = `${coreImports}
-
-// Translation loader factory
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    ${changeDetectionProvider},
-    provideRouter(routes),${ssrProvider}
-    provideHttpClient(
-      withFetch(),
-      withInterceptors([
-        authInterceptor,
-        cachingInterceptor,
-        loadingInterceptor,
-        errorInterceptor
-      ])
-    ),
-    // Translation configuration
-    importProvidersFrom(
-      TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useFactory: HttpLoaderFactory,
-          deps: [HttpClient]
-        }
-      })
-    ),
-    provideServiceWorker('ngsw-worker.js', {
-      enabled: !isDevMode(),
-      registrationStrategy: 'registerWhenStable:30000'
-    }),
-    // Environment-based providers
-    ...(environment.enableDevTools && isDevMode() ? [] : []),
-    // Add more providers as needed based on environment configuration
-  ]
-};`;
-
-  await fs.writeFile(path.join(config.fullPath, 'src/app/app.config.ts'), appConfig);
-}
-
-async function createAppComponent(config) {
-  const app = `import { Component, OnInit, inject } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './layout/header/header.component';
-import { FooterComponent } from './layout/footer/footer.component';
-import { ToastComponent } from '@shared/components/toast/toast.component';
-import { ModalComponent } from '@shared/components/modal/modal.component';
-import { TranslationService } from '@core/i18n/translation.service';
-import { SeoService } from '@core/services/seo.service';
-import { createOrganizationSchema, createWebSiteSchema } from '@core/utils/structured-data';
-
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet, HeaderComponent, FooterComponent, ToastComponent, ModalComponent],
-  template: \`
-    <div class="min-h-screen flex flex-col bg-white">
-      <app-header />
-
-      <main class="flex-1">
-        <router-outlet />
-      </main>
-
-      <app-footer />
-
-      <!-- Global Toast Notifications -->
-      <app-toast />
-
-      <!-- Global Modal System -->
-      <app-modal />
-    </div>
-  \`
-})
-export class App implements OnInit {
-  // Inject services
-  private translationService = inject(TranslationService);
-  private seo = inject(SeoService);
-
-  title = '${config.projectName}';
-
-  ngOnInit(): void {
-    // Add global Organization structured data
-    const organizationData = createOrganizationSchema({
-      name: '${config.projectName}',
-      url: 'https://example.com', // TODO: Update with your production URL
-      logo: '/assets/images/logo.svg',
-      description: 'A modern Angular application built with best practices',
-      sameAs: [
-        // 'https://twitter.com/yourhandle',
-        // 'https://facebook.com/yourpage',
-        // 'https://linkedin.com/company/yourcompany'
-      ]
-    });
-
-    const websiteData = createWebSiteSchema({
-      name: '${config.projectName}',
-      url: 'https://example.com', // TODO: Update with your production URL
-      description: 'A modern Angular application with Tailwind CSS, SEO optimization, and i18n support'
-    });
-
-    // Add structured data to the page
-    this.seo.addStructuredData({
-      '@context': 'https://schema.org',
-      '@graph': [organizationData, websiteData]
-    });
-  }
-}`;
-
-  const appHtml = `<!-- This file is not used in standalone components -->
-<!-- The template is defined inline in app.component.ts -->`;
-
-  await fs.writeFile(path.join(config.fullPath, 'src/app/app.ts'), app);
-
-  await fs.writeFile(path.join(config.fullPath, 'src/app/app.html'), appHtml);
-}
-
-async function createStyles(config) {
-  // Main styles with Tailwind v4 theme system
-  const mainStyles = `@import "tailwindcss";
-
-/* ============================================
-   TAILWIND V4 THEME CONFIGURATION
-   ============================================
-
-   This section defines the theme colors for your application.
-   Tailwind v4 uses the @theme directive to create custom color scales
-   that automatically generate utility classes (bg-*, text-*, border-*, etc.)
-
-   To customize your theme:
-   1. Change the color values below to match your brand
-   2. All components will automatically use the new colors
-   3. Color format: Use hex colors (e.g., #3b82f6) or rgb (e.g., rgb(59 130 246))
-
-   Example: Change primary-500 from #3b82f6 to #8b5cf6 for purple theme
-*/
-
-@theme {
-  /* PRIMARY COLOR SCALE - Main brand color */
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #dbeafe;
-  --color-primary-200: #bfdbfe;
-  --color-primary-300: #93c5fd;
-  --color-primary-400: #60a5fa;
-  --color-primary-500: #3b82f6;  /* Main primary color - CHANGE THIS for your brand */
-  --color-primary-600: #2563eb;  /* Primary hover state */
-  --color-primary-700: #1d4ed8;
-  --color-primary-800: #1e40af;
-  --color-primary-900: #1e3a8a;
-  --color-primary-950: #172554;
-
-  /* SECONDARY COLOR SCALE - Secondary brand color */
-  --color-secondary-50: #ecfeff;
-  --color-secondary-100: #cffafe;
-  --color-secondary-200: #a5f3fc;
-  --color-secondary-300: #67e8f9;
-  --color-secondary-400: #22d3ee;
-  --color-secondary-500: #06b6d4;  /* Main secondary color - CHANGE THIS for your brand */
-  --color-secondary-600: #0891b2;  /* Secondary hover state */
-  --color-secondary-700: #0e7490;
-  --color-secondary-800: #155e75;
-  --color-secondary-900: #164e63;
-  --color-secondary-950: #083344;
-
-  /* ACCENT COLOR SCALE - Accent/highlight color */
-  --color-accent-50: #faf5ff;
-  --color-accent-100: #f3e8ff;
-  --color-accent-200: #e9d5ff;
-  --color-accent-300: #d8b4fe;
-  --color-accent-400: #c084fc;
-  --color-accent-500: #a855f7;  /* Main accent color */
-  --color-accent-600: #9333ea;  /* Accent hover state */
-  --color-accent-700: #7e22ce;
-  --color-accent-800: #6b21a8;
-  --color-accent-900: #581c87;
-  --color-accent-950: #3b0764;
-
-  /* SUCCESS COLOR SCALE - For success states */
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-200: #bbf7d0;
-  --color-success-300: #86efac;
-  --color-success-400: #4ade80;
-  --color-success-500: #22c55e;  /* Main success color */
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
-  --color-success-800: #166534;
-  --color-success-900: #14532d;
-  --color-success-950: #052e16;
-
-  /* DANGER COLOR SCALE - For error/danger states */
-  --color-danger-50: #fef2f2;
-  --color-danger-100: #fee2e2;
-  --color-danger-200: #fecaca;
-  --color-danger-300: #fca5a5;
-  --color-danger-400: #f87171;
-  --color-danger-500: #ef4444;  /* Main danger color */
-  --color-danger-600: #dc2626;
-  --color-danger-700: #b91c1c;
-  --color-danger-800: #991b1b;
-  --color-danger-900: #7f1d1d;
-  --color-danger-950: #450a0a;
-
-  /* WARNING COLOR SCALE - For warning states */
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde68a;
-  --color-warning-300: #fcd34d;
-  --color-warning-400: #fbbf24;
-  --color-warning-500: #f59e0b;  /* Main warning color */
-  --color-warning-600: #d97706;
-  --color-warning-700: #b45309;
-  --color-warning-800: #92400e;
-  --color-warning-900: #78350f;
-  --color-warning-950: #451a03;
-
-  /* INFO COLOR SCALE - For informational states */
-  --color-info-50: #eff6ff;
-  --color-info-100: #dbeafe;
-  --color-info-200: #bfdbfe;
-  --color-info-300: #93c5fd;
-  --color-info-400: #60a5fa;
-  --color-info-500: #3b82f6;  /* Main info color */
-  --color-info-600: #2563eb;
-  --color-info-700: #1d4ed8;
-  --color-info-800: #1e40af;
-  --color-info-900: #1e3a8a;
-  --color-info-950: #172554;
-}
-
-/* ============================================
-   USAGE EXAMPLES
-   ============================================
-
-   After defining colors in @theme, you can use them in your templates:
-
-   - bg-primary-500        (primary background)
-   - text-primary-600      (primary text)
-   - border-primary-500    (primary border)
-   - hover:bg-primary-600  (primary hover)
-   - focus:ring-primary-500 (primary focus ring)
-
-   - bg-secondary-500      (secondary background)
-   - bg-accent-500         (accent background)
-   - bg-success-500        (success background)
-   - bg-danger-500         (danger background)
-   - bg-warning-500        (warning background)
-   - bg-info-500           (info background)
-
-   All Tailwind utilities work: bg-*, text-*, border-*, ring-*, etc.
-*/
-
-/* RTL Support */
-html[dir="rtl"] {
-  direction: rtl;
-}
-
-html[dir="ltr"] {
-  direction: ltr;
-}
-
-/* RTL-aware spacing utilities */
-html[dir="rtl"] .space-x-2 > * + * {
-  margin-right: 0.5rem;
-  margin-left: 0;
-}
-
-html[dir="rtl"] .space-x-3 > * + * {
-  margin-right: 0.75rem;
-  margin-left: 0;
-}
-
-html[dir="rtl"] .space-x-4 > * + * {
-  margin-right: 1rem;
-  margin-left: 0;
-}
-
-html[dir="rtl"] .space-x-8 > * + * {
-  margin-right: 2rem;
-  margin-left: 0;
-}
-
-/* RTL-aware text alignment */
-html[dir="rtl"] .text-left {
-  text-align: right;
-}
-
-html[dir="rtl"] .text-right {
-  text-align: left;
-}
-
-/* Custom utility classes */
-.container {
-  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-gray-100;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-400;
-}
-
-/* Focus styles for accessibility - now using theme colors */
-.focus-visible {
-  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
-}
-
-/* Animation classes */
-.animate-fade-in {
-  animation: fadeIn 0.6s ease-in-out;
-}
-
-.animate-slide-up {
-  animation: slideUp 0.6s ease-out;
-}
-
-.animate-blob {
-  animation: blob 7s infinite;
-}
-
-.animation-delay-2000 {
-  animation-delay: 2s;
-}
-
-.animation-delay-4000 {
-  animation-delay: 4s;
-}
-
-.animation-delay-200 {
-  animation-delay: 0.2s;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes blob {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-  33% {
-    transform: translate(30px, -50px) scale(1.1);
-  }
-  66% {
-    transform: translate(-20px, 20px) scale(0.9);
-  }
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
-/* Print styles */
-@media print {
-  .no-print {
-    display: none !important;
-  }
-}
-
-/* RTL Transition smoothing */
-* {
-  transition: margin 0.2s ease-in-out;
-}`;
-
-  await fs.writeFile(path.join(config.fullPath, 'src/styles.css'), mainStyles);
-}
-
-module.exports = {
-  createContactComponent,
-  createRouting,
-  createAppConfig,
-  createAppComponent,
-  createStyles,
-};