create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/starter/i18n.js

@@ -0,0 +1,856 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create i18n (translations) for starter template
+ */
+async function createI18n(config) {
+  // Create Translation Service
+  const translationService = `import { Injectable, inject, signal, effect, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { StorageService } from '@core/services/storage.service';
+
+export type SupportedLanguage = 'en' | 'ar';
+
+export interface LanguageOption {
+  code: SupportedLanguage;
+  name: string;
+  nativeName: string;
+  dir: 'ltr' | 'rtl';
+  flag: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+  private translateService = inject(TranslateService);
+  private storage = inject(StorageService);
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  // Reactive current language
+  public currentLang = signal<SupportedLanguage>('en');
+
+  // Reactive text direction
+  public textDirection = signal<'ltr' | 'rtl'>('ltr');
+
+  // Available languages
+  public readonly languages: LanguageOption[] = [
+    {
+      code: 'en',
+      name: 'English',
+      nativeName: 'English',
+      dir: 'ltr',
+      flag: '🇺🇸'
+    },
+    {
+      code: 'ar',
+      name: 'Arabic',
+      nativeName: 'العربية',
+      dir: 'rtl',
+      flag: '🇸🇦'
+    }
+  ];
+
+  constructor() {
+    // Initialize translation service
+    this.translateService.setDefaultLang('en');
+
+    // Load saved language or detect browser language
+    const savedLang = this.getSavedLanguage();
+    const browserLang = this.translateService.getBrowserLang() as SupportedLanguage;
+    const initialLang = savedLang || (this.isSupportedLanguage(browserLang) ? browserLang : 'en');
+
+    this.setLanguage(initialLang);
+
+    // Effect to update document direction when language changes (browser only)
+    if (this.isBrowser) {
+      effect(() => {
+        const dir = this.textDirection();
+        document.documentElement.setAttribute('dir', dir);
+        document.documentElement.setAttribute('lang', this.currentLang());
+      });
+    }
+  }
+
+  /**
+   * Change the current language
+   */
+  setLanguage(lang: SupportedLanguage): void {
+    if (!this.isSupportedLanguage(lang)) {
+      console.warn(\`Language '\${lang}' is not supported. Falling back to 'en'.\`);
+      lang = 'en';
+    }
+
+    this.translateService.use(lang);
+    this.currentLang.set(lang);
+
+    const languageOption = this.languages.find(l => l.code === lang);
+    if (languageOption) {
+      this.textDirection.set(languageOption.dir);
+    }
+
+    this.saveLanguage(lang);
+  }
+
+  /**
+   * Get current language
+   */
+  getCurrentLanguage(): SupportedLanguage {
+    return this.currentLang();
+  }
+
+  /**
+   * Get language option by code
+   */
+  getLanguageOption(code: SupportedLanguage): LanguageOption | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  /**
+   * Check if language is supported
+   */
+  isSupportedLanguage(lang: string): lang is SupportedLanguage {
+    return ['en', 'ar'].includes(lang);
+  }
+
+  /**
+   * Toggle between English and Arabic
+   */
+  toggleLanguage(): void {
+    const newLang: SupportedLanguage = this.currentLang() === 'en' ? 'ar' : 'en';
+    this.setLanguage(newLang);
+  }
+
+  /**
+   * Get instant translation
+   */
+  instant(key: string, params?: object): string {
+    return this.translateService.instant(key, params);
+  }
+
+  /**
+   * Get translation as observable
+   */
+  get(key: string | string[], params?: object) {
+    return this.translateService.get(key, params);
+  }
+
+  /**
+   * Save language preference to storage
+   */
+  private saveLanguage(lang: SupportedLanguage): void {
+    this.storage.setItem('preferred_language', lang);
+  }
+
+  /**
+   * Get saved language from storage
+   */
+  private getSavedLanguage(): SupportedLanguage | null {
+    const saved = this.storage.getItem('preferred_language');
+    return saved && this.isSupportedLanguage(saved) ? saved : null;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/i18n/translation.service.ts"),
+    translationService
+  );
+
+  // Create English translations
+  const enTranslations = {
+    app: {
+      title: config.projectName,
+      welcome: "Welcome to {{name}}",
+      description:
+        "A professional Angular starter template with Tailwind CSS",
+    },
+    nav: {
+      home: "Home",
+      about: "About",
+      contact: "Contact",
+      login: "Sign In",
+      register: "Get Started",
+      logout: "Sign Out",
+      profile: "Profile Settings",
+      account: "Account Settings",
+    },
+    home: {
+      hero: {
+        title: "Welcome to {{projectName}}",
+        subtitle:
+          "A professional Angular starter template with Tailwind CSS. Built with modern best practices and ready to scale.",
+        button: "Get Started",
+        learnMore: "Learn More",
+      },
+      features: {
+        title: "Modern Angular Features",
+        subtitle:
+          "Everything you need to build professional web applications.",
+        standalone: {
+          title: "Standalone Components",
+          description: "Modern Angular architecture without NgModules",
+        },
+        tailwind: {
+          title: "Tailwind CSS",
+          description: "Utility-first CSS framework for rapid UI development",
+        },
+        typescript: {
+          title: "TypeScript",
+          description: "Full type safety and enhanced developer experience",
+        },
+      },
+      techStack: {
+        title:
+          "Leveraging the latest tools and frameworks for optimal performance",
+        angular: {
+          title: "Angular 20+",
+          description:
+            "Modern standalone components with signals for reactive state management",
+        },
+        tailwind: {
+          title: "Tailwind CSS v4",
+          description:
+            "Utility-first CSS framework with modern PostCSS configuration",
+        },
+        typescript: {
+          title: "TypeScript",
+          description:
+            "Strongly-typed interfaces and models for enhanced developer experience",
+        },
+      },
+      readyToStart: {
+        title: "Ready to Start Building?",
+        subtitle: "Explore other pages or get in touch with us to learn more",
+        viewHome: "View Home",
+        contactUs: "Contact Us",
+      },
+      productionReady: {
+        sectionTitle: "What's Included in This Starter Template",
+        title:
+          "A production-ready Angular application with 20+ pre-configured features, services, and components",
+        modernArchitecture: {
+          title: "Modern Architecture",
+          description:
+            "Standalone components, Signals, Zoneless support, Angular 20+",
+        },
+        i18n: {
+          title: "i18n Translation",
+          description:
+            "English & Arabic with RTL support, language switcher in header",
+        },
+        interceptors: {
+          title: "HTTP Interceptors",
+          description:
+            "Auth, Error handling, Loading state, Response caching (5min TTL)",
+        },
+        tailwind: {
+          title: "Tailwind CSS v4",
+          description:
+            "Modern PostCSS setup, responsive utilities, dark mode ready",
+        },
+        uiComponents: {
+          title: "UI Components",
+          description:
+            "Button, Card, Spinner, Toast, Modal with full customization",
+        },
+        typeSafe: {
+          title: "Type-Safe",
+          description: "TypeScript interfaces, models, strongly-typed services",
+        },
+      },
+      coreServices: {
+        title: "Core Services (src/app/core/)",
+        authService: "AuthService - Authentication & user management",
+        apiService: "ApiService - Centralized HTTP request handling",
+        toastService:
+          "ToastService - Notification system (success, error, warning, info)",
+        modalService: "ModalService - Dialog system with confirm & alert",
+        loadingService: "LoadingService - Global loading state with signals",
+        cacheService: "CacheService - Response caching with TTL",
+        storageService: "StorageService - LocalStorage wrapper with type safety",
+        i18nService: "i18nService - Internationalization management",
+      },
+      sharedComponents: {
+        title: "Shared Components (src/app/shared/)",
+        button: "ButtonComponent - Variants: primary, secondary, danger",
+        card: "CardComponent - Flexible container with title & shadow",
+        spinner: "LoadingSpinnerComponent - Animated loading indicator",
+        toast: "ToastComponent - Auto-dismiss notifications",
+        modal: "ModalComponent - Accessible dialog with sizes",
+        pipes: "Pipes - Truncate, TimeAgo",
+        directives: "Directives - ClickOutside, Tooltip",
+      },
+      preConfigured: {
+        title: "Pre-Configured Packages & Tools",
+        subtitle:
+          "Production-ready dependencies and development tools included",
+        coreDependencies: "Core Dependencies",
+        developmentTools: "Development Tools",
+        latest: "Latest",
+        i18n: "i18n",
+        iconLibrary: "Icon library",
+        linting: "Linting",
+        formatting: "Formatting",
+        gitHooks: "Git hooks",
+        typeSafety: "Type safety",
+        serviceWorker: "Service worker",
+      },
+      pathAliases: {
+        title: "TypeScript Path Aliases (tsconfig.json)",
+        core: "@core/* → src/app/core/*",
+        shared: "@shared/* → src/app/shared/*",
+        features: "@features/* → src/app/features/*",
+        environments: "@environments/* → src/environments/*",
+      },
+      projectStructure: {
+        title: "Well-Organized Project Structure",
+        subtitle: "Clean architecture following Angular best practices",
+        coreServices: "services/ (8 services)",
+        guards: "guards/ (auth guard)",
+        interceptors: "interceptors/ (4 types)",
+        i18n: "i18n/ (translation system)",
+        components: "components/ (5 components)",
+        pipes: "pipes/ (2 pipes)",
+        directives: "directives/ (2 directives)",
+        models: "models/ (TypeScript interfaces)",
+        home: "home/",
+        about: "about/",
+        contact: "contact/",
+        auth: "auth/ (login, register, forgot)",
+        mainLayout: "main-layout/ (header + footer)",
+        authLayout: "auth-layout/ (auth pages)",
+      },
+      interactiveExamples: {
+        title: "Try Interactive Examples",
+        subtitle:
+          "Test the Toast and Modal services included in this starter template",
+        toastNotifications: {
+          title: "Toast Notifications",
+          subtitle: "Auto-dismiss alerts with 4 types",
+          description:
+            "Click any button to see different toast notification types:",
+          success: "Success",
+          error: "Error",
+          warning: "Warning",
+          info: "Info",
+        },
+        modalDialogs: {
+          title: "Modal Dialogs",
+          subtitle: "Accessible & responsive dialogs",
+          description:
+            "Test confirmation and alert modals with transitions:",
+          showConfirm: "Show Confirm Dialog",
+          showAlert: "Show Alert Dialog",
+        },
+        proTip: {
+          title: "Pro Tip",
+          description:
+            "These services are fully typed and can be injected anywhere in your app. Check src/app/core/services/ to see the implementation.",
+        },
+      },
+      readyToBuild: {
+        title: "Ready to Build Something Amazing?",
+        subtitle:
+          "Explore the other pages to see forms, routing, and authentication UI in action",
+        learnMore: "Learn More",
+      },
+    },
+    about: {
+      title: "About {{projectName}}",
+      subtitle:
+        "A modern Angular starter template built with best practices and developer experience in mind.",
+      overview: {
+        title: "Project Overview",
+        paragraph1:
+          "This starter template provides a solid foundation for building modern Angular applications with Tailwind CSS, including essential components, services, and best practices.",
+        paragraph2:
+          "Built with the latest Angular features including standalone components, signals, and optimized for performance and developer experience.",
+      },
+      features: {
+        title: "Features Included",
+        standalone: "Standalone Angular components",
+        tailwind: "Tailwind CSS integration",
+        responsive: "Responsive design",
+        typescript: "TypeScript ready",
+        production: "Production optimized",
+      },
+      techStack: {
+        title: "Built With Modern Technologies",
+      },
+    },
+    contact: {
+      title: "Get in Touch",
+      subtitle:
+        "Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
+      form: {
+        title: "Send us a message",
+        description: "Fill out the form below and we'll get back to you soon",
+        name: "Full Name",
+        email: "Email Address",
+        subject: "Subject",
+        message: "Message",
+        submit: "Send Message",
+        sending: "Sending...",
+        success: "Thank you for your message! We'll get back to you soon.",
+        errors: {
+          nameRequired: "Name is required",
+          nameMinLength: "Name must be at least 2 characters",
+          emailRequired: "Email is required",
+          emailInvalid: "Please enter a valid email",
+          subjectRequired: "Subject is required",
+          messageRequired: "Message is required",
+          messageMinLength: "Message must be at least 10 characters",
+        },
+      },
+      info: {
+        title: "Contact Information",
+        description:
+          "We're here to help and answer any question you might have",
+        email: {
+          label: "Email",
+          description: "We'll respond within 24 hours",
+        },
+        location: {
+          label: "Location",
+          value: "Remote & Global",
+          description: "Working across all time zones",
+        },
+        responseTime: {
+          label: "Response Time",
+          value: "24 hours",
+          description: "Usually much faster",
+        },
+      },
+      help: {
+        title: "Helpful Resources",
+        subtitle:
+          "Have questions about the starter template? Check out these resources:",
+        links: {
+          angular: "Angular Documentation",
+          tailwind: "Tailwind CSS Guide",
+          github: "GitHub Repository",
+        },
+      },
+    },
+    auth: {
+      layout: {
+        welcome: "Welcome back! Please sign in to continue.",
+        copyright: "© {{year}} {{name}}. All rights reserved.",
+      },
+      login: {
+        title: "Sign In",
+        subtitle: "Enter your credentials to access your account",
+        email: "Email Address",
+        password: "Password",
+        rememberMe: "Remember me",
+        forgotPassword: "Forgot password?",
+        submit: "Sign In",
+        signing: "Signing in...",
+        noAccount: "Don't have an account?",
+        createAccount: "Create one here",
+        showPassword: "Show password",
+        hidePassword: "Hide password",
+      },
+      register: {
+        title: "Create Account",
+        subtitle: "Sign up to get started",
+        firstName: "First Name",
+        lastName: "Last Name",
+        email: "Email",
+        password: "Password",
+        submit: "Create Account",
+        hasAccount: "Already have an account?",
+      },
+      forgot: {
+        title: "Forgot Password",
+        subtitle: "Enter your email to reset password",
+        email: "Email Address",
+        submit: "Send Reset Link",
+        backToLogin: "Back to Sign In",
+      },
+      validation: {
+        emailRequired: "Email is required",
+        emailInvalid: "Please enter a valid email",
+        passwordRequired: "Password is required",
+        passwordMinLength: "Password must be at least 6 characters",
+      },
+    },
+    footer: {
+      description:
+        "Built with Angular and Tailwind CSS. A modern, fast, and responsive web application starter template.",
+      quickLinks: "Quick Links",
+      builtWith: "Built With",
+      copyright: "© {{year}} {{name}}. All rights reserved.",
+    },
+    language: {
+      select: "Select Language",
+      english: "English",
+      arabic: "العربية",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/en.json"),
+    JSON.stringify(enTranslations, null, 2)
+  );
+
+  // Create Arabic translations
+  const arTranslations = {
+    app: {
+      title: config.projectName,
+      welcome: "مرحباً بك في {{name}}",
+      description: "قالب احترافي لتطبيقات Angular مع Tailwind CSS",
+    },
+    nav: {
+      home: "الرئيسية",
+      about: "حول",
+      contact: "اتصل بنا",
+      login: "تسجيل الدخول",
+      register: "ابدأ الآن",
+      logout: "تسجيل الخروج",
+      profile: "إعدادات الملف الشخصي",
+      account: "إعدادات الحساب",
+    },
+    home: {
+      hero: {
+        title: "مرحباً بك في {{projectName}}",
+        subtitle:
+          "قالب احترافي لتطبيقات Angular مع Tailwind CSS. مبني بأحدث الممارسات وجاهز للتوسع.",
+        button: "ابدأ الآن",
+        learnMore: "معرفة المزيد",
+      },
+      features: {
+        title: "ميزات Angular الحديثة",
+        subtitle: "كل ما تحتاجه لبناء تطبيقات ويب احترافية.",
+        standalone: {
+          title: "مكونات مستقلة",
+          description: "بنية Angular الحديثة بدون NgModules",
+        },
+        tailwind: {
+          title: "Tailwind CSS",
+          description: "إطار عمل CSS سريع للتطوير",
+        },
+        typescript: {
+          title: "TypeScript",
+          description: "الأمان الكامل للأنواع وتجربة تطوير محسّنة",
+        },
+      },
+      techStack: {
+        title: "الاستفادة من أحدث الأدوات والأطر لتحسين الأداء",
+        angular: {
+          title: "Angular 20+",
+          description:
+            "مكونات مستقلة حديثة مع الإشارات لإدارة الحالة التفاعلية",
+        },
+        tailwind: {
+          title: "Tailwind CSS v4",
+          description: "إطار عمل CSS مبني على المرافق مع إعداد PostCSS حديث",
+        },
+        typescript: {
+          title: "TypeScript",
+          description: "واجهات ونماذج مُكتوبة بقوة لتحسين تجربة المطور",
+        },
+      },
+      readyToStart: {
+        title: "جاهز لبدء البناء؟",
+        subtitle: "استكشف الصفحات الأخرى أو تواصل معنا لمعرفة المزيد",
+        viewHome: "عرض الرئيسية",
+        contactUs: "تواصل معنا",
+      },
+      productionReady: {
+        sectionTitle: "ما هو مُضمن في هذا القالب",
+        title:
+          "تطبيق Angular جاهز للإنتاج مع 20+ ميزة وخدمة ومكون مُعد مسبقاً",
+        modernArchitecture: {
+          title: "معمارية حديثة",
+          description: "مكونات مستقلة، إشارات، دعم بدون منطقة، Angular 20+",
+        },
+        i18n: {
+          title: "ترجمة i18n",
+          description: "الإنجليزية والعربية مع دعم RTL، مبدل اللغة في الرأس",
+        },
+        interceptors: {
+          title: "مُعترِضات HTTP",
+          description:
+            "المصادقة، معالجة الأخطاء، حالة التحميل، تخزين الاستجابة مؤقتاً (5 دقائق TTL)",
+        },
+        tailwind: {
+          title: "Tailwind CSS v4",
+          description: "إعداد PostCSS حديث، مرافق متجاوبة، جاهز للوضع المظلم",
+        },
+        uiComponents: {
+          title: "مكونات واجهة المستخدم",
+          description: "زر، بطاقة، دوار، تنبيه، نافذة منبثقة مع تخصيص كامل",
+        },
+        typeSafe: {
+          title: "آمن النوع",
+          description: "واجهات TypeScript، نماذج، خدمات مُكتوبة بقوة",
+        },
+      },
+      coreServices: {
+        title: "الخدمات الأساسية (src/app/core/)",
+        authService: "AuthService - المصادقة وإدارة المستخدمين",
+        apiService: "ApiService - معالجة طلبات HTTP مركزية",
+        toastService:
+          "ToastService - نظام الإشعارات (نجاح، خطأ، تحذير، معلومات)",
+        modalService: "ModalService - نظام الحوار مع التأكيد والتنبيه",
+        loadingService: "LoadingService - حالة التحميل العامة مع الإشارات",
+        cacheService: "CacheService - تخزين الاستجابة مؤقتاً مع TTL",
+        storageService: "StorageService - غلاف LocalStorage مع أمان النوع",
+        i18nService: "i18nService - إدارة الترجمة",
+      },
+      sharedComponents: {
+        title: "المكونات المشتركة (src/app/shared/)",
+        button: "ButtonComponent - متغيرات: أساسي، ثانوي، خطر",
+        card: "CardComponent - حاوية مرنة مع عنوان وظل",
+        spinner: "LoadingSpinnerComponent - مؤشر تحميل متحرك",
+        toast: "ToastComponent - إشعارات إغلاق تلقائي",
+        modal: "ModalComponent - حوار قابل للوصول بأحجام",
+        pipes: "الأنابيب - قطع، منذ",
+        directives: "التوجيهات - خارج النقر، تلميح",
+      },
+      preConfigured: {
+        title: "الحزم والأدوات المُعدة مسبقاً",
+        subtitle: "التبعيات وأدوات التطوير الجاهزة للإنتاج مُضمنة",
+        coreDependencies: "التبعيات الأساسية",
+        developmentTools: "أدوات التطوير",
+        latest: "الأحدث",
+        i18n: "i18n",
+        iconLibrary: "مكتبة الأيقونات",
+        linting: "الفحص",
+        formatting: "التنسيق",
+        gitHooks: "خطافات Git",
+        typeSafety: "أمان النوع",
+        serviceWorker: "عامل الخدمة",
+      },
+      pathAliases: {
+        title: "أسماء مسارات TypeScript (tsconfig.json)",
+        core: "@core/* → src/app/core/*",
+        shared: "@shared/* → src/app/shared/*",
+        features: "@features/* → src/app/features/*",
+        environments: "@environments/* → src/environments/*",
+      },
+      projectStructure: {
+        title: "هيكل المشروع منظم جيداً",
+        subtitle: "معمارية نظيفة تتبع أفضل ممارسات Angular",
+        coreServices: "services/ (8 خدمات)",
+        guards: "guards/ (حارس المصادقة)",
+        interceptors: "interceptors/ (4 أنواع)",
+        i18n: "i18n/ (نظام الترجمة)",
+        components: "components/ (5 مكونات)",
+        pipes: "pipes/ (2 أنابيب)",
+        directives: "directives/ (2 توجيهات)",
+        models: "models/ (واجهات TypeScript)",
+        home: "home/",
+        about: "about/",
+        contact: "contact/",
+        auth: "auth/ (تسجيل دخول، تسجيل، نسيان)",
+        mainLayout: "main-layout/ (رأس + تذييل)",
+        authLayout: "auth-layout/ (صفحات المصادقة)",
+      },
+      interactiveExamples: {
+        title: "جرب الأمثلة التفاعلية",
+        subtitle: "اختبر خدمات Toast و Modal المُضمنة في هذا القالب",
+        toastNotifications: {
+          title: "إشعارات Toast",
+          subtitle: "تنبيهات إغلاق تلقائي مع 4 أنواع",
+          description: "انقر على أي زر لرؤية أنواع مختلفة من إشعارات Toast:",
+          success: "نجح",
+          error: "خطأ",
+          warning: "تحذير",
+          info: "معلومات",
+        },
+        modalDialogs: {
+          title: "حوارات النافذة المنبثقة",
+          subtitle: "حوارات قابلة للوصول ومتجاوبة",
+          description: "اختبر حوارات التأكيد والتنبيه مع الانتقالات:",
+          showConfirm: "إظهار حوار التأكيد",
+          showAlert: "إظهار حوار التنبيه",
+        },
+        proTip: {
+          title: "نصيحة احترافية",
+          description:
+            "هذه الخدمات مُكتوبة بالكامل ويمكن حقنها في أي مكان في تطبيقك. تحقق من src/app/core/services/ لرؤية التنفيذ.",
+        },
+      },
+      readyToBuild: {
+        title: "جاهز لبناء شيء مذهل؟",
+        subtitle:
+          "استكشف الصفحات الأخرى لرؤية النماذج والتوجيه وواجهة المصادقة في العمل",
+        learnMore: "معرفة المزيد",
+      },
+    },
+    about: {
+      title: "حول {{projectName}}",
+      subtitle:
+        "قالب Angular حديث مبني بأفضل الممارسات وتجربة المطور في الاعتبار.",
+      overview: {
+        title: "نظرة عامة على المشروع",
+        paragraph1:
+          "يوفر هذا القالب أساساً قوياً لبناء تطبيقات Angular الحديثة مع Tailwind CSS، بما في ذلك المكونات الأساسية والخدمات وأفضل الممارسات.",
+        paragraph2:
+          "مبني بأحدث ميزات Angular بما في ذلك المكونات المستقلة والإشارات، ومُحسّن للأداء وتجربة المطور.",
+      },
+      features: {
+        title: "الميزات المتضمنة",
+        standalone: "مكونات Angular المستقلة",
+        tailwind: "تكامل Tailwind CSS",
+        responsive: "تصميم متجاوب",
+        typescript: "جاهز لـ TypeScript",
+        production: "مُحسّن للإنتاج",
+      },
+      techStack: {
+        title: "مبني بأحدث التقنيات",
+      },
+    },
+    contact: {
+      title: "تواصل معنا",
+      subtitle:
+        "هل لديك أسئلة؟ نحب أن نسمع منك. أرسل لنا رسالة وسنرد في أقرب وقت ممكن.",
+      form: {
+        title: "أرسل لنا رسالة",
+        description: "املأ النموذج أدناه وسنعاود الاتصال بك قريباً",
+        name: "الاسم الكامل",
+        email: "عنوان البريد الإلكتروني",
+        subject: "الموضوع",
+        message: "الرسالة",
+        submit: "إرسال الرسالة",
+        sending: "جاري الإرسال...",
+        success: "شكراً على رسالتك! سنعاود الاتصال بك قريباً.",
+        errors: {
+          nameRequired: "الاسم مطلوب",
+          nameMinLength: "يجب أن يكون الاسم على الأقل حرفين",
+          emailRequired: "البريد الإلكتروني مطلوب",
+          emailInvalid: "يرجى إدخال بريد إلكتروني صحيح",
+          subjectRequired: "الموضوع مطلوب",
+          messageRequired: "الرسالة مطلوبة",
+          messageMinLength: "يجب أن تكون الرسالة على الأقل 10 أحرف",
+        },
+      },
+      info: {
+        title: "معلومات الاتصال",
+        description: "نحن هنا للمساعدة والإجابة على أي سؤال قد يكون لديك",
+        email: {
+          label: "البريد الإلكتروني",
+          description: "سنرد خلال 24 ساعة",
+        },
+        location: {
+          label: "الموقع",
+          value: "عن بُعد وعالمي",
+          description: "نعمل عبر جميع المناطق الزمنية",
+        },
+        responseTime: {
+          label: "وقت الاستجابة",
+          value: "24 ساعة",
+          description: "عادة أسرع بكثير",
+        },
+      },
+      help: {
+        title: "موارد مفيدة",
+        subtitle: "هل لديك أسئلة حول القالب؟ تحقق من هذه الموارد:",
+        links: {
+          angular: "وثائق Angular",
+          tailwind: "دليل Tailwind CSS",
+          github: "مستودع GitHub",
+        },
+      },
+    },
+    auth: {
+      layout: {
+        welcome: "مرحبًا بعودتك! يرجى تسجيل الدخول للمتابعة.",
+        copyright: "© {{year}} {{name}}. جميع الحقوق محفوظة.",
+      },
+      login: {
+        title: "تسجيل الدخول",
+        subtitle: "أدخل بيانات الاعتماد للوصول إلى حسابك",
+        email: "عنوان البريد الإلكتروني",
+        password: "كلمة المرور",
+        rememberMe: "تذكرني",
+        forgotPassword: "نسيت كلمة المرور؟",
+        submit: "تسجيل الدخول",
+        signing: "جاري تسجيل الدخول...",
+        noAccount: "ليس لديك حساب؟",
+        createAccount: "أنشئ حساباً هنا",
+        showPassword: "إظهار كلمة المرور",
+        hidePassword: "إخفاء كلمة المرور",
+      },
+      register: {
+        title: "إنشاء حساب",
+        subtitle: "سجل للبدء",
+        firstName: "الاسم الأول",
+        lastName: "اسم العائلة",
+        email: "البريد الإلكتروني",
+        password: "كلمة المرور",
+        submit: "إنشاء حساب",
+        hasAccount: "لديك حساب بالفعل؟",
+      },
+      forgot: {
+        title: "نسيت كلمة المرور",
+        subtitle: "أدخل بريدك الإلكتروني لإعادة تعيين كلمة المرور",
+        email: "عنوان البريد الإلكتروني",
+        submit: "إرسال رابط إعادة التعيين",
+        backToLogin: "العودة إلى تسجيل الدخول",
+      },
+      validation: {
+        emailRequired: "البريد الإلكتروني مطلوب",
+        emailInvalid: "يرجى إدخال بريد إلكتروني صحيح",
+        passwordRequired: "كلمة المرور مطلوبة",
+        passwordMinLength: "يجب أن تكون كلمة المرور 6 أحرف على الأقل",
+      },
+    },
+    footer: {
+      description:
+        "مبني بـ Angular و Tailwind CSS. قالب تطبيق ويب حديث وسريع ومتجاوب.",
+      quickLinks: "روابط سريعة",
+      builtWith: "مبني بـ",
+      copyright: "© {{year}} {{name}}. جميع الحقوق محفوظة.",
+    },
+    language: {
+      select: "اختر اللغة",
+      english: "English",
+      arabic: "العربية",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/ar.json"),
+    JSON.stringify(arTranslations, null, 2)
+  );
+
+  // Update package.json to include translation dependencies
+  const packageJsonPath = path.join(config.fullPath, "package.json");
+  const packageJson = JSON.parse(await fs.readFile(packageJsonPath, "utf8"));
+
+  const translationDependencies = {
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
+  };
+
+  packageJson.dependencies = {
+    ...packageJson.dependencies,
+    ...translationDependencies,
+  };
+
+  await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+}
+
+/**
+ * Install i18n packages
+ */
+async function installI18nPackages(config) {
+  if (!config.skipInstall) {
+    const execa = require("execa");
+    await execa.command(
+      "npm install @ngx-translate/core@^15.0.0 @ngx-translate/http-loader@^8.0.0 --force",
+      {
+        cwd: config.fullPath,
+        stdio: "pipe",
+      }
+    );
+  }
+}
+
+module.exports = { createI18n, installI18nPackages };