create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/saas/index.js

@@ -0,0 +1,1371 @@
+const fs = require('fs-extra');
+const path = require('path');
+const starter = require('../starter');
+
+/**
+ * SaaS Template
+ * Extends starter template with:
+ * - Pricing page with plan comparison
+ * - Subscription management
+ * - User dashboard
+ * - Feature highlights
+ * - FAQ section
+ * - Testimonials
+ */
+const saas = {
+  info: {
+    name: 'SaaS',
+    description: 'Software as a Service template with pricing, subscriptions, and user dashboard',
+    features: [
+      ...starter.info.features,
+      'Pricing page with plan comparison',
+      'Subscription management UI',
+      'User dashboard with usage stats',
+      'Feature comparison table',
+      'FAQ accordion',
+      'Customer testimonials',
+      'CTA sections',
+      'Usage metrics display',
+    ],
+  },
+
+  async apply(config, spinner) {
+    const chalk = require('chalk');
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green('  ✔') + chalk.white(' ' + message));
+        spinner.start();
+      }
+    };
+
+    // Step 1: Apply starter template
+    if (spinner) spinner.update('Setting up starter foundation...');
+    await starter.apply(config, null);
+
+    // Step 2: Create SaaS-specific directories
+    if (spinner) spinner.update('Setting up SaaS structure...');
+    await this.createDirectories(config);
+
+    // Step 3: Create services
+    await this.createServices(config);
+
+    // Step 4: Create components
+    await this.createComponents(config);
+
+    // Step 5: Create pages
+    await this.createPages(config);
+
+    // Step 6: Update routing
+    await this.createRouting(config);
+
+    // Step 7: Add i18n translations
+    await this.updateI18n(config);
+
+    // Step 8: Format code
+    const base = require('../base');
+    await base.formatCode(config);
+
+    if (spinner) spinner.stop();
+
+    console.log('');
+    completeStep('SaaS template created');
+    completeStep('Pricing page with plans');
+    completeStep('User dashboard');
+    completeStep('Subscription management');
+    completeStep('Feature comparison');
+    console.log('');
+  },
+
+  async createDirectories(config) {
+    const directories = [
+      'src/app/features/pricing',
+      'src/app/features/dashboard',
+      'src/app/features/dashboard/overview',
+      'src/app/features/dashboard/subscription',
+      'src/app/features/dashboard/usage',
+      'src/app/features/features',
+      'src/app/shared/components/pricing-card',
+      'src/app/shared/components/faq',
+      'src/app/shared/components/testimonial',
+      'src/app/shared/components/feature-card',
+      'src/app/shared/components/stats-card',
+      'src/app/shared/components/usage-chart',
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+
+  async createServices(config) {
+    const subscriptionService = `import { Injectable, signal, computed } from '@angular/core';
+
+export interface Plan {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  priceYearly: number;
+  features: string[];
+  highlighted?: boolean;
+  cta: string;
+}
+
+export interface Subscription {
+  planId: string;
+  status: 'active' | 'cancelled' | 'past_due' | 'trialing';
+  currentPeriodEnd: Date;
+  cancelAtPeriodEnd: boolean;
+}
+
+export interface UsageStats {
+  apiCalls: { used: number; limit: number };
+  storage: { used: number; limit: number };
+  teamMembers: { used: number; limit: number };
+  projects: { used: number; limit: number };
+}
+
+@Injectable({ providedIn: 'root' })
+export class SubscriptionService {
+  private plansSignal = signal<Plan[]>(this.getPlans());
+  private subscriptionSignal = signal<Subscription | null>(this.getMockSubscription());
+  private usageSignal = signal<UsageStats>(this.getMockUsage());
+
+  plans = this.plansSignal.asReadonly();
+  subscription = this.subscriptionSignal.asReadonly();
+  usage = this.usageSignal.asReadonly();
+
+  currentPlan = computed(() => {
+    const sub = this.subscriptionSignal();
+    if (!sub) return null;
+    return this.plansSignal().find(p => p.id === sub.planId) || null;
+  });
+
+  isSubscribed = computed(() => {
+    const sub = this.subscriptionSignal();
+    return sub !== null && sub.status === 'active';
+  });
+
+  daysRemaining = computed(() => {
+    const sub = this.subscriptionSignal();
+    if (!sub) return 0;
+    const now = new Date();
+    const end = new Date(sub.currentPeriodEnd);
+    const diff = end.getTime() - now.getTime();
+    return Math.ceil(diff / (1000 * 60 * 60 * 24));
+  });
+
+  getPlanById(id: string): Plan | undefined {
+    return this.plansSignal().find(p => p.id === id);
+  }
+
+  subscribe(planId: string): Promise<boolean> {
+    // Mock subscription - in production, integrate with Stripe/Paddle
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.subscriptionSignal.set({
+          planId,
+          status: 'active',
+          currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+          cancelAtPeriodEnd: false,
+        });
+        resolve(true);
+      }, 1000);
+    });
+  }
+
+  cancelSubscription(): Promise<boolean> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.subscriptionSignal.update(sub => sub ? { ...sub, cancelAtPeriodEnd: true } : null);
+        resolve(true);
+      }, 500);
+    });
+  }
+
+  private getPlans(): Plan[] {
+    return [
+      {
+        id: 'free',
+        name: 'Free',
+        description: 'Perfect for getting started',
+        price: 0,
+        priceYearly: 0,
+        features: [
+          '1,000 API calls/month',
+          '100MB storage',
+          '1 team member',
+          '3 projects',
+          'Community support',
+        ],
+        cta: 'Get Started',
+      },
+      {
+        id: 'pro',
+        name: 'Pro',
+        description: 'Best for growing teams',
+        price: 29,
+        priceYearly: 290,
+        features: [
+          '50,000 API calls/month',
+          '10GB storage',
+          '5 team members',
+          'Unlimited projects',
+          'Priority support',
+          'Advanced analytics',
+          'Custom integrations',
+        ],
+        highlighted: true,
+        cta: 'Start Free Trial',
+      },
+      {
+        id: 'enterprise',
+        name: 'Enterprise',
+        description: 'For large organizations',
+        price: 99,
+        priceYearly: 990,
+        features: [
+          'Unlimited API calls',
+          '100GB storage',
+          'Unlimited team members',
+          'Unlimited projects',
+          '24/7 dedicated support',
+          'Advanced analytics',
+          'Custom integrations',
+          'SLA guarantee',
+          'On-premise option',
+        ],
+        cta: 'Contact Sales',
+      },
+    ];
+  }
+
+  private getMockSubscription(): Subscription {
+    return {
+      planId: 'pro',
+      status: 'active',
+      currentPeriodEnd: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000),
+      cancelAtPeriodEnd: false,
+    };
+  }
+
+  private getMockUsage(): UsageStats {
+    return {
+      apiCalls: { used: 32500, limit: 50000 },
+      storage: { used: 4.2, limit: 10 },
+      teamMembers: { used: 3, limit: 5 },
+      projects: { used: 8, limit: -1 }, // -1 means unlimited
+    };
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/subscription.service.ts'),
+      subscriptionService
+    );
+  },
+
+  async createComponents(config) {
+    // Pricing Card
+    const pricingCard = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CurrencyPipe } from '@angular/common';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroCheck } from '@ng-icons/heroicons/outline';
+import { Plan } from '@core/services/subscription.service';
+
+@Component({
+  selector: 'app-pricing-card',
+  standalone: true,
+  imports: [CurrencyPipe, NgIconComponent],
+  viewProviders: [provideIcons({ heroCheck })],
+  template: \`
+    <div
+      class="relative rounded-2xl border-2 p-8 transition-all"
+      [class.border-primary-500]="plan.highlighted"
+      [class.border-gray-200]="!plan.highlighted"
+      [class.shadow-xl]="plan.highlighted"
+      [class.scale-105]="plan.highlighted">
+
+      @if (plan.highlighted) {
+        <div class="absolute -top-4 left-1/2 -translate-x-1/2">
+          <span class="rounded-full bg-primary-500 px-4 py-1 text-sm font-semibold text-white">
+            Most Popular
+          </span>
+        </div>
+      }
+
+      <div class="text-center">
+        <h3 class="text-xl font-bold text-gray-900">{{ plan.name }}</h3>
+        <p class="mt-2 text-gray-600">{{ plan.description }}</p>
+
+        <div class="mt-6">
+          <span class="text-5xl font-bold text-gray-900">
+            {{ isYearly ? plan.priceYearly : plan.price | currency:'USD':'symbol':'1.0-0' }}
+          </span>
+          @if (plan.price > 0) {
+            <span class="text-gray-500">/{{ isYearly ? 'year' : 'month' }}</span>
+          }
+        </div>
+
+        @if (isYearly && plan.price > 0) {
+          <p class="mt-2 text-sm text-success-600">
+            Save {{ (plan.price * 12) - plan.priceYearly | currency:'USD':'symbol':'1.0-0' }}/year
+          </p>
+        }
+      </div>
+
+      <ul class="mt-8 space-y-4">
+        @for (feature of plan.features; track feature) {
+          <li class="flex items-center gap-3">
+            <ng-icon name="heroCheck" size="20" class="text-success-500"></ng-icon>
+            <span class="text-gray-700">{{ feature }}</span>
+          </li>
+        }
+      </ul>
+
+      <button
+        (click)="onSelect.emit(plan)"
+        class="mt-8 w-full rounded-lg py-3 font-semibold transition-all"
+        [class.bg-primary-500]="plan.highlighted"
+        [class.text-white]="plan.highlighted"
+        [class.hover:bg-primary-600]="plan.highlighted"
+        [class.bg-gray-100]="!plan.highlighted"
+        [class.text-gray-900]="!plan.highlighted"
+        [class.hover:bg-gray-200]="!plan.highlighted">
+        {{ plan.cta }}
+      </button>
+    </div>
+  \`,
+})
+export class PricingCardComponent {
+  @Input({ required: true }) plan!: Plan;
+  @Input() isYearly = false;
+  @Output() onSelect = new EventEmitter<Plan>();
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/pricing-card/pricing-card.component.ts'
+      ),
+      pricingCard
+    );
+
+    // FAQ Component
+    const faq = `import { Component, Input, signal } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroChevronDown } from '@ng-icons/heroicons/outline';
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+@Component({
+  selector: 'app-faq',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroChevronDown })],
+  template: \`
+    <div class="space-y-4">
+      @for (item of items; track item.question; let i = $index) {
+        <div class="rounded-xl border border-gray-200 bg-white">
+          <button
+            (click)="toggle(i)"
+            class="flex w-full items-center justify-between p-6 text-left">
+            <span class="font-semibold text-gray-900">{{ item.question }}</span>
+            <ng-icon
+              name="heroChevronDown"
+              size="20"
+              class="text-gray-500 transition-transform"
+              [class.rotate-180]="openIndex() === i">
+            </ng-icon>
+          </button>
+          @if (openIndex() === i) {
+            <div class="border-t border-gray-200 px-6 py-4">
+              <p class="text-gray-600">{{ item.answer }}</p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  \`,
+})
+export class FaqComponent {
+  @Input({ required: true }) items!: FaqItem[];
+
+  openIndex = signal<number | null>(null);
+
+  toggle(index: number): void {
+    this.openIndex.set(this.openIndex() === index ? null : index);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/faq/faq.component.ts'),
+      faq
+    );
+
+    // Stats Card
+    const statsCard = `import { Component, Input } from '@angular/core';
+import { NgIconComponent } from '@ng-icons/core';
+
+@Component({
+  selector: 'app-stats-card',
+  standalone: true,
+  imports: [NgIconComponent],
+  template: \`
+    <div class="rounded-xl border border-gray-200 bg-white p-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <p class="text-sm font-medium text-gray-500">{{ label }}</p>
+          <p class="mt-1 text-3xl font-bold text-gray-900">{{ value }}</p>
+          @if (subtext) {
+            <p class="mt-1 text-sm" [class.text-success-600]="trend === 'up'" [class.text-danger-600]="trend === 'down'" [class.text-gray-500]="!trend">
+              {{ subtext }}
+            </p>
+          }
+        </div>
+        @if (icon) {
+          <div class="flex h-12 w-12 items-center justify-center rounded-xl" [class]="iconBgClass">
+            <ng-icon [name]="icon" size="24" [class]="iconClass"></ng-icon>
+          </div>
+        }
+      </div>
+
+      @if (showProgress) {
+        <div class="mt-4">
+          <div class="flex justify-between text-sm">
+            <span class="text-gray-500">{{ progressLabel }}</span>
+            <span class="font-medium text-gray-900">{{ progressPercent }}%</span>
+          </div>
+          <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-gray-100">
+            <div
+              class="h-full rounded-full transition-all"
+              [class.bg-primary-500]="progressPercent < 80"
+              [class.bg-warning-500]="progressPercent >= 80 && progressPercent < 95"
+              [class.bg-danger-500]="progressPercent >= 95"
+              [style.width.%]="progressPercent">
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class StatsCardComponent {
+  @Input({ required: true }) label!: string;
+  @Input({ required: true }) value!: string | number;
+  @Input() subtext?: string;
+  @Input() trend?: 'up' | 'down';
+  @Input() icon?: string;
+  @Input() iconBgClass = 'bg-primary-100';
+  @Input() iconClass = 'text-primary-600';
+  @Input() showProgress = false;
+  @Input() progressLabel = 'Used';
+  @Input() progressPercent = 0;
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/stats-card/stats-card.component.ts'),
+      statsCard
+    );
+
+    // Feature Card
+    const featureCard = `import { Component, Input } from '@angular/core';
+import { NgIconComponent } from '@ng-icons/core';
+
+@Component({
+  selector: 'app-feature-card',
+  standalone: true,
+  imports: [NgIconComponent],
+  template: \`
+    <div class="rounded-xl border border-gray-200 bg-white p-6 transition-all hover:shadow-lg hover:-translate-y-1">
+      <div class="flex h-12 w-12 items-center justify-center rounded-xl" [class]="iconBgClass">
+        <ng-icon [name]="icon" size="24" [class]="iconClass"></ng-icon>
+      </div>
+      <h3 class="mt-4 text-lg font-semibold text-gray-900">{{ title }}</h3>
+      <p class="mt-2 text-gray-600">{{ description }}</p>
+    </div>
+  \`,
+})
+export class FeatureCardComponent {
+  @Input({ required: true }) icon!: string;
+  @Input({ required: true }) title!: string;
+  @Input({ required: true }) description!: string;
+  @Input() iconBgClass = 'bg-primary-100';
+  @Input() iconClass = 'text-primary-600';
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/feature-card/feature-card.component.ts'
+      ),
+      featureCard
+    );
+
+    // Testimonial Card
+    const testimonial = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroStarSolid } from '@ng-icons/heroicons/solid';
+
+export interface Testimonial {
+  content: string;
+  author: string;
+  role: string;
+  company: string;
+  avatar: string;
+  rating: number;
+}
+
+@Component({
+  selector: 'app-testimonial',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroStarSolid })],
+  template: \`
+    <div class="rounded-2xl border border-gray-200 bg-white p-8">
+      <div class="flex gap-1 mb-4">
+        @for (star of stars; track star) {
+          <ng-icon name="heroStarSolid" size="20" class="text-amber-400"></ng-icon>
+        }
+      </div>
+
+      <p class="text-gray-700 italic">"{{ testimonial.content }}"</p>
+
+      <div class="mt-6 flex items-center gap-4">
+        <img [src]="testimonial.avatar" [alt]="testimonial.author" class="h-12 w-12 rounded-full object-cover" />
+        <div>
+          <p class="font-semibold text-gray-900">{{ testimonial.author }}</p>
+          <p class="text-sm text-gray-500">{{ testimonial.role }}, {{ testimonial.company }}</p>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class TestimonialComponent {
+  @Input({ required: true }) testimonial!: Testimonial;
+
+  get stars(): number[] {
+    return Array.from({ length: this.testimonial.rating }, (_, i) => i);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/testimonial/testimonial.component.ts'),
+      testimonial
+    );
+  },
+
+  async createPages(config) {
+    // Pricing Page
+    const pricing = `import { Component, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { PricingCardComponent } from '@shared/components/pricing-card/pricing-card.component';
+import { FaqComponent, FaqItem } from '@shared/components/faq/faq.component';
+import { TestimonialComponent, Testimonial } from '@shared/components/testimonial/testimonial.component';
+import { SubscriptionService, Plan } from '@core/services/subscription.service';
+
+@Component({
+  selector: 'app-pricing',
+  standalone: true,
+  imports: [TranslateModule, PricingCardComponent, FaqComponent, TestimonialComponent],
+  template: \`
+    <div>
+      <!-- Hero -->
+      <section class="bg-gradient-to-b from-gray-50 to-white py-20">
+        <div class="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+          <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl">
+            {{ 'pricing.title' | translate }}
+          </h1>
+          <p class="mt-4 text-xl text-gray-600">
+            {{ 'pricing.subtitle' | translate }}
+          </p>
+
+          <!-- Billing Toggle -->
+          <div class="mt-8 flex items-center justify-center gap-4">
+            <span [class.text-gray-900]="!isYearly()" [class.text-gray-500]="isYearly()">Monthly</span>
+            <button
+              (click)="isYearly.set(!isYearly())"
+              class="relative h-8 w-14 rounded-full bg-primary-500 transition-colors">
+              <span
+                class="absolute top-1 h-6 w-6 rounded-full bg-white transition-all"
+                [class.left-1]="!isYearly()"
+                [class.left-7]="isYearly()">
+              </span>
+            </button>
+            <span [class.text-gray-900]="isYearly()" [class.text-gray-500]="!isYearly()">
+              Yearly
+              <span class="ml-1 rounded-full bg-success-100 px-2 py-0.5 text-xs font-medium text-success-700">
+                Save 20%
+              </span>
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Pricing Cards -->
+      <section class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="grid gap-8 md:grid-cols-3">
+            @for (plan of subscriptionService.plans(); track plan.id) {
+              <app-pricing-card
+                [plan]="plan"
+                [isYearly]="isYearly()"
+                (onSelect)="selectPlan($event)">
+              </app-pricing-card>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- Feature Comparison -->
+      <section class="bg-gray-50 py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h2 class="mb-12 text-center text-3xl font-bold text-gray-900">
+            {{ 'pricing.compareFeatures' | translate }}
+          </h2>
+
+          <div class="overflow-x-auto">
+            <table class="w-full">
+              <thead>
+                <tr class="border-b border-gray-200">
+                  <th class="py-4 text-left font-semibold text-gray-900">Feature</th>
+                  @for (plan of subscriptionService.plans(); track plan.id) {
+                    <th class="py-4 text-center font-semibold text-gray-900">{{ plan.name }}</th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (feature of comparisonFeatures; track feature.name) {
+                  <tr class="border-b border-gray-100">
+                    <td class="py-4 text-gray-700">{{ feature.name }}</td>
+                    @for (value of feature.values; track $index) {
+                      <td class="py-4 text-center">
+                        @if (value === true) {
+                          <span class="text-success-500">✓</span>
+                        } @else if (value === false) {
+                          <span class="text-gray-300">—</span>
+                        } @else {
+                          <span class="text-gray-700">{{ value }}</span>
+                        }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- Testimonials -->
+      <section class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h2 class="mb-12 text-center text-3xl font-bold text-gray-900">
+            {{ 'pricing.trustedBy' | translate }}
+          </h2>
+
+          <div class="grid gap-8 md:grid-cols-3">
+            @for (testimonial of testimonials; track testimonial.author) {
+              <app-testimonial [testimonial]="testimonial"></app-testimonial>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- FAQ -->
+      <section class="bg-gray-50 py-20">
+        <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <h2 class="mb-12 text-center text-3xl font-bold text-gray-900">
+            {{ 'pricing.faq' | translate }}
+          </h2>
+          <app-faq [items]="faqItems"></app-faq>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="py-20">
+        <div class="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+          <h2 class="text-3xl font-bold text-gray-900">{{ 'pricing.ctaTitle' | translate }}</h2>
+          <p class="mt-4 text-xl text-gray-600">{{ 'pricing.ctaSubtitle' | translate }}</p>
+          <button class="mt-8 rounded-lg bg-primary-500 px-8 py-4 font-semibold text-white hover:bg-primary-600">
+            {{ 'pricing.startTrial' | translate }}
+          </button>
+        </div>
+      </section>
+    </div>
+  \`,
+})
+export class PricingComponent {
+  subscriptionService = inject(SubscriptionService);
+  private router = inject(Router);
+
+  isYearly = signal(false);
+
+  comparisonFeatures = [
+    { name: 'API Calls', values: ['1,000/mo', '50,000/mo', 'Unlimited'] },
+    { name: 'Storage', values: ['100MB', '10GB', '100GB'] },
+    { name: 'Team Members', values: ['1', '5', 'Unlimited'] },
+    { name: 'Projects', values: ['3', 'Unlimited', 'Unlimited'] },
+    { name: 'Analytics', values: [false, true, true] },
+    { name: 'Custom Integrations', values: [false, true, true] },
+    { name: 'Priority Support', values: [false, true, true] },
+    { name: 'SLA Guarantee', values: [false, false, true] },
+    { name: 'On-Premise', values: [false, false, true] },
+  ];
+
+  testimonials: Testimonial[] = [
+    {
+      content: 'This platform has transformed how we handle our data. The API is incredibly well-designed and the support team is amazing.',
+      author: 'Sarah Chen',
+      role: 'CTO',
+      company: 'TechStart Inc',
+      avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150',
+      rating: 5,
+    },
+    {
+      content: 'We migrated from a competitor and the difference is night and day. Better performance, better pricing, better everything.',
+      author: 'Michael Rodriguez',
+      role: 'Lead Developer',
+      company: 'DataFlow',
+      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150',
+      rating: 5,
+    },
+    {
+      content: 'The enterprise features are exactly what we needed. Custom integrations and dedicated support made our rollout smooth.',
+      author: 'Emily Watson',
+      role: 'VP Engineering',
+      company: 'Enterprise Co',
+      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150',
+      rating: 5,
+    },
+  ];
+
+  faqItems: FaqItem[] = [
+    {
+      question: 'Can I change plans at any time?',
+      answer: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately and we\\'ll prorate any differences.',
+    },
+    {
+      question: 'What payment methods do you accept?',
+      answer: 'We accept all major credit cards (Visa, MasterCard, American Express) as well as PayPal. Enterprise customers can also pay via invoice.',
+    },
+    {
+      question: 'Is there a free trial?',
+      answer: 'Yes! All paid plans come with a 14-day free trial. No credit card required to start.',
+    },
+    {
+      question: 'What happens if I exceed my limits?',
+      answer: 'We\\'ll notify you when you\\'re approaching your limits. You can upgrade anytime, or we offer overage pricing for occasional spikes.',
+    },
+    {
+      question: 'Can I cancel anytime?',
+      answer: 'Absolutely. You can cancel your subscription at any time with no penalties. You\\'ll retain access until the end of your billing period.',
+    },
+  ];
+
+  selectPlan(plan: Plan): void {
+    if (plan.id === 'enterprise') {
+      this.router.navigate(['/contact']);
+    } else {
+      this.router.navigate(['/auth/register'], { queryParams: { plan: plan.id } });
+    }
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/pricing/pricing.component.ts'),
+      pricing
+    );
+
+    // Dashboard Overview
+    const dashboardOverview = `import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroChartBar,
+  heroCloud,
+  heroUsers,
+  heroFolder,
+  heroArrowTrendingUp,
+  heroArrowTrendingDown,
+} from '@ng-icons/heroicons/outline';
+import { StatsCardComponent } from '@shared/components/stats-card/stats-card.component';
+import { SubscriptionService } from '@core/services/subscription.service';
+
+@Component({
+  selector: 'app-dashboard-overview',
+  standalone: true,
+  imports: [RouterModule, DatePipe, TranslateModule, NgIconComponent, StatsCardComponent],
+  viewProviders: [provideIcons({ heroChartBar, heroCloud, heroUsers, heroFolder, heroArrowTrendingUp, heroArrowTrendingDown })],
+  template: \`
+    <div>
+      <div class="mb-8">
+        <h1 class="text-2xl font-bold text-gray-900">{{ 'dashboard.welcome' | translate }}</h1>
+        <p class="text-gray-600">{{ 'dashboard.overviewSubtitle' | translate }}</p>
+      </div>
+
+      <!-- Current Plan Banner -->
+      @if (subscriptionService.currentPlan()) {
+        <div class="mb-8 rounded-xl bg-gradient-to-r from-primary-500 to-purple-600 p-6 text-white">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-primary-100">Current Plan</p>
+              <p class="text-2xl font-bold">{{ subscriptionService.currentPlan()!.name }}</p>
+              <p class="mt-1 text-primary-100">
+                {{ subscriptionService.daysRemaining() }} days remaining
+              </p>
+            </div>
+            <a routerLink="/dashboard/subscription" class="rounded-lg bg-white/20 px-4 py-2 font-medium backdrop-blur-sm hover:bg-white/30">
+              Manage Subscription
+            </a>
+          </div>
+        </div>
+      }
+
+      <!-- Usage Stats -->
+      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <app-stats-card
+          label="API Calls"
+          [value]="formatNumber(subscriptionService.usage().apiCalls.used)"
+          [subtext]="'of ' + formatNumber(subscriptionService.usage().apiCalls.limit)"
+          icon="heroChartBar"
+          iconBgClass="bg-blue-100"
+          iconClass="text-blue-600"
+          [showProgress]="true"
+          progressLabel="Used this month"
+          [progressPercent]="getPercent(subscriptionService.usage().apiCalls)">
+        </app-stats-card>
+
+        <app-stats-card
+          label="Storage"
+          [value]="subscriptionService.usage().storage.used + ' GB'"
+          [subtext]="'of ' + subscriptionService.usage().storage.limit + ' GB'"
+          icon="heroCloud"
+          iconBgClass="bg-purple-100"
+          iconClass="text-purple-600"
+          [showProgress]="true"
+          progressLabel="Used"
+          [progressPercent]="getPercent(subscriptionService.usage().storage)">
+        </app-stats-card>
+
+        <app-stats-card
+          label="Team Members"
+          [value]="subscriptionService.usage().teamMembers.used"
+          [subtext]="'of ' + subscriptionService.usage().teamMembers.limit + ' seats'"
+          icon="heroUsers"
+          iconBgClass="bg-green-100"
+          iconClass="text-green-600"
+          [showProgress]="true"
+          [progressPercent]="getPercent(subscriptionService.usage().teamMembers)">
+        </app-stats-card>
+
+        <app-stats-card
+          label="Projects"
+          [value]="subscriptionService.usage().projects.used"
+          [subtext]="subscriptionService.usage().projects.limit === -1 ? 'Unlimited' : 'of ' + subscriptionService.usage().projects.limit"
+          icon="heroFolder"
+          iconBgClass="bg-amber-100"
+          iconClass="text-amber-600">
+        </app-stats-card>
+      </div>
+
+      <!-- Recent Activity -->
+      <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6">
+        <h2 class="mb-4 text-lg font-semibold text-gray-900">{{ 'dashboard.recentActivity' | translate }}</h2>
+        <div class="space-y-4">
+          @for (activity of recentActivity; track activity.id) {
+            <div class="flex items-center gap-4 rounded-lg bg-gray-50 p-4">
+              <div class="flex h-10 w-10 items-center justify-center rounded-full" [class]="activity.iconBg">
+                <ng-icon [name]="activity.icon" size="20" [class]="activity.iconColor"></ng-icon>
+              </div>
+              <div class="flex-1">
+                <p class="font-medium text-gray-900">{{ activity.title }}</p>
+                <p class="text-sm text-gray-500">{{ activity.description }}</p>
+              </div>
+              <span class="text-sm text-gray-500">{{ activity.time }}</span>
+            </div>
+          }
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="mt-8 grid gap-4 md:grid-cols-3">
+        <a routerLink="/dashboard/usage" class="rounded-xl border border-gray-200 bg-white p-6 transition-all hover:shadow-lg">
+          <ng-icon name="heroChartBar" size="24" class="text-primary-500"></ng-icon>
+          <h3 class="mt-3 font-semibold text-gray-900">View Detailed Usage</h3>
+          <p class="mt-1 text-sm text-gray-600">See your API usage trends and analytics</p>
+        </a>
+
+        <a routerLink="/dashboard/subscription" class="rounded-xl border border-gray-200 bg-white p-6 transition-all hover:shadow-lg">
+          <ng-icon name="heroArrowTrendingUp" size="24" class="text-success-500"></ng-icon>
+          <h3 class="mt-3 font-semibold text-gray-900">Upgrade Plan</h3>
+          <p class="mt-1 text-sm text-gray-600">Get more features and higher limits</p>
+        </a>
+
+        <a routerLink="/contact" class="rounded-xl border border-gray-200 bg-white p-6 transition-all hover:shadow-lg">
+          <ng-icon name="heroUsers" size="24" class="text-purple-500"></ng-icon>
+          <h3 class="mt-3 font-semibold text-gray-900">Invite Team</h3>
+          <p class="mt-1 text-sm text-gray-600">Add team members to collaborate</p>
+        </a>
+      </div>
+    </div>
+  \`,
+})
+export class DashboardOverviewComponent {
+  subscriptionService = inject(SubscriptionService);
+
+  recentActivity = [
+    { id: 1, title: 'API Key Generated', description: 'New production API key created', time: '2 hours ago', icon: 'heroChartBar', iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
+    { id: 2, title: 'Storage Increased', description: 'Upgraded storage from 5GB to 10GB', time: '1 day ago', icon: 'heroCloud', iconBg: 'bg-purple-100', iconColor: 'text-purple-600' },
+    { id: 3, title: 'New Team Member', description: 'john@example.com joined the team', time: '3 days ago', icon: 'heroUsers', iconBg: 'bg-green-100', iconColor: 'text-green-600' },
+  ];
+
+  formatNumber(num: number): string {
+    return num.toLocaleString();
+  }
+
+  getPercent(usage: { used: number; limit: number }): number {
+    if (usage.limit === -1) return 0;
+    return Math.round((usage.used / usage.limit) * 100);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/dashboard/overview/overview.component.ts'),
+      dashboardOverview
+    );
+
+    // Subscription Management Page
+    const subscription = `import { Component, inject, signal } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { DatePipe, CurrencyPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroCheck, heroExclamationTriangle } from '@ng-icons/heroicons/outline';
+import { SubscriptionService, Plan } from '@core/services/subscription.service';
+import { ToastService } from '@core/services/toast.service';
+
+@Component({
+  selector: 'app-subscription',
+  standalone: true,
+  imports: [RouterModule, DatePipe, CurrencyPipe, TranslateModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroCheck, heroExclamationTriangle })],
+  template: \`
+    <div>
+      <div class="mb-8">
+        <h1 class="text-2xl font-bold text-gray-900">{{ 'subscription.title' | translate }}</h1>
+        <p class="text-gray-600">{{ 'subscription.subtitle' | translate }}</p>
+      </div>
+
+      <!-- Current Subscription -->
+      @if (subscriptionService.subscription()) {
+        <div class="mb-8 rounded-xl border border-gray-200 bg-white p-6">
+          <div class="flex items-start justify-between">
+            <div>
+              <h2 class="text-lg font-semibold text-gray-900">Current Plan</h2>
+              <p class="mt-1 text-3xl font-bold text-primary-600">
+                {{ subscriptionService.currentPlan()?.name }}
+              </p>
+              <p class="mt-2 text-gray-600">
+                {{ subscriptionService.currentPlan()?.price | currency }}/month
+              </p>
+            </div>
+
+            <div class="text-right">
+              <span
+                class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium"
+                [class.bg-success-100]="subscriptionService.subscription()?.status === 'active'"
+                [class.text-success-700]="subscriptionService.subscription()?.status === 'active'"
+                [class.bg-warning-100]="subscriptionService.subscription()?.status === 'trialing'"
+                [class.text-warning-700]="subscriptionService.subscription()?.status === 'trialing'">
+                {{ subscriptionService.subscription()?.status | titlecase }}
+              </span>
+              <p class="mt-2 text-sm text-gray-500">
+                Renews {{ subscriptionService.subscription()?.currentPeriodEnd | date:'mediumDate' }}
+              </p>
+            </div>
+          </div>
+
+          @if (subscriptionService.subscription()?.cancelAtPeriodEnd) {
+            <div class="mt-4 flex items-center gap-2 rounded-lg bg-warning-50 p-4 text-warning-700">
+              <ng-icon name="heroExclamationTriangle" size="20"></ng-icon>
+              <span>Your subscription will cancel at the end of the billing period</span>
+            </div>
+          }
+
+          <div class="mt-6 flex gap-4">
+            @if (!subscriptionService.subscription()?.cancelAtPeriodEnd) {
+              <button
+                (click)="cancelSubscription()"
+                [disabled]="loading()"
+                class="rounded-lg border border-gray-300 px-4 py-2 font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50">
+                Cancel Subscription
+              </button>
+            }
+            <a routerLink="/pricing" class="rounded-lg bg-primary-500 px-4 py-2 font-medium text-white hover:bg-primary-600">
+              Change Plan
+            </a>
+          </div>
+        </div>
+      }
+
+      <!-- Plan Features -->
+      @if (subscriptionService.currentPlan()) {
+        <div class="rounded-xl border border-gray-200 bg-white p-6">
+          <h2 class="mb-4 text-lg font-semibold text-gray-900">Plan Features</h2>
+          <ul class="grid gap-3 md:grid-cols-2">
+            @for (feature of subscriptionService.currentPlan()!.features; track feature) {
+              <li class="flex items-center gap-2 text-gray-700">
+                <ng-icon name="heroCheck" size="20" class="text-success-500"></ng-icon>
+                {{ feature }}
+              </li>
+            }
+          </ul>
+        </div>
+      }
+
+      <!-- Billing History -->
+      <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6">
+        <h2 class="mb-4 text-lg font-semibold text-gray-900">Billing History</h2>
+        <div class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="border-b border-gray-200 text-left">
+                <th class="pb-3 font-medium text-gray-500">Date</th>
+                <th class="pb-3 font-medium text-gray-500">Description</th>
+                <th class="pb-3 font-medium text-gray-500">Amount</th>
+                <th class="pb-3 font-medium text-gray-500">Status</th>
+                <th class="pb-3 font-medium text-gray-500"></th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (invoice of invoices; track invoice.id) {
+                <tr class="border-b border-gray-100">
+                  <td class="py-4 text-gray-900">{{ invoice.date | date:'mediumDate' }}</td>
+                  <td class="py-4 text-gray-700">{{ invoice.description }}</td>
+                  <td class="py-4 text-gray-900">{{ invoice.amount | currency }}</td>
+                  <td class="py-4">
+                    <span class="rounded-full bg-success-100 px-2 py-1 text-xs font-medium text-success-700">
+                      {{ invoice.status }}
+                    </span>
+                  </td>
+                  <td class="py-4">
+                    <button class="text-primary-600 hover:text-primary-700">Download</button>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class SubscriptionComponent {
+  subscriptionService = inject(SubscriptionService);
+  private toast = inject(ToastService);
+
+  loading = signal(false);
+
+  invoices = [
+    { id: 1, date: new Date('2025-01-01'), description: 'Pro Plan - Monthly', amount: 29, status: 'Paid' },
+    { id: 2, date: new Date('2024-12-01'), description: 'Pro Plan - Monthly', amount: 29, status: 'Paid' },
+    { id: 3, date: new Date('2024-11-01'), description: 'Pro Plan - Monthly', amount: 29, status: 'Paid' },
+  ];
+
+  async cancelSubscription(): Promise<void> {
+    if (confirm('Are you sure you want to cancel your subscription?')) {
+      this.loading.set(true);
+      try {
+        await this.subscriptionService.cancelSubscription();
+        this.toast.success('Subscription cancelled. You will retain access until the end of your billing period.');
+      } catch {
+        this.toast.error('Failed to cancel subscription');
+      } finally {
+        this.loading.set(false);
+      }
+    }
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/features/dashboard/subscription/subscription.component.ts'
+      ),
+      subscription
+    );
+
+    // Features Page
+    const features = `import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroBolt,
+  heroShieldCheck,
+  heroChartBar,
+  heroCloud,
+  heroCog,
+  heroUsers,
+  heroGlobeAlt,
+  heroLockClosed,
+} from '@ng-icons/heroicons/outline';
+import { FeatureCardComponent } from '@shared/components/feature-card/feature-card.component';
+
+@Component({
+  selector: 'app-features',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, FeatureCardComponent],
+  viewProviders: [provideIcons({ heroBolt, heroShieldCheck, heroChartBar, heroCloud, heroCog, heroUsers, heroGlobeAlt, heroLockClosed })],
+  template: \`
+    <div>
+      <!-- Hero -->
+      <section class="bg-gradient-to-b from-primary-600 to-primary-800 py-20 text-white">
+        <div class="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+          <h1 class="text-4xl font-bold sm:text-5xl">{{ 'features.title' | translate }}</h1>
+          <p class="mt-4 text-xl text-primary-100">{{ 'features.subtitle' | translate }}</p>
+        </div>
+      </section>
+
+      <!-- Features Grid -->
+      <section class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+            @for (feature of features; track feature.title) {
+              <app-feature-card
+                [icon]="feature.icon"
+                [title]="feature.title"
+                [description]="feature.description"
+                [iconBgClass]="feature.iconBg"
+                [iconClass]="feature.iconColor">
+              </app-feature-card>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- Feature Details -->
+      <section class="bg-gray-50 py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          @for (detail of featureDetails; track detail.title; let i = $index) {
+            <div class="mb-20 last:mb-0 grid items-center gap-12 lg:grid-cols-2" [class.lg:flex-row-reverse]="i % 2 === 1">
+              <div [class.lg:order-2]="i % 2 === 1">
+                <h2 class="text-3xl font-bold text-gray-900">{{ detail.title }}</h2>
+                <p class="mt-4 text-lg text-gray-600">{{ detail.description }}</p>
+                <ul class="mt-6 space-y-3">
+                  @for (point of detail.points; track point) {
+                    <li class="flex items-center gap-3 text-gray-700">
+                      <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 text-primary-600">✓</span>
+                      {{ point }}
+                    </li>
+                  }
+                </ul>
+              </div>
+              <div [class.lg:order-1]="i % 2 === 1" class="rounded-2xl bg-linear-to-br p-8" [class]="detail.gradientClass">
+                <ng-icon [name]="detail.icon" size="120" class="mx-auto text-white/80"></ng-icon>
+              </div>
+            </div>
+          }
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="py-20">
+        <div class="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+          <h2 class="text-3xl font-bold text-gray-900">{{ 'features.ctaTitle' | translate }}</h2>
+          <p class="mt-4 text-xl text-gray-600">{{ 'features.ctaSubtitle' | translate }}</p>
+          <div class="mt-8 flex flex-wrap justify-center gap-4">
+            <a routerLink="/pricing" class="rounded-lg bg-primary-500 px-8 py-4 font-semibold text-white hover:bg-primary-600">
+              View Pricing
+            </a>
+            <a routerLink="/contact" class="rounded-lg border border-gray-300 px-8 py-4 font-semibold text-gray-700 hover:bg-gray-50">
+              Contact Sales
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  \`,
+})
+export class FeaturesComponent {
+  features = [
+    { icon: 'heroBolt', title: 'Lightning Fast', description: 'Sub-millisecond response times with our globally distributed infrastructure.', iconBg: 'bg-amber-100', iconColor: 'text-amber-600' },
+    { icon: 'heroShieldCheck', title: 'Enterprise Security', description: 'SOC 2 compliant with end-to-end encryption and advanced access controls.', iconBg: 'bg-green-100', iconColor: 'text-green-600' },
+    { icon: 'heroChartBar', title: 'Advanced Analytics', description: 'Real-time insights and custom dashboards to track your performance.', iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
+    { icon: 'heroCloud', title: 'Scalable Storage', description: 'Automatically scales with your needs, from megabytes to petabytes.', iconBg: 'bg-purple-100', iconColor: 'text-purple-600' },
+    { icon: 'heroCog', title: 'Custom Integrations', description: 'Connect with 100+ tools or build your own with our flexible API.', iconBg: 'bg-gray-100', iconColor: 'text-gray-600' },
+    { icon: 'heroUsers', title: 'Team Collaboration', description: 'Real-time collaboration with role-based permissions and audit logs.', iconBg: 'bg-pink-100', iconColor: 'text-pink-600' },
+    { icon: 'heroGlobeAlt', title: 'Global CDN', description: 'Content delivery from 200+ edge locations worldwide.', iconBg: 'bg-cyan-100', iconColor: 'text-cyan-600' },
+    { icon: 'heroLockClosed', title: 'SSO & SAML', description: 'Enterprise single sign-on with support for all major providers.', iconBg: 'bg-red-100', iconColor: 'text-red-600' },
+  ];
+
+  featureDetails = [
+    {
+      icon: 'heroChartBar',
+      title: 'Powerful Analytics Dashboard',
+      description: 'Get deep insights into your data with our comprehensive analytics suite. Track trends, identify patterns, and make data-driven decisions.',
+      points: ['Real-time data visualization', 'Custom report builder', 'Automated insights', 'Export to any format'],
+      gradientClass: 'from-blue-500 to-indigo-600',
+    },
+    {
+      icon: 'heroShieldCheck',
+      title: 'Enterprise-Grade Security',
+      description: 'Your data security is our top priority. We employ industry-leading security measures to protect your sensitive information.',
+      points: ['End-to-end encryption', 'SOC 2 Type II certified', 'GDPR compliant', '99.99% uptime SLA'],
+      gradientClass: 'from-green-500 to-emerald-600',
+    },
+    {
+      icon: 'heroCog',
+      title: 'Seamless Integrations',
+      description: 'Connect your favorite tools and automate your workflows with our extensive integration library and flexible API.',
+      points: ['100+ pre-built integrations', 'RESTful API', 'Webhooks support', 'Custom SDK available'],
+      gradientClass: 'from-purple-500 to-pink-600',
+    },
+  ];
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/features/features.component.ts'),
+      features
+    );
+  },
+
+  async createRouting(config) {
+    const routes = `import { Routes } from '@angular/router';
+
+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)
+  },
+  {
+    path: 'pricing',
+    loadComponent: () => import('./features/pricing/pricing.component').then(c => c.PricingComponent)
+  },
+  {
+    path: 'features',
+    loadComponent: () => import('./features/features/features.component').then(c => c.FeaturesComponent)
+  },
+
+  // Dashboard routes
+  {
+    path: 'dashboard',
+    children: [
+      { path: '', redirectTo: 'overview', pathMatch: 'full' },
+      { path: 'overview', loadComponent: () => import('./features/dashboard/overview/overview.component').then(c => c.DashboardOverviewComponent) },
+      { path: 'subscription', loadComponent: () => import('./features/dashboard/subscription/subscription.component').then(c => c.SubscriptionComponent) },
+    ]
+  },
+
+  // Auth routes
+  {
+    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) }
+    ]
+  },
+
+  { path: '**', redirectTo: '' }
+];`;
+
+    await fs.writeFile(path.join(config.fullPath, 'src/app/app.routes.ts'), routes);
+  },
+
+  async updateI18n(config) {
+    const enPath = path.join(config.fullPath, 'public/assets/i18n/en.json');
+    const arPath = path.join(config.fullPath, 'public/assets/i18n/ar.json');
+
+    let en = {};
+    let ar = {};
+
+    try {
+      en = JSON.parse(await fs.readFile(enPath, 'utf-8'));
+      ar = JSON.parse(await fs.readFile(arPath, 'utf-8'));
+    } catch {
+      // Files don't exist yet
+    }
+
+    const saasEn = {
+      pricing: {
+        title: 'Simple, Transparent Pricing',
+        subtitle: 'Choose the plan that fits your needs. No hidden fees.',
+        compareFeatures: 'Compare Features',
+        trustedBy: 'Trusted by Industry Leaders',
+        faq: 'Frequently Asked Questions',
+        ctaTitle: 'Ready to Get Started?',
+        ctaSubtitle: 'Start your 14-day free trial today. No credit card required.',
+        startTrial: 'Start Free Trial',
+      },
+      subscription: {
+        title: 'Subscription',
+        subtitle: 'Manage your subscription and billing',
+      },
+      dashboard: {
+        welcome: 'Welcome Back!',
+        overviewSubtitle: "Here's what's happening with your account",
+        recentActivity: 'Recent Activity',
+      },
+      features: {
+        title: 'Powerful Features for Modern Teams',
+        subtitle: 'Everything you need to build, deploy, and scale your applications',
+        ctaTitle: 'Ready to Transform Your Workflow?',
+        ctaSubtitle: 'Join thousands of teams already using our platform',
+      },
+    };
+
+    const saasAr = {
+      pricing: {
+        title: 'أسعار بسيطة وشفافة',
+        subtitle: 'اختر الخطة التي تناسب احتياجاتك. بدون رسوم خفية.',
+        compareFeatures: 'مقارنة الميزات',
+        trustedBy: 'موثوق به من قبل رواد الصناعة',
+        faq: 'الأسئلة الشائعة',
+        ctaTitle: 'هل أنت مستعد للبدء؟',
+        ctaSubtitle: 'ابدأ تجربتك المجانية لمدة 14 يومًا اليوم. لا حاجة لبطاقة ائتمان.',
+        startTrial: 'ابدأ التجربة المجانية',
+      },
+      subscription: {
+        title: 'الاشتراك',
+        subtitle: 'إدارة اشتراكك والفواتير',
+      },
+      dashboard: {
+        welcome: 'مرحبًا بعودتك!',
+        overviewSubtitle: 'إليك ما يحدث في حسابك',
+        recentActivity: 'النشاط الأخير',
+      },
+      features: {
+        title: 'ميزات قوية للفرق الحديثة',
+        subtitle: 'كل ما تحتاجه لبناء ونشر وتوسيع تطبيقاتك',
+        ctaTitle: 'هل أنت مستعد لتحويل سير عملك؟',
+        ctaSubtitle: 'انضم إلى آلاف الفرق التي تستخدم منصتنا بالفعل',
+      },
+    };
+
+    await fs.writeFile(enPath, JSON.stringify({ ...en, ...saasEn }, null, 2));
+    await fs.writeFile(arPath, JSON.stringify({ ...ar, ...saasAr }, null, 2));
+  },
+};
+
+module.exports = saas;