create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/landing/index.js

@@ -0,0 +1,1117 @@
+const fs = require('fs-extra');
+const path = require('path');
+const starter = require('../starter');
+
+/**
+ * Landing Page Template
+ * Single-page marketing template with:
+ * - Animated hero section
+ * - Feature highlights
+ * - How it works section
+ * - Testimonials
+ * - Pricing section
+ * - FAQ
+ * - CTA sections
+ * - Newsletter signup
+ */
+const landing = {
+  info: {
+    name: 'Landing Page',
+    description:
+      'Marketing landing page with hero, features, testimonials, pricing, and CTA sections',
+    features: [
+      ...starter.info.features,
+      'Animated hero with CTA',
+      'Feature cards with icons',
+      'How it works section',
+      'Social proof / logos',
+      'Testimonials carousel',
+      'Pricing comparison',
+      'FAQ accordion',
+      'Newsletter signup',
+      'Sticky navigation',
+    ],
+  },
+
+  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 landing-specific directories
+    if (spinner) spinner.update('Setting up landing page structure...');
+    await this.createDirectories(config);
+
+    // Step 3: Create components
+    await this.createComponents(config);
+
+    // Step 4: Create landing page
+    await this.createLandingPage(config);
+
+    // Step 5: Update layout (sticky header)
+    await this.updateLayout(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('Landing page template created');
+    completeStep('Hero section with animations');
+    completeStep('Features & benefits');
+    completeStep('Pricing section');
+    completeStep('Testimonials');
+    completeStep('FAQ & Newsletter');
+    console.log('');
+  },
+
+  async createDirectories(config) {
+    const directories = [
+      'src/app/features/landing',
+      'src/app/shared/components/hero',
+      'src/app/shared/components/features-section',
+      'src/app/shared/components/how-it-works',
+      'src/app/shared/components/social-proof',
+      'src/app/shared/components/pricing-section',
+      'src/app/shared/components/testimonials-section',
+      'src/app/shared/components/faq-section',
+      'src/app/shared/components/newsletter',
+      'src/app/shared/components/cta-section',
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+
+  async createComponents(config) {
+    // Hero Component
+    const hero = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroPlay, heroArrowRight } from '@ng-icons/heroicons/outline';
+import { heroStarSolid } from '@ng-icons/heroicons/solid';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroPlay, heroArrowRight, heroStarSolid })],
+  template: \`
+    <section class="relative min-h-screen overflow-hidden bg-linear-to-br from-slate-900 via-purple-900 to-slate-900">
+      <!-- Animated Background -->
+      <div class="absolute inset-0">
+        <div class="animate-blob absolute -left-4 top-20 h-96 w-96 rounded-full bg-purple-500 opacity-20 mix-blend-multiply blur-3xl"></div>
+        <div class="animate-blob animation-delay-2000 absolute right-0 top-0 h-96 w-96 rounded-full bg-cyan-500 opacity-20 mix-blend-multiply blur-3xl"></div>
+        <div class="animate-blob animation-delay-4000 absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-pink-500 opacity-20 mix-blend-multiply blur-3xl"></div>
+      </div>
+
+      <!-- Grid Pattern -->
+      <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>
+
+      <div class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-32">
+        <div class="text-center">
+          <!-- Badge -->
+          <div class="mb-8 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 backdrop-blur-sm">
+            <span class="relative flex h-2 w-2">
+              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+              <span class="relative inline-flex h-2 w-2 rounded-full bg-green-400"></span>
+            </span>
+            <span class="text-sm font-medium text-white">{{ badge }}</span>
+          </div>
+
+          <!-- Headline -->
+          <h1 class="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-white sm:text-6xl lg:text-7xl">
+            {{ title }}
+            <span class="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">{{ highlight }}</span>
+          </h1>
+
+          <!-- Subtitle -->
+          <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-300 sm:text-xl">
+            {{ subtitle }}
+          </p>
+
+          <!-- CTA Buttons -->
+          <div class="mt-10 flex flex-wrap justify-center gap-4">
+            <a
+              [routerLink]="primaryCta.link"
+              class="group inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-gray-900 shadow-xl transition-all hover:shadow-2xl hover:scale-105">
+              {{ primaryCta.text }}
+              <ng-icon name="heroArrowRight" size="20" class="transition-transform group-hover:translate-x-1"></ng-icon>
+            </a>
+            @if (secondaryCta) {
+              <button
+                (click)="onWatchDemo()"
+                class="inline-flex items-center gap-2 rounded-full border-2 border-white/30 px-8 py-4 font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/10">
+                <ng-icon name="heroPlay" size="20"></ng-icon>
+                {{ secondaryCta.text }}
+              </button>
+            }
+          </div>
+
+          <!-- Social Proof -->
+          <div class="mt-16">
+            <p class="mb-4 text-sm text-gray-400">Trusted by 10,000+ companies worldwide</p>
+            <div class="flex flex-wrap justify-center items-center gap-8 opacity-60">
+              @for (logo of logos; track logo) {
+                <div class="text-2xl font-bold text-white">{{ logo }}</div>
+              }
+            </div>
+          </div>
+
+          <!-- Stats -->
+          <div class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-4">
+            @for (stat of stats; track stat.label) {
+              <div class="text-center">
+                <div class="text-3xl font-bold text-white sm:text-4xl">{{ stat.value }}</div>
+                <div class="mt-1 text-sm text-gray-400">{{ stat.label }}</div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <!-- Scroll Indicator -->
+      <div class="absolute bottom-8 left-1/2 -translate-x-1/2">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-gray-400">Scroll to explore</span>
+          <div class="h-12 w-6 rounded-full border-2 border-white/30 p-1">
+            <div class="h-2 w-2 animate-bounce rounded-full bg-white"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class HeroComponent {
+  @Input() badge = 'New Feature Available';
+  @Input() title = 'Build something ';
+  @Input() highlight = 'amazing today';
+  @Input() subtitle = 'The all-in-one platform to build, launch, and grow your digital products faster than ever.';
+  @Input() primaryCta = { text: 'Get Started Free', link: '/auth/register' };
+  @Input() secondaryCta?: { text: string } = { text: 'Watch Demo' };
+  @Input() logos = ['Google', 'Microsoft', 'Airbnb', 'Spotify', 'Slack'];
+  @Input() stats = [
+    { value: '10K+', label: 'Active Users' },
+    { value: '99.9%', label: 'Uptime' },
+    { value: '50M+', label: 'API Requests' },
+    { value: '4.9/5', label: 'User Rating' },
+  ];
+
+  onWatchDemo(): void {
+    // Open video modal or navigate to demo
+    console.log('Watch demo clicked');
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/hero/hero.component.ts'),
+      hero
+    );
+
+    // Features Section
+    const features = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroBolt,
+  heroShieldCheck,
+  heroChartBar,
+  heroCog,
+  heroUsers,
+  heroGlobeAlt,
+} from '@ng-icons/heroicons/outline';
+
+export interface Feature {
+  icon: string;
+  title: string;
+  description: string;
+  iconBg?: string;
+  iconColor?: string;
+}
+
+@Component({
+  selector: 'app-features-section',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroBolt, heroShieldCheck, heroChartBar, heroCog, heroUsers, heroGlobeAlt })],
+  template: \`
+    <section class="py-24 bg-white" [id]="sectionId">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ badge }}</span>
+          <h2 class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl">{{ title }}</h2>
+          <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">{{ subtitle }}</p>
+        </div>
+
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          @for (feature of features; track feature.title) {
+            <div class="group rounded-2xl border border-gray-200 bg-white p-8 transition-all hover:shadow-xl hover:-translate-y-1 hover:border-primary-200">
+              <div
+                class="flex h-14 w-14 items-center justify-center rounded-xl transition-colors"
+                [class]="feature.iconBg || 'bg-primary-100 group-hover:bg-primary-500'">
+                <ng-icon
+                  [name]="feature.icon"
+                  size="28"
+                  [class]="feature.iconColor || 'text-primary-600 group-hover:text-white'">
+                </ng-icon>
+              </div>
+              <h3 class="mt-6 text-xl font-bold text-gray-900">{{ feature.title }}</h3>
+              <p class="mt-2 text-gray-600">{{ feature.description }}</p>
+            </div>
+          }
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class FeaturesSectionComponent {
+  @Input() sectionId = 'features';
+  @Input() badge = 'Features';
+  @Input() title = 'Everything you need';
+  @Input() subtitle = 'Powerful features to help you build, launch, and scale faster';
+  @Input() features: Feature[] = [
+    { icon: 'heroBolt', title: 'Lightning Fast', description: 'Optimized for speed with sub-millisecond response times and global CDN distribution.' },
+    { icon: 'heroShieldCheck', title: 'Secure by Default', description: 'Enterprise-grade security with end-to-end encryption and SOC 2 compliance.' },
+    { icon: 'heroChartBar', title: 'Advanced Analytics', description: 'Real-time insights and custom dashboards to track your key metrics.' },
+    { icon: 'heroCog', title: 'Easy Integration', description: 'Connect with 100+ tools through our REST API and native integrations.' },
+    { icon: 'heroUsers', title: 'Team Collaboration', description: 'Real-time collaboration with role-based access and audit logs.' },
+    { icon: 'heroGlobeAlt', title: 'Global Scale', description: 'Deploy worldwide with automatic scaling and 99.99% uptime guarantee.' },
+  ];
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/features-section/features-section.component.ts'
+      ),
+      features
+    );
+
+    // How It Works
+    const howItWorks = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowRight } from '@ng-icons/heroicons/outline';
+
+export interface Step {
+  number: number;
+  title: string;
+  description: string;
+  image?: string;
+}
+
+@Component({
+  selector: 'app-how-it-works',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroArrowRight })],
+  template: \`
+    <section class="py-24 bg-gray-50" [id]="sectionId">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ badge }}</span>
+          <h2 class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl">{{ title }}</h2>
+          <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">{{ subtitle }}</p>
+        </div>
+
+        <div class="relative">
+          <!-- Connection Line -->
+          <div class="absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2 bg-gray-200 hidden lg:block"></div>
+
+          <div class="space-y-12 lg:space-y-24">
+            @for (step of steps; track step.number; let i = $index) {
+              <div class="relative grid items-center gap-8 lg:grid-cols-2" [class.lg:flex-row-reverse]="i % 2 === 1">
+                <!-- Step Number -->
+                <div class="absolute left-1/2 -translate-x-1/2 hidden lg:flex h-12 w-12 items-center justify-center rounded-full bg-primary-500 text-white font-bold text-lg z-10">
+                  {{ step.number }}
+                </div>
+
+                <!-- Content -->
+                <div [class.lg:text-right]="i % 2 === 0" [class.lg:pr-16]="i % 2 === 0" [class.lg:pl-16]="i % 2 === 1">
+                  <div class="lg:hidden mb-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary-500 text-white font-bold">
+                    {{ step.number }}
+                  </div>
+                  <h3 class="text-2xl font-bold text-gray-900">{{ step.title }}</h3>
+                  <p class="mt-4 text-gray-600">{{ step.description }}</p>
+                </div>
+
+                <!-- Image/Illustration -->
+                <div [class.lg:order-first]="i % 2 === 1">
+                  @if (step.image) {
+                    <img [src]="step.image" [alt]="step.title" class="rounded-2xl shadow-xl" />
+                  } @else {
+                    <div class="aspect-video rounded-2xl bg-linear-to-br from-primary-100 to-purple-100 flex items-center justify-center">
+                      <span class="text-6xl font-bold text-primary-300">{{ step.number }}</span>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class HowItWorksComponent {
+  @Input() sectionId = 'how-it-works';
+  @Input() badge = 'How It Works';
+  @Input() title = 'Get started in minutes';
+  @Input() subtitle = 'Simple steps to transform your workflow';
+  @Input() steps: Step[] = [
+    { number: 1, title: 'Create Your Account', description: 'Sign up in seconds with just your email. No credit card required to get started.' },
+    { number: 2, title: 'Configure Your Workspace', description: 'Set up your workspace, invite team members, and customize your settings.' },
+    { number: 3, title: 'Start Building', description: 'Use our intuitive tools and templates to build your first project in minutes.' },
+    { number: 4, title: 'Launch & Scale', description: 'Deploy with one click and scale automatically as your business grows.' },
+  ];
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/how-it-works/how-it-works.component.ts'
+      ),
+      howItWorks
+    );
+
+    // Testimonials Section
+    const testimonials = `import { Component, Input, signal } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroChevronLeft, heroChevronRight } from '@ng-icons/heroicons/outline';
+import { heroStarSolid } from '@ng-icons/heroicons/solid';
+
+export interface LandingTestimonial {
+  content: string;
+  author: string;
+  role: string;
+  company: string;
+  avatar: string;
+  rating: number;
+}
+
+@Component({
+  selector: 'app-testimonials-section',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroChevronLeft, heroChevronRight, heroStarSolid })],
+  template: \`
+    <section class="py-24 bg-white" [id]="sectionId">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ badge }}</span>
+          <h2 class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl">{{ title }}</h2>
+          <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">{{ subtitle }}</p>
+        </div>
+
+        <!-- Testimonials Grid -->
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          @for (testimonial of testimonials; track testimonial.author) {
+            <div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-lg transition-shadow">
+              <!-- Rating -->
+              <div class="flex gap-1 mb-4">
+                @for (star of getStars(testimonial.rating); track $index) {
+                  <ng-icon name="heroStarSolid" size="20" class="text-amber-400"></ng-icon>
+                }
+              </div>
+
+              <!-- Content -->
+              <p class="text-gray-700 italic leading-relaxed">"{{ testimonial.content }}"</p>
+
+              <!-- Author -->
+              <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>
+          }
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class TestimonialsSectionComponent {
+  @Input() sectionId = 'testimonials';
+  @Input() badge = 'Testimonials';
+  @Input() title = 'Loved by thousands';
+  @Input() subtitle = 'See what our customers have to say about us';
+  @Input() testimonials: LandingTestimonial[] = [
+    {
+      content: 'This platform has completely transformed how we work. The speed and reliability are unmatched.',
+      author: 'Sarah Chen',
+      role: 'CTO',
+      company: 'TechStart Inc',
+      avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150',
+      rating: 5,
+    },
+    {
+      content: 'We migrated our entire infrastructure and saw a 40% improvement in performance immediately.',
+      author: 'Michael Rodriguez',
+      role: 'Engineering Lead',
+      company: 'DataFlow',
+      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150',
+      rating: 5,
+    },
+    {
+      content: 'The customer support is incredible. Any question we have is answered within minutes.',
+      author: 'Emily Watson',
+      role: 'Product Manager',
+      company: 'Scale Labs',
+      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150',
+      rating: 5,
+    },
+  ];
+
+  getStars(rating: number): number[] {
+    return Array.from({ length: rating }, (_, i) => i);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/testimonials-section/testimonials-section.component.ts'
+      ),
+      testimonials
+    );
+
+    // Pricing Section
+    const pricing = `import { Component, Input, signal } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CurrencyPipe } from '@angular/common';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroCheck } from '@ng-icons/heroicons/outline';
+
+export interface PricingPlan {
+  name: string;
+  description: string;
+  price: number;
+  priceYearly: number;
+  features: string[];
+  cta: string;
+  highlighted?: boolean;
+}
+
+@Component({
+  selector: 'app-pricing-section',
+  standalone: true,
+  imports: [RouterModule, CurrencyPipe, NgIconComponent],
+  viewProviders: [provideIcons({ heroCheck })],
+  template: \`
+    <section class="py-24 bg-gray-50" [id]="sectionId">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ badge }}</span>
+          <h2 class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl">{{ title }}</h2>
+          <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">{{ subtitle }}</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>
+
+        <div class="grid gap-8 lg:grid-cols-3">
+          @for (plan of plans; track plan.name) {
+            <div
+              class="relative rounded-2xl border-2 bg-white p-8 shadow-sm transition-all hover:shadow-xl"
+              [class.border-primary-500]="plan.highlighted"
+              [class.border-gray-200]="!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>
+              </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>
+
+              <a
+                [routerLink]="['/auth/register']"
+                [queryParams]="{ plan: plan.name.toLowerCase() }"
+                class="mt-8 block w-full rounded-lg py-3 text-center 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 }}
+              </a>
+            </div>
+          }
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class PricingSectionComponent {
+  @Input() sectionId = 'pricing';
+  @Input() badge = 'Pricing';
+  @Input() title = 'Simple, transparent pricing';
+  @Input() subtitle = 'Choose the plan that fits your needs. No hidden fees.';
+  @Input() plans: PricingPlan[] = [
+    {
+      name: 'Starter',
+      description: 'Perfect for individuals',
+      price: 0,
+      priceYearly: 0,
+      features: ['1 user', '5 projects', '1GB storage', 'Basic support'],
+      cta: 'Get Started Free',
+    },
+    {
+      name: 'Pro',
+      description: 'Best for growing teams',
+      price: 29,
+      priceYearly: 290,
+      features: ['10 users', 'Unlimited projects', '100GB storage', 'Priority support', 'Advanced analytics'],
+      cta: 'Start Free Trial',
+      highlighted: true,
+    },
+    {
+      name: 'Enterprise',
+      description: 'For large organizations',
+      price: 99,
+      priceYearly: 990,
+      features: ['Unlimited users', 'Unlimited projects', '1TB storage', '24/7 support', 'Custom integrations', 'SLA'],
+      cta: 'Contact Sales',
+    },
+  ];
+
+  isYearly = signal(false);
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/pricing-section/pricing-section.component.ts'
+      ),
+      pricing
+    );
+
+    // FAQ Section
+    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-section',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroChevronDown })],
+  template: \`
+    <section class="py-24 bg-white" [id]="sectionId">
+      <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-16">
+          <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">{{ badge }}</span>
+          <h2 class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl">{{ title }}</h2>
+          <p class="mt-4 text-xl text-gray-600">{{ subtitle }}</p>
+        </div>
+
+        <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 overflow-hidden">
+              <button
+                (click)="toggle(i)"
+                class="flex w-full items-center justify-between p-6 text-left hover:bg-gray-50">
+                <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 bg-gray-50">
+                  <p class="text-gray-600">{{ item.answer }}</p>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class FaqSectionComponent {
+  @Input() sectionId = 'faq';
+  @Input() badge = 'FAQ';
+  @Input() title = 'Frequently asked questions';
+  @Input() subtitle = 'Everything you need to know';
+  @Input() items: FaqItem[] = [
+    { question: 'How do I get started?', answer: 'Simply sign up for a free account and you can start using the platform immediately. No credit card required.' },
+    { question: 'Can I change my plan later?', answer: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle.' },
+    { 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 payment methods do you accept?', answer: 'We accept all major credit cards (Visa, MasterCard, American Express) as well as PayPal and bank transfers for enterprise plans.' },
+    { question: 'Can I cancel anytime?', answer: 'Absolutely. You can cancel your subscription at any time with no penalties or hidden fees.' },
+  ];
+
+  openIndex = signal<number | null>(0);
+
+  toggle(index: number): void {
+    this.openIndex.set(this.openIndex() === index ? null : index);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/faq-section/faq-section.component.ts'),
+      faq
+    );
+
+    // Newsletter
+    const newsletter = `import { Component, Input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroPaperAirplane } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-newsletter',
+  standalone: true,
+  imports: [FormsModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroPaperAirplane })],
+  template: \`
+    <section class="py-24 bg-gradient-to-r from-primary-600 to-purple-600">
+      <div class="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+        <h2 class="text-3xl font-bold text-white sm:text-4xl">{{ title }}</h2>
+        <p class="mt-4 text-xl text-primary-100">{{ subtitle }}</p>
+
+        @if (!submitted()) {
+          <form (ngSubmit)="subscribe()" class="mt-8 flex flex-col gap-4 sm:flex-row sm:justify-center">
+            <input
+              type="email"
+              [(ngModel)]="email"
+              name="email"
+              [placeholder]="placeholder"
+              required
+              class="w-full rounded-full px-6 py-4 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-white sm:w-80"
+            />
+            <button
+              type="submit"
+              [disabled]="loading()"
+              class="inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-primary-600 hover:bg-gray-100 disabled:opacity-50">
+              @if (loading()) {
+                <span class="h-5 w-5 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"></span>
+              } @else {
+                <ng-icon name="heroPaperAirplane" size="20"></ng-icon>
+              }
+              {{ buttonText }}
+            </button>
+          </form>
+          <p class="mt-4 text-sm text-primary-200">{{ disclaimer }}</p>
+        } @else {
+          <div class="mt-8 rounded-2xl bg-white/10 p-8 backdrop-blur-sm">
+            <p class="text-xl font-semibold text-white">{{ successMessage }}</p>
+          </div>
+        }
+      </div>
+    </section>
+  \`,
+})
+export class NewsletterComponent {
+  @Input() title = 'Stay in the loop';
+  @Input() subtitle = 'Get the latest updates, tips, and special offers delivered to your inbox.';
+  @Input() placeholder = 'Enter your email';
+  @Input() buttonText = 'Subscribe';
+  @Input() disclaimer = 'No spam, unsubscribe at any time.';
+  @Input() successMessage = 'Thanks for subscribing! Check your inbox for confirmation.';
+
+  email = '';
+  loading = signal(false);
+  submitted = signal(false);
+
+  subscribe(): void {
+    if (!this.email) return;
+
+    this.loading.set(true);
+    // Simulate API call
+    setTimeout(() => {
+      this.loading.set(false);
+      this.submitted.set(true);
+    }, 1000);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/newsletter/newsletter.component.ts'),
+      newsletter
+    );
+
+    // CTA Section
+    const cta = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowRight } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-cta-section',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroArrowRight })],
+  template: \`
+    <section class="py-24 bg-gray-900">
+      <div class="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+        <h2 class="text-3xl font-bold text-white sm:text-4xl">{{ title }}</h2>
+        <p class="mt-4 text-xl text-gray-400">{{ subtitle }}</p>
+
+        <div class="mt-10 flex flex-wrap justify-center gap-4">
+          <a
+            [routerLink]="primaryCta.link"
+            class="group inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-gray-900 hover:bg-gray-100 transition-all">
+            {{ primaryCta.text }}
+            <ng-icon name="heroArrowRight" size="20" class="transition-transform group-hover:translate-x-1"></ng-icon>
+          </a>
+          @if (secondaryCta) {
+            <a
+              [routerLink]="secondaryCta.link"
+              class="inline-flex items-center gap-2 rounded-full border-2 border-white/30 px-8 py-4 font-semibold text-white hover:bg-white/10 transition-all">
+              {{ secondaryCta.text }}
+            </a>
+          }
+        </div>
+      </div>
+    </section>
+  \`,
+})
+export class CtaSectionComponent {
+  @Input() title = 'Ready to get started?';
+  @Input() subtitle = 'Join thousands of satisfied customers using our platform.';
+  @Input() primaryCta = { text: 'Start Free Trial', link: '/auth/register' };
+  @Input() secondaryCta?: { text: string; link: string } = { text: 'Contact Sales', link: '/contact' };
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/cta-section/cta-section.component.ts'),
+      cta
+    );
+  },
+
+  async createLandingPage(config) {
+    const landingPage = `import { Component } from '@angular/core';
+import { HeroComponent } from '@shared/components/hero/hero.component';
+import { FeaturesSectionComponent } from '@shared/components/features-section/features-section.component';
+import { HowItWorksComponent } from '@shared/components/how-it-works/how-it-works.component';
+import { TestimonialsSectionComponent } from '@shared/components/testimonials-section/testimonials-section.component';
+import { PricingSectionComponent } from '@shared/components/pricing-section/pricing-section.component';
+import { FaqSectionComponent } from '@shared/components/faq-section/faq-section.component';
+import { NewsletterComponent } from '@shared/components/newsletter/newsletter.component';
+import { CtaSectionComponent } from '@shared/components/cta-section/cta-section.component';
+
+@Component({
+  selector: 'app-landing',
+  standalone: true,
+  imports: [
+    HeroComponent,
+    FeaturesSectionComponent,
+    HowItWorksComponent,
+    TestimonialsSectionComponent,
+    PricingSectionComponent,
+    FaqSectionComponent,
+    NewsletterComponent,
+    CtaSectionComponent,
+  ],
+  template: \`
+    <app-hero></app-hero>
+    <app-features-section></app-features-section>
+    <app-how-it-works></app-how-it-works>
+    <app-testimonials-section></app-testimonials-section>
+    <app-pricing-section></app-pricing-section>
+    <app-faq-section></app-faq-section>
+    <app-newsletter></app-newsletter>
+    <app-cta-section></app-cta-section>
+  \`,
+})
+export class LandingComponent {}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/landing/landing.component.ts'),
+      landingPage
+    );
+  },
+
+  async updateLayout(config) {
+    // Update header to be sticky and transparent on landing
+    const header = `import { Component, inject, signal, HostListener } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroBars3, heroXMark, heroGlobeAlt } from '@ng-icons/heroicons/outline';
+import { TranslationService } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroBars3, heroXMark, heroGlobeAlt })],
+  template: \`
+    <header
+      class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+      [class.bg-white]="scrolled()"
+      [class.shadow-md]="scrolled()"
+      [class.bg-transparent]="!scrolled()">
+      <nav class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between lg:h-20">
+          <!-- Logo -->
+          <a routerLink="/" class="text-xl font-bold" [class.text-gray-900]="scrolled()" [class.text-white]="!scrolled()">
+            {{ 'app.name' | translate }}
+          </a>
+
+          <!-- Desktop Navigation -->
+          <div class="hidden lg:flex lg:items-center lg:gap-8">
+            @for (link of navLinks; track link.path) {
+              <a
+                [routerLink]="link.path"
+                [fragment]="link.fragment"
+                class="text-sm font-medium transition-colors"
+                [class.text-gray-700]="scrolled()"
+                [class.hover:text-primary-600]="scrolled()"
+                [class.text-white/80]="!scrolled()"
+                [class.hover:text-white]="!scrolled()">
+                {{ link.label | translate }}
+              </a>
+            }
+          </div>
+
+          <!-- Right Actions -->
+          <div class="flex items-center gap-4">
+            <!-- Language Switcher -->
+            <button
+              (click)="toggleLanguage()"
+              class="flex items-center gap-1 rounded-lg p-2 transition-colors"
+              [class.text-gray-600]="scrolled()"
+              [class.hover:bg-gray-100]="scrolled()"
+              [class.text-white/80]="!scrolled()"
+              [class.hover:bg-white/10]="!scrolled()">
+              <ng-icon name="heroGlobeAlt" size="20"></ng-icon>
+              <span class="text-sm font-medium">{{ translationService.currentLang() === 'en' ? 'AR' : 'EN' }}</span>
+            </button>
+
+            <!-- Auth Buttons -->
+            <div class="hidden lg:flex lg:items-center lg:gap-3">
+              <a
+                routerLink="/auth/login"
+                class="text-sm font-medium transition-colors"
+                [class.text-gray-700]="scrolled()"
+                [class.hover:text-primary-600]="scrolled()"
+                [class.text-white/80]="!scrolled()"
+                [class.hover:text-white]="!scrolled()">
+                {{ 'nav.login' | translate }}
+              </a>
+              <a
+                routerLink="/auth/register"
+                class="rounded-full px-4 py-2 text-sm font-semibold transition-all"
+                [class.bg-primary-500]="scrolled()"
+                [class.text-white]="scrolled()"
+                [class.hover:bg-primary-600]="scrolled()"
+                [class.bg-white]="!scrolled()"
+                [class.text-gray-900]="!scrolled()"
+                [class.hover:bg-gray-100]="!scrolled()">
+                {{ 'nav.getStarted' | translate }}
+              </a>
+            </div>
+
+            <!-- Mobile Menu Button -->
+            <button
+              (click)="mobileMenuOpen.set(!mobileMenuOpen())"
+              class="lg:hidden p-2 rounded-lg"
+              [class.text-gray-600]="scrolled()"
+              [class.text-white]="!scrolled()">
+              <ng-icon [name]="mobileMenuOpen() ? 'heroXMark' : 'heroBars3'" size="24"></ng-icon>
+            </button>
+          </div>
+        </div>
+
+        <!-- Mobile Menu -->
+        @if (mobileMenuOpen()) {
+          <div class="lg:hidden border-t border-gray-200 bg-white py-4">
+            @for (link of navLinks; track link.path) {
+              <a
+                [routerLink]="link.path"
+                [fragment]="link.fragment"
+                (click)="mobileMenuOpen.set(false)"
+                class="block px-4 py-2 text-gray-700 hover:bg-gray-50">
+                {{ link.label | translate }}
+              </a>
+            }
+            <div class="mt-4 border-t border-gray-200 pt-4 px-4 space-y-2">
+              <a routerLink="/auth/login" class="block py-2 text-gray-700">{{ 'nav.login' | translate }}</a>
+              <a routerLink="/auth/register" class="block rounded-lg bg-primary-500 py-2 text-center text-white">
+                {{ 'nav.getStarted' | translate }}
+              </a>
+            </div>
+          </div>
+        }
+      </nav>
+    </header>
+  \`,
+})
+export class HeaderComponent {
+  translationService = inject(TranslationService);
+
+  mobileMenuOpen = signal(false);
+  scrolled = signal(false);
+
+  navLinks = [
+    { path: '/', fragment: 'features', label: 'nav.features' },
+    { path: '/', fragment: 'how-it-works', label: 'nav.howItWorks' },
+    { path: '/', fragment: 'testimonials', label: 'nav.testimonials' },
+    { path: '/', fragment: 'pricing', label: 'nav.pricing' },
+    { path: '/', fragment: 'faq', label: 'nav.faq' },
+  ];
+
+  @HostListener('window:scroll')
+  onScroll(): void {
+    this.scrolled.set(window.scrollY > 50);
+  }
+
+  toggleLanguage(): void {
+    const newLang = this.translationService.currentLang() === 'en' ? 'ar' : 'en';
+    this.translationService.setLanguage(newLang);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/layout/header/header.component.ts'),
+      header
+    );
+  },
+
+  async createRouting(config) {
+    const routes = `import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  // Landing page as home
+  {
+    path: '',
+    loadComponent: () => import('./features/landing/landing.component').then(c => c.LandingComponent)
+  },
+  {
+    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
+  {
+    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 landingEn = {
+      nav: {
+        features: 'Features',
+        howItWorks: 'How It Works',
+        testimonials: 'Testimonials',
+        pricing: 'Pricing',
+        faq: 'FAQ',
+        login: 'Log In',
+        getStarted: 'Get Started',
+      },
+    };
+
+    const landingAr = {
+      nav: {
+        features: 'الميزات',
+        howItWorks: 'كيف يعمل',
+        testimonials: 'الشهادات',
+        pricing: 'الأسعار',
+        faq: 'الأسئلة الشائعة',
+        login: 'تسجيل الدخول',
+        getStarted: 'ابدأ الآن',
+      },
+    };
+
+    await fs.writeFile(enPath, JSON.stringify({ ...en, ...landingEn }, null, 2));
+    await fs.writeFile(arPath, JSON.stringify({ ...ar, ...landingAr }, null, 2));
+  },
+};
+
+module.exports = landing;