first

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "mugit3",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.14.0",
+    "next": "16.2.5",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

src/app/[locale]/layout.tsx

@@ -0,0 +1,32 @@
+import { redirect } from 'next/navigation';
+import { I18nProvider } from '../../i18n/provider';
+import { isLocale, locales, messages } from '../../i18n/messages';
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  if (!isLocale(locale)) redirect('/fa');
+
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+
+  return (
+    <I18nProvider locale={locale} messages={messages[locale]}>
+      <div
+        dir={dir}
+        data-locale={locale}
+        className={locale === 'fa' ? 'locale-fa locale-rtl locale-scope' : 'locale-en locale-ltr locale-scope'}
+      >
+        {children}
+      </div>
+    </I18nProvider>
+  );
+}

src/app/[locale]/page.tsx

@@ -0,0 +1,23 @@
+import Navbar from '../components/header';
+import Hero from '../components/hero';
+import MainContent from '../components/maincontext';
+import { Footer } from '../components/footer';
+
+export default async function Home({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+
+  return (
+    <main className="min-h-screen app-bg font-sans" dir={dir}>
+      <Navbar />
+      <Hero />
+      <MainContent />
+      <Footer />
+    </main>
+  );
+}
+

src/app/components/footer.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import React from 'react';
+import { 
+    ArrowLeft, 
+    Box, 
+    Share2, 
+    MessageCircle, 
+    Mail, 
+    Send,
+    Activity,
+    Globe,
+    ShieldCheck,
+    Headphones,
+    Sun,
+    ChevronDown
+  } from 'lucide-react';
+  
+import Link from 'next/link';
+import { useI18n } from '../../i18n/provider';
+import { useTheme } from 'next-themes';
+import { usePathname, useRouter } from 'next/navigation';
+
+export const Footer = () => {
+  const { locale, t } = useI18n();
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+  const { theme, setTheme } = useTheme();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <footer className="footer-bg text-[color:var(--text-muted)] pt-8 pb-6 px-4 sm:px-6 lg:px-8 font-sans" dir={dir}>
+      <div className="max-w-7xl mx-auto space-y-8">
+        
+        {/* CTA Banner */}
+        <div className="relative rounded-3xl overflow-hidden border border-[color:var(--border-10)] bg-gradient-to-r from-[var(--footer-cta-from)] via-[var(--footer-cta-via)] to-[var(--footer-cta-to)] p-10 flex flex-col items-center text-center">
+          {/* افکت‌های نوری پس‌زمینه */}
+          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent pointer-events-none" />
+          <div className="absolute bottom-0 right-0 w-1/2 h-1/2 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-teal-900/20 via-transparent to-transparent pointer-events-none" />
+          
+          <h2 className="text-3xl md:text-4xl font-bold text-[color:var(--text-primary)] mb-4 relative z-10">
+            {t('footer_cta_title')}
+          </h2>
+          <p className="text-[color:var(--text-muted-2)] mb-8 max-w-2xl relative z-10">
+            {t('footer_cta_desc')}
+          </p>
+          
+          <div className="flex flex-col sm:flex-row gap-4 relative z-10">
+            <button className="flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-teal-400 text-white px-8 py-3 rounded-xl font-medium hover:opacity-90 transition-opacity">
+              {t('footer_cta_start')}
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <button className="flex items-center justify-center gap-2 bg-[color:var(--glass-05)] border border-[color:var(--border-10)] text-[color:var(--text-primary)] px-8 py-3 rounded-xl font-medium hover:bg-[color:var(--glass-10)] transition-colors">
+              <Box className="w-5 h-5" />
+              {t('footer_cta_view_services')}
+            </button>
+          </div>
+        </div>
+
+        {/* Main Footer Content */}
+        <div className="bg-[color:var(--footer-surface-bg)] border border-[color:var(--border-05)] rounded-3xl p-8 lg:p-12 backdrop-blur-md en-shadow-left">
+          <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-8 mb-12">
+            
+            {/* Logo and About */}
+            <div className="lg:col-span-1">
+              <div className="flex items-center gap-2 mb-6">
+                <div className="w-8 h-8 rounded-lg bg-blue-500 flex items-center justify-center">
+                  <Activity className="w-5 h-5 text-white" /> {/* جایگزین لوگوی موقت */}
+                </div>
+                <span className="text-xl font-bold text-[color:var(--text-primary)] tracking-wide">MugCloud</span>
+              </div>
+              <p className="text-sm text-[color:var(--text-muted-2)] leading-relaxed mb-8">
+                {t('footer_about')}
+              </p>
+              <div className="flex gap-4">
+                {[Share2, MessageCircle, Mail, Send].map((Icon, i) => (
+                  <a key={i} href="#" className="w-10 h-10 rounded-full bg-[color:var(--footer-icon-bg)] flex items-center justify-center hover:bg-blue-500/20 hover:text-blue-400 transition-colors">
+                    <Icon className="w-4 h-4" />
+                  </a>
+                ))}
+              </div>
+
+            </div>
+
+            {/* Links Columns */}
+            <div className="lg:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { title: t('footer_col_products'), links: [t('footer_link_cloud_hosting'), t('footer_link_vps'), t('footer_link_dedicated'), t('footer_link_ssl'), t('footer_link_domain')] },
+                { title: t('footer_col_resources'), links: [t('footer_link_docs'), t('footer_link_blog'), t('footer_link_guides'), t('footer_link_api'), t('footer_link_status')] },
+                { title: t('footer_col_company'), links: [t('footer_link_about'), t('footer_link_contact'), t('footer_link_careers'), t('footer_link_partners')] },
+                { title: t('footer_col_legal'), links: [t('footer_link_terms'), t('footer_link_privacy'), t('footer_link_refund'), t('footer_link_rules')] },
+              ].map((col, idx) => (
+                <div key={idx}>
+                  <h3 className="text-teal-400 font-semibold mb-6 border-b border-[color:var(--border-05)] pb-4 inline-block">{col.title}</h3>
+                  <ul className="space-y-4">
+                    {col.links.map((link, i) => (
+                      <li key={i}>
+                        <Link href="#" className="text-sm text-[color:var(--text-muted-2)] hover:text-[color:var(--text-primary)] transition-colors">
+                          {link}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Features / Trust Badges */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+            {[
+              { icon: Activity, title: t('footer_feature_uptime'), desc: '99.99%' },
+              { icon: Globe, title: t('footer_feature_dc'), desc: locale === 'en' ? '3 continents' : 'در ۳ قاره' },
+              { icon: ShieldCheck, title: t('footer_feature_security'), desc: 'DDoS Protection' },
+              { icon: Headphones, title: t('footer_feature_support'), desc: locale === 'en' ? 'Always with you' : 'همیشه در کنار شما' },
+            ].map((feature, idx) => (
+              <div key={idx} className="flex items-center gap-4 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-2xl p-5 backdrop-blur-md">
+                <div className="w-12 h-12 rounded-xl bg-[color:var(--footer-chip-inner-bg)] border border-[color:var(--border-05)] flex items-center justify-center">
+                  <feature.icon className="w-6 h-6 text-[color:var(--text-muted)]" />
+                </div>
+                <div>
+                  <h4 className="text-[color:var(--text-primary)] text-sm font-medium">{feature.title}</h4>
+                  <p className="text-[color:var(--text-muted-3)] text-xs mt-1">{feature.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Bottom Bar */}
+          <div className="flex flex-col md:flex-row items-center justify-between pt-6 border-t border-[color:var(--border-05)] gap-6">
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => {
+                  const target = locale === 'fa' ? 'en' : 'fa';
+                  const next = pathname.replace(/^\/(fa|en)(\/|$)/, `/${target}$2`);
+                  router.push(next === pathname ? `/${target}` : next);
+                }}
+                className="flex items-center gap-2 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-xl px-4 py-2 text-sm backdrop-blur-md"
+              >
+                <span>{locale === 'fa' ? t('footer_lang_fa') : t('nav_lang_en')}</span>
+                <span className="text-lg">{locale === 'fa' ? '🇮🇷' : '🇺🇸'}</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                className="flex items-center gap-2 bg-[color:var(--footer-chip-bg)] border border-[color:var(--border-05)] rounded-xl px-3 py-2 backdrop-blur-md"
+              >
+                <Sun className="w-4 h-4 text-[color:var(--text-muted-2)]" />
+                <ChevronDown className="w-3 h-3 text-[color:var(--text-muted-3)]" />
+              </button>
+            </div>
+
+            <p className="text-xs text-[color:var(--text-muted-3)]">
+              {t('footer_rights')}
+            </p>
+
+            <div className="flex items-center gap-6 opacity-60 grayscale hover:grayscale-0 transition-all duration-300">
+              {/* جایگزین تصاویر مجوزها با متن برای دمو */}
+              <span className="text-xs font-bold font-serif">PCI DSS</span>
+              <span className="text-xs font-bold font-serif">ISO 27001</span>
+              <span className="text-xs font-bold font-serif flex items-center gap-1"><ShieldCheck className="w-3 h-3"/> SecureTrust</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  );
+};

src/app/components/global.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { motion, Variants } from 'framer-motion';
+import { MapPin, Globe, ArrowLeft } from 'lucide-react';
+import { useI18n } from '../../i18n/provider';
+import { useTheme } from 'next-themes';
+
+// کامپوننت اختصاصی برای کارت‌های لوکیشن با افکت GPS
+const LocationCard = ({
+  name,
+  ping,
+  color,
+  positionClass,
+  delay
+}: {
+  name: string,
+  ping: string,
+  color: string,
+  positionClass: string,
+  delay: number
+}) => {
+
+  return (
+    <motion.div
+      animate={{ y: [0, -8, 0] }}
+      transition={{ repeat: Infinity, duration: 4, ease: "easeInOut", delay }}
+      className={`absolute ${positionClass} bg-[color:var(--glass-05)] backdrop-blur-md border border-[color:var(--border-10)] rounded-2xl p-2.5 pr-4 flex items-center gap-3 shadow-xl shadow-black/20 z-20 min-w-[160px]`}
+    >
+      {/* آیکون با افکت GPS چشمک‌زن */}
+      <div
+        className="relative flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0"
+        style={{ backgroundColor: `${color}25` }} // پس‌زمینه شفاف رنگی
+      >
+        {/* نقطه چشمک‌زن (GPS Pulse) */}
+        <span
+          className="absolute w-4 h-4 rounded-full animate-ping opacity-75"
+          style={{ backgroundColor: color }}
+        ></span>
+        {/* آیکون اصلی پین */}
+        <MapPin
+          className="relative z-10 w-4 h-4"
+          style={{ color: color }}
+        />
+      </div>
+      <div className="text-left w-full" dir="ltr">
+        <p className="text-[color:var(--text-primary)] text-[15px] font-medium tracking-wide">{name}</p>
+        <p className="text-[color:var(--text-muted-2)] text-xs mt-0.5">{ping}</p>
+      </div>
+    </motion.div>
+  );
+};
+
+const GlobalInfrastructure = () => {
+  const { locale, t } = useI18n();
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+  const flipClass = locale === 'en' ? '-scale-x-100' : '';
+
+  // انیمیشن ورود کل سکشن
+  const fadeIn: Variants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+  };
+
+
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-100px" }}
+      variants={fadeIn}
+    >
+      <section className="relative w-full max-w-[1200px] mx-auto my-24 px-4 sm:px-6 lg:px-8" dir={dir}>
+        {/* Container اصلی - دقیقاً مطابق رنگ تصویر */}
+        <div className="relative rounded-[2rem] border border-[color:var(--global-surface-border)] bg-[color:var(--global-surface-bg)] overflow-hidden flex flex-col lg:flex-row-reverse en-row-reverse items-center justify-between min-h-[480px] shadow-2xl">
+
+          {/* تصویر پس‌زمینه در سمت چپ */}
+          <div className="absolute inset-0 z-0 pointer-events-none">
+            {/* عرض عکس طوری تنظیم شده که نیمه چپ را بپوشاند */}
+            <div className="absolute left-0 top-0 bottom-0 w-full h-full">
+              <Image
+                src={mounted && resolvedTheme === 'light' ? '/images/earth-light.png' : '/images/earth-dark.png'}
+                alt="Global Network"
+                fill
+                priority
+                unoptimized
+                quality={100}
+                sizes="(min-width: 1024px) 65vw, 100vw"
+                className={`object-cover object-left mix-blend-screen opacity-80 transform ${flipClass}`}
+              />
+
+
+              {/* گرادینت برای محو کردن دقیق مرز عکس در پس‌زمینه */}
+              <div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-[var(--global-surface-bg)] via-[var(--global-surface-bg-80)] to-transparent" />
+            </div>
+          </div>
+
+          {/* کانتینر پین‌های شناور روی کره زمین */}
+          <div className="relative w-full lg:w-[55%] h-[480px] z-10 hidden lg:block pointer-events-none">
+            <LocationCard
+              name="Amsterdam"
+              ping="15ms"
+              color="#5eead4" // سبزآبی روشن (Teal)
+              positionClass="top-[15%] left-[45%]"
+              delay={0}
+            />
+            <LocationCard
+              name="Frankfurt"
+              ping="12ms"
+              color="#818cf8" // بنفش/آبی (Indigo)
+              positionClass="top-[45%] left-[8%]"
+              delay={1}
+            />
+            <LocationCard
+              name="Singapore"
+              ping="28ms"
+              color="#60a5fa" // آبی روشن (Blue)
+              positionClass="bottom-[18%] left-[38%]"
+              delay={0.5}
+            />
+          </div>
+
+          {/* محتوای متنی (سمت راست) */}
+          <div className="relative z-10 w-full lg:w-[45%] p-8 sm:p-12 lg:pl-16 lg:pr-12 flex flex-col justify-center text-right en-text-left">
+            <p className="text-[#00c8b0] text-sm md:text-[15px] font-medium mb-3">
+              {t('global_badge')}
+            </p>
+            <h2 className="text-[28px] md:text-[34px] font-bold text-[color:var(--text-primary)] mb-5 leading-tight">
+              {t('global_title')}
+            </h2>
+            <p className="text-[color:var(--text-muted-2)] leading-[1.8] mb-10 text-[14px] md:text-[15px]">
+              {t('global_desc')}
+            </p>
+
+            {/* دکمه دقیقاً مطابق تصویر (آیکون کره راست، فلش چپ) */}
+            <button className="flex items-center gap-4 px-5 py-3 border border-[color:var(--border-10)] rounded-2xl text-[color:var(--text-primary)] hover:bg-[color:var(--glass-05)] hover:border-[color:var(--border-20)] transition-all w-fit group">
+              <ArrowLeft className="w-4 h-4 text-[color:var(--text-muted-2)] group-hover:-translate-x-1 group-hover:text-[color:var(--text-primary)] transition-all" />
+              <span className="text-[15px] font-medium pt-0.5">{t('global_cta')}</span>
+              <Globe className="w-5 h-5 text-[color:var(--text-muted-2)] group-hover:text-[color:var(--text-primary)] transition-colors" />
+            </button>
+          </div>
+
+        </div>
+      </section>
+    </motion.div>
+  );
+};
+
+export default GlobalInfrastructure;

src/app/components/header.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Cloud, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { usePathname, useRouter } from 'next/navigation';
+import { useI18n } from '../../i18n/provider';
+
+export default function Header() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { locale, t } = useI18n();
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+  const { theme, setTheme } = useTheme();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // حساسیت اسکرول تنظیم شده تا تغییرات به موقع انجام شود
+      if (window.scrollY > 40) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    // حذف پدینگ ثابت از بالا تا هدر بتواند به سقف بچسبد
+    <div className="fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-500 px-4 sm:px-6">
+      <motion.header
+        initial={{ y: -50, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className={`flex items-center justify-between text-[color:var(--text-primary)] transition-all duration-700 ease-in-out w-full ${
+          isScrolled
+            ? 'mt-4 max-w-4xl px-6 py-3 bg-[color:var(--glass-05)] backdrop-blur-lg border border-[color:var(--border-10)] rounded-full ' // حالت اسکرول شده: کپسول شناور
+            : 'mt-0 max-w-7xl px-8 py-5 bg-[color:var(--glass-05)] backdrop-blur-md border-b border-x border-[color:var(--border-10)] rounded-t-none rounded-b-[2.5rem] ' // حالت بالای صفحه: چسبیده به سقف با پایین گرد
+        }`}
+        dir={dir}
+      >
+        {/* بخش لوگو */}
+        <div className="flex items-center gap-2 cursor-pointer">
+          <div className="w-8 h-8 rounded-full bg-[color:var(--glass-10)] flex items-center justify-center transition-transform hover:scale-110 duration-300">
+             <Cloud className="w-5 h-5 text-blue-400" />
+          </div>
+          <span className="font-bold text-lg tracking-wide">MugCloud</span>
+        </div>
+
+        {/* منوی دسکتاپ */}
+        <nav className={`hidden md:flex items-center transition-all duration-500 ${isScrolled ? 'gap-6' : 'gap-10'}`}>
+          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_products')}</a>
+          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_pricing')}</a>
+          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_network')}</a>
+          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_support')}</a>
+        </nav>
+
+        {/* بخش اکشن‌ها */}
+        <div className="flex items-center gap-3">
+          {/* دکمه انتخاب زبان (در حالت کپسولی پنهان می‌شود) */}
+          <div className={`overflow-hidden transition-all duration-500 `}>
+            <button
+              type="button"
+              onClick={() => {
+                const target = locale === 'fa' ? 'en' : 'fa';
+                const next = pathname.replace(/^\/(fa|en)(\/|$)/, `/${target}$2`);
+                router.push(next === pathname ? `/${target}` : next);
+              }}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)] text-sm text-[color:var(--text-muted)] transition-colors whitespace-nowrap"
+            >
+              <span>{locale === 'fa' ? t('nav_lang_en') : t('nav_lang_fa')}</span>
+              <span className="text-[color:var(--text-muted-3)]">{locale === 'fa' ? t('nav_lang_fa') : t('nav_lang_en')}</span>
+            </button>
+          </div>
+
+          {/* دکمه تغییر تم */}
+          <button
+            type="button"
+            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+            className="p-2 rounded-full bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)] transition-colors flex items-center justify-center"
+          >
+            {theme === 'light' ? (
+              <Sun className="w-4 h-4 text-[color:var(--text-muted)]" />
+            ) : (
+              <Moon className="w-4 h-4 text-[color:var(--text-muted)]" />
+            )}
+          </button>
+
+          {/* دکمه شروع کنید */}
+          <button className="px-5 py-2 rounded-full bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold transition-all hover:shadow-[0_0_15px_rgba(37,99,235,0.5)]">
+            {t('nav_start')}
+          </button>
+        </div>
+      </motion.header>
+    </div>
+  );
+}

src/app/components/hero.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import Image from 'next/image';
+import { motion, Variants } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import {
+    ChevronDown,
+    Globe,
+    ArrowLeft,
+    Box,
+    Headphones,
+    ShieldCheck,
+    Zap,
+    Cloud
+} from 'lucide-react';
+import { useI18n } from '../../i18n/provider';
+import { useTheme } from 'next-themes';
+
+export default function HeroSection() {
+    // تنظیمات انیمیشن برای نمایش متوالی (Stagger)
+    const { locale, t } = useI18n();
+    const dir = locale === 'en' ? 'ltr' : 'rtl';
+    const flipClass = locale === 'en' ? '-scale-x-100' : '';
+    const { resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => setMounted(true), []);
+
+    const containerVariants: Variants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.2,
+            },
+        },
+    };
+
+    const itemVariants: Variants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: { duration: 0.6, ease: "easeOut" }
+        },
+    };
+
+    return (
+        <div className="relative w-full min-h-screen hero-bg text-[color:var(--text-primary)] overflow-hidden " dir={dir}>
+            {/* Background Image with slight scale-in animation */}
+            <motion.div
+                initial={{ scale: 1.05, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ duration: 1.5, ease: "easeOut" }}
+                className="absolute inset-0 z-0 opacity-[var(--hero-image-opacity)]"
+            >
+                <Image
+                    src={mounted && resolvedTheme === 'light' ? '/images/3.png' : '/images/1-2.png'}
+                    alt="Servers Background"
+                    fill
+                    priority
+                    unoptimized
+                    quality={100}
+                    sizes="100vw"
+                    className={`object-left md:object-center transform ${flipClass}`}
+                />
+
+                {/* لایه گرادینت */}
+                <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" />
+
+            </motion.div>
+
+
+            {/* Content Wrapper */}
+            <div className="relative z-10 flex flex-col min-h-screen max-w-[1440px] mx-auto">
+
+
+
+                {/* Hero Content */}
+                <main className="flex-1 flex flex-col lg:flex-row items-center pt-20 pb-10 px-8 lg:px-16">
+
+                    {/* Right Side - Text & Buttons */}
+                    <motion.div
+                        variants={containerVariants}
+                        initial="hidden"
+                        animate="visible"
+                        className="w-full lg:w-[55%] flex flex-col justify-center text-right en-text-left z-20"
+                    >
+                        <motion.h1 variants={itemVariants} className="text-5xl lg:text-[64px] font-bold leading-[1.3] mb-6">
+                            {t('hero_title_1')}
+                            <br />
+                            {t('hero_title_2')} <span className="text-[#84e1bc]">{t('hero_title_3')}</span> {t('hero_title_4')}
+                        </motion.h1>
+
+                        <motion.p variants={itemVariants} className="text-[color:var(--text-muted)] text-lg lg:text-xl leading-relaxed mb-10 max-w-[600px]">
+                            {t('hero_subtitle')}
+                        </motion.p>
+
+                        <motion.div variants={itemVariants} className="flex flex-wrap items-center gap-5 mb-16">
+                            <button className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-base hover:opacity-90 transition-opacity min-w-[180px]">
+                                <ArrowLeft className="w-5 h-5" /> {t('hero_cta_primary')}
+                            </button>
+
+                            <button className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl border border-[color:var(--border-20)] bg-[color:var(--glass-05)] backdrop-blur-sm text-[color:var(--text-primary)] font-medium text-base hover:bg-[color:var(--glass-10)] transition-colors min-w-[180px]">
+                                <Box className="w-5 h-5" /> {t('hero_cta_secondary')}
+                            </button>
+                        </motion.div>
+
+                        {/* Features list */}
+                        <motion.div variants={itemVariants} className="flex flex-wrap items-center gap-8 text-sm text-[color:var(--text-muted)]">
+                            <div className="flex items-center gap-2">
+                                <Headphones className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_support')}
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <ShieldCheck className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_uptime')}
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Zap className="w-5 h-5 text-[color:var(--text-muted-2)]" /> {t('hero_feat_speed')}
+                            </div>
+                        </motion.div>
+                    </motion.div>
+
+                    {/* Left Side - Glassmorphism Floating Cards */}
+                    <div className="w-full lg:w-[45%] relative h-[500px] hidden lg:block">
+                        {/* Top Shield Card */}
+                        <motion.div
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            animate={{ opacity: 1, scale: 1, y: [0, -10, 0] }}
+                            transition={{
+                                opacity: { duration: 0.8, delay: 0.8 },
+                                scale: { duration: 0.8, delay: 0.8 },
+                                y: { repeat: Infinity, duration: 4, ease: "easeInOut" } // افکت شناور
+                            }}
+                            className="absolute top-[10%] left-[60%] transform -translate-x-1/2 flex items-center justify-center w-14 h-14 rounded-2xl bg-[color:var(--glass-10)] backdrop-blur-md border border-[color:var(--border-20)] shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
+                        >
+                            <ShieldCheck className="w-7 h-7 text-[color:var(--text-primary)]" />
+                        </motion.div>
+
+                        {/* Bottom Chart Card */}
+                        <motion.div
+                            initial={{ opacity: 0, x: -50 }}
+                            animate={{ opacity: 1, x: 0, y: [0, 10, 0] }}
+                            transition={{
+                                opacity: { duration: 0.8, delay: 1 },
+                                x: { duration: 0.8, delay: 1, ease: "easeOut" },
+                                y: { repeat: Infinity, duration: 5, ease: "easeInOut", delay: 1 } // افکت شناور با تاخیر متفاوت
+                            }}
+                            className="absolute bottom-[10%] left-[10%] w-64 p-5 rounded-2xl bg-[color:var(--glass-05)] backdrop-blur-md border border-[color:var(--border-10)] shadow-[0_8px_32px_rgba(0,0,0,0.5)]"
+                        >
+                            <div className="flex justify-between items-start mb-2">
+                                <span className="text-[color:var(--text-muted)] text-sm">{t('hero_uptime_card_title')}</span>
+                                <motion.div
+                                    animate={{ opacity: [1, 0.4, 1] }}
+                                    transition={{ repeat: Infinity, duration: 2 }}
+                                    className="w-2 h-2 rounded-full bg-[#84e1bc] mt-1 shadow-[0_0_8px_#84e1bc]"
+                                />
+                            </div>
+                            <div className="text-3xl font-bold text-[color:var(--text-primary)] tracking-widest mb-4">
+                                ۹۹.۹۹٪
+                            </div>
+                            {/* SVG Chart Line */}
+                            <svg className="w-full h-16" viewBox="0 0 100 40" preserveAspectRatio="none">
+                                <motion.path
+                                    initial={{ pathLength: 0 }}
+                                    animate={{ pathLength: 1 }}
+                                    transition={{ duration: 1.5, delay: 1.5, ease: "easeInOut" }}
+                                    d="M0,30 L20,25 L40,35 L60,15 L80,20 L100,5"
+                                    fill="none"
+                                    stroke="#84e1bc"
+                                    strokeWidth="3"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                            </svg>
+                        </motion.div>
+                    </div>
+
+                </main>
+            </div>
+        </div>
+    );
+}

