create-ng-tailwind 1.0.0 → 2.0.1

package/lib/templates/starter/features.js

@@ -0,0 +1,700 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+async function createContactComponent(config) {
+  const contactComponentTs = `import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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';
+
+@Component({
+  selector: 'app-contact',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, NgIconComponent, ButtonComponent, TranslateModule],
+  viewProviders: [provideIcons({
+    heroEnvelope,
+    heroMapPin,
+    heroClock,
+    heroCheckCircle,
+    heroPaperAirplane,
+  })],
+  templateUrl: './contact.component.html'
+})
+export class ContactComponent {
+  private fb = inject(FormBuilder);
+
+  isSubmitting = false;
+  submitted = false;
+
+  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-blue-600 via-cyan-600 to-teal-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-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-green-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-cyan-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-blue-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-blue-500 to-cyan-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"
+              placeholder="John Doe"
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
+              [class.border-red-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched"
+              [class.focus:ring-red-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-red-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"
+              placeholder="john@example.com"
+              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
+              [class.border-red-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched"
+              [class.focus:ring-red-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-red-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-blue-500 focus:border-blue-500 transition-all"
+              [class.border-red-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched"
+              [class.focus:ring-red-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-red-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-blue-500 focus:border-blue-500 transition-all resize-vertical"
+              [class.border-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"
+              [class.focus:ring-red-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-red-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-green-50 to-emerald-50 border-2 border-green-300 rounded-xl animate-fade-in">
+              <div class="flex items-center gap-2">
+                <ng-icon name="heroCheckCircle" size="20" style="color: #059669;"></ng-icon>
+                <p class="text-green-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-blue-600 to-cyan-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-cyan-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-cyan-100">hello&#64;example.com</p>
+                <p class="text-sm text-cyan-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-cyan-100">{{ 'contact.info.location.value' | translate }}</p>
+                <p class="text-sm text-cyan-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-cyan-100">{{ 'contact.info.responseTime.value' | translate }}</p>
+                <p class="text-sm text-cyan-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-purple-500 to-pink-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-blue-50 transition-colors">
+                <div class="flex items-center gap-3">
+                  <div class="h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <svg class="h-5 w-5 text-red-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-blue-600 transition-colors">{{ 'contact.help.links.angular' | translate }}</span>
+                </div>
+                <svg class="h-5 w-5 text-gray-400 group-hover:text-blue-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-blue-50 transition-colors">
+                <div class="flex items-center gap-3">
+                  <div class="h-10 w-10 bg-cyan-100 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
+                    <svg class="h-5 w-5 text-cyan-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-blue-600 transition-colors">{{ 'contact.help.links.tailwind' | translate }}</span>
+                </div>
+                <svg class="h-5 w-5 text-gray-400 group-hover:text-blue-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, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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';
+
+@Component({
+  selector: 'app-root',
+  imports: [CommonModule, 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 {
+  // Inject translation service to initialize it (auto-detects and loads language)
+  private translationService = inject(TranslationService);
+  title = '${config.projectName}';
+}`;
+
+  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
+  const mainStyles = `@import "tailwindcss";
+
+/* Custom CSS variables for theming */
+:root {
+  --color-primary: 59 130 246; /* blue-500 */
+  --color-primary-dark: 37 99 235; /* blue-600 */
+}
+
+/* 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 */
+.focus-visible {
+  @apply focus:outline-none focus:ring-2 focus:ring-blue-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,
+};