commit

src/app/[locale]/page.tsx

@@ -12,7 +12,7 @@ export default async function Home({
   const dir = locale === 'en' ? 'ltr' : 'rtl';
 
   return (
-    <main className="min-h-screen app-bg font-sans" dir={dir}>
+    <main className="min-h-screen font-sans" dir={dir}>
       <Navbar />
       <Hero />
       <MainContent />

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<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]/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 <ShieldCheck className={className} />;
+    case 'support':
+      return <Headphones className={className} />;
+    case 'speed':
+      return <Zap className={className} />;
+    case 'wp':
+      return <Cloud className={className} />;
+  }
+}
+
+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 <Gauge className={className} />;
+    case 'support':
+      return <Headphones className={className} />;
+    case 'nvme':
+      return <Database className={className} />;
+    case 'security':
+      return <ShieldCheck className={className} />;
+  }
+}
+
+function GradientIconBox({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="relative inline-flex items-center justify-center w-10 h-10 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md overflow-hidden">
+      <span className="absolute inset-0 bg-gradient-to-br from-[#80c8f5]/22 via-transparent to-[#84e1bc]/18" />
+      <span className="absolute -top-8 -right-8 w-16 h-16 bg-[#80c8f5]/18 blur-2xl rounded-full" />
+      <span className="absolute -bottom-8 -left-8 w-16 h-16 bg-[#84e1bc]/18 blur-2xl rounded-full" />
+      <span className="relative">{children}</span>
+    </span>
+  );
+}
+
+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 <Zap className={className} />;
+    case 'shield':
+      return <ShieldCheck className={className} />;
+    case 'cloud':
+      return <Cloud className={className} />;
+    case 'wp':
+      return <Cloud className={className} />;
+    case 'headphones':
+      return <Headphones className={className} />;
+    case 'rocket':
+      return <Rocket className={className} />;
+  }
+}
+
+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<number>(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 (
+    <div dir={dir} className="text-[color:var(--text-primary)]">
+      {/* Hero */}
+      <section className="relative overflow-hidden pt-28 lg:pt-32">
+        <div className="absolute inset-0 z-0">
+          {/* Light base background must be pure white; Dark base = #010D1F */}
+          {/* <div className="absolute inset-0 bg-white dark:bg-[#010D1F]" /> */}
+
+          {/* Artwork (smaller, left-side so text doesn't blend) */}
+          <motion.div
+            initial={{ opacity: 0, scale: 1.03 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true, amount: 0.35 }}
+            transition={{ duration: 1.1, ease: 'easeOut' }}
+            className="absolute inset-0 opacity-[var(--hero-image-opacity)]"
+          >
+            <div className="absolute inset-y-0 left-0 w-[52%] max-w-[820px] pointer-events-none">
+              <Image
+                src={
+                  mounted && resolvedTheme === 'light'
+                    ? '/images/services-hero-light.png'
+                    : '/images/services-hero-dark.png'
+                }
+                alt=""
+                fill
+                priority
+                unoptimized
+                quality={100}
+                sizes="(min-width: 1024px) 52vw, 100vw"
+                className="object-contain object-left"
+              />
+            </div>
+
+            {/* Right-side fade so text never blends into artwork */}
+            <div className="absolute inset-y-0 right-0 w-[78%] pointer-events-none" />
+
+            {/* Bottom fade */}
+            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[var(--hero-bottom-fade-from)] to-transparent pointer-events-none" />
+            {/* Dark-only bottom fade (from #010D1F to transparent) */}
+            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#010D1F] to-transparent pointer-events-none hidden dark:block" />
+          </motion.div>
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-10">
+          <div className="flex items-center justify-start gap-6 mb-10 text-xs text-[color:var(--text-muted-2)]">
+            <div className="hidden lg:block" />
+            <div className="flex items-center gap-2">
+              {content.breadcrumbs.map((b, idx) => (
+                <span key={`${b}-${idx}`} className="flex items-center gap-2">
+                  <span className={idx === content.breadcrumbs.length - 1 ? 'text-[#84e1bc]' : ''}>
+                    {b}
+                  </span>
+                  {idx !== content.breadcrumbs.length - 1 ? (
+                    <span className="opacity-50">/</span>
+                  ) : null}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <motion.div
+            variants={heroContainer}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.35 }}
+            className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center"
+          >
+
+            {/* Right side - text */}
+            <div className="lg:col-span-6">
+              <motion.div
+                variants={heroItem}
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md text-sm text-[#84e1bc] mb-5"
+              >
+                {content.heroBadge}
+              </motion.div>
+
+              <motion.h1 variants={heroItem} className="text-4xl lg:text-6xl font-bold leading-[1.25] mb-5 en-text-left">
+                {content.title}
+                <br />
+                <span className="text-[#84e1bc]">{content.accent}</span>
+              </motion.h1>
+
+              <motion.p variants={heroItem} className="text-[color:var(--text-muted)] text-base lg:text-lg leading-relaxed max-w-xl mb-8 en-text-left">
+                {content.subtitle}
+              </motion.p>
+
+              <motion.div variants={heroItem} className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-[color:var(--text-muted)] mb-10">
+                {content.heroHighlights.map((h) => (
+                  <div key={h.label} className="flex items-center gap-3 en-justify-end justify-start">
+                    <GradientIconBox>
+                      <HeroIcon name={h.icon} />
+                    </GradientIconBox>
+                    <span className="en-text-left">{h.label}</span>
+                  </div>
+                ))}
+              </motion.div>
+
+              <motion.div variants={heroItem} className="flex flex-wrap items-center gap-4 en-justify-start">
+                <button className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-sm hover:opacity-90 transition-opacity min-w-[190px]">
+                  <ArrowLeft className="w-5 h-5" /> {content.heroPrimaryCta}
+                </button>
+                <button className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl border border-[color:var(--border-20)] bg-[color:var(--glass-05)] backdrop-blur-sm text-[color:var(--text-primary)] font-medium text-sm hover:bg-[color:var(--glass-10)] transition-colors min-w-[190px]">
+                  <ChevronDown className="w-5 h-5" /> {content.heroSecondaryCta}
+                </button>
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+
+        <div className="max-w-7xl mx-auto px-6 lg:px-10 mt-12">
+          <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl overflow-hidden">
+            <div className="grid grid-cols-2 lg:grid-cols-4 divide-y divide-[color:var(--border-10)] lg:divide-y-0 lg:divide-x lg:divide-[color:var(--border-10)]">
+              {content.quickStats.map((s, idx) => (
+                <div
+                  key={s.label}
+                  className="px-5 py-5 flex items-center justify-center gap-4"
+                >
+                  <GradientIconBox>
+                    <StatIcon name={s.icon} />
+                  </GradientIconBox>
+                  <div className="leading-tight">
+                    <div className="text-xs text-[color:var(--text-muted-2)]">{s.label}</div>
+                    <div className="text-sm font-semibold text-[color:var(--text-primary)]">{s.value}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="h-16" />
+      </section>
+
+      {/* Features */}
+      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl lg:text-3xl font-bold">{content.featuresTitle}</h2>
+          <p className="mt-3 text-[color:var(--text-muted)]">{content.featuresSubtitle}</p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {content.features.map((f) => (
+            <div
+              key={f.title}
+              className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 hover:bg-[color:var(--glass-05)] transition-colors"
+            >
+              <div className="w-12 h-12 rounded-2xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] flex items-center justify-center mb-5">
+                <FeatureIcon name={f.icon} />
+              </div>
+              <div className="text-lg font-semibold mb-2">{f.title}</div>
+              <div className="text-sm leading-relaxed text-[color:var(--text-muted)]">{f.desc}</div>
+            </div>
+          ))}
+        </div>
+      </motion.section>
+
+      {/* Plans */}
+      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
+        <div className="text-center mb-12">
+          <h2 className="text-2xl lg:text-3xl font-bold">{content.plansTitle}</h2>
+          <p className="mt-3 text-[color:var(--text-muted)]">{content.plansSubtitle}</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
+          {content.plans.map((p) => (
+            <div
+              key={p.name}
+              className={[
+                'relative rounded-3xl border backdrop-blur-xl p-6 flex flex-col',
+                p.featured
+                  ? 'border-[#84e1bc]/40 bg-gradient-to-b from-[#84e1bc]/10 to-[color:var(--glass-04)] shadow-[0_0_0_1px_rgba(132,225,188,0.12),0_20px_80px_rgba(0,0,0,0.35)]'
+                  : 'border-[color:var(--border-10)] bg-[color:var(--glass-04)]',
+              ].join(' ')}
+            >
+              {p.badge ? (
+                <div className="absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-semibold bg-[#84e1bc]/15 text-[#84e1bc] border border-[#84e1bc]/25">
+                  {p.badge}
+                </div>
+              ) : null}
+              <div className="text-base font-semibold mb-3">{p.name}</div>
+              <div className="flex items-end gap-2 mb-1">
+                <div className="text-3xl font-bold">{p.price}</div>
+                <div className="text-xs text-[color:var(--text-muted-2)] pb-1">{p.period}</div>
+              </div>
+              <div className="h-px bg-[color:var(--border-10)] my-5" />
+              <ul className="space-y-3 text-sm text-[color:var(--text-muted)] flex-1">
+                {p.features.map((feat) => (
+                  <li key={feat} className="flex items-center gap-2">
+                    <span className="w-5 h-5 rounded-full bg-[#84e1bc]/15 border border-[#84e1bc]/25 flex items-center justify-center">
+                      <Check className="w-3.5 h-3.5 text-[#84e1bc]" />
+                    </span>
+                    <span className="en-text-left">{feat}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                className={[
+                  'mt-6 w-full rounded-2xl py-3 text-sm font-semibold transition',
+                  p.featured
+                    ? 'bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] hover:opacity-90'
+                    : 'bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)]',
+                ].join(' ')}
+              >
+                {p.cta}
+              </button>
+            </div>
+          ))}
+        </div>
+      </motion.section>
+
+      {/* FAQ + Why */}
+      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
+          <div className="lg:col-span-7 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 lg:p-8">
+            <h2 className="text-xl lg:text-2xl font-bold mb-2">{content.faqTitle}</h2>
+            <p className="text-sm text-[color:var(--text-muted)] mb-6">{content.faqSubtitle}</p>
+
+            <div className="space-y-3">
+              {content.faqs.map((f, idx) => {
+                const isOpen = openFaq === idx;
+                return (
+                  <div
+                    key={f.q}
+                    className="rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] overflow-hidden"
+                  >
+                    <button
+                      type="button"
+                      onClick={() => setOpenFaq(isOpen ? -1 : idx)}
+                      className="w-full flex items-center justify-between gap-4 px-4 py-4 text-right en-text-left"
+                    >
+                      <span className="text-sm font-semibold">{f.q}</span>
+                      <ChevronDown
+                        className={[
+                          'w-5 h-5 text-[color:var(--text-muted-2)] transition-transform',
+                          isOpen ? 'rotate-180' : 'rotate-0',
+                        ].join(' ')}
+                      />
+                    </button>
+                    {isOpen ? (
+                      <div className="px-4 pb-4 text-sm text-[color:var(--text-muted)] leading-relaxed">
+                        {f.a}
+                      </div>
+                    ) : null}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="lg:col-span-5 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 lg:p-8 relative overflow-hidden">
+            <div className="absolute inset-0 opacity-70 pointer-events-none">
+              <div className="absolute -top-24 -right-24 w-72 h-72 bg-[#84e1bc]/10 blur-3xl rounded-full" />
+              <div className="absolute -bottom-24 -left-24 w-72 h-72 bg-[#80c8f5]/10 blur-3xl rounded-full" />
+            </div>
+
+            <div className="relative">
+              <h3 className="text-xl lg:text-2xl font-bold mb-3">{content.whyTitle}</h3>
+              <p className="text-sm text-[color:var(--text-muted)] leading-relaxed mb-5">{content.whyText}</p>
+              <ul className="space-y-3 text-sm text-[color:var(--text-muted)]">
+                {content.whyBullets.map((b) => (
+                  <li key={b} className="flex items-center gap-2">
+                    <span className="w-5 h-5 rounded-full bg-[#84e1bc]/15 border border-[#84e1bc]/25 flex items-center justify-center">
+                      <Check className="w-3.5 h-3.5 text-[#84e1bc]" />
+                    </span>
+                    <span className="en-text-left">{b}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-8 relative aspect-[16/10] rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-white dark:bg-[color:var(--glass-02)]">
+                <Image
+                  src={mounted && resolvedTheme === 'light' ? '/images/services-hero-light.png' : '/images/services-hero-dark.png'}
+                  alt=""
+                  fill
+                  unoptimized
+                  quality={100}
+                  sizes="(min-width: 1024px) 35vw, 100vw"
+                  className="object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent dark:from-black/50" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.section>
+
+      {/* Final CTA */}
+      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20 pb-24">
+        <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-8 lg:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
+          <div>
+            <h3 className="text-2xl font-bold mb-2">{content.finalCtaTitle}</h3>
+            <p className="text-sm text-[color:var(--text-muted)] leading-relaxed max-w-2xl">{content.finalCtaDesc}</p>
+          </div>
+          <button className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-sm hover:opacity-90 transition-opacity">
+            <ArrowLeft className="w-5 h-5" /> {content.finalCtaButton}
+          </button>
+        </div>
+      </motion.section>
+    </div>
+  );
+}

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<ServiceSlug, Record<Locale, ServiceContent>> = {
+  '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',
+    },
+  },
+};

src/app/components/hero.tsx

@@ -67,6 +67,8 @@ export default function HeroSection() {
 
                 {/* لایه گرادینت */}
                 <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[var(--hero-bottom-fade-from)] to-transparent pointer-events-none" />
+                {/* Dark-only bottom fade (from #000918 to transparent) */}
+                <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#000918] to-transparent pointer-events-none hidden dark:block" />
 
             </motion.div>
 

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;