From 470511f28c623192027b97beb7b6753220e07b9c Mon Sep 17 00:00:00 2001 From: haniyeroozmand <147385975+haniyeroozmand@users.noreply.github.com> Date: Wed, 13 May 2026 21:32:28 +0330 Subject: [PATCH] drop down menu --- src/app/[locale]/[slug]/page.tsx | 45 +++ src/app/[locale]/services/[slug]/page.tsx | 14 +- .../[locale]/services/[slug]/services.data.ts | 338 +++++++++++++++++- src/app/components/header.tsx | 271 +++++++++++++- 4 files changed, 651 insertions(+), 17 deletions(-) create mode 100644 src/app/[locale]/[slug]/page.tsx diff --git a/src/app/[locale]/[slug]/page.tsx b/src/app/[locale]/[slug]/page.tsx new file mode 100644 index 0000000..6324941 --- /dev/null +++ b/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 { + 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 ( +
+
+ +
+
+ ); +} + diff --git a/src/app/[locale]/services/[slug]/page.tsx b/src/app/[locale]/services/[slug]/page.tsx index f95e8ea..e226df1 100644 --- a/src/app/[locale]/services/[slug]/page.tsx +++ b/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 ( -
-
- -
-
- ); + redirect(`/${locale}/${slug}`); } - diff --git a/src/app/[locale]/services/[slug]/services.data.ts b/src/app/[locale]/services/[slug]/services.data.ts index 0a69da2..c1557b2 100644 --- a/src/app/[locale]/services/[slug]/services.data.ts +++ b/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> 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', + }, + }, }; diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx index 2b76f5b..c2dec07 100644 --- a/src/app/components/header.tsx +++ b/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(''); 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 ( // حذف پدینگ ثابت از بالا تا هدر بتواند به سقف بچسبد -
+
- {t('nav_products')} +
+ + {t('nav_products')} + + + +
+
+
+ {/* ستون چپ: آیتم‌های دسته انتخاب‌شده */} +
+
+ {(dropdownGroups.find((g) => g.id === desktopActiveGroupId) ?? dropdownGroups[0])?.items.map( + (item) => ( + + {item.title} + + + + + + ), + )} +
+
+ + {/* ستون راست: تیتر دسته‌ها */} +
+
+ {dropdownGroups.map((group) => { + const isActive = group.id === desktopActiveGroupId; + return ( + + ); + })} +
+
+
+
+
+ + + +
{t('nav_pricing')} {t('nav_network')} {t('nav_support')} @@ -61,6 +255,21 @@ export default function Header() { {/* بخش اکشن‌ها */}
+ {/* منوی موبایل */} + + {/* دکمه انتخاب زبان (در حالت کپسولی پنهان می‌شود) */}
+ + {/* پنل منوی موبایل */} + {mobileOpen ? ( +
+
+ + + {mobileServicesOpen ? ( +
+ {dropdownGroups.map((group) => ( +
+
+ {group.label} +
+
+ {group.items.map((item) => ( + + + + + {item.title} + + ))} +
+
+ ))} +
+ ) : null} + + {t('nav_pricing')} + {t('nav_network')} + {t('nav_support')} +
+
+ ) : null}
); }