diff --git a/public/images/services-hero-dark.png b/public/images/services-hero-dark.png new file mode 100644 index 0000000..b527799 Binary files /dev/null and b/public/images/services-hero-dark.png differ diff --git a/public/images/services-hero-light.png b/public/images/services-hero-light.png new file mode 100644 index 0000000..298aa78 Binary files /dev/null and b/public/images/services-hero-light.png differ diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx index f8024c0..fe9803d 100644 --- a/src/app/[locale]/page.tsx +++ b/src/app/[locale]/page.tsx @@ -12,7 +12,7 @@ export default async function Home({ const dir = locale === 'en' ? 'ltr' : 'rtl'; return ( -
+
diff --git a/src/app/[locale]/services/[slug]/page.tsx b/src/app/[locale]/services/[slug]/page.tsx new file mode 100644 index 0000000..f95e8ea --- /dev/null +++ b/src/app/[locale]/services/[slug]/page.tsx @@ -0,0 +1,41 @@ +import { notFound } 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'; + +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]/service-detail-page.tsx b/src/app/[locale]/services/[slug]/service-detail-page.tsx new file mode 100644 index 0000000..61f4136 --- /dev/null +++ b/src/app/[locale]/services/[slug]/service-detail-page.tsx @@ -0,0 +1,418 @@ +'use client'; + +import Image from 'next/image'; +import { useEffect, useMemo, useState } from 'react'; +import { motion } from 'framer-motion'; +import { + ArrowLeft, + Check, + ChevronDown, + Cloud, + Database, + Gauge, + Headphones, + Rocket, + ShieldCheck, + Zap, +} from 'lucide-react'; +import { useI18n } from '../../../../i18n/provider'; +import { serviceContent, type ServiceSlug } from './services.data'; +import { useTheme } from 'next-themes'; + +function HeroIcon({ name }: { name: 'shield' | 'wp' | 'speed' | 'support' }) { + const className = + 'w-5 h-5 text-[#80c8f5] drop-shadow-[0_0_12px_rgba(128,200,245,0.25)]'; + switch (name) { + case 'shield': + return ; + case 'support': + return ; + case 'speed': + return ; + case 'wp': + return ; + } +} + +function StatIcon({ name }: { name: 'uptime' | 'support' | 'nvme' | 'security' }) { + const className = + 'w-5 h-5 text-[#84e1bc] drop-shadow-[0_0_14px_rgba(132,225,188,0.22)]'; + switch (name) { + case 'uptime': + return ; + case 'support': + return ; + case 'nvme': + return ; + case 'security': + return ; + } +} + +function GradientIconBox({ children }: { children: React.ReactNode }) { + return ( + + + + + {children} + + ); +} + +function FeatureIcon({ name }: { name: 'bolt' | 'shield' | 'cloud' | 'wp' | 'headphones' | 'rocket' }) { + const className = + 'w-6 h-6 text-[#84e1bc] drop-shadow-[0_0_14px_rgba(132,225,188,0.25)]'; + switch (name) { + case 'bolt': + return ; + case 'shield': + return ; + case 'cloud': + return ; + case 'wp': + return ; + case 'headphones': + return ; + case 'rocket': + return ; + } +} + +export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) { + const { locale } = useI18n(); + const content = useMemo(() => serviceContent[slug][locale], [slug, locale]); + const dir = locale === 'en' ? 'ltr' : 'rtl'; + const [openFaq, setOpenFaq] = useState(0); + const { resolvedTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + useEffect(() => setMounted(true), []); + + const sectionMotion = { + initial: { opacity: 0, y: 24 }, + whileInView: { opacity: 1, y: 0 }, + transition: { duration: 0.7, ease: 'easeOut' as const }, + viewport: { once: true, amount: 0.2 }, + }; + + const heroContainer = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { staggerChildren: 0.12, delayChildren: 0.05 }, + }, + }; + + const heroItem = { + hidden: { opacity: 0, y: 16, filter: 'blur(8px)' }, + visible: { + opacity: 1, + y: 0, + filter: 'blur(0px)', + transition: { duration: 0.75, ease: 'easeOut' as const }, + }, + }; + + return ( +
+ {/* Hero */} +
+
+ {/* Light base background must be pure white; Dark base = #010D1F */} + {/*
*/} + + {/* Artwork (smaller, left-side so text doesn't blend) */} + +
+ +
+ + {/* Right-side fade so text never blends into artwork */} +
+ + {/* Bottom fade */} +
+ {/* Dark-only bottom fade (from #010D1F to transparent) */} +
+ +
+ +
+
+
+
+ {content.breadcrumbs.map((b, idx) => ( + + + {b} + + {idx !== content.breadcrumbs.length - 1 ? ( + / + ) : null} + + ))} +
+
+ + + + {/* Right side - text */} +
+ + {content.heroBadge} + + + + {content.title} +
+ {content.accent} + + + + {content.subtitle} + + + + {content.heroHighlights.map((h) => ( +
+ + + + {h.label} +
+ ))} + + + + + + +
+ +
+ +
+
+
+ {content.quickStats.map((s, idx) => ( +
+ + + +
+
{s.label}
+
{s.value}
+
+
+ ))} +
+
+
+ +
+
+ + {/* Features */} + +
+

{content.featuresTitle}

+

{content.featuresSubtitle}

+
+ +
+ {content.features.map((f) => ( +
+
+ +
+
{f.title}
+
{f.desc}
+
+ ))} +
+ + + {/* Plans */} + +
+

{content.plansTitle}

+

{content.plansSubtitle}

+
+ +
+ {content.plans.map((p) => ( +
+ {p.badge ? ( +
+ {p.badge} +
+ ) : null} +
{p.name}
+
+
{p.price}
+
{p.period}
+
+
+
    + {p.features.map((feat) => ( +
  • + + + + {feat} +
    • + ))} +
+ +
+ ))} +
+ + + {/* FAQ + Why */} + +
+
+

{content.faqTitle}

+

{content.faqSubtitle}

+ +
+ {content.faqs.map((f, idx) => { + const isOpen = openFaq === idx; + return ( +
+ + {isOpen ? ( +
+ {f.a} +
+ ) : null} +
+ ); + })} +
+
+ +
+
+
+
+
+ +
+

{content.whyTitle}

+

{content.whyText}

+
    + {content.whyBullets.map((b) => ( +
  • + + + + {b} +
    • + ))} +
+ +
+ +
+
+
+
+
+ + + {/* Final CTA */} + +
+
+

{content.finalCtaTitle}

+

{content.finalCtaDesc}

+
+ +
+ +
+ ); +} diff --git a/src/app/[locale]/services/[slug]/services.data.ts b/src/app/[locale]/services/[slug]/services.data.ts new file mode 100644 index 0000000..0a69da2 --- /dev/null +++ b/src/app/[locale]/services/[slug]/services.data.ts @@ -0,0 +1,525 @@ +import type { Locale } from '../../../../i18n/messages'; + +export type ServiceSlug = + | 'eco-hosting' + | 'high-traffic-hosting' + | 'wordpress-hosting' + | 'server-management'; + +export const serviceSlugs: ServiceSlug[] = [ + 'eco-hosting', + 'high-traffic-hosting', + 'wordpress-hosting', + 'server-management', +]; + +type ServiceContent = { + seoTitle: string; + title: string; + accent: string; + heroBadge: string; + subtitle: string; + breadcrumbs: string[]; + heroPrimaryCta: string; + heroSecondaryCta: string; + heroHighlights: { label: string; icon: 'shield' | 'wp' | 'speed' | 'support' }[]; + quickStats: { label: string; value: string; icon: 'uptime' | 'support' | 'nvme' | 'security' }[]; + featuresTitle: string; + featuresSubtitle: string; + features: { title: string; desc: string; icon: 'bolt' | 'shield' | 'cloud' | 'wp' | 'headphones' | 'rocket' }[]; + plansTitle: string; + plansSubtitle: string; + plans: { + name: string; + price: string; + period: string; + badge?: string; + features: string[]; + cta: string; + featured?: boolean; + }[]; + faqTitle: string; + faqSubtitle: string; + faqs: { q: string; a: string }[]; + whyTitle: string; + whyText: string; + whyBullets: string[]; + finalCtaTitle: string; + finalCtaDesc: string; + finalCtaButton: string; +}; + +export const serviceContent: Record> = { + 'wordpress-hosting': { + fa: { + seoTitle: 'هاست وردپرس', + title: 'هاست وردپرس', + accent: 'بهینه', + heroBadge: 'هاست بهینه برای وردپرس', + subtitle: + 'سریع، امن و آماده برای وردپرس — با تنظیمات بهینه و پشتیبانی تخصصی برای رشد سایت شما.', + breadcrumbs: ['صفحه اصلی', 'هاست', 'هاست وردپرس'], + heroPrimaryCta: 'ثبت سفارش', + heroSecondaryCta: 'مشاهده پلن‌ها', + heroHighlights: [ + { label: 'نصب خودکار وردپرس', icon: 'wp' }, + { label: 'پشتیبانی روزانه', icon: 'support' }, + { label: 'مانیتورینگ ۲۴/۷', icon: 'speed' }, + { label: 'گواهی SSL رایگان', icon: 'shield' }, + ], + quickStats: [ + { label: 'آپتایم شبکه', value: '۹۹.۹۹٪', icon: 'uptime' }, + { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' }, + { label: 'ذخیره‌ساز', value: 'NVMe SSD', icon: 'nvme' }, + { label: 'امنیت', value: 'Tier 3+', icon: 'security' }, + ], + featuresTitle: 'ویژگی‌های هاست وردپرس', + featuresSubtitle: 'تمام آنچه برای میزبانی حرفه‌ای وردپرس نیاز دارید', + features: [ + { + title: 'سرورهای بهینه وردپرس', + desc: 'پیکربندی بهینه برای PHP و پایگاه‌داده جهت بهترین کارایی.', + icon: 'wp', + }, + { title: 'سرعت فوق‌العاده', desc: 'NVMe + کشینگ برای لود سریع‌تر صفحات.', icon: 'bolt' }, + { title: 'امنیت پیشرفته', desc: 'WAF و محافظت در برابر حملات رایج.', icon: 'shield' }, + { title: 'پشتیبان‌گیری روزانه', desc: 'بکاپ خودکار با امکان بازیابی آسان.', icon: 'cloud' }, + { title: 'نصب آسان وردپرس', desc: 'راه‌اندازی سریع و بدون دردسر.', icon: 'rocket' }, + { title: 'پشتیبانی تخصصی', desc: 'تیم فنی آشنا با وردپرس کنار شماست.', icon: 'headphones' }, + ], + plansTitle: 'پلن‌های هاست وردپرس', + plansSubtitle: 'پلن مناسب خود را انتخاب کنید', + plans: [ + { + name: 'اقتصادی', + price: '۹۹,۰۰۰', + period: 'تومان / ماهانه', + features: ['۱ سایت', '۱۰ گیگابایت NVMe', 'ترافیک مناسب', 'SSL رایگان', 'بکاپ روزانه'], + cta: 'سفارش', + }, + { + name: 'استاندارد', + price: '۱۵۹,۰۰۰', + period: 'تومان / ماهانه', + features: ['۲ سایت', '۲۰ گیگابایت NVMe', 'ترافیک بیشتر', 'SSL رایگان', 'بکاپ روزانه'], + cta: 'سفارش', + }, + { + name: 'محبوب‌ترین', + price: '۴۴۹,۰۰۰', + period: 'تومان / ماهانه', + badge: 'محبوب‌ترین', + featured: true, + features: ['۵ سایت', '۴۰ گیگابایت NVMe', 'ترافیک بالا', 'SSL رایگان', 'پشتیبانی اولویت‌دار'], + cta: 'سفارش', + }, + { + name: 'ویژه', + price: '۱,۲۹۹,۰۰۰', + period: 'تومان / ماهانه', + features: ['۱۰ سایت', '۸۰ گیگابایت NVMe', 'ترافیک نامحدود', 'SSL رایگان', 'مدیریت پیشرفته'], + cta: 'سفارش', + }, + ], + faqTitle: 'سوالات متداول', + faqSubtitle: 'پاسخ سوالات رایج درباره هاست وردپرس', + faqs: [ + { q: 'آیا بعد از خرید می‌توانم پلن را ارتقا دهم؟', a: 'بله، هر زمان می‌توانید پلن را ارتقا دهید و مابه‌التفاوت محاسبه می‌شود.' }, + { q: 'آیا امکان انتقال سایت از هاست دیگر وجود دارد؟', a: 'بله، تیم ما انتقال سایت را با کمترین اختلال انجام می‌دهد.' }, + { q: 'تفاوت هاست وردپرس با هاست معمولی چیست؟', a: 'هاست وردپرس با تنظیمات و کشینگ بهینه برای وردپرس تنظیم شده تا عملکرد بهتری بگیرید.' }, + { q: 'چه نسخه‌هایی از PHP پشتیبانی می‌شود؟', a: 'نسخه‌های رایج و به‌روز PHP در دسترس است و امکان تغییر نسخه وجود دارد.' }, + ], + whyTitle: 'چرا هاست وردپرس MugCloud؟', + whyText: 'با زیرساخت پایدار و تیم متخصص، سریع‌تر رشد کنید و خیال‌تان از امنیت و پایداری راحت باشد.', + whyBullets: ['بهینه‌سازی شده برای وردپرس', 'سرعت و عملکرد فوق‌العاده', 'امنیت پیشرفته و پایدار', 'پشتیبان‌گیری روزانه', 'انتقال رایگان سایت'], + finalCtaTitle: 'آماده شروع هستید؟', + finalCtaDesc: 'همین حالا پلن مناسب را انتخاب کنید و هاست وردپرس خود را راه‌اندازی کنید.', + finalCtaButton: 'ثبت سفارش هاست وردپرس', + }, + en: { + seoTitle: 'WordPress Hosting', + title: 'WordPress Hosting', + accent: 'optimized', + heroBadge: 'Optimized for WordPress', + subtitle: + 'Fast, secure, and WordPress-ready — tuned configs and expert support to help your site grow.', + breadcrumbs: ['Home', 'Hosting', 'WordPress'], + heroPrimaryCta: 'Order now', + heroSecondaryCta: 'View plans', + heroHighlights: [ + { label: 'Auto WordPress install', icon: 'wp' }, + { label: 'Daily backups', icon: 'support' }, + { label: '24/7 monitoring', icon: 'speed' }, + { label: 'Free SSL', icon: 'shield' }, + ], + quickStats: [ + { label: 'Network uptime', value: '99.99%', icon: 'uptime' }, + { label: 'Support', value: '24/7', icon: 'support' }, + { label: 'Storage', value: 'NVMe SSD', icon: 'nvme' }, + { label: 'Security', value: 'Tier 3+', icon: 'security' }, + ], + featuresTitle: 'WordPress Hosting features', + featuresSubtitle: 'Everything you need for pro WordPress hosting', + features: [ + { title: 'WordPress-tuned servers', desc: 'Optimized PHP and database configs for top performance.', icon: 'wp' }, + { title: 'Blazing speed', desc: 'NVMe + caching for faster page loads.', icon: 'bolt' }, + { title: 'Advanced security', desc: 'WAF and protection against common attacks.', icon: 'shield' }, + { title: 'Daily backups', desc: 'Automated backups with easy restore.', icon: 'cloud' }, + { title: 'Easy setup', desc: 'Launch your WordPress site in minutes.', icon: 'rocket' }, + { title: 'Expert support', desc: 'A WordPress-aware team to help you succeed.', icon: 'headphones' }, + ], + plansTitle: 'WordPress Hosting plans', + plansSubtitle: 'Pick the plan that fits you', + plans: [ + { name: 'Starter', price: '99,000', period: 'Toman / month', features: ['1 website', '10GB NVMe', 'Fair traffic', 'Free SSL', 'Daily backups'], cta: 'Order' }, + { name: 'Standard', price: '159,000', period: 'Toman / month', features: ['2 websites', '20GB NVMe', 'More traffic', 'Free SSL', 'Daily backups'], cta: 'Order' }, + { name: 'Most popular', price: '449,000', period: 'Toman / month', badge: 'Popular', featured: true, features: ['5 websites', '40GB NVMe', 'High traffic', 'Free SSL', 'Priority support'], cta: 'Order' }, + { name: 'Pro', price: '1,299,000', period: 'Toman / month', features: ['10 websites', '80GB NVMe', 'Unlimited traffic', 'Free SSL', 'Advanced management'], cta: 'Order' }, + ], + faqTitle: 'FAQ', + faqSubtitle: 'Common questions about WordPress hosting', + faqs: [ + { q: 'Can I upgrade later?', a: 'Yes. You can upgrade anytime and we’ll calculate the difference.' }, + { q: 'Can you migrate my site?', a: 'Yes. Our team can migrate your site with minimal downtime.' }, + { q: 'How is this different from regular hosting?', a: 'It’s tuned specifically for WordPress to deliver better performance and stability.' }, + { q: 'Which PHP versions are supported?', a: 'Modern PHP versions are available and you can switch between supported versions.' }, + ], + whyTitle: 'Why MugCloud WordPress Hosting?', + whyText: 'Scale confidently with a stable platform and a team that cares about performance, security, and uptime.', + whyBullets: ['WordPress optimized', 'Outstanding speed', 'Secure and stable', 'Daily backups', 'Free migration'], + finalCtaTitle: 'Ready to get started?', + finalCtaDesc: 'Choose your plan and launch WordPress hosting today.', + finalCtaButton: 'Order WordPress Hosting', + }, + }, + 'eco-hosting': { + fa: { + seoTitle: 'هاست اقتصادی', + title: 'هاست اقتصادی', + accent: 'مقرون‌به‌صرفه', + heroBadge: 'شروع اقتصادی و سریع', + subtitle: 'میزبانی ساده و پایدار برای شروع — مناسب سایت‌های شخصی و کسب‌وکارهای کوچک.', + breadcrumbs: ['صفحه اصلی', 'هاست', 'هاست اقتصادی'], + heroPrimaryCta: 'ثبت سفارش', + heroSecondaryCta: 'مشاهده پلن‌ها', + heroHighlights: [ + { label: 'مناسب شروع', icon: 'speed' }, + { label: 'پشتیبانی ۲۴/۷', icon: 'support' }, + { label: 'امنیت استاندارد', icon: 'shield' }, + { label: 'SSL رایگان', icon: 'shield' }, + ], + quickStats: [ + { label: 'آپتایم شبکه', value: '۹۹.۹۹٪', icon: 'uptime' }, + { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' }, + { label: 'ذخیره‌ساز', value: 'SSD', icon: 'nvme' }, + { label: 'امنیت', value: 'WAF پایه', icon: 'security' }, + ], + featuresTitle: 'ویژگی‌های هاست اقتصادی', + featuresSubtitle: 'برای شروع، بدون هزینه اضافه', + features: [ + { title: 'راه‌اندازی سریع', desc: 'فعال‌سازی سریع بعد از سفارش.', icon: 'rocket' }, + { title: 'پایداری بالا', desc: 'آپتایم و مانیتورینگ مداوم.', icon: 'shield' }, + { title: 'سازگار با CMSها', desc: 'وردپرس، جوملا و سیستم‌های رایج.', icon: 'wp' }, + { title: 'بکاپ دوره‌ای', desc: 'بکاپ منظم برای آرامش خاطر.', icon: 'cloud' }, + { title: 'سرعت مناسب', desc: 'تنظیمات استاندارد برای عملکرد خوب.', icon: 'bolt' }, + { title: 'پشتیبانی پاسخگو', desc: 'تیم پشتیبانی در کنار شماست.', icon: 'headphones' }, + ], + plansTitle: 'پلن‌های هاست اقتصادی', + plansSubtitle: 'انتخاب ساده و سریع', + plans: [ + { name: 'اقتصادی ۱', price: '۴۹,۰۰۰', period: 'تومان / ماهانه', features: ['۱ سایت', '۵ گیگابایت', 'SSL رایگان', 'بکاپ دوره‌ای'], cta: 'سفارش' }, + { name: 'اقتصادی ۲', price: '۷۹,۰۰۰', period: 'تومان / ماهانه', features: ['۱ سایت', '۱۰ گیگابایت', 'SSL رایگان', 'بکاپ دوره‌ای'], cta: 'سفارش', featured: true, badge: 'به‌صرفه' }, + { name: 'اقتصادی ۳', price: '۱۰۹,۰۰۰', period: 'تومان / ماهانه', features: ['۲ سایت', '۱۵ گیگابایت', 'SSL رایگان', 'بکاپ دوره‌ای'], cta: 'سفارش' }, + { name: 'اقتصادی ۴', price: '۱۴۹,۰۰۰', period: 'تومان / ماهانه', features: ['۳ سایت', '۲۵ گیگابایت', 'SSL رایگان', 'بکاپ دوره‌ای'], cta: 'سفارش' }, + ], + faqTitle: 'سوالات متداول', + faqSubtitle: 'پرسش‌های رایج درباره هاست اقتصادی', + faqs: [ + { q: 'هاست اقتصادی برای چه کسانی مناسب است؟', a: 'برای سایت‌های تازه‌کار، شخصی و کسب‌وکارهای کوچک که بودجه محدود دارند.' }, + { q: 'آیا می‌توانم بعداً ارتقا بدهم؟', a: 'بله، هر زمان می‌توانید پلن را ارتقا دهید.' }, + { q: 'SSL رایگان دارد؟', a: 'بله، برای همه پلن‌ها SSL ارائه می‌شود.' }, + { q: 'بکاپ چگونه انجام می‌شود؟', a: 'بصورت دوره‌ای و طبق سیاست سرویس، بکاپ تهیه می‌شود.' }, + ], + whyTitle: 'چرا هاست اقتصادی MugCloud؟', + whyText: 'شروع سریع، هزینه مناسب و پشتیبانی خوب برای قدم اول.', + whyBullets: ['هزینه مقرون‌به‌صرفه', 'راه‌اندازی سریع', 'پایداری مناسب', 'SSL رایگان', 'پشتیبانی ۲۴/۷'], + finalCtaTitle: 'آماده شروع هستید؟', + finalCtaDesc: 'پلن اقتصادی مناسب را انتخاب کنید و سایت‌تان را آنلاین کنید.', + finalCtaButton: 'ثبت سفارش هاست اقتصادی', + }, + en: { + seoTitle: 'Budget Hosting', + title: 'Budget Hosting', + accent: 'cost-effective', + heroBadge: 'A budget-friendly start', + subtitle: 'Simple and reliable hosting to get started — ideal for personal sites and small businesses.', + breadcrumbs: ['Home', 'Hosting', 'Budget Hosting'], + heroPrimaryCta: 'Order now', + heroSecondaryCta: 'View plans', + heroHighlights: [ + { label: 'Great for starters', icon: 'speed' }, + { label: '24/7 support', icon: 'support' }, + { label: 'Standard security', icon: 'shield' }, + { label: 'Free SSL', icon: 'shield' }, + ], + quickStats: [ + { label: 'Network uptime', value: '99.99%', icon: 'uptime' }, + { label: 'Support', value: '24/7', icon: 'support' }, + { label: 'Storage', value: 'SSD', icon: 'nvme' }, + { label: 'Security', value: 'Basic WAF', icon: 'security' }, + ], + featuresTitle: 'Budget Hosting features', + featuresSubtitle: 'Start fast without extra cost', + features: [ + { title: 'Fast activation', desc: 'Get online quickly after ordering.', icon: 'rocket' }, + { title: 'High stability', desc: 'Continuous monitoring and uptime.', icon: 'shield' }, + { title: 'CMS friendly', desc: 'Works great with popular CMSs.', icon: 'wp' }, + { title: 'Periodic backups', desc: 'Regular backups for peace of mind.', icon: 'cloud' }, + { title: 'Good speed', desc: 'Standard tuning for solid performance.', icon: 'bolt' }, + { title: 'Helpful support', desc: 'Support team is ready to help.', icon: 'headphones' }, + ], + plansTitle: 'Budget Hosting plans', + plansSubtitle: 'Quick and simple choice', + plans: [ + { name: 'Budget 1', price: '49,000', period: 'Toman / month', features: ['1 website', '5GB', 'Free SSL', 'Periodic backups'], cta: 'Order' }, + { name: 'Budget 2', price: '79,000', period: 'Toman / month', features: ['1 website', '10GB', 'Free SSL', 'Periodic backups'], cta: 'Order', featured: true, badge: 'Best value' }, + { name: 'Budget 3', price: '109,000', period: 'Toman / month', features: ['2 websites', '15GB', 'Free SSL', 'Periodic backups'], cta: 'Order' }, + { name: 'Budget 4', price: '149,000', period: 'Toman / month', features: ['3 websites', '25GB', 'Free SSL', 'Periodic backups'], cta: 'Order' }, + ], + faqTitle: 'FAQ', + faqSubtitle: 'Common questions about budget hosting', + faqs: [ + { q: 'Who is this for?', a: 'Perfect for new personal sites and small businesses on a budget.' }, + { q: 'Can I upgrade later?', a: 'Yes, you can upgrade anytime.' }, + { q: 'Is SSL included?', a: 'Yes, SSL is included on all plans.' }, + { q: 'How do backups work?', a: 'Backups run periodically based on service policy.' }, + ], + whyTitle: 'Why MugCloud Budget Hosting?', + whyText: 'Low cost, quick start, and dependable support for your first step.', + whyBullets: ['Affordable pricing', 'Fast activation', 'Reliable uptime', 'Free SSL', '24/7 support'], + finalCtaTitle: 'Ready to get started?', + finalCtaDesc: 'Pick a budget plan and get your site online.', + finalCtaButton: 'Order Budget Hosting', + }, + }, + 'high-traffic-hosting': { + fa: { + seoTitle: 'هاست پربازدید', + title: 'هاست پربازدید', + accent: 'پرسرعت', + heroBadge: 'برای سایت‌های پرترافیک', + subtitle: 'برای زمان‌هایی که ترافیک بالا می‌رود — منابع بیشتر، کشینگ بهتر و پایداری بالاتر.', + breadcrumbs: ['صفحه اصلی', 'هاست', 'هاست پربازدید'], + heroPrimaryCta: 'ثبت سفارش', + heroSecondaryCta: 'مشاهده پلن‌ها', + heroHighlights: [ + { label: 'مناسب سایت‌های پرترافیک', icon: 'speed' }, + { label: 'کش و بهینه‌سازی', icon: 'speed' }, + { label: 'امنیت پیشرفته', icon: 'shield' }, + { label: 'پشتیبانی اولویت‌دار', icon: 'support' }, + ], + quickStats: [ + { label: 'آپتایم شبکه', value: '۹۹.۹۹٪', icon: 'uptime' }, + { label: 'پشتیبانی', value: '۲۴/۷', icon: 'support' }, + { label: 'ذخیره‌ساز', value: 'NVMe SSD', icon: 'nvme' }, + { label: 'امنیت', value: 'WAF+', icon: 'security' }, + ], + featuresTitle: 'ویژگی‌های هاست پربازدید', + featuresSubtitle: 'برای ترافیک بالا، بدون افت عملکرد', + features: [ + { title: 'کشینگ پیشرفته', desc: 'بهبود TTFB و افزایش سرعت بارگذاری.', icon: 'bolt' }, + { title: 'منابع بیشتر', desc: 'CPU/RAM بالاتر برای سرویس‌های پرترافیک.', icon: 'rocket' }, + { title: 'پایداری بالا', desc: 'مانیتورینگ و مقیاس‌پذیری بهتر.', icon: 'cloud' }, + { title: 'امنیت قوی‌تر', desc: 'محافظت در برابر حملات رایج و DDoS.', icon: 'shield' }, + { title: 'ذخیره‌ساز NVMe', desc: 'عملکرد I/O بسیار بهتر نسبت به SSD معمولی.', icon: 'bolt' }, + { title: 'پشتیبانی اولویت‌دار', desc: 'پاسخگویی سریع‌تر برای سرویس‌های حساس.', icon: 'headphones' }, + ], + plansTitle: 'پلن‌های هاست پربازدید', + plansSubtitle: 'برای رشد و ترافیک بالا', + plans: [ + { name: 'پربازدید ۱', price: '۲۴۹,۰۰۰', period: 'تومان / ماهانه', features: ['۲ سایت', '۳۰ گیگابایت NVMe', 'ترافیک بالا', 'SSL رایگان', 'کشینگ'], cta: 'سفارش' }, + { name: 'پربازدید ۲', price: '۳۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['۴ سایت', '۴۰ گیگابایت NVMe', 'ترافیک بسیار بالا', 'SSL رایگان', 'کشینگ'], cta: 'سفارش', featured: true, badge: 'پرفروش' }, + { name: 'پربازدید ۳', price: '۵۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['۶ سایت', '۶۰ گیگابایت NVMe', 'ترافیک نامحدود', 'SSL رایگان', 'پشتیبانی اولویت‌دار'], cta: 'سفارش' }, + { name: 'پربازدید ۴', price: '۸۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['۱۰ سایت', '۱۰۰ گیگابایت NVMe', 'ترافیک نامحدود', 'SSL رایگان', 'بهینه‌سازی اختصاصی'], cta: 'سفارش' }, + ], + faqTitle: 'سوالات متداول', + faqSubtitle: 'پرسش‌های رایج درباره هاست پربازدید', + faqs: [ + { q: 'هاست پربازدید برای چه سایت‌هایی است؟', a: 'برای فروشگاه‌ها، سایت‌های خبری و سرویس‌هایی که بازدید روزانه بالایی دارند.' }, + { q: 'آیا در زمان پیک ترافیک افت می‌کند؟', a: 'با منابع بیشتر و کشینگ بهتر، افت عملکرد به حداقل می‌رسد.' }, + { q: 'برای حملات DDoS چه می‌کنید؟', a: 'لایه‌های حفاظتی و سیاست‌های امنیتی برای کاهش ریسک در نظر گرفته شده است.' }, + { q: 'آیا می‌توانم پلن را ارتقا دهم؟', a: 'بله، ارتقا در هر زمان امکان‌پذیر است.' }, + ], + whyTitle: 'چرا هاست پربازدید MugCloud؟', + whyText: 'وقتی ترافیک بالا می‌رود، زیرساخت باید آماده باشد.', + whyBullets: ['کشینگ و بهینه‌سازی', 'NVMe پرسرعت', 'امنیت قوی‌تر', 'پایداری بالا', 'پشتیبانی اولویت‌دار'], + finalCtaTitle: 'آماده مدیریت ترافیک بالا هستید؟', + finalCtaDesc: 'پلن مناسب را انتخاب کنید و بدون نگرانی رشد کنید.', + finalCtaButton: 'ثبت سفارش هاست پربازدید', + }, + en: { + seoTitle: 'High-Traffic Hosting', + title: 'High-Traffic Hosting', + accent: 'high-performance', + heroBadge: 'Built for high traffic', + subtitle: 'Built for traffic spikes — more resources, better caching, and higher stability.', + breadcrumbs: ['Home', 'Hosting', 'High-Traffic'], + heroPrimaryCta: 'Order now', + heroSecondaryCta: 'View plans', + heroHighlights: [ + { label: 'For high-traffic sites', icon: 'speed' }, + { label: 'Caching & tuning', icon: 'speed' }, + { label: 'Advanced security', icon: 'shield' }, + { label: 'Priority support', icon: 'support' }, + ], + quickStats: [ + { label: 'Network uptime', value: '99.99%', icon: 'uptime' }, + { label: 'Support', value: '24/7', icon: 'support' }, + { label: 'Storage', value: 'NVMe SSD', icon: 'nvme' }, + { label: 'Security', value: 'WAF+', icon: 'security' }, + ], + featuresTitle: 'High-Traffic Hosting features', + featuresSubtitle: 'Handle spikes without performance drops', + features: [ + { title: 'Advanced caching', desc: 'Improves TTFB and load speed.', icon: 'bolt' }, + { title: 'More resources', desc: 'Higher CPU/RAM for busy sites.', icon: 'rocket' }, + { title: 'High stability', desc: 'Monitoring and better scalability.', icon: 'cloud' }, + { title: 'Stronger security', desc: 'Protection against common threats and DDoS.', icon: 'shield' }, + { title: 'NVMe storage', desc: 'Much faster I/O than standard SSD.', icon: 'bolt' }, + { title: 'Priority support', desc: 'Faster response for critical services.', icon: 'headphones' }, + ], + plansTitle: 'High-Traffic Hosting plans', + plansSubtitle: 'For growth and heavy traffic', + plans: [ + { name: 'Traffic 1', price: '249,000', period: 'Toman / month', features: ['2 websites', '30GB NVMe', 'High traffic', 'Free SSL', 'Caching'], cta: 'Order' }, + { name: 'Traffic 2', price: '399,000', period: 'Toman / month', features: ['4 websites', '40GB NVMe', 'Very high traffic', 'Free SSL', 'Caching'], cta: 'Order', featured: true, badge: 'Best seller' }, + { name: 'Traffic 3', price: '599,000', period: 'Toman / month', features: ['6 websites', '60GB NVMe', 'Unlimited traffic', 'Free SSL', 'Priority support'], cta: 'Order' }, + { name: 'Traffic 4', price: '899,000', period: 'Toman / month', features: ['10 websites', '100GB NVMe', 'Unlimited traffic', 'Free SSL', 'Custom tuning'], cta: 'Order' }, + ], + faqTitle: 'FAQ', + faqSubtitle: 'Common questions about high-traffic hosting', + faqs: [ + { q: 'Who is this for?', a: 'E-commerce, news sites, and apps with high daily visits.' }, + { q: 'Does it slow down during peak?', a: 'With better resources and caching, slowdowns are minimized.' }, + { q: 'How do you handle DDoS?', a: 'Security layers and policies reduce risk and mitigate attacks.' }, + { q: 'Can I upgrade?', a: 'Yes, upgrades are available anytime.' }, + ], + whyTitle: 'Why MugCloud High-Traffic Hosting?', + whyText: 'When traffic grows, your infrastructure should be ready.', + whyBullets: ['Caching & tuning', 'Fast NVMe', 'Stronger security', 'High stability', 'Priority support'], + finalCtaTitle: 'Ready for high traffic?', + finalCtaDesc: 'Pick a plan and scale without worry.', + finalCtaButton: 'Order High-Traffic Hosting', + }, + }, + 'server-management': { + fa: { + seoTitle: 'مدیریت سرور', + title: 'مدیریت سرور', + accent: 'حرفه‌ای', + heroBadge: 'عملیات و امنیت، با تیم متخصص', + subtitle: 'از راه‌اندازی تا نگهداری — مانیتورینگ، امنیت، بکاپ و بهینه‌سازی توسط تیم متخصص.', + breadcrumbs: ['صفحه اصلی', 'خدمات', 'مدیریت سرور'], + heroPrimaryCta: 'درخواست مشاوره', + heroSecondaryCta: 'مشاهده پلن‌ها', + heroHighlights: [ + { label: 'مانیتورینگ ۲۴/۷', icon: 'speed' }, + { label: 'امنیت و سخت‌سازی', icon: 'shield' }, + { label: 'بکاپ و بازیابی', icon: 'support' }, + { label: 'بهینه‌سازی عملکرد', icon: 'speed' }, + ], + quickStats: [ + { label: 'مانیتورینگ', value: '۲۴/۷', icon: 'support' }, + { label: 'ریسپانس', value: 'SLA', icon: 'uptime' }, + { label: 'بکاپ', value: 'روزانه', icon: 'nvme' }, + { label: 'امنیت', value: 'Hardening', icon: 'security' }, + ], + featuresTitle: 'ویژگی‌های مدیریت سرور', + featuresSubtitle: 'سرور را به ما بسپارید؛ روی رشد تمرکز کنید', + features: [ + { title: 'راه‌اندازی استاندارد', desc: 'نصب و کانفیگ سرویس‌ها با بهترین روش‌ها.', icon: 'rocket' }, + { title: 'امنیت و Hardening', desc: 'سخت‌سازی سیستم و مدیریت دسترسی‌ها.', icon: 'shield' }, + { title: 'مانیتورینگ و هشدار', desc: 'نظارت مداوم روی منابع و سرویس‌ها.', icon: 'bolt' }, + { title: 'بکاپ و بازیابی', desc: 'سناریوهای بکاپ و ریکاوری قابل اعتماد.', icon: 'cloud' }, + { title: 'بهینه‌سازی عملکرد', desc: 'تیونینگ وب‌سرور و دیتابیس برای کارایی.', icon: 'rocket' }, + { title: 'پشتیبانی تخصصی', desc: 'پاسخگویی و حل مشکل توسط تیم فنی.', icon: 'headphones' }, + ], + plansTitle: 'پلن‌های مدیریت سرور', + plansSubtitle: 'انتخاب سطح مناسب مدیریت', + plans: [ + { name: 'پایه', price: '۴۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['مانیتورینگ پایه', 'آپدیت‌های امنیتی', 'بکاپ هفتگی'], cta: 'درخواست' }, + { name: 'استاندارد', price: '۹۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['مانیتورینگ ۲۴/۷', 'Hardening', 'بکاپ روزانه', 'پشتیبانی'], cta: 'درخواست', featured: true, badge: 'محبوب' }, + { name: 'پیشرفته', price: '۱,۹۹۹,۰۰۰', period: 'تومان / ماهانه', features: ['SLA', 'بهینه‌سازی دوره‌ای', 'مدیریت لاگ‌ها', 'پشتیبانی اولویت‌دار'], cta: 'درخواست' }, + { name: 'سفارشی', price: 'تماس', period: '', features: ['بر اساس نیاز شما', 'سرویس‌های اختصاصی', 'قرارداد سازمانی'], cta: 'تماس' }, + ], + faqTitle: 'سوالات متداول', + faqSubtitle: 'پرسش‌های رایج درباره مدیریت سرور', + faqs: [ + { q: 'چه نوع سرورهایی را مدیریت می‌کنید؟', a: 'لینوکس (Ubuntu/Debian/CentOS) و سرویس‌های رایج وب و دیتابیس.' }, + { q: 'آیا Hardening هم انجام می‌شود؟', a: 'بله، بر اساس بهترین روش‌ها و نیاز سرویس شما.' }, + { q: 'بکاپ‌ها کجا نگهداری می‌شوند؟', a: 'طبق پلن انتخابی، در فضای جداگانه و امن نگهداری می‌شوند.' }, + { q: 'در مواقع بحرانی چه می‌شود؟', a: 'طبق SLA و سطح سرویس، رسیدگی و اطلاع‌رسانی انجام می‌شود.' }, + ], + whyTitle: 'چرا مدیریت سرور MugCloud؟', + whyText: 'خیال‌تان از عملیات و امنیت راحت باشد.', + whyBullets: ['تیم متخصص', 'مانیتورینگ ۲۴/۷', 'بکاپ و ریکاوری', 'امنیت و Hardening', 'گزارش‌دهی شفاف'], + finalCtaTitle: 'آماده سپردن سرور هستید؟', + finalCtaDesc: 'برای شروع، درخواست مشاوره ثبت کنید.', + finalCtaButton: 'درخواست مشاوره مدیریت سرور', + }, + en: { + seoTitle: 'Server Management', + title: 'Server Management', + accent: 'professional', + heroBadge: 'Operations by experts', + subtitle: 'From setup to maintenance — monitoring, security, backups, and performance tuning by experts.', + breadcrumbs: ['Home', 'Services', 'Server Management'], + heroPrimaryCta: 'Request consultation', + heroSecondaryCta: 'View plans', + heroHighlights: [ + { label: '24/7 monitoring', icon: 'speed' }, + { label: 'Security hardening', icon: 'shield' }, + { label: 'Backup & restore', icon: 'support' }, + { label: 'Performance tuning', icon: 'speed' }, + ], + quickStats: [ + { label: 'Monitoring', value: '24/7', icon: 'support' }, + { label: 'Response', value: 'SLA', icon: 'uptime' }, + { label: 'Backups', value: 'Daily', icon: 'nvme' }, + { label: 'Security', value: 'Hardening', icon: 'security' }, + ], + featuresTitle: 'Server Management features', + featuresSubtitle: 'Let us handle ops; you focus on growth', + features: [ + { title: 'Standard setup', desc: 'Install and configure services with best practices.', icon: 'rocket' }, + { title: 'Security hardening', desc: 'Lockdown and access management.', icon: 'shield' }, + { title: 'Monitoring & alerts', desc: 'Continuous resource and service monitoring.', icon: 'bolt' }, + { title: 'Backup & restore', desc: 'Reliable backup and recovery scenarios.', icon: 'cloud' }, + { title: 'Performance tuning', desc: 'Tune web server and DB for better performance.', icon: 'rocket' }, + { title: 'Expert support', desc: 'Fast response from an experienced team.', icon: 'headphones' }, + ], + plansTitle: 'Server Management plans', + plansSubtitle: 'Choose the right level of management', + plans: [ + { name: 'Basic', price: '499,000', period: 'Toman / month', features: ['Basic monitoring', 'Security updates', 'Weekly backups'], cta: 'Request' }, + { name: 'Standard', price: '999,000', period: 'Toman / month', features: ['24/7 monitoring', 'Hardening', 'Daily backups', 'Support'], cta: 'Request', featured: true, badge: 'Popular' }, + { name: 'Advanced', price: '1,999,000', period: 'Toman / month', features: ['SLA', 'Regular tuning', 'Log management', 'Priority support'], cta: 'Request' }, + { name: 'Custom', price: 'Contact', period: '', features: ['Tailored to your needs', 'Dedicated services', 'Enterprise contract'], cta: 'Contact' }, + ], + faqTitle: 'FAQ', + faqSubtitle: 'Common questions about server management', + faqs: [ + { q: 'What servers do you manage?', a: 'Linux servers (Ubuntu/Debian/CentOS) and common web/database stacks.' }, + { q: 'Do you do hardening?', a: 'Yes, based on best practices and your workload needs.' }, + { q: 'Where are backups stored?', a: 'Depending on the plan, backups are kept in a separate secure storage.' }, + { q: 'What about incidents?', a: 'We respond and communicate according to your SLA and service level.' }, + ], + whyTitle: 'Why MugCloud Server Management?', + whyText: 'Stay confident about operations and security.', + whyBullets: ['Experienced team', '24/7 monitoring', 'Backup & recovery', 'Security hardening', 'Clear reporting'], + finalCtaTitle: 'Ready to hand off ops?', + finalCtaDesc: 'Start by requesting a consultation.', + finalCtaButton: 'Request server management consultation', + }, + }, +}; diff --git a/src/app/components/hero.tsx b/src/app/components/hero.tsx index 1e57da8..7d94519 100644 --- a/src/app/components/hero.tsx +++ b/src/app/components/hero.tsx @@ -67,6 +67,8 @@ export default function HeroSection() { {/* لایه گرادینت */}
+ {/* Dark-only bottom fade (from #000918 to transparent) */} +
diff --git a/src/app/globals.css b/src/app/globals.css index bd82358..5266bfb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -79,12 +79,13 @@ /* Light theme: white base + very subtle blue/green gradients, keeping glass feel */ html.light { - --background: #ffffff; + --background: #F8FAFC; --foreground: #0b1020; - --app-bg: radial-gradient(1000px 600px at 10% 10%, rgba(56, 189, 248, 0.10), transparent 60%), + --app-bg: #F8FAFC; + /* --app-bg: radial-gradient(1000px 600px at 10% 10%, rgba(56, 189, 248, 0.10), transparent 60%), radial-gradient(900px 520px at 85% 20%, rgba(132, 225, 188, 0.12), transparent 55%), - #ffffff; + #ffffff; */ --hero-bg: radial-gradient(1000px 600px at 15% 0%, rgba(56, 189, 248, 0.12), transparent 60%), radial-gradient(900px 520px at 85% 25%, rgba(132, 225, 188, 0.14), transparent 55%), #ffffff;