drop down menu

src/app/[locale]/[slug]/page.tsx

@@ -0,0 +1,45 @@
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import Header from '../../components/header';
+import { Footer } from '../../components/footer';
+import ServiceDetailPage from '../services/[slug]/service-detail-page';
+import {
+  serviceContent,
+  serviceSlugs,
+  type ServiceSlug,
+} from '../services/[slug]/services.data';
+import { isLocale, type Locale } from '../../../i18n/messages';
+
+export function generateStaticParams() {
+  return serviceSlugs.flatMap((slug) => [{ slug }]);
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}): Promise<Metadata> {
+  const { locale, slug } = await params;
+  if (!isLocale(locale)) return {};
+  if (!serviceSlugs.includes(slug as ServiceSlug)) return {};
+  return { title: serviceContent[slug as ServiceSlug][locale as Locale].seoTitle };
+}
+
+export default async function ServicePage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+  if (!isLocale(locale)) notFound();
+  if (!serviceSlugs.includes(slug as ServiceSlug)) notFound();
+
+  return (
+    <main className="min-h-screen font-sans">
+      <Header />
+      <ServiceDetailPage slug={slug as ServiceSlug} />
+      <Footer />
+    </main>
+  );
+}
+

src/app/[locale]/services/[slug]/page.tsx

@@ -1,8 +1,5 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import type { Metadata } from 'next';
-import Header from '../../../components/header';
-import { Footer } from '../../../components/footer';
-import ServiceDetailPage from './service-detail-page';
 import { serviceContent, serviceSlugs, type ServiceSlug } from './services.data';
 import { isLocale, type Locale } from '../../../../i18n/messages';
 
@@ -30,12 +27,5 @@ export default async function ServicePage({
   if (!isLocale(locale)) notFound();
   if (!serviceSlugs.includes(slug as ServiceSlug)) notFound();
 
-  return (
-    <main className="min-h-screen font-sans">
-      <Header />
-      <ServiceDetailPage slug={slug as ServiceSlug} />
-      <Footer />
-    </main>
-  );
+  redirect(`/${locale}/${slug}`);
 }
-

src/app/[locale]/services/[slug]/services.data.ts

@@ -4,13 +4,19 @@ export type ServiceSlug =
   | 'eco-hosting'
   | 'high-traffic-hosting'
   | 'wordpress-hosting'
-  | 'server-management';
+  | 'server-management'
+  | 'domain'
+  | 'ssl'
+  | 'org-email';
 
 export const serviceSlugs: ServiceSlug[] = [
   'eco-hosting',
   'high-traffic-hosting',
   'wordpress-hosting',
   'server-management',
+  'domain',
+  'ssl',
+  'org-email',
 ];
 
 type ServiceContent = {
@@ -522,4 +528,334 @@ export const serviceContent: Record<ServiceSlug, Record<Locale, ServiceContent>>
       finalCtaButton: 'Request server management consultation',
     },
   },