src/app/components/maincontext.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  ArrowLeft, Server, Cloud, Database, Shield,
+  Globe, Clock, MapPin, Users, Star
+} from 'lucide-react';
+import Image from 'next/image';
+import GlobalInfrastructure from './global';
+import { Services } from './services';
+import { useI18n } from '../../i18n/provider';
+
+
+const fadeIn = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+};
+
+const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+export default function MainContent() {
+  const { locale, t } = useI18n();
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+  const [productsTitleLine1, productsTitleLine2] = t('main_products_title').split('\n');
+
+  return (
+    // بخش اصلی با z-index بالاتر برای قرار گرفتن روی Hero
+    <section className="w-full px-4 md:px-8 relative z-20 pb-20 font-sans text-[color:var(--text-primary)]" dir={dir}>
+
+      {/* 
+        کادر اصلی دربرگیرنده کل محتوا
+        استفاده از mt-32- برای کشیدن کادر به بالا و ادغام با هیرو
+      */}
+      <div className="max-w-[1400px] mx-auto -mt-32 bg-[color:var(--surface-main-wrap)] border border-[color:var(--border-10)] rounded-[2.5rem] p-8 md:p-12 lg:p-16 space-y-16 en-shadow-left">
+
+        {/* بخش محصولات */}
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          className="grid grid-cols-1 lg:grid-cols-12 gap-8"
+        >
+          {/* توضیحات محصولات */}
+          <motion.div variants={fadeIn} className="lg:col-span-4 flex flex-col justify-center space-y-4 text-right pr-4 en-text-left">
+            <span className="text-[#38bdf8] text-sm font-medium">{t('main_products_badge')}</span>
+            <h2 className="text-3xl font-bold leading-tight">
+              {productsTitleLine1}
+              <br />
+              {productsTitleLine2}
+            </h2>
+            <p className="text-[color:var(--text-muted-2)] text-sm leading-relaxed">
+              {t('main_products_desc')
+                .split('\n')
+                .map((line, idx) => (
+                  <span key={idx}>
+                    {line}
+                    {idx === 0 ? <br /> : null}
+                  </span>
+                ))}
+            </p>
+            <button className="flex items-center justify-between w-fit gap-4 mt-4 px-6 py-3 rounded-xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] hover:bg-[color:var(--glass-10)] transition-colors">
+              <span className="text-sm">{t('main_products_all')}</span>
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+          </motion.div>
+
+          {/* کارت‌های محصولات */}
+          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {[
+              { title: t('product_ssl_title'), desc: t('product_ssl_desc'), price: '۱۹۹,۰۰۰', icon: Shield, color: 'text-purple-400', bg: 'bg-purple-500/10' },
+              { title: t('product_dedicated_title'), desc: t('product_dedicated_desc'), price: '۶,۹۹۰,۰۰۰', icon: Database, color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
+              { title: t('product_vps_title'), desc: t('product_vps_desc'), price: '۱,۹۹۰,۰۰۰', icon: Cloud, color: 'text-blue-400', bg: 'bg-blue-500/10' },
+              { title: t('product_host_title'), desc: t('product_host_desc'), price: '۴۹۹,۰۰۰', icon: Server, color: 'text-sky-400', bg: 'bg-sky-500/10' },
+            ].map((item, i) => (
+              <motion.div key={i} variants={fadeIn} className="bg-[color:var(--glass-02)] border border-[color:var(--border-05)] p-6 rounded-3xl flex flex-col items-center text-center hover:bg-[color:var(--glass-04)] hover:border-[color:var(--border-10)] transition-all">
+                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 ${item.bg} ${item.color}`}>
+                  <item.icon className="w-7 h-7" />
+                </div>
+                <h3 className="font-semibold mb-3">{item.title}</h3>
+                <p className="text-xs text-[color:var(--text-muted-2)] mb-8 flex-grow leading-relaxed">{item.desc}</p>
+                <div className="text-xs text-[color:var(--text-muted-3)] mt-auto">
+                  {t('price_from')} <span className="text-[color:var(--text-primary)] text-sm">{item.price}</span> {t('toman')}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        <Services />
+
+        {/* بخش زیرساخت جهانی */}
+        <GlobalInfrastructure />
+
+        {/* نوار آمار و ارقام */}
+        <motion.div
+          initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeIn}
+          className="grid grid-cols-2 md:grid-cols-4 gap-6 bg-[color:var(--glass-02)] border border-[color:var(--border-05)] rounded-3xl p-8"
+        >
+          {[
+            { label: t('stats_uptime'), value: '۹۹.۹۹٪', icon: Clock },
+            { label: t('stats_dc'), value: '+ ۱۴', icon: Globe },
+            { label: t('stats_servers'), value: '+ ۲۴,۰۰۰', icon: Server },
+            { label: t('stats_customers'), value: '+ ۱۲۸,۰۰۰', icon: Users },
+          ].map((stat, i) => (
+            <div key={i} className="flex flex-row items-center justify-end gap-5 text-right border-l border-[color:var(--border-05)] pl-6 last:border-0 last:pl-0">
+              <div className="flex flex-col">
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="text-xs text-[color:var(--text-muted-2)] mt-1">{stat.label}</div>
+              </div>
+              <div className="p-0 text-[color:var(--text-muted-2)]">
+                <stat.icon className="w-8 h-8 stroke-[1.5]" />
+              </div>
+            </div>
+          ))}
+        </motion.div>
+
+        {/* بخش نظرات و اعتماد */}
+        <motion.div
+          initial="hidden" whileInView="visible" viewport={{ once: true }} variants={staggerContainer}
+          className="grid grid-cols-1 lg:grid-cols-3 gap-8"
+        >
+          <motion.div variants={fadeIn} className="lg:col-span-1 flex flex-col justify-center space-y-4 text-right pr-4">
+            <span className="text-emerald-400 text-sm font-medium">{t('trust_badge')}</span>
+            <h2 className="text-2xl font-bold leading-tight">{t('trust_title')}</h2>
+            <p className="text-[color:var(--text-muted-2)] text-sm mb-6">{t('trust_desc')}</p>
+            <div className="flex flex-wrap gap-6 items-center text-xl font-bold text-[color:var(--text-muted-3)] opacity-60">
+              <span>digikala</span>
+              <span>TAPSI</span>
+              <span>Snapp!</span>
+              <span>دیوار</span>
+            </div>
+          </motion.div>
+
+          {/* کارت‌های نظرات */}
+          <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
+            {[
+              { text: t('testimonial_1_text'), name: t('testimonial_1_name'), role: t('testimonial_1_role') },
+              { text: t('testimonial_2_text'), name: t('testimonial_2_name'), role: t('testimonial_2_role') }
+            ].map((testimonial, i) => (
+              <motion.div key={i} variants={fadeIn} className="bg-[color:var(--glass-02)] border border-[color:var(--border-05)] p-8 rounded-3xl flex flex-col justify-between hover:bg-[color:var(--glass-04)] transition-colors">
+                <div>
+                  <div className="flex gap-1 text-emerald-400 mb-6 justify-end">
+                    {[...Array(5)].map((_, j) => <Star key={j} className="w-4 h-4 fill-current" />)}
+                  </div>
+                  <p className="text-sm leading-loose text-[color:var(--text-muted)] mb-8 text-right">{testimonial.text}</p>
+                </div>
+                <div className="flex items-center justify-end gap-4">
+                  <div className="text-right">
+                    <div className="font-semibold text-sm">{testimonial.name}</div>
+                    <div className="text-xs text-[color:var(--text-muted-2)] mt-1">{testimonial.role}</div>
+                  </div>
+                  <div className="w-12 h-12 rounded-full bg-gray-700 border border-[color:var(--border-10)] overflow-hidden shrink-0">
+                    <div className="w-full h-full bg-gradient-to-tr from-gray-600 to-gray-400"></div>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+      </div>
+    </section>
+  );
+}

src/app/components/pricing.tsx

@@ -0,0 +1,52 @@
+// components/Pricing.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+
+const plans = [
+  { name: 'پایه', price: '۴۹۹,۰۰۰', features: ['۲۰ گیگابایت فضای NVMe', 'پهنای باند نامحدود', 'پشتیبانی تیکت'], popular: false },
+  { name: 'حرفه‌ای', price: '۱,۴۹۹,۰۰۰', features: ['۵۰ گیگابایت فضای NVMe', 'پهنای باند نامحدود', 'پشتیبانی ویژه ۲۴/۷', 'گواهی SSL رایگان'], popular: true },
+  { name: 'سازمانی', price: '۳,۹۹۰,۰۰۰', features: ['فضای ذخیره‌سازی نامحدود', 'سرور اختصاصی مجازی', 'مدیریت کامل سرور', 'پشتیبان‌گیری روزانه'], popular: false },
+];
+
+export default function Pricing() {
+  return (
+    <section className="py-20 px-8 max-w-7xl mx-auto">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">پلن‌های قیمت‌گذاری</h2>
+        <p className="text-gray-500 dark:text-gray-400">مناسب‌ترین پلن را برای کسب‌وکار خود انتخاب کنید.</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {plans.map((plan, i) => (
+          <motion.div 
+            key={i}
+            initial={{ opacity: 0, scale: 0.95 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            transition={{ delay: i * 0.1 }}
+            viewport={{ once: true }}
+            className={`relative p-8 rounded-2xl border ${plan.popular ? 'border-teal-500 bg-teal-500/5 dark:bg-teal-500/10' : 'border-gray-200 dark:border-gray-800 bg-white dark:bg-[#111827]'}`}
+          >
+            {plan.popular && <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-teal-500 text-white px-3 py-1 rounded-full text-xs font-bold">پیشنهاد ویژه</span>}
+            <h3 className="text-xl font-bold text-gray-900 dark:text-white text-center mb-4">{plan.name}</h3>
+            <div className="text-center mb-8">
+              <span className="text-3xl font-bold text-gray-900 dark:text-white">{plan.price}</span>
+              <span className="text-gray-500 text-sm"> / ماهانه</span>
+            </div>
+            <ul className="space-y-4 mb-8 text-right">
+              {plan.features.map((feat, j) => (
+                <li key={j} className="flex items-center justify-end gap-2 text-gray-600 dark:text-gray-300">
+                  <span>{feat}</span>
+                  <Check size={16} className="text-teal-500" />
+                </li>
+              ))}
+            </ul>
+            <button className={`w-full py-3 rounded-lg font-medium transition ${plan.popular ? 'bg-teal-500 text-white hover:bg-teal-600' : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700'}`}>
+              انتخاب پلن
+            </button>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/components/product.tsx

@@ -0,0 +1,48 @@
+// components/Products.tsx
+'use client';
+import { motion } from 'framer-motion';
+import { Server, Cloud, Shield, HardDrive, ArrowLeft } from 'lucide-react';
+
+const products = [
+  { id: 1, title: 'گواهی SSL', desc: 'امنیت وب‌سایت خود را با SSL تضمین کنید', price: '۱۹۹,۰۰۰', icon: Shield, color: 'bg-purple-500/20 text-purple-400' },
+  { id: 2, title: 'سرور اختصاصی', desc: 'سرورهای فیزیکی قدرتمند با بالاترین عملکرد', price: '۶,۹۹۰,۰۰۰', icon: HardDrive, color: 'bg-teal-500/20 text-teal-400' },
+  { id: 3, title: 'سرور مجازی (VPS)', desc: 'سرورهای مجازی قدرتمند با منابع اختصاصی', price: '۱,۹۹۰,۰۰۰', icon: Cloud, color: 'bg-blue-500/20 text-blue-400' },
+  { id: 4, title: 'هاست وب', desc: 'هاست سریع و پایدار برای وب‌سایت‌های شخصی و شرکتی', price: '۴۹۹,۰۰۰', icon: Server, color: 'bg-indigo-500/20 text-indigo-400' },
+];
+
+export default function Products() {
+  return (
+    <section className="py-20 px-8 max-w-7xl mx-auto border-t border-gray-200 dark:border-gray-800/50">
+      <div className="flex flex-col md:flex-row justify-between items-end mb-12">
+        <div className="text-right">
+          <p className="text-sm text-teal-500 mb-2 font-medium">محصولات ما</p>
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">هر آنچه برای رشد<br/>پروژه‌ی شما نیاز دارید</h2>
+          <p className="text-gray-500 dark:text-gray-400 max-w-md">از هاست اشتراکی تا سرورهای اختصاصی قدرتمند. همه چیز برای عملکرد بهتر وب‌سایت و اپلیکیشن شما</p>
+        </div>
+        <button className="mt-6 md:mt-0 flex items-center gap-2 text-gray-800 dark:text-white border border-gray-300 dark:border-gray-700 px-5 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+          مشاهده همه محصولات <ArrowLeft size={16} />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {products.map((p, i) => (
+          <motion.div 
+            key={p.id}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.1, duration: 0.5 }}
+            viewport={{ once: true }}
+            className="bg-gray-50 dark:bg-[#111827] border border-gray-200 dark:border-gray-800 rounded-2xl p-6 text-right hover:border-teal-500/50 transition-colors group cursor-pointer"
+          >
+            <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 ml-auto ${p.color}`}>
+              <p.icon size={24} />
+            </div>
+            <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{p.title}</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6 h-10">{p.desc}</p>
+            <p className="text-sm text-gray-400">شروع از <span className="text-teal-500 font-bold mx-1">{p.price}</span> تومان</p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/components/services.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Server, Cloud, Shield, Lock } from 'lucide-react';
+import { useI18n } from '../../i18n/provider';
+
+export const Services = () => {
+  const { locale, t } = useI18n();
+  const dir = locale === 'en' ? 'ltr' : 'rtl';
+
+  const services = [
+    {
+      icon: Server,
+      title: t('service_hosting_title'),
+      desc: t('service_hosting_desc'),
+      gradient: 'from-blue-500/20 to-cyan-500/20',
+      iconColor: 'text-blue-400',
+    },
+    {
+      icon: Cloud,
+      title: t('service_vps_title'),
+      desc: t('service_vps_desc'),
+      gradient: 'from-indigo-500/20 to-purple-500/20',
+      iconColor: 'text-indigo-400',
+    },
+    {
+      icon: Shield,
+      title: t('service_dedicated_title'),
+      desc: t('service_dedicated_desc'),
+      gradient: 'from-teal-500/20 to-emerald-500/20',
+      iconColor: 'text-teal-400',
+    },
+    {
+      icon: Lock,
+      title: t('service_ssl_title'),
+      desc: t('service_ssl_desc'),
+      gradient: 'from-purple-500/20 to-pink-500/20',
+      iconColor: 'text-purple-400',
+    },
+  ];
+
+  return (
+    <section id="services" className="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden" dir={dir}>
+      {/* هاله نور پس‌زمینه */}
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#1e3a8a]/10 to-transparent pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto relative z-10">
+        {/* بخش عنوان */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl sm:text-5xl font-bold text-[color:var(--text-primary)] mb-4">
+            {t('services_title')}
+          </h2>
+          <p className="text-lg text-[color:var(--text-muted-2)] max-w-2xl mx-auto">
+            {t('services_subtitle')}
+          </p>
+        </motion.div>
+
+        {/* گرید کارت‌های خدمات */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {services.map((service, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              whileHover={{ y: -8, scale: 1.02 }}
+              className="group"
+            >
+              {/* بدنه کارت شیشه‌ای */}
+              <div className="relative h-full p-8 rounded-2xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] shadow-xl hover:shadow-2xl hover:border-[color:var(--border-20)] transition-all duration-500 overflow-hidden">
+                
+                {/* گرادینت پس‌زمینه در حالت Hover */}
+                <motion.div
+                  className={`absolute inset-0 bg-gradient-to-br ${service.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}
+                />
+
+                <div className="relative z-10">
+                  {/* آیکون با انیمیشن چرخش */}
+                  <motion.div
+                    whileHover={{ rotate: 360, scale: 1.1 }}
+                    transition={{ duration: 0.6, type: "spring" }}
+                    className={`w-14 h-14 rounded-xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] flex items-center justify-center mb-6 shadow-lg`}
+                  >
+                    <service.icon className={`w-7 h-7 ${service.iconColor}`} />
+                  </motion.div>
+
+                  {/* متون کارت */}
+                  <h3 className="text-xl font-semibold text-[color:var(--text-primary)] mb-3">
+                    {service.title}
+                  </h3>
+                  <p className="text-[color:var(--text-muted-2)] text-[15px] leading-relaxed">
+                    {service.desc}
+                  </p>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

src/app/globals.css

@@ -0,0 +1,196 @@
+@import "tailwindcss";
+
+@font-face {
+  font-family: "YekanBakhFaNum";
+  src: url("/fonts/YekanBakhFaNum-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "YekanBakhFaNum";
+  src: url("/fonts/YekanBakhFaNum-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "YekanBakhFaNum";
+  src: url("/fonts/YekanBakhFaNum-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* Theme tokens (default = dark, per request) */
+  --background: #000918;
+  --foreground: #ffffff;
+
+  --app-bg: #000918;
+  --hero-bg: #050a15;
+  --footer-bg: #000918;
+
+  --text-primary: #ffffff;
+  --text-muted: #d1d5db; /* gray-300 */
+  --text-muted-2: #9ca3af; /* gray-400 */
+  --text-muted-3: #6b7280; /* gray-500 */
+
+  --glass-02: rgba(255, 255, 255, 0.02);
+  --glass-04: rgba(255, 255, 255, 0.04);
+  --glass-05: rgba(255, 255, 255, 0.05);
+  --glass-10: rgba(255, 255, 255, 0.10);
+
+  --border-05: rgba(255, 255, 255, 0.05);
+  --border-10: rgba(255, 255, 255, 0.10);
+  --border-20: rgba(255, 255, 255, 0.20);
+
+  /* Section-specific surfaces (keep dark visuals identical) */
+  --surface-main-wrap: rgba(10, 17, 32, 0.50); /* #0a1120/50 */
+  --global-surface-bg: #091120;
+  --global-surface-bg-80: rgba(9, 17, 32, 0.80);
+  --global-surface-border: rgba(30, 41, 59, 0.50); /* #1e293b/50 */
+  --footer-surface-bg: #0f1629;
+  --footer-cta-from: #0b1426;
+  --footer-cta-via: #0d1a30;
+  --footer-cta-to: #0a1829;
+  --footer-chip-bg: #131b2f;
+  --footer-chip-inner-bg: #1a233a;
+  --footer-icon-bg: #161f36;
+
+  --hero-image-opacity: 1;
+  --hero-bottom-fade-from: #000918;
+
+  /* --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
+    "Apple Color Emoji", "Segoe UI Emoji"; */
+
+  /* Tailwind `font-sans` bridge */
+  --font-geist-sans: var(--font-family-base);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+/* Light theme: white base + very subtle blue/green gradients, keeping glass feel */
+html.light {
+  --background: #ffffff;
+  --foreground: #0b1020;
+
+  --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;
+  --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;
+  --footer-bg: #f8fafc;
+
+  --text-primary: #0b1020;
+  --text-muted: #334155; /* slate-700-ish */
+  --text-muted-2: #475569; /* slate-600-ish */
+  --text-muted-3: #64748b; /* slate-500-ish */
+
+  --glass-02: rgba(2, 6, 23, 0.02);
+  --glass-04: rgba(2, 6, 23, 0.04);
+  --glass-05: rgba(2, 6, 23, 0.05);
+  --glass-10: rgba(2, 6, 23, 0.10);
+
+  --border-05: rgba(2, 6, 23, 0.06);
+  --border-10: rgba(2, 6, 23, 0.12);
+  --border-20: rgba(2, 6, 23, 0.18);
+
+  --surface-main-wrap: rgba(255, 255, 255, 0.70);
+  --global-surface-bg: rgba(255, 255, 255, 0.75);
+  --global-surface-bg-80: rgba(255, 255, 255, 0.80);
+  --global-surface-border: rgba(2, 6, 23, 0.12);
+  --footer-surface-bg: rgba(255, 255, 255, 0.75);
+  --footer-cta-from: rgba(56, 189, 248, 0.12);
+  --footer-cta-via: rgba(132, 225, 188, 0.12);
+  --footer-cta-to: rgba(56, 189, 248, 0.08);
+  --footer-chip-bg: rgba(255, 255, 255, 0.60);
+  --footer-chip-inner-bg: rgba(255, 255, 255, 0.55);
+  --footer-icon-bg: rgba(2, 6, 23, 0.04);
+
+  --hero-image-opacity: 0.12;
+  --hero-bottom-fade-from: #ffffff;
+}
+
+body {
+  background: var(--background);
+  color: var(--text-primary);
+  font-family: var(--font-family-base);
+}
+
+.locale-fa {
+  --font-family-base: "YekanBakhFaNum", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
+    Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-geist-sans: var(--font-family-base);
+}
+
+/* Direction hooks (edit freely) */
+.locale-scope[data-locale="en"] .en-row-reverse {
+  flex-direction: row-reverse !important;
+}
+.locale-scope[data-locale="en"] .en-row {
+  flex-direction: row !important;
+}
+.locale-scope[data-locale="en"] .en-justify-start {
+  justify-content: flex-start;
+}
+.locale-scope[data-locale="en"] .en-justify-end {
+  justify-content: flex-end;
+}
+.locale-scope[data-locale="en"] .en-items-start {
+  align-items: flex-start;
+}
+.locale-scope[data-locale="en"] .en-items-end {
+  align-items: flex-end;
+}
+.locale-scope[data-locale="en"] .en-text-left {
+  text-align: left !important;
+}
+.locale-scope[data-locale="en"] .en-text-right {
+  text-align: right !important;
+}
+
+/* Shadow hooks (defaults are subtle; tweak as needed) */
+.locale-scope[data-locale="en"] .en-shadow-left {
+  box-shadow: -12px 0 40px rgba(2, 6, 23, 0.12);
+}
+.locale-scope[data-locale="en"] .en-shadow-right {
+  box-shadow: 12px 0 40px rgba(2, 6, 23, 0.12);
+}
+
+/* Optional FA-specific hooks (use only when you need overrides for /fa) */
+.locale-scope[data-locale="fa"] .fa-text-right {
+  text-align: right !important;
+}
+.locale-scope[data-locale="fa"] .fa-text-left {
+  text-align: left !important;
+}
+.locale-scope[data-locale="fa"] .fa-row-reverse {
+  flex-direction: row-reverse !important;
+}
+.locale-scope[data-locale="fa"] .fa-row {
+  flex-direction: row !important;
+}
+
+/* Debug helper: uncomment to visually verify EN scope is applied */
+/* .locale-scope[data-locale="en"] { outline: 2px dashed rgba(59,130,246,0.35); outline-offset: -2px; } */
+
+.app-bg {
+  background: var(--app-bg);
+}
+
+.hero-bg {
+  background: var(--hero-bg);
+}
+
+.footer-bg {
+  background: var(--footer-bg);
+}

src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Providers } from "./providers";
+
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fa" suppressHydrationWarning>
+      <body className="min-h-full flex flex-col">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/fa');
+}

src/app/providers.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+

src/i18n/messages.ts

@@ -0,0 +1,220 @@
+export const locales = ['fa', 'en'] as const;
+export type Locale = (typeof locales)[number];
+
+export function isLocale(value: string): value is Locale {
+  return (locales as readonly string[]).includes(value);
+}
+
+export type Messages = Record<string, string>;
+
+export const messages: Record<Locale, Messages> = {
+  fa: {
+    nav_products: 'محصولات',
+    nav_pricing: 'تعرفه',
+    nav_network: 'شبکه',
+    nav_support: 'پشتیبانی',
+    nav_start: 'شروع کنید',
+    nav_lang_en: 'English',
+    nav_lang_fa: 'فا',
+
+    hero_title_1: 'زیرساختی قدرتمند',
+    hero_title_2: 'برای آینده‌ی',
+    hero_title_3: 'آنلاین',
+    hero_title_4: 'شما',
+    hero_subtitle:
+      'سریع، پایدار و ایمن — خدمات هاستینگ، سرور مجازی، سرور اختصاصی و گواهی SSL با بهترین کیفیت و پشتیبانی ۲۴/۷.',
+    hero_cta_primary: 'شروع کنید',
+    hero_cta_secondary: 'مشاهده محصولات',
+    hero_feat_support: 'پشتیبانی ۲۴/۷',
+    hero_feat_uptime: 'آپتایم ۹۹.۹۹٪',
+    hero_feat_speed: 'سرعت بالا',
+    hero_uptime_card_title: 'آپتایم سرورها',
+
+    main_products_badge: 'محصولات ما',
+    main_products_title: 'هر آنچه برای رشد\nپروژه‌ی شما نیاز دارید',
+    main_products_desc:
+      'از هاست اشتراکی تا سرورهای اختصاصی قدرتمند.\nهمه چیز برای عملکرد بهتر وب‌سایت و اپلیکیشن شما',
+    main_products_all: 'مشاهده همه محصولات',
+    product_ssl_title: 'گواهی SSL',
+    product_ssl_desc: 'امنیت وب‌سایت خود را با SSL تضمین کنید',
+    product_dedicated_title: 'سرور اختصاصی',
+    product_dedicated_desc: 'سرورهای فیزیکی قدرتمند با بالاترین عملکرد',
+    product_vps_title: 'سرور مجازی (VPS)',
+    product_vps_desc: 'سرورهای مجازی قدرتمند با منابع اختصاصی',
+    product_host_title: 'هاست وب',
+    product_host_desc: 'هاست سریع و پایدار برای وب‌سایت‌های شخصی و شرکتی',
+    price_from: 'شروع از',
+    toman: 'تومان',
+    stats_uptime: 'آپتایم شبکه',
+    stats_dc: 'موقعیت دیتاسنتر',
+    stats_servers: 'سرورهای فعال',
+    stats_customers: 'مشتری فعال',
+
+    trust_badge: 'مورد اعتماد هزاران کسب‌وکار',
+    trust_title: 'اعتماد شما، بزرگ‌ترین دارایی ماست.',
+    trust_desc: 'کسب‌وکارهای بزرگ و استارتاپ‌ها، زیرساخت خود را به ما سپرده‌اند.',
+    testimonial_1_text: 'سرعت و پایداری سرورها فوق‌العاده‌ست. پشتیبانی هم همیشه در دسترس و خیلی حرفه‌ای.',
+    testimonial_1_name: 'علی محمدی',
+    testimonial_1_role: 'مدیر فنی، تپسی',
+    testimonial_2_text: 'از وقتی سرورهای ما رو به آروان‌کلاد منتقل کردیم، خیالمون از بابت پایداری راحت شده.',
+    testimonial_2_name: 'سارا یوسفی',
+    testimonial_2_role: 'مدیر محصول، دیجی‌کالا',
+
+    services_title: 'خدمات ما',
+    services_subtitle:
+      'بهترین راهکارهای میزبانی وب و زیرساخت ابری برای توسعه و رشد کسب‌وکار شما',
+    service_hosting_title: 'میزبانی وب (هاستینگ)',
+    service_hosting_desc: 'میزبانی وب با بالاترین سرعت و پایداری برای سایت‌ها و پروژه‌های شما.',
+    service_vps_title: 'سرور مجازی (VPS)',
+    service_vps_desc: 'منابع اختصاصی و دسترسی Root با سرورهای ابری پرسرعت و پایدار.',
+    service_dedicated_title: 'سرور اختصاصی',
+    service_dedicated_desc: 'قدرت، امنیت و کنترل بی‌نهایت با سرورهای اختصاصی (Bare Metal).',
+    service_ssl_title: 'گواهینامه SSL',
+    service_ssl_desc: 'تامین امنیت اطلاعات کاربران و افزایش اعتبار و سئو سایت شما.',
+
+    global_badge: 'زیرساخت جهانی',
+    global_title: 'سرعت و پایداری در سطح جهانی',
+    global_desc:
+      'دیتاسنترهای ما در بهترین نقاط جهان قرار دارند تا کمترین تأخیر و بیشترین سرعت را برای شما فراهم کنند.',
+    global_cta: 'مشاهده دیتاسنترها',
+
+    footer_cta_title: 'زیرساخت مطمئن برای رشد پروژه‌هات آماده‌ست',
+    footer_cta_desc: 'همین امروز سرویس مناسب خود را انتخاب کنید و با خیال راحت آینده را بسازید.',
+    footer_cta_start: 'شروع کنید',
+    footer_cta_view_services: 'مشاهده سرویس‌ها',
+    footer_about:
+      'ارائه‌دهنده خدمات زیرساخت ابری و سرورهای پرسرعت با بیشترین سطح امنیت و پایداری برای کسب‌وکارهای آنلاین در ایران و جهان.',
+    footer_col_products: 'محصولات',
+    footer_col_resources: 'منابع',
+    footer_col_company: 'شرکت',
+    footer_col_legal: 'حقوقی',
+    footer_link_cloud_hosting: 'هاست ابری',
+    footer_link_vps: 'سرور مجازی (VPS)',
+    footer_link_dedicated: 'سرور اختصاصی',
+    footer_link_ssl: 'گواهی SSL',
+    footer_link_domain: 'ثبت دامنه',
+    footer_link_docs: 'مستندات',
+    footer_link_blog: 'وبلاگ',
+    footer_link_guides: 'راهنماها',
+    footer_link_api: 'API و توسعه‌دهندگان',
+    footer_link_status: 'وضعیت سرورها',
+    footer_link_about: 'درباره ما',
+    footer_link_contact: 'تماس با ما',
+    footer_link_careers: 'فرصت‌های شغلی',
+    footer_link_partners: 'همکاری با ما',
+    footer_link_terms: 'قوانین استفاده',
+    footer_link_privacy: 'حریم خصوصی',
+    footer_link_refund: 'سیاست بازگشت وجه',
+    footer_link_rules: 'قوانین و مقررات',
+    footer_feature_uptime: 'آپتایم شبکه',
+    footer_feature_dc: 'دیتاسنترهای جهانی',
+    footer_feature_security: 'امنیت پیشرفته',
+    footer_feature_support: 'پشتیبانی ۲۴/۷',
+    footer_lang_fa: 'فارسی',
+    footer_rights: '© 2026 MugCloud. تمامی حقوق محفوظ است.',
+  },
+  en: {
+    nav_products: 'Products',
+    nav_pricing: 'Pricing',
+    nav_network: 'Network',
+    nav_support: 'Support',
+    nav_start: 'Get started',
+    nav_lang_en: 'English',
+    nav_lang_fa: 'FA',
+
+    hero_title_1: 'Powerful infrastructure',
+    hero_title_2: 'for your',
+    hero_title_3: 'online',
+    hero_title_4: 'future',
+    hero_subtitle:
+      'Fast, stable, and secure — hosting, VPS, dedicated servers, and SSL certificates with top quality and 24/7 support.',
+    hero_cta_primary: 'Get started',
+    hero_cta_secondary: 'View products',
+    hero_feat_support: '24/7 support',
+    hero_feat_uptime: '99.99% uptime',
+    hero_feat_speed: 'High speed',
+    hero_uptime_card_title: 'Server uptime',
+
+    main_products_badge: 'Our products',
+    main_products_title: 'Everything you need\nto grow your project',
+    main_products_desc:
+      'From shared hosting to powerful dedicated servers.\nEverything for better performance of your website and app.',
+    main_products_all: 'View all products',
+    product_ssl_title: 'SSL certificate',
+    product_ssl_desc: 'Secure your website with SSL',
+    product_dedicated_title: 'Dedicated server',
+    product_dedicated_desc: 'Powerful bare-metal servers for maximum performance',
+    product_vps_title: 'VPS',
+    product_vps_desc: 'High-performance virtual servers with dedicated resources',
+    product_host_title: 'Web hosting',
+    product_host_desc: 'Fast and reliable hosting for personal and business websites',
+    price_from: 'Starting from',
+    toman: 'Toman',
+    stats_uptime: 'Network uptime',
+    stats_dc: 'Datacenter locations',
+    stats_servers: 'Active servers',
+    stats_customers: 'Active customers',
+
+    trust_badge: 'Trusted by thousands',
+    trust_title: 'Your trust is our greatest asset.',
+    trust_desc: 'Big companies and startups trust us with their infrastructure.',
+    testimonial_1_text: 'Server speed and stability are outstanding. Support is always available and highly professional.',
+    testimonial_1_name: 'Ali Mohammadi',
+    testimonial_1_role: 'Tech Lead, Tapsi',
+    testimonial_2_text: 'Since moving our servers, we’ve felt confident about stability and reliability.',
+    testimonial_2_name: 'Sara Yousefi',
+    testimonial_2_role: 'Product Manager, Digikala',
+
+    services_title: 'Our services',
+    services_subtitle: 'Modern hosting and cloud infrastructure solutions to grow your business',
+    service_hosting_title: 'Web hosting',
+    service_hosting_desc: 'High-speed and reliable hosting for your sites and projects.',
+    service_vps_title: 'VPS',
+    service_vps_desc: 'Dedicated resources and root access with fast and stable cloud servers.',
+    service_dedicated_title: 'Dedicated server',
+    service_dedicated_desc: 'Power, security, and full control with bare-metal servers.',
+    service_ssl_title: 'SSL certificate',
+    service_ssl_desc: 'Protect user data and improve trust and SEO for your site.',
+
+    global_badge: 'Global infrastructure',
+    global_title: 'Global-grade speed and stability',
+    global_desc:
+      'Our datacenters are located in top global regions to deliver the lowest latency and highest speed.',
+    global_cta: 'View datacenters',
+
+    footer_cta_title: 'Reliable infrastructure to grow your product',
+    footer_cta_desc: 'Pick the right service today and build the future with confidence.',
+    footer_cta_start: 'Get started',
+    footer_cta_view_services: 'View services',
+    footer_about:
+      'Cloud infrastructure and high-performance servers with strong security and reliability for businesses in Iran and worldwide.',
+    footer_col_products: 'Products',
+    footer_col_resources: 'Resources',
+    footer_col_company: 'Company',
+    footer_col_legal: 'Legal',
+    footer_link_cloud_hosting: 'Cloud hosting',
+    footer_link_vps: 'VPS',
+    footer_link_dedicated: 'Dedicated servers',
+    footer_link_ssl: 'SSL certificates',
+    footer_link_domain: 'Domain registration',
+    footer_link_docs: 'Documentation',
+    footer_link_blog: 'Blog',
+    footer_link_guides: 'Guides',
+    footer_link_api: 'API & Developers',
+    footer_link_status: 'System status',
+    footer_link_about: 'About us',
+    footer_link_contact: 'Contact',
+    footer_link_careers: 'Careers',
+    footer_link_partners: 'Partners',
+    footer_link_terms: 'Terms of use',
+    footer_link_privacy: 'Privacy policy',
+    footer_link_refund: 'Refund policy',
+    footer_link_rules: 'Rules & regulations',
+    footer_feature_uptime: 'Network uptime',
+    footer_feature_dc: 'Global datacenters',
+    footer_feature_security: 'Advanced security',
+    footer_feature_support: '24/7 support',
+    footer_lang_fa: 'Persian',
+    footer_rights: '© 2026 MugCloud. All rights reserved.',
+  },
+};

src/i18n/provider.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React, { createContext, useContext, useMemo } from 'react';
+import type { Locale, Messages } from './messages';
+
+type I18nContextValue = {
+  locale: Locale;
+  t: (key: string) => string;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({
+  locale,
+  messages,
+  children,
+}: {
+  locale: Locale;
+  messages: Messages;
+  children: React.ReactNode;
+}) {
+  const value = useMemo<I18nContextValue>(() => {
+    return {
+      locale,
+      t: (key: string) => messages[key] ?? key,
+    };
+  }, [locale, messages]);
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n() {
+  const ctx = useContext(I18nContext);
+  if (!ctx) throw new Error('useI18n must be used within I18nProvider');
+  return ctx;
+}
+

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}