+  domain: {
+    fa: {
+      seoTitle: 'ثبت دامنه',
+      title: 'ثبت دامنه',
+      accent: 'سریع',
+      heroBadge: 'دامنه مناسب برند شما',
+      subtitle:
+        'ثبت، تمدید و مدیریت دامنه با پنل ساده، DNS سریع و پشتیبانی قابل اعتماد.',
+      breadcrumbs: ['صفحه اصلی', 'دامنه', 'ثبت دامنه'],
+      heroPrimaryCta: 'جستجوی دامنه',
+      heroSecondaryCta: 'مشاهده تعرفه‌ها',
+      heroHighlights: [
+        { label: 'ثبت فوری', icon: 'speed' },
+        { label: 'DNS پایدار', icon: 'shield' },
+        { label: 'مدیریت ساده', icon: 'wp' },
+        { label: 'پشتیبانی', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'DNS', value: 'Anycast', icon: 'uptime' },
+        { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' },
+        { label: 'امنیت', value: 'Lock', icon: 'security' },
+        { label: 'مدیریت', value: 'Panel', icon: 'nvme' },
+      ],
+      featuresTitle: 'ویژگی‌های ثبت دامنه',
+      featuresSubtitle: 'همه چیز برای شروع برند آنلاین',
+      features: [
+        { title: 'ثبت و تمدید آسان', desc: 'ثبت سریع و تمدید خودکار برای جلوگیری از انقضا.', icon: 'rocket' },
+        { title: 'DNS سریع و پایدار', desc: 'مدیریت رکوردها با دسترسی ساده و عملکرد پایدار.', icon: 'cloud' },
+        { title: 'امنیت دامنه', desc: 'قفل انتقال و تنظیمات امنیتی برای کاهش ریسک.', icon: 'shield' },
+        { title: 'مدیریت یکپارچه', desc: 'همه دامنه‌ها در یک پنل واحد.', icon: 'bolt' },
+        { title: 'راهنمایی تخصصی', desc: 'انتخاب پسوند مناسب و تنظیمات DNS با کمک تیم فنی.', icon: 'headphones' },
+        { title: 'اتصال به سرویس‌ها', desc: 'اتصال سریع دامنه به هاست/ایمیل/سرویس‌ها.', icon: 'wp' },
+      ],
+      plansTitle: 'تعرفه‌های دامنه',
+      plansSubtitle: 'بر اساس پسوند انتخابی',
+      plans: [
+        { name: '.ir', price: 'شروع از ۹۹,۰۰۰', period: 'تومان / سالانه', features: ['ثبت/تمدید', 'پنل مدیریت', 'DNS'], cta: 'جستجو' },
+        { name: '.com', price: 'شروع از ۱,۴۹۹,۰۰۰', period: 'تومان / سالانه', features: ['ثبت/تمدید', 'DNS', 'پشتیبانی'], cta: 'جستجو', featured: true, badge: 'محبوب' },
+        { name: 'سایر پسوندها', price: 'استعلام', period: '', features: ['پسوندهای متنوع', 'راهنمایی انتخاب'], cta: 'استعلام' },
+      ],
+      faqTitle: 'سوالات متداول',
+      faqSubtitle: 'پرسش‌های رایج درباره ثبت دامنه',
+      faqs: [
+        { q: 'ثبت دامنه چقدر زمان می‌برد؟', a: 'برای بسیاری از پسوندها ثبت به صورت سریع انجام می‌شود؛ برخی پسوندها نیاز به تایید دارند.' },
+        { q: 'آیا تمدید خودکار دارد؟', a: 'بله، می‌توانید تمدید خودکار را فعال کنید.' },
+        { q: 'DNS را از کجا مدیریت کنم؟', a: 'از داخل پنل دامنه می‌توانید رکوردها را مدیریت کنید.' },
+        { q: 'انتقال دامنه امکان‌پذیر است؟', a: 'بله، با دریافت کد انتقال و طی مراحل استاندارد.' },
+      ],
+      whyTitle: 'چرا ثبت دامنه در MugCloud؟',
+      whyText: 'سریع‌تر شروع کنید و خیالتان از مدیریت و پشتیبانی راحت باشد.',
+      whyBullets: ['پنل ساده', 'DNS پایدار', 'پشتیبانی ۲۴/۷', 'امکان تمدید خودکار', 'امنیت دامنه'],
+      finalCtaTitle: 'دامنه‌تان را همین امروز ثبت کنید',
+      finalCtaDesc: 'نام مناسب را پیدا کنید و برند آنلاین خود را بسازید.',
+      finalCtaButton: 'جستجوی دامنه',
+    },
+    en: {
+      seoTitle: 'Domain Registration',
+      title: 'Domain Registration',
+      accent: 'fast',
+      heroBadge: 'Find the right domain',
+      subtitle:
+        'Register, renew, and manage domains with a clean panel, stable DNS, and reliable support.',
+      breadcrumbs: ['Home', 'Domain', 'Registration'],
+      heroPrimaryCta: 'Search domains',
+      heroSecondaryCta: 'View pricing',
+      heroHighlights: [
+        { label: 'Instant registration', icon: 'speed' },
+        { label: 'Stable DNS', icon: 'shield' },
+        { label: 'Easy management', icon: 'wp' },
+        { label: 'Support', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'DNS', value: 'Anycast', icon: 'uptime' },
+        { label: 'Support', value: '24/7', icon: 'support' },
+        { label: 'Security', value: 'Lock', icon: 'security' },
+        { label: 'Management', value: 'Panel', icon: 'nvme' },
+      ],
+      featuresTitle: 'Domain features',
+      featuresSubtitle: 'Everything you need to start your brand',
+      features: [
+        { title: 'Easy register & renew', desc: 'Fast checkout and optional auto-renew to prevent expiry.', icon: 'rocket' },
+        { title: 'Fast & stable DNS', desc: 'Manage records with simple controls and reliable performance.', icon: 'cloud' },
+        { title: 'Domain security', desc: 'Transfer lock and security settings to reduce risk.', icon: 'shield' },
+        { title: 'Unified management', desc: 'Keep all domains in one dashboard.', icon: 'bolt' },
+        { title: 'Expert guidance', desc: 'Pick the right TLD and configure DNS with help from our team.', icon: 'headphones' },
+        { title: 'Connect services', desc: 'Quickly connect domains to hosting/email/services.', icon: 'wp' },
+      ],
+      plansTitle: 'Domain pricing',
+      plansSubtitle: 'Depends on the selected TLD',
+      plans: [
+        { name: '.ir', price: 'From 99,000', period: 'Toman / year', features: ['Register/renew', 'Control panel', 'DNS'], cta: 'Search' },
+        { name: '.com', price: 'From 1,499,000', period: 'Toman / year', features: ['Register/renew', 'DNS', 'Support'], cta: 'Search', featured: true, badge: 'Popular' },
+        { name: 'Other TLDs', price: 'Quote', period: '', features: ['Many extensions', 'Selection help'], cta: 'Get a quote' },
+      ],
+      faqTitle: 'FAQ',
+      faqSubtitle: 'Common questions about domains',
+      faqs: [
+        { q: 'How long does registration take?', a: 'Many TLDs are instant; some require verification and may take longer.' },
+        { q: 'Is auto-renew available?', a: 'Yes, you can enable auto-renew in your panel.' },
+        { q: 'Where do I manage DNS?', a: 'You can manage records in your domain panel.' },
+        { q: 'Can I transfer domains?', a: 'Yes, using the standard transfer process and authorization code.' },
+      ],
+      whyTitle: 'Why MugCloud Domains?',
+      whyText: 'Start faster and stay confident with management and support.',
+      whyBullets: ['Simple panel', 'Stable DNS', '24/7 support', 'Auto-renew', 'Domain security'],
+      finalCtaTitle: 'Register your domain today',
+      finalCtaDesc: 'Find the perfect name and start building your online brand.',
+      finalCtaButton: 'Search domains',
+    },
+  },
+  ssl: {
+    fa: {
+      seoTitle: 'گواهی SSL',
+      title: 'گواهی SSL',
+      accent: 'امن',
+      heroBadge: 'SSL برای امنیت و اعتماد',
+      subtitle:
+        'HTTPS، قفل سبز و افزایش اعتماد کاربران — صدور سریع با راهنمای نصب و تمدید آسان.',
+      breadcrumbs: ['صفحه اصلی', 'امنیت', 'SSL'],
+      heroPrimaryCta: 'دریافت SSL',
+      heroSecondaryCta: 'مشاهده پلن‌ها',
+      heroHighlights: [
+        { label: 'صدور سریع', icon: 'speed' },
+        { label: 'امنیت ارتباط', icon: 'shield' },
+        { label: 'نصب آسان', icon: 'wp' },
+        { label: 'پشتیبانی', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'صدور', value: 'سریع', icon: 'uptime' },
+        { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' },
+        { label: 'امنیت', value: 'TLS', icon: 'security' },
+        { label: 'تمدید', value: 'ساده', icon: 'nvme' },
+      ],
+      featuresTitle: 'ویژگی‌های SSL',
+      featuresSubtitle: 'امنیت، اعتماد و سئو بهتر',
+      features: [
+        { title: 'فعال‌سازی HTTPS', desc: 'رمزنگاری اطلاعات بین کاربر و سرور برای امنیت بیشتر.', icon: 'shield' },
+        { title: 'صدور و تمدید سریع', desc: 'صدور سریع و تمدید آسان برای جلوگیری از قطعی.', icon: 'bolt' },
+        { title: 'سازگاری بالا', desc: 'سازگار با مرورگرها و سیستم‌عامل‌های رایج.', icon: 'cloud' },
+        { title: 'نصب راهنمایی‌شده', desc: 'راهنمای نصب روی هاست/سرور و تنظیمات لازم.', icon: 'rocket' },
+        { title: 'افزایش اعتماد', desc: 'نمایش HTTPS و قفل برای جلب اعتماد کاربران.', icon: 'wp' },
+        { title: 'پشتیبانی تخصصی', desc: 'در صورت نیاز، تیم فنی کنار شماست.', icon: 'headphones' },
+      ],
+      plansTitle: 'پلن‌های SSL',
+      plansSubtitle: 'انتخاب سطح مناسب برای سایت شما',
+      plans: [
+        { name: 'DV', price: '۲۹۹,۰۰۰', period: 'تومان / سالانه', features: ['صدور سریع', 'مناسب سایت‌های شخصی', 'پشتیبانی'], cta: 'درخواست' },
+        { name: 'OV', price: '۱,۹۹۹,۰۰۰', period: 'تومان / سالانه', features: ['اعتبارسنجی سازمان', 'اعتماد بالاتر', 'پشتیبانی'], cta: 'درخواست', featured: true, badge: 'پیشنهادی' },
+        { name: 'EV', price: 'استعلام', period: '', features: ['بالاترین سطح اعتبار', 'مناسب برندها'], cta: 'استعلام' },
+      ],
+      faqTitle: 'سوالات متداول',
+      faqSubtitle: 'پرسش‌های رایج درباره SSL',
+      faqs: [
+        { q: 'SSL چه تاثیری روی سئو دارد؟', a: 'HTTPS یکی از سیگنال‌های اعتماد است و می‌تواند روی تجربه کاربر و سئو اثر مثبت بگذارد.' },
+        { q: 'نصب SSL سخت است؟', a: 'خیر، با راهنمای ما یا کمک پشتیبانی به سادگی انجام می‌شود.' },
+        { q: 'اگر SSL منقضی شود چه می‌شود؟', a: 'ممکن است مرورگر هشدار امنیتی نشان دهد؛ بهتر است تمدید را به موقع انجام دهید.' },
+        { q: 'برای چند دامنه قابل استفاده است؟', a: 'بسته به نوع گواهی (تک دامنه/وایلدکارد/چنددامنه) متفاوت است.' },
+      ],
+      whyTitle: 'چرا SSL از MugCloud؟',
+      whyText: 'صدور سریع، راهنمای نصب و پشتیبانی قابل اعتماد.',
+      whyBullets: ['فعال‌سازی سریع HTTPS', 'پشتیبانی تخصصی', 'پلن‌های متنوع', 'تمدید آسان', 'سازگاری بالا'],
+      finalCtaTitle: 'سایت امن‌تر، اعتماد بیشتر',
+      finalCtaDesc: 'همین حالا SSL مناسب را انتخاب کنید.',
+      finalCtaButton: 'دریافت SSL',
+    },
+    en: {
+      seoTitle: 'SSL Certificate',
+      title: 'SSL Certificate',
+      accent: 'secure',
+      heroBadge: 'SSL for security & trust',
+      subtitle:
+        'HTTPS, a secure lock, and stronger user trust — fast issuance with guided installation and easy renewals.',
+      breadcrumbs: ['Home', 'Security', 'SSL'],
+      heroPrimaryCta: 'Get SSL',
+      heroSecondaryCta: 'View plans',
+      heroHighlights: [
+        { label: 'Fast issuance', icon: 'speed' },
+        { label: 'Secure traffic', icon: 'shield' },
+        { label: 'Easy install', icon: 'wp' },
+        { label: 'Support', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'Issuance', value: 'Fast', icon: 'uptime' },
+        { label: 'Support', value: '24/7', icon: 'support' },
+        { label: 'Security', value: 'TLS', icon: 'security' },
+        { label: 'Renewal', value: 'Easy', icon: 'nvme' },
+      ],
+      featuresTitle: 'SSL features',
+      featuresSubtitle: 'Security, trust, and better SEO',
+      features: [
+        { title: 'Enable HTTPS', desc: 'Encrypt traffic between users and your server.', icon: 'shield' },
+        { title: 'Fast issue & renew', desc: 'Quick issuance and easy renewals to avoid downtime.', icon: 'bolt' },
+        { title: 'Broad compatibility', desc: 'Works across major browsers and OSes.', icon: 'cloud' },
+        { title: 'Guided installation', desc: 'Install guidance for hosting/servers and required settings.', icon: 'rocket' },
+        { title: 'Increase trust', desc: 'HTTPS lock builds user confidence.', icon: 'wp' },
+        { title: 'Expert support', desc: 'Our team is here if you need help.', icon: 'headphones' },
+      ],
+      plansTitle: 'SSL plans',
+      plansSubtitle: 'Pick the right validation level',
+      plans: [
+        { name: 'DV', price: '299,000', period: 'Toman / year', features: ['Fast issuance', 'Great for personal sites', 'Support'], cta: 'Request' },
+        { name: 'OV', price: '1,999,000', period: 'Toman / year', features: ['Org validation', 'Higher trust', 'Support'], cta: 'Request', featured: true, badge: 'Recommended' },
+        { name: 'EV', price: 'Quote', period: '', features: ['Highest assurance', 'For brands'], cta: 'Get a quote' },
+      ],
+      faqTitle: 'FAQ',
+      faqSubtitle: 'Common SSL questions',
+      faqs: [
+        { q: 'Does SSL help SEO?', a: 'HTTPS is a trust signal and can positively impact UX and SEO.' },
+        { q: 'Is installation difficult?', a: 'No. With our guide or support help, it’s straightforward.' },
+        { q: 'What happens if SSL expires?', a: 'Browsers may show security warnings; renew on time to prevent issues.' },
+        { q: 'How many domains are supported?', a: 'Depends on the certificate type (single, wildcard, multi-domain).' },
+      ],
+      whyTitle: 'Why MugCloud SSL?',
+      whyText: 'Fast issuance, guided installation, and reliable support.',
+      whyBullets: ['Quick HTTPS', 'Expert support', 'Flexible plans', 'Easy renewal', 'Great compatibility'],
+      finalCtaTitle: 'More security, more trust',
+      finalCtaDesc: 'Choose the right SSL certificate today.',
+      finalCtaButton: 'Get SSL',
+    },
+  },
+  'org-email': {
+    fa: {
+      seoTitle: 'ایمیل سازمانی',
+      title: 'ایمیل‌های سازمانی',
+      accent: 'حرفه‌ای',
+      heroBadge: 'ایمیل رسمی برای برند شما',
+      subtitle:
+        'ایمیل با دامنه اختصاصی، مدیریت کاربران، امنیت بهتر و تحویل‌پذیری بالا برای تیم‌ها و کسب‌وکارها.',
+      breadcrumbs: ['صفحه اصلی', 'ایمیل', 'ایمیل سازمانی'],
+      heroPrimaryCta: 'درخواست سرویس',
+      heroSecondaryCta: 'مشاهده پلن‌ها',
+      heroHighlights: [
+        { label: 'دامنه اختصاصی', icon: 'wp' },
+        { label: 'امنیت', icon: 'shield' },
+        { label: 'تحویل‌پذیری', icon: 'speed' },
+        { label: 'پشتیبانی', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'راه‌اندازی', value: 'سریع', icon: 'uptime' },
+        { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' },
+        { label: 'امنیت', value: 'SPF/DKIM', icon: 'security' },
+        { label: 'مدیریت', value: 'Panel', icon: 'nvme' },
+      ],
+      featuresTitle: 'ویژگی‌های ایمیل سازمانی',
+      featuresSubtitle: 'حرفه‌ای‌تر ارتباط بگیرید',
+      features: [
+        { title: 'ایمیل با دامنه اختصاصی', desc: 'مثل info@yourdomain.com برای اعتبار برند.', icon: 'wp' },
+        { title: 'امنیت و سیاست‌ها', desc: 'تنظیم SPF/DKIM/DMARC و کنترل دسترسی‌ها.', icon: 'shield' },
+        { title: 'مدیریت کاربران', desc: 'ایجاد/حذف کاربران و گروه‌ها در پنل.', icon: 'cloud' },
+        { title: 'راه‌اندازی سریع', desc: 'راهنمای تنظیم رکوردها و اتصال به کلاینت‌ها.', icon: 'rocket' },
+        { title: 'پایداری و مانیتورینگ', desc: 'پایداری سرویس و مانیتورینگ تحویل ایمیل.', icon: 'bolt' },
+        { title: 'پشتیبانی تخصصی', desc: 'کمک در تنظیمات و رفع مشکلات رایج.', icon: 'headphones' },
+      ],
+      plansTitle: 'پلن‌های ایمیل سازمانی',
+      plansSubtitle: 'برای تیم‌های کوچک تا سازمان‌ها',
+      plans: [
+        { name: 'Team', price: '۳۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['۵ کاربر', 'مدیریت پنل', 'پشتیبانی'], cta: 'درخواست' },
+        { name: 'Business', price: '۷۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['۱۵ کاربر', 'سیاست‌های امنیتی', 'پشتیبانی'], cta: 'درخواست', featured: true, badge: 'پیشنهادی' },
+        { name: 'Enterprise', price: 'استعلام', period: '', features: ['کاربران سفارشی', 'SLA', 'سرویس اختصاصی'], cta: 'استعلام' },
+      ],
+      faqTitle: 'سوالات متداول',
+      faqSubtitle: 'پرسش‌های رایج درباره ایمیل سازمانی',
+      faqs: [
+        { q: 'آیا با Outlook و Gmail کار می‌کند؟', a: 'بله، از طریق IMAP/SMTP قابل تنظیم است و می‌توانید انتقال/فوروارد هم داشته باشید.' },
+        { q: 'چطور تحویل‌پذیری بهتر می‌شود؟', a: 'با تنظیم SPF/DKIM/DMARC و رعایت بهترین‌عمل‌ها.' },
+        { q: 'آیا امکان ساخت چند آدرس وجود دارد؟', a: 'بله، بر اساس پلن تعداد کاربران/میل‌باکس‌ها مشخص می‌شود.' },
+        { q: 'اگر دامنه ندارم چه؟', a: 'می‌توانید ابتدا سرویس ثبت دامنه را تهیه کنید و سپس ایمیل سازمانی را فعال کنید.' },
+      ],
+      whyTitle: 'چرا ایمیل سازمانی MugCloud؟',
+      whyText: 'اعتبار برند، امنیت بیشتر و مدیریت ساده برای تیم شما.',
+      whyBullets: ['دامنه اختصاصی', 'امنیت بهتر', 'مدیریت ساده', 'راه‌اندازی سریع', 'پشتیبانی ۲۴/۷'],
+      finalCtaTitle: 'ایمیل رسمی راه‌اندازی کنید',
+      finalCtaDesc: 'همین امروز ایمیل سازمانی خود را فعال کنید.',
+      finalCtaButton: 'درخواست ایمیل سازمانی',
+    },
+    en: {
+      seoTitle: 'Business Email',
+      title: 'Business Email',
+      accent: 'professional',
+      heroBadge: 'Official email for your brand',
+      subtitle:
+        'Custom-domain email, user management, stronger security, and better deliverability for teams and businesses.',
+      breadcrumbs: ['Home', 'Email', 'Business Email'],
+      heroPrimaryCta: 'Request service',
+      heroSecondaryCta: 'View plans',
+      heroHighlights: [
+        { label: 'Custom domain', icon: 'wp' },
+        { label: 'Security', icon: 'shield' },
+        { label: 'Deliverability', icon: 'speed' },
+        { label: 'Support', icon: 'support' },
+      ],
+      quickStats: [
+        { label: 'Setup', value: 'Fast', icon: 'uptime' },
+        { label: 'Support', value: '24/7', icon: 'support' },
+        { label: 'Security', value: 'SPF/DKIM', icon: 'security' },
+        { label: 'Management', value: 'Panel', icon: 'nvme' },
+      ],
+      featuresTitle: 'Business email features',
+      featuresSubtitle: 'Communicate more professionally',
+      features: [
+        { title: 'Custom-domain email', desc: 'Like info@yourdomain.com for brand trust.', icon: 'wp' },
+        { title: 'Security & policies', desc: 'SPF/DKIM/DMARC setup and access controls.', icon: 'shield' },
+        { title: 'User management', desc: 'Create and manage users and groups in a panel.', icon: 'cloud' },
+        { title: 'Quick setup', desc: 'Guided DNS records and client configuration.', icon: 'rocket' },
+        { title: 'Stability & monitoring', desc: 'Service stability and delivery monitoring.', icon: 'bolt' },
+        { title: 'Expert support', desc: 'Help with setups and common issues.', icon: 'headphones' },
+      ],
+      plansTitle: 'Business email plans',
+      plansSubtitle: 'From small teams to enterprises',
+      plans: [
+        { name: 'Team', price: '399,000', period: 'Toman / month', features: ['5 users', 'Admin panel', 'Support'], cta: 'Request' },
+        { name: 'Business', price: '799,000', period: 'Toman / month', features: ['15 users', 'Security policies', 'Support'], cta: 'Request', featured: true, badge: 'Recommended' },
+        { name: 'Enterprise', price: 'Quote', period: '', features: ['Custom users', 'SLA', 'Dedicated service'], cta: 'Get a quote' },
+      ],
+      faqTitle: 'FAQ',
+      faqSubtitle: 'Common business email questions',
+      faqs: [
+        { q: 'Does it work with Outlook and Gmail?', a: 'Yes, via IMAP/SMTP, and forwarding/migration options are available.' },
+        { q: 'How do you improve deliverability?', a: 'By setting SPF/DKIM/DMARC and following best practices.' },
+        { q: 'Can I create multiple addresses?', a: 'Yes, the number of mailboxes depends on the plan.' },
+        { q: 'What if I don’t have a domain?', a: 'Start with domain registration, then activate business email.' },
+      ],
+      whyTitle: 'Why MugCloud Business Email?',
+      whyText: 'Brand trust, stronger security, and easy admin for your team.',
+      whyBullets: ['Custom domain', 'Better security', 'Easy admin', 'Fast setup', '24/7 support'],
+      finalCtaTitle: 'Launch official email',
+      finalCtaDesc: 'Activate business email today.',
+      finalCtaButton: 'Request business email',
+    },
+  },
 };

src/app/components/header.tsx

@@ -1,20 +1,144 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { motion } from 'framer-motion';
-import { Cloud, Moon, Sun } from 'lucide-react';
+import {
+  ChevronDown,
+  Cloud,
+  Globe,
+  Leaf,
+  Mail,
+  Menu,
+  Moon,
+  Settings,
+  ShieldCheck,
+  Sun,
+  X,
+  Zap,
+} from 'lucide-react';
 import { useTheme } from 'next-themes';
+import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useI18n } from '../../i18n/provider';
+import { serviceContent, serviceSlugs, type ServiceSlug } from '../[locale]/services/[slug]/services.data';
 
 export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [mobileServicesOpen, setMobileServicesOpen] = useState(false);
+  const [desktopActiveGroupId, setDesktopActiveGroupId] = useState<string>('');
   const { locale, t } = useI18n();
   const dir = locale === 'en' ? 'ltr' : 'rtl';
   const { theme, setTheme } = useTheme();
   const router = useRouter();
   const pathname = usePathname();
 
+  const dropdownGroups = useMemo(() => {
+    const labels =
+      locale === 'fa'
+        ? {
+            hosting: 'هاست',
+            serverManagement: 'مدیریت سرور',
+            domain: 'دامین',
+            ssl: 'SSL',
+            orgEmail: 'ایمیل‌های سازمانی',
+          }
+        : {
+            hosting: 'Hosting',
+            serverManagement: 'Server Management',
+            domain: 'Domain',
+            ssl: 'SSL',
+            orgEmail: 'Business Email',
+          };
+
+    const itemMeta: Record<
+      ServiceSlug,
+      { icon: typeof Globe; bg: string; ring: string }
+    > = {
+      'eco-hosting': {
+        icon: Leaf,
+        bg: 'from-emerald-500/25 to-teal-500/10',
+        ring: 'ring-emerald-400/20',
+      },
+      'high-traffic-hosting': {
+        icon: Zap,
+        bg: 'from-fuchsia-500/20 to-indigo-500/10',
+        ring: 'ring-fuchsia-400/20',
+      },
+      'wordpress-hosting': {
+        icon: Cloud,
+        bg: 'from-sky-500/25 to-blue-500/10',
+        ring: 'ring-sky-400/20',
+      },
+      'server-management': {
+        icon: Settings,
+        bg: 'from-amber-500/20 to-orange-500/10',
+        ring: 'ring-amber-400/20',
+      },
+      domain: {
+        icon: Globe,
+        bg: 'from-cyan-500/20 to-sky-500/10',
+        ring: 'ring-cyan-400/20',
+      },
+      ssl: {
+        icon: ShieldCheck,
+        bg: 'from-violet-500/20 to-purple-500/10',
+        ring: 'ring-violet-400/20',
+      },
+      'org-email': {
+        icon: Mail,
+        bg: 'from-rose-500/20 to-pink-500/10',
+        ring: 'ring-rose-400/20',
+      },
+    };
+
+    const mkItem = (slug: ServiceSlug) => ({
+      slug,
+      title: serviceContent[slug][locale as 'fa' | 'en'].title,
+      href: `/${locale}/${slug}`,
+      ...itemMeta[slug],
+    });
+
+    const has = (slug: ServiceSlug) => serviceSlugs.includes(slug);
+
+    return [
+      {
+        id: 'hosting',
+        label: labels.hosting,
+        items: (['eco-hosting', 'high-traffic-hosting', 'wordpress-hosting'] as ServiceSlug[])
+          .filter(has)
+          .map(mkItem),
+      },
+      {
+        id: 'server-management',
+        label: labels.serverManagement,
+        items: (['server-management'] as ServiceSlug[]).filter(has).map(mkItem),
+      },
+      {
+        id: 'domain',
+        label: labels.domain,
+        items: (['domain'] as ServiceSlug[]).filter(has).map(mkItem),
+      },
+      {
+        id: 'ssl',
+        label: labels.ssl,
+        items: (['ssl'] as ServiceSlug[]).filter(has).map(mkItem),
+      },
+      {
+        id: 'org-email',
+        label: labels.orgEmail,
+        items: (['org-email'] as ServiceSlug[]).filter(has).map(mkItem),
+      },
+    ].filter((g) => g.items.length > 0);
+  }, [locale]);
+
+  useEffect(() => {
+    setDesktopActiveGroupId((prev) => {
+      if (dropdownGroups.some((g) => g.id === prev)) return prev;
+      return dropdownGroups[0]?.id ?? '';
+    });
+  }, [dropdownGroups]);
+
   useEffect(() => {
     const handleScroll = () => {
       // حساسیت اسکرول تنظیم شده تا تغییرات به موقع انجام شود
@@ -29,9 +153,14 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  useEffect(() => {
+    setMobileOpen(false);
+    setMobileServicesOpen(false);
+  }, [pathname]);
+
   return (
     // حذف پدینگ ثابت از بالا تا هدر بتواند به سقف بچسبد
-    <div className="fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-500 px-4 sm:px-6">
+    <div className="fixed top-0 left-0 right-0 z-50 flex flex-col items-center transition-all duration-500 px-4 sm:px-6">
       <motion.header
         initial={{ y: -50, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
@@ -53,7 +182,72 @@ export default function Header() {
 
         {/* منوی دسکتاپ */}
         <nav className={`hidden md:flex items-center transition-all duration-500 ${isScrolled ? 'gap-6' : 'gap-10'}`}>
-          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_products')}</a>
+          <div className="relative group">
+            <a
+              href="#"
+              className="inline-flex items-center gap-1.5 text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium"
+            >
+              <span>{t('nav_products')}</span>
+              <ChevronDown className="w-4 h-4 text-[color:var(--text-muted-3)] transition-transform duration-200 group-hover:rotate-180" />
+            </a>
+
+            <div className="absolute top-full pt-3 right-0 left-auto hidden group-hover:block">
+              <div className="min-w-[34rem] rounded-3xl bg-[color:var(--glass-08)] backdrop-blur-xl border border-[color:var(--border-10)] shadow-[0_20px_80px_rgba(0,0,0,0.35)] overflow-hidden">
+                <div className="p-3 grid grid-cols-[1.55fr_0.85fr] gap-3" dir="ltr">
+                  {/* ستون چپ: آیتم‌های دسته انتخاب‌شده */}
+                  <div className="rounded-3xl text-right bg-[color:var(--glass-05)] border border-[color:var(--border-10)] overflow-hidden">
+                    <div className="p-2.5">
+                      {(dropdownGroups.find((g) => g.id === desktopActiveGroupId) ?? dropdownGroups[0])?.items.map(
+                        (item) => (
+                          <Link
+                            key={item.slug}
+                            href={item.href}
+                            className="group/item flex items-center gap-3 px-3 py-2 rounded-2xl text-sm text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors"
+                          >
+                            <span className="flex-1">{item.title}</span>
+                            <span
+                              className={`w-9 h-9 rounded-2xl bg-gradient-to-br ${item.bg} ring-1 ${item.ring} border border-[color:var(--border-10)] flex items-center justify-center`}
+                            >
+                              <item.icon className="w-4 h-4 text-[color:var(--text-primary)] opacity-90" />
+                            </span>
+                            <span className="w-1.5 h-1.5 rounded-full bg-blue-500/0 group-hover/item:bg-blue-400/70 transition-colors" />
+                          </Link>
+                        ),
+                      )}
+                    </div>
+                  </div>
+
+                  {/* ستون راست: تیتر دسته‌ها */}
+                  <div className="col-start-2 rounded-3xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] overflow-hidden">
+                    <div className="p-2.5">
+                      {dropdownGroups.map((group) => {
+                        const isActive = group.id === desktopActiveGroupId;
+                        return (
+                          <button
+                            key={group.id}
+                            type="button"
+                            onMouseEnter={() => setDesktopActiveGroupId(group.id)}
+                            className={`w-full px-3 py-2.5 rounded-2xl text-sm font-semibold transition-colors ${
+                              isActive
+                                ? 'text-[color:var(--text-primary)] bg-[color:var(--glass-10)]'
+                                : 'text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)]'
+                            }`}
+                          >
+                            <span className={locale === 'fa' ? 'block text-right' : 'block text-left'}>
+                              {group.label}
+                            </span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+
+          </div>
           <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_pricing')}</a>
           <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_network')}</a>
           <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_support')}</a>
@@ -61,6 +255,21 @@ export default function Header() {
 
         {/* بخش اکشن‌ها */}
         <div className="flex items-center gap-3">
+          {/* منوی موبایل */}
+          <button
+            type="button"
+            onClick={() => setMobileOpen((v) => !v)}
+            className="md:hidden p-2 rounded-full bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)] transition-colors flex items-center justify-center"
+            aria-label="Toggle menu"
+            aria-expanded={mobileOpen}
+          >
+            {mobileOpen ? (
+              <X className="w-4 h-4 text-[color:var(--text-muted)]" />
+            ) : (
+              <Menu className="w-4 h-4 text-[color:var(--text-muted)]" />
+            )}
+          </button>
+
           {/* دکمه انتخاب زبان (در حالت کپسولی پنهان می‌شود) */}
           <div className={`overflow-hidden transition-all duration-500 `}>
             <button
@@ -96,6 +305,60 @@ export default function Header() {
           </button>
         </div>
       </motion.header>
+
+      {/* پنل منوی موبایل */}
+      {mobileOpen ? (
+        <div
+          className={`md:hidden w-full max-w-7xl mt-3 rounded-2xl bg-[color:var(--glass-05)] backdrop-blur-lg border border-[color:var(--border-10)] shadow-2xl overflow-hidden`}
+          dir={dir}
+        >
+          <div className="p-3 flex flex-col gap-2">
+            <button
+              type="button"
+              onClick={() => setMobileServicesOpen((v) => !v)}
+              className="w-full flex items-center justify-between px-3 py-2 rounded-xl text-sm font-medium text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors"
+              aria-expanded={mobileServicesOpen}
+            >
+              <span>{t('nav_products')}</span>
+              <ChevronDown
+                className={`w-4 h-4 text-[color:var(--text-muted-3)] transition-transform ${mobileServicesOpen ? 'rotate-180' : ''}`}
+              />
+            </button>
+
+            {mobileServicesOpen ? (
+              <div className="pl-2 pr-2 pb-2">
+                {dropdownGroups.map((group) => (
+                  <div key={group.id} className="px-1 py-2">
+                    <div className="text-[11px] font-semibold tracking-wide text-[color:var(--text-muted-3)] mb-2 px-2">
+                      {group.label}
+                    </div>
+                    <div className="grid grid-cols-1 gap-1">
+                      {group.items.map((item) => (
+                        <Link
+                          key={item.slug}
+                          href={item.href}
+                          className="flex items-center gap-3 px-3 py-2 rounded-2xl text-sm text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors"
+                        >
+                          <span
+                            className={`w-9 h-9 rounded-2xl bg-gradient-to-br ${item.bg} ring-1 ${item.ring} border border-[color:var(--border-10)] flex items-center justify-center`}
+                          >
+                            <item.icon className="w-4 h-4 text-[color:var(--text-primary)] opacity-90" />
+                          </span>
+                          <span className="flex-1">{item.title}</span>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : null}
+
+            <a href="#" className="px-3 py-2 rounded-xl text-sm font-medium text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors">{t('nav_pricing')}</a>
+            <a href="#" className="px-3 py-2 rounded-xl text-sm font-medium text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors">{t('nav_network')}</a>
+            <a href="#" className="px-3 py-2 rounded-xl text-sm font-medium text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] hover:bg-[color:var(--glass-10)] transition-colors">{t('nav_support')}</a>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }