haniyerz/Mugcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

domain,email

Browse Source
This commit is contained in:
haniyeroozmand
2026-05-20 22:11:26 +03:30
parent 54b1e83983
commit 0c4120ca25
14 changed files with 1453 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/domain-importance-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/domain/domain-importance-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/org-email/flow-center.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 996 KiB

301
src/app/[locale]/domain/page.tsx
View File

@@ -1,7 +1,22 @@
import Header from '../../components/header';
import { Footer } from '../../components/footer';
import Image from 'next/image';
import { Headphones, Repeat2, Search, Settings, ShoppingCart, Tag } from 'lucide-react';
import {
BadgeCheck,
Link2,
LineChart,
Headphones,
Repeat2,
Search,
Settings,
ShoppingCart,
Tag,
UserRound,
} from 'lucide-react';
import FaqTimelineAccordion from '../../components/faq-timeline-accordion';
export default async function DomainPage({
@@ -13,23 +28,77 @@ export default async function DomainPage({
const isFa = locale === 'fa';
const dir = isFa ? 'rtl' : 'ltr';
const faqContent = isFa
? {
title: 'سوالات متداول',
subtitle: 'پاسخ سوالات رایج درباره ثبت دامنه',
faqs: [
{
q: 'قیمت دامنه چگونه محاسبه می‌شود؟',
a: 'هزینه بر اساس پسوند (TLD)، دوره ثبت و قوانین رجیستری تعیین می‌شود؛ تمدید ممکن است با قیمت ثبت اولیه متفاوت باشد.',
},
{
q: 'آیا انتقال دامنه به MugCloud امکان‌پذیر است؟',
a: 'بله؛ با دریافت کد انتقال (Auth Code) و تکمیل مراحل، دامنه شما به‌صورت امن منتقل می‌شود.',
},
{
q: 'دامنه چه زمانی بعد از ثبت فعال می‌شود؟',
a: 'اغلب دامنه‌ها بلافاصله یا طی چند دقیقه فعال می‌شوند؛ در برخی پسوندها ممکن است تایید رجیستری زمان‌بر باشد.',
},
{
q: 'آیا امکان مدیریت DNS و نیم‌سرورها وجود دارد؟',
a: 'بله؛ از طریق پنل می‌توانید رکوردهای DNS، نیم‌سرورها و تنظیمات امنیتی مثل قفل انتقال را مدیریت کنید.',
},
{
q: 'برای دامنه‌های بین‌المللی به چه اطلاعاتی نیاز است؟',
a: 'معمولاً اطلاعات مالک (تماس/آدرس) و ایمیل معتبر لازم است؛ برای برخی پسوندها شرایط اختصاصی وجود دارد.',
},
],
}
: {
title: 'FAQ',
subtitle: 'Common questions about domain registration',
faqs: [
{
q: 'How is the domain price calculated?',
a: 'Pricing depends on the TLD, registration period, and registry rules; renewal prices can differ from first-year pricing.',
},
{
q: 'Can I transfer my domain to MugCloud?',
a: 'Yes. Get the Auth Code and follow the transfer steps to move your domain securely.',
},
{
q: 'When does my domain become active?',
a: 'Most domains activate instantly or within minutes; some TLDs may require additional registry verification time.',
},
{
q: 'Can I manage DNS records and nameservers?',
a: 'Yes. You can manage DNS records, nameservers, and security settings like transfer lock from the panel.',
},
{
q: 'What information is needed for international domains?',
a: 'Typically registrant contact details and a valid email are required; some TLDs have additional requirements.',
},
],
};
return (
<main className="min-h-screen font-sans text-[color:var(--text-primary)] dark:bg-[#000315]" dir={dir}>
<main className="min-h-screen font-sans text-[color:var(--text-primary)] dark:bg-[#000310]" dir={dir}>
<Header />
{/* Hero (match provided UI) */}
{/* Hero (match provided UI) */}
<section className="relative overflow-hidden pt-28 pb-10 px-4 sm:px-6">
<div className="pointer-events-none absolute inset-0">
{/* <div className="pointer-events-none absolute inset-0">
<div className="absolute inset-0 bg-[radial-gradient(1200px_520px_at_10%_40%,rgba(59,130,246,0.16),transparent_60%),radial-gradient(900px_420px_at_80%_20%,rgba(139,92,246,0.16),transparent_55%),radial-gradient(900px_420px_at_55%_90%,rgba(16,185,129,0.10),transparent_60%)]" />
<div className="absolute inset-0 opacity-[0.18] [background-image:radial-gradient(rgba(255,255,255,0.65)_1px,transparent_1px)] [background-size:42px_42px]" />
<div className="absolute inset-0 opacity-[0.10] [background-image:radial-gradient(rgba(59,130,246,0.70)_1px,transparent_1px)] [background-size:120px_120px]" />
</div>
</div> */}
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
{/* Globe */}
<div className={`lg:col-span-6 ${isFa ? '' : 'lg:order-2'} order-1`}>
<div className="relative mx-auto w-full max-w-[640px] aspect-[1/1] -mt-6 lg:mt-0">
<div className="lg:col-span-6 order-2">
<div className="relative mx-auto w-full max-w-[860px] aspect-[1/1] -mt-10 lg:-mt-16">
<Image
src="/images/domain-globe.png"
alt="Domain globe"
@@ -56,11 +125,10 @@ export default async function DomainPage({
</div>
{/* Copy + Search */}
<div className={`lg:col-span-6 ${isFa ? '' : 'lg:order-1'} order-2`}>
<div className="lg:col-span-6 order-1">
<div className={`text-sm font-semibold text-emerald-400 ${isFa ? 'text-right' : 'text-left'}`}>
{isFa ? 'ثبت دامنه' : 'Domain registration'}
</div>
<h1 className={`mt-4 text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.2] ${isFa ? 'text-right' : 'text-left'}`}>
{isFa ? (
<>
@@ -102,18 +170,16 @@ export default async function DomainPage({
<input
type="text"
placeholder={isFa ? 'نام دامنه خود را وارد کنید…' : 'Enter your domain name…'}
className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 outline-none ${
isFa ? 'pr-6 pl-16 text-right' : 'pl-16 pr-6 text-left'
}`}
className={`w-full h-full bg-transparent px-4 py-4 text-sm text-[color:var(--text-primary)] placeholder:text-slate-300/40 outline-none ${isFa ? 'pr-6 pl-16 text-right' : 'pl-16 pr-6 text-left'
}`}
/>
</div>
</div>
{/* Feature pills */}
<div
className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] bg-[rgba(2,6,23,0.32)] backdrop-blur-xl overflow-hidden ${
isFa ? 'divide-x divide-x-reverse' : 'divide-x'
} divide-[rgba(148,163,184,0.12)]`}
className={`mt-5 rounded-2xl border border-[rgba(148,163,184,0.14)] bg-[rgba(2,6,23,0.32)] backdrop-blur-xl overflow-hidden ${isFa ? 'divide-x divide-x-reverse' : 'divide-x'
} divide-[rgba(148,163,184,0.12)]`}
>
<div className="grid grid-cols-2 sm:grid-cols-4">
{[
@@ -124,9 +190,8 @@ export default async function DomainPage({
].map((item) => (
<div
key={item.t}
className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 ${
isFa ? 'flex-row-reverse' : ''
}`}
className={`flex items-center justify-center gap-2 px-4 py-4 text-xs sm:text-sm text-slate-200/80 ${isFa ? 'flex-row-reverse' : ''
}`}
>
<item.i className="w-5 h-5 text-indigo-300/80" />
<span className="whitespace-nowrap">{item.t}</span>
@@ -224,26 +289,200 @@ export default async function DomainPage({
{/* Importance */}
<div className="mt-12">
<div className="rounded-[2rem] border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md overflow-hidden">
<div className="p-8 md:p-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div className="lg:col-span-7">
<div className="text-xl md:text-2xl font-bold">{isFa ? 'چرا داشتن دامنه مهم است؟' : 'Why does a domain matter?'}</div>
<div className="mt-4 text-sm text-[color:var(--text-muted-2)] leading-relaxed max-w-2xl">
{isFa
? 'دامنه، اعتبار برند و دسترسی‌پذیری شما را تقویت می‌کند و نقطه شروع هویت آنلاین است.'
: 'A domain boosts brand trust and accessibility — it’s your online identity foundation.'}
</div>
<div className="relative rounded-[2rem] border border-[color:var(--border-10)] bg-[#010715] overflow-hidden">
<div className="pointer-events-none absolute inset-0">
<Image
src="/images/domain/domain-importance-bg.png"
alt=""
fill
priority
className="object-contain object-center opacity-95 scale-80"
/>
{/* <div className="absolute inset-0 bg-[radial-gradient(900px_420px_at_50%_20%,rgba(0,0,0,0.05),rgba(0,0,0,0.55)_55%,rgba(0,0,0,0.72)_85%)]" /> */}
{/* <div className="absolute inset-0 bg-[radial-gradient(700px_340px_at_50%_18%,rgba(59,130,246,0.18),transparent_62%),radial-gradient(700px_340px_at_50%_92%,rgba(139,92,246,0.16),transparent_66%)]" /> */}
</div>
<div className="relative p-8 md:p-10">
<div className="text-center text-2xl md:text-3xl font-bold">
{isFa ? 'چرا داشتن دامنه مهم است؟' : 'Why does owning a domain matter?'}
</div>
<div className="lg:col-span-5">
<div className="relative mx-auto w-full max-w-[320px] aspect-square rounded-full border border-[color:var(--border-10)] bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.25),transparent_60%)]">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(16,185,129,0.18),transparent_62%)]" />
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.18),transparent_68%)]" />
<div className="relative mt-10" dir="ltr">
{/* Connection curves + dots */}
<svg
className="hidden lg:block absolute inset-0 w-full h-full pointer-events-none"
viewBox="0 0 1200 360"
preserveAspectRatio="none"
>
<defs>
<linearGradient id="domGradL" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stopColor="rgba(128,200,245,0.0)" />
<stop offset="0.45" stopColor="rgba(34,211,238,0.75)" />
<stop offset="1" stopColor="rgba(167,139,250,0.95)" />
</linearGradient>
<linearGradient id="domGradR" x1="1" y1="0" x2="0" y2="0">
<stop offset="0" stopColor="rgba(128,200,245,0.0)" />
<stop offset="0.45" stopColor="rgba(34,211,238,0.75)" />
<stop offset="1" stopColor="rgba(167,139,250,0.95)" />
</linearGradient>
<filter id="domGlow">
<feGaussianBlur stdDeviation="2.6" result="blur" />
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0"
/>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* left-top -> center */}
<path
d="M 265 105 C 360 15, 410 70, 530 70"
fill="none"
stroke="url(#domGradL)"
strokeWidth="2"
strokeDasharray="3 10"
strokeLinecap="round"
filter="url(#domGlow)"
opacity="0.9"
/>
{/* left-bottom -> center */}
<path
d="M 265 255 C 360 255, 410 292, 530 292"
fill="none"
stroke="url(#domGradL)"
strokeWidth="2"
strokeDasharray="3 10"
strokeLinecap="round"
filter="url(#domGlow)"
opacity="0.9"
/>
{/* right-top -> center */}
<path
d="M 935 105 C 840 105, 790 70, 670 70"
fill="none"
stroke="url(#domGradR)"
strokeWidth="2"
strokeDasharray="3 10"
strokeLinecap="round"
filter="url(#domGlow)"
opacity="0.9"
/>
{/* right-bottom -> center */}
<path
d="M 935 255 C 840 255, 790 292, 670 292"
fill="none"
stroke="url(#domGradR)"
strokeWidth="2"
strokeDasharray="3 10"
strokeLinecap="round"
filter="url(#domGlow)"
opacity="0.9"
/>
{/* end dots */}
{[
{ cx: 265, cy: 105 },
{ cx: 265, cy: 255 },
{ cx: 935, cy: 105 },
{ cx: 935, cy: 255 },
{ cx: 530, cy: 70 },
{ cx: 530, cy: 292 },
{ cx: 670, cy: 70 },
{ cx: 670, cy: 292 },
].map((p, i) => (
<g key={i} filter="url(#domGlow)">
<circle cx={p.cx} cy={p.cy} r="7.8" fill="rgba(34,211,238,0.12)" opacity="0.9" />
<circle cx={p.cx} cy={p.cy} r="3.6" fill="rgba(167,139,250,0.95)" opacity="0.98" />
</g>
))}
</svg>
<div className="grid grid-cols-1 lg:grid-cols-12 items-center gap-10">
{/* Left items */}
<div className="lg:col-span-4 space-y-10">
{[
{
t: isFa ? 'ایجاد اعتبار برند' : 'Build brand trust',
d: isFa ? 'یک دامنه حرفه‌ای اعتماد مشتریان را افزایش می‌دهد.' : 'A professional domain increases customer trust.',
I: BadgeCheck,
},
{
t: isFa ? 'دسترسی آسان' : 'Easy access',
d: isFa ? 'مشتریان شما به‌راحتی شما را پیدا می‌کنند.' : 'Customers can find you easily.',
I: Link2,
},
].map((item) => (
<div key={item.t} className="flex items-center justify-end gap-5" dir={dir}>
<div className="text-right">
<div className="text-lg font-bold">{item.t}</div>
<div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed max-w-[260px]">
{item.d}
</div>
</div>
<div className="shrink-0 w-16 h-16 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center shadow-[0_0_45px_rgba(59,130,246,0.10)]">
<div className="w-12 h-12 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.20),transparent_55%)] flex items-center justify-center">
<item.I className="w-6 h-6 text-[#80c8f5] drop-shadow-[0_0_14px_rgba(128,200,245,0.28)]" />
</div>
</div>
</div>
))}
</div>
{/* Center illustration */}
<div className="lg:col-span-4">
<div className="relative mx-auto w-full max-w-[520px] aspect-[1/1]">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(2,6,23,0.0),rgba(2,6,23,0.30)_55%,rgba(2,6,23,0.60)_82%)]" />
</div>
</div>
{/* Right items */}
<div className="lg:col-span-4 space-y-10">
{[
{
t: isFa ? 'مالکیت واقعی' : 'True ownership',
d: isFa ? 'دامنه‌ها دارایی دیجیتالی هستند و کاملاً متعلق به شما می‌باشند.' : 'Domains are digital assets that you truly own.',
I: UserRound,
},
{
t: isFa ? 'سرمایه‌گذاری هوشمند' : 'Smart investment',
d: isFa ? 'دامنه مناسب می‌تواند ارزش برند شما را در آینده افزایش دهد.' : 'The right domain can increase your brand value over time.',
I: LineChart,
},
].map((item) => (
<div key={item.t} className="flex items-center justify-start gap-5" dir={dir}>
<div className="shrink-0 w-16 h-16 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center shadow-[0_0_45px_rgba(59,130,246,0.10)]">
<div className="w-12 h-12 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.18),transparent_55%)] flex items-center justify-center">
<item.I className="w-6 h-6 text-[#80c8f5] drop-shadow-[0_0_14px_rgba(128,200,245,0.28)]" />
</div>
</div>
<div className={isFa ? 'text-right' : 'text-left'}>
<div className="text-lg font-bold">{item.t}</div>
<div className="mt-2 text-sm text-[color:var(--text-muted-2)] leading-relaxed max-w-[270px]">
{item.d}
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
<FaqTimelineAccordion
title={faqContent.title}
subtitle={faqContent.subtitle}
faqs={faqContent.faqs}
contentDir={dir}
/>
{/* Final CTA */}
<div className="mt-12 pb-14">
<div className="rounded-[2rem] border border-[color:var(--border-10)] bg-gradient-to-br from-emerald-500/10 via-[color:var(--glass-05)] to-indigo-500/10 backdrop-blur-md overflow-hidden">

20
src/app/[locale]/org-email-international/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Header from '../../components/header';
import { Footer } from '../../components/footer';
import OrgEmailLanding from '../../components/org-email-landing';
export default async function OrgEmailInternationalPage({
params,
}: {
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<main className="min-h-screen font-sans">
<Header />
<OrgEmailLanding locale={locale} variant="international" />
<Footer />
</main>
);
}

19
src/app/[locale]/org-email-iran/page.tsx Normal file
View File

@@ -0,0 +1,19 @@
import Header from '../../components/header';
import { Footer } from '../../components/footer';
import OrgEmailLanding from '../../components/org-email-landing';
export default async function OrgEmailIranHeroPage({
params,
}: {
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<main className="min-h-screen font-sans">
<Header />
<OrgEmailLanding locale={locale} variant="iran" />
<Footer />
</main>
);
}

76
src/app/[locale]/org-email/iran/page.tsx
View File

@@ -1,5 +1,6 @@
import Header from '../../../components/header';
import { Footer } from '../../../components/footer';
import { redirect } from 'next/navigation';
export default async function OrgEmailIranPage({
params,
@@ -7,79 +8,6 @@ export default async function OrgEmailIranPage({
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
const isFa = locale === 'fa';
return (
<main className="min-h-screen font-sans">
<Header />
<section className="px-4 sm:px-6 pt-28 pb-14">
<div className="max-w-6xl mx-auto">
<div className="rounded-[2rem] border border-[color:var(--border-10)] bg-gradient-to-br from-emerald-500/10 via-[color:var(--glass-05)] to-teal-500/10 backdrop-blur-md overflow-hidden">
<div className="p-10 md:p-14">
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[color:var(--glass-10)] border border-[color:var(--border-10)] text-xs text-[color:var(--text-muted)]">
<span>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
<span className="w-1 h-1 rounded-full bg-emerald-400/70" />
<span>{isFa ? 'ایران' : 'Iran'}</span>
</div>
<h1 className="mt-5 text-3xl md:text-5xl font-extrabold text-[color:var(--text-primary)]">
{isFa ? 'ایمیل سازمانی ایران' : 'Business email (Iran)'}
</h1>
<p className="mt-4 text-[color:var(--text-muted-2)] max-w-2xl leading-relaxed">
{isFa
? 'این صفحه نیز از قالب «خدمات» جداست تا UI مخصوص ایمیل ایران را مستقل طراحی کنیم.'
: 'This page is also separated from the services template so the Iran email UI can have its own design.'}
</p>
<div className="mt-10 grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-6">
<div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] p-6 md:p-7">
<div className="text-sm font-semibold text-[color:var(--text-primary)]">
{isFa ? 'شروع سریع (Placeholder)' : 'Quick start (Placeholder)'}
</div>
<div className="mt-4 grid grid-cols-1 gap-3">
{[
isFa ? 'انتخاب دامنه سازمانی' : 'Pick your domain',
isFa ? 'ایجاد اکانت‌ها و گروه‌ها' : 'Create accounts & groups',
isFa ? 'اتصال به Outlook / Mobile' : 'Connect to Outlook / Mobile',
].map((step) => (
<div
key={step}
className="rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] p-5 text-sm text-[color:var(--text-muted-2)]"
>
{step}
</div>
))}
</div>
</div>
<div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] p-6 md:p-7">
<div className="text-sm font-semibold text-[color:var(--text-primary)]">
{isFa ? 'چرا ایمیل ایران؟' : 'Why Iran email?'}
</div>
<ul className="mt-4 space-y-3 text-sm text-[color:var(--text-muted-2)]">
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400/80" />
<span>{isFa ? 'مناسب نیازهای داخلی و سازمان‌ها' : 'Tailored for local requirements'}</span>
</li>
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400/80" />
<span>{isFa ? 'پشتیبانی فارسی و سریع' : 'Fast support'}</span>
</li>
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-emerald-400/80" />
<span>{isFa ? 'امنیت و ضد اسپم' : 'Security & anti-spam'}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</main>
);
redirect(`/${locale}/org-email-iran`);
}

11
src/app/[locale]/org-email/org-email-international/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { redirect } from 'next/navigation';
export default async function OrgEmailInternationalHeroPage({
params,
}: {
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
redirect(`/${locale}/org-email-international`);
}

79
src/app/[locale]/org-email/page.tsx
View File

@@ -1,5 +1,4 @@
import Header from '../../components/header';
import { Footer } from '../../components/footer';
import { redirect } from 'next/navigation';
export default async function OrgEmailInternationalPage({
params,
@@ -7,80 +6,6 @@ export default async function OrgEmailInternationalPage({
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
const isFa = locale === 'fa';
return (
<main className="min-h-screen font-sans">
<Header />
<section className="px-4 sm:px-6 pt-28 pb-14">
<div className="max-w-6xl mx-auto">
<div className="rounded-[2rem] border border-[color:var(--border-10)] bg-gradient-to-br from-rose-500/10 via-[color:var(--glass-05)] to-purple-500/10 backdrop-blur-md overflow-hidden">
<div className="p-10 md:p-14">
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[color:var(--glass-10)] border border-[color:var(--border-10)] text-xs text-[color:var(--text-muted)]">
<span>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
<span className="w-1 h-1 rounded-full bg-rose-400/70" />
<span>{isFa ? 'بین‌الملل' : 'International'}</span>
</div>
<h1 className="mt-5 text-3xl md:text-5xl font-extrabold text-[color:var(--text-primary)]">
{isFa ? 'ایمیل سازمانی بین‌المللی' : 'International business email'}
</h1>
<p className="mt-4 text-[color:var(--text-muted-2)] max-w-2xl leading-relaxed">
{isFa
? 'این صفحه از قالب «خدمات» جدا شده تا UI ایمیل سازمانی متفاوت‌تر طراحی شود.'
: 'This page is separated from the services template so the business email UI can be designed differently.'}
</p>
<div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-5">
<div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] p-6 md:p-7">
<div className="text-sm font-semibold text-[color:var(--text-primary)]">
{isFa ? 'پلن‌ها (Placeholder)' : 'Plans (Placeholder)'}
</div>
<div className="mt-4 grid grid-cols-1 gap-3">
{[
{ name: isFa ? 'Starter' : 'Starter', price: isFa ? '...' : '...' },
{ name: isFa ? 'Team' : 'Team', price: isFa ? '...' : '...' },
{ name: isFa ? 'Business' : 'Business', price: isFa ? '...' : '...' },
].map((p) => (
<div
key={p.name}
className="rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-02)] p-5 flex items-center justify-between"
>
<div className="text-sm font-semibold text-[color:var(--text-primary)]">{p.name}</div>
<div className="text-sm text-[color:var(--text-muted-2)]">{p.price}</div>
</div>
))}
</div>
</div>
<div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] p-6 md:p-7">
<div className="text-sm font-semibold text-[color:var(--text-primary)]">
{isFa ? 'ویژگی‌ها' : 'Features'}
</div>
<ul className="mt-4 space-y-3 text-sm text-[color:var(--text-muted-2)]">
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-rose-400/80" />
<span>{isFa ? 'وب‌میل و موبایل' : 'Webmail & mobile'}</span>
</li>
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-rose-400/80" />
<span>{isFa ? 'امنیت و ضد اسپم' : 'Security & anti-spam'}</span>
</li>
<li className="flex items-start gap-2">
<span className="mt-1 w-1.5 h-1.5 rounded-full bg-rose-400/80" />
<span>{isFa ? 'پشتیبانی مهاجرت' : 'Migration support'}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
</main>
);
redirect(`/${locale}/org-email-international`);
}

83
src/app/[locale]/services/[slug]/service-detail-page.tsx
View File

@@ -10,9 +10,6 @@ import {
Cloud,
Database,
Gauge,
HandCoins,
MousePointerClick,
BarChart3,
Headphones,
Rocket,
ShieldCheck,
@@ -22,6 +19,7 @@ import { useI18n } from '../../../../i18n/provider';
import { serviceContent, type ServiceSlug } from './services.data';
import { useTheme } from 'next-themes';
import { NetworkNexus } from '../../../components/network-nexus';
import FaqTimelineAccordion from '../../../components/faq-timeline-accordion';
function HeroIcon({ name }: { name: 'shield' | 'wp' | 'speed' | 'support' }) {
const className =
@@ -365,77 +363,14 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
</div>
</motion.section>
{/* FAQ (new layout) */}
<motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
<div className="text-center mb-10">
<h2 className="text-2xl sm:text-3xl font-bold text-[color:var(--text-primary)]">
<span className="faq-title-bars">{content.faqTitle}</span>
</h2>
<p className="mt-3 text-sm sm:text-base text-[color:var(--text-muted)]">{content.faqSubtitle}</p>
</div>
<div className="relative max-w-5xl mx-auto">
{/* Timeline spine (desktop) */}
<div className="hidden md:block absolute right-[132px] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#80c8f5]/35 to-transparent" />
<div className="space-y-4">
{content.faqs.map((f, idx) => {
const Icon = [HandCoins, Gauge, ShieldCheck, MousePointerClick, BarChart3][idx % 5];
const num = String(idx + 1).padStart(2, '0');
const glow = ['#80c8f5', '#a78bfa', '#84e1bc', '#60a5fa', '#22d3ee'][idx % 5];
return (
<div key={f.q} className="grid grid-cols-1 md:grid-cols-[1fr_220px] gap-5 items-stretch">
<div className="relative rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md">
<div className="absolute inset-0 pointer-events-none opacity-70">
<div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-transparent" />
<div className="absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent" />
</div>
<div className="relative px-6 py-5">
<div className="text-base sm:text-lg font-bold text-[color:var(--text-primary)] mb-2">{f.q}</div>
<div className="text-sm text-[color:var(--text-muted)] leading-relaxed">{f.a}</div>
</div>
</div>
<div className="hidden md:flex items-center justify-end relative">
{/* Dot on spine */}
<span
className="absolute right-[132px] w-2 h-2 rounded-full"
style={{ backgroundColor: glow, boxShadow: `0 0 16px ${glow}aa` }}
/>
{/* Connector from dot to badge */}
<span
className="absolute right-[132px] h-px w-[44px]"
style={{
background: `linear-gradient(to left, ${glow}99, transparent)`,
}}
/>
<div className="flex items-center gap-3 pr-2">
<div className="relative w-[66px] h-[66px] hex-clip gradient-border-anim bg-[color:var(--glass-04)]">
<div className="absolute inset-[1.5px] hex-clip bg-[color:var(--global-surface-bg-80)] border border-[color:var(--border-05)] flex items-center justify-center">
<Icon className="w-6 h-6" style={{ color: glow }} />
</div>
</div>
<span
className="h-px w-[18px]"
style={{
background: `linear-gradient(to left, ${glow}66, rgba(255,255,255,0.06))`,
}}
/>
<div className="w-[62px] h-[62px] rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center text-[color:var(--text-primary)] font-bold text-lg">
{num}
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
</motion.section>
<motion.div {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
<FaqTimelineAccordion
title={content.faqTitle}
subtitle={content.faqSubtitle}
faqs={content.faqs}
contentDir={dir}
/>
</motion.div>
{/* Final CTA */}
<motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20 pb-24">

114
src/app/components/faq-timeline-accordion.tsx Normal file
View File

@@ -0,0 +1,114 @@
'use client';
import { useId, useState } from 'react';
import { BarChart3, Gauge, HandCoins, MousePointerClick, ShieldCheck } from 'lucide-react';
type FaqItem = { q: string; a: string };
export default function FaqTimelineAccordion(props: {
title: string;
subtitle?: string;
faqs: FaqItem[];
contentDir?: 'rtl' | 'ltr';
}) {
const { title, subtitle, faqs, contentDir = 'rtl' } = props;
const groupId = useId();
const [openIndex, setOpenIndex] = useState<number>(0);
return (
<section className="mt-14">
<div className="text-center mb-10">
<h2 className="text-2xl sm:text-3xl font-bold text-[color:var(--text-primary)]">
<span className="faq-title-bars">{title}</span>
</h2>
{subtitle ? <p className="mt-3 text-sm sm:text-base text-[color:var(--text-muted)]">{subtitle}</p> : null}
</div>
<div className="relative max-w-5xl mx-auto" dir="ltr">
<div className="hidden md:block absolute right-[132px] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#80c8f5]/35 to-transparent" />
<div className="space-y-4">
{faqs.map((f, idx) => {
const Icon = [HandCoins, Gauge, ShieldCheck, MousePointerClick, BarChart3][idx % 5];
const num = String(idx + 1).padStart(2, '0');
const glow = ['#80c8f5', '#a78bfa', '#84e1bc', '#60a5fa', '#22d3ee'][idx % 5];
const isOpen = openIndex === idx;
const panelId = `${groupId}-panel-${idx}`;
const buttonId = `${groupId}-btn-${idx}`;
return (
<div key={f.q} className="grid grid-cols-1 md:grid-cols-[1fr_220px] gap-5 items-stretch">
<div
className={[
'relative rounded-2xl overflow-hidden border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md',
isOpen ? 'ring-1 ring-white/10' : '',
].join(' ')}
dir={contentDir}
>
<div className="absolute inset-0 pointer-events-none opacity-70">
<div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-transparent" />
<div className="absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent" />
</div>
<button
id={buttonId}
type="button"
aria-controls={panelId}
aria-expanded={isOpen}
onClick={() => setOpenIndex((cur) => (cur === idx ? -1 : idx))}
className="relative w-full px-6 py-5 text-inherit text-center focus:outline-none"
>
<div className="text-base sm:text-lg font-bold text-[color:var(--text-primary)]">{f.q}</div>
<div
id={panelId}
role="region"
aria-labelledby={buttonId}
className={[
'grid transition-[grid-template-rows,opacity] duration-300 ease-out',
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70',
].join(' ')}
>
<div className="overflow-hidden">
<div className="mt-3 text-sm text-[color:var(--text-muted)] leading-relaxed">{f.a}</div>
</div>
</div>
</button>
</div>
<div className="hidden md:flex items-center justify-end relative">
<span
className="absolute right-[132px] w-2 h-2 rounded-full"
style={{ backgroundColor: glow, boxShadow: `0 0 16px ${glow}aa` }}
/>
<span
className="absolute right-[132px] h-px w-[44px]"
style={{ background: `linear-gradient(to left, ${glow}99, transparent)` }}
/>
<div className="flex items-center gap-3 pr-2">
<div className="relative w-[66px] h-[66px] hex-clip gradient-border-anim bg-[color:var(--glass-04)]">
<div className="absolute inset-[1.5px] hex-clip bg-[color:var(--global-surface-bg-80)] border border-[color:var(--border-05)] flex items-center justify-center">
<Icon className="w-6 h-6" style={{ color: glow }} />
</div>
</div>
<span
className="h-px w-[18px]"
style={{ background: `linear-gradient(to left, ${glow}66, rgba(255,255,255,0.06))` }}
/>
<div className="w-[62px] h-[62px] rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-md flex items-center justify-center text-[color:var(--text-primary)] font-bold text-lg">
{num}
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
</section>
);
}

4
src/app/components/header.tsx
View File

@@ -146,7 +146,7 @@ export default function Header() {
mkChild({
id: 'org-email-iran',
label: isFa ? 'ایمیل سازمانی ایران' : 'Business Email (Iran)',
href: `/${locale}/org-email/iran`,
href: `/${locale}/org-email-iran`,
icon: Mail,
bg: 'from-rose-500/20 to-pink-500/10',
ring: 'ring-rose-400/20',
@@ -154,7 +154,7 @@ export default function Header() {
mkChild({
id: 'org-email-international',
label: isFa ? 'ایمیل سازمانی بین‌الملل' : 'Business Email (International)',
href: `/${locale}/org-email`,
href: `/${locale}/org-email-international`,
icon: Mail,
bg: 'from-sky-500/20 to-indigo-500/10',
ring: 'ring-sky-400/20',

263
src/app/components/org-email-hero.tsx Normal file
View File

@@ -0,0 +1,263 @@
import {
ArrowLeft,
ArrowRight,
Check,
Globe,
Mail,
ShieldCheck,
Users,
} from 'lucide-react';
type Variant = 'iran' | 'international';
export default function OrgEmailHero({
locale,
variant,
}: {
locale: string;
variant: Variant;
}) {
const isFa = locale === 'fa';
const dir = isFa ? 'rtl' : 'ltr';
const badge2 =
variant === 'iran'
? isFa
? 'ایران'
: 'Iran'
: isFa
? 'بین‌الملل'
: 'International';
const title1 = isFa ? 'ایمیل سازمانی حرفه‌ای' : 'Professional business email';
const title2 = isFa ? 'برای تیم‌های مدرن' : 'for modern teams';
const subtitle = isFa
? 'با ایمیل سازمانی MugCloud، ارتباطات کاری خود را امن، سریع و حرفه‌ای مدیریت کنید.'
: 'With MugCloud business email, manage your work communications securely, fast, and professionally.';
const cta = isFa ? 'شروع کنید' : 'Get started';
const placeholder = 'name@yourbrand.com';
const chips = isFa
? [
{ t: 'امنیت پیشرفته', icon: ShieldCheck },
{ t: 'بدون تبلیغات', icon: Check },
{ t: 'دسترسی جهانی', icon: Globe },
]
: [
{ t: 'Advanced security', icon: ShieldCheck },
{ t: 'No ads', icon: Check },
{ t: 'Global access', icon: Globe },
];
return (
<section className="px-4 sm:px-6 pt-28 pb-14" dir={dir}>
<div className="max-w-6xl mx-auto">
<div className="relative overflow-hidden rounded-[2.5rem] border border-[color:var(--border-10)] bg-[#050b1a]">
<div className="pointer-events-none absolute inset-0">
<div className="absolute inset-0 bg-[radial-gradient(900px_520px_at_18%_30%,rgba(34,211,238,0.12),transparent_58%),radial-gradient(1000px_560px_at_70%_30%,rgba(167,139,250,0.12),transparent_62%),radial-gradient(900px_560px_at_50%_110%,rgba(16,185,129,0.10),transparent_62%)]" />
<div className="absolute inset-0 opacity-[0.08] [background-image:radial-gradient(rgba(255,255,255,0.75)_1px,transparent_1px)] [background-size:34px_34px]" />
</div>
<div className="relative p-6 sm:p-8 md:p-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
{/* Left illustration */}
<div className="lg:col-span-6">
<div className="relative mx-auto w-full max-w-[560px] aspect-[6/5]">
<div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(closest-side_at_40%_45%,rgba(34,211,238,0.10),transparent_60%),radial-gradient(closest-side_at_70%_40%,rgba(167,139,250,0.10),transparent_62%)]" />
<svg className="absolute inset-0 w-full h-full" viewBox="0 0 600 500" aria-hidden="true">
<defs>
<linearGradient id="mailOrbit" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stopColor="rgba(34,211,238,0.0)" />
<stop offset="0.5" stopColor="rgba(34,211,238,0.85)" />
<stop offset="1" stopColor="rgba(167,139,250,0.0)" />
</linearGradient>
<filter id="mailGlow">
<feGaussianBlur stdDeviation="2.5" result="b" />
<feMerge>
<feMergeNode in="b" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
d="M72 250 C 160 120, 380 110, 520 190"
fill="none"
stroke="url(#mailOrbit)"
strokeWidth="2"
strokeLinecap="round"
opacity="0.65"
filter="url(#mailGlow)"
/>
<path
d="M90 300 C 200 410, 420 410, 535 300"
fill="none"
stroke="url(#mailOrbit)"
strokeWidth="2"
strokeLinecap="round"
opacity="0.55"
filter="url(#mailGlow)"
/>
{[
{ cx: 124, cy: 318 },
{ cx: 505, cy: 210 },
{ cx: 452, cy: 360 },
].map((p, i) => (
<g key={i} filter="url(#mailGlow)">
<circle cx={p.cx} cy={p.cy} r="8" fill="rgba(34,211,238,0.10)" />
<circle cx={p.cx} cy={p.cy} r="3.6" fill="rgba(167,139,250,0.95)" />
</g>
))}
</svg>
<div className="absolute left-1/2 top-1/2 w-[76%] -translate-x-1/2 -translate-y-1/2 rounded-[1.6rem] border border-white/10 bg-[rgba(2,6,23,0.50)] backdrop-blur-xl shadow-[0_0_70px_rgba(59,130,246,0.14)]">
<div className="p-4">
<div className="h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center px-3 gap-2 text-xs text-slate-200/70">
<div className="w-6 h-6 rounded-lg border border-white/10 bg-[rgba(255,255,255,0.02)]" />
<span className="opacity-70">{isFa ? 'جستجو در ایمیل…' : 'Search mail…'}</span>
</div>
<div className="mt-4 grid grid-cols-[0.9fr_1.6fr] gap-3">
<div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
{['Inbox', 'Starred', 'Sent', 'Drafts', 'Spam', 'Trash'].map((t, i) => (
<div
key={t}
className={`flex items-center justify-between rounded-lg px-2 py-1.5 text-[11px] ${i === 0 ? 'bg-[rgba(34,211,238,0.10)] text-slate-100' : 'text-slate-200/70'
}`}
>
<span className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-[#22d3ee]" />
{t}
</span>
{i === 0 ? (
<span className="px-2 py-0.5 rounded-full border border-white/10 bg-[rgba(255,255,255,0.03)] text-[10px]">
24
</span>
) : null}
</div>
))}
</div>
<div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
{[
{ n: 'Ali Rezaei', s: 'Project update' },
{ n: 'Sara Mohammadi', s: 'Meeting notes' },
{ n: 'Design Team', s: 'New design system' },
{ n: 'Support', s: 'Ticket resolved' },
{ n: 'MugCloud', s: 'Welcome to your inbox' },
].map((r) => (
<div key={r.s} className="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
<div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(255,255,255,0.02)]" />
<div>
<div className="text-[11px] text-slate-100/90">{r.n}</div>
<div className="text-[10px] text-slate-200/55">{r.s}</div>
</div>
</div>
<div className="text-[10px] text-slate-200/45">10:30</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="absolute left-0 top-12 w-[220px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(59,130,246,0.12)]">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(34,211,238,0.08)] flex items-center justify-center">
<ShieldCheck className="w-5 h-5 text-[#22d3ee]" />
</div>
<div>
<div className="text-xs text-slate-100/90">Encrypted</div>
<div className="text-[11px] text-slate-200/55">End-to-End</div>
</div>
</div>
</div>
<div className="absolute left-6 bottom-8 w-[230px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(34,211,238,0.10)]">
<div className="text-xs text-slate-100/90">99.99%</div>
<div className="text-[11px] text-slate-200/55">{isFa ? 'نرخ تحویل' : 'Delivery rate'}</div>
<div className="mt-3 h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] relative overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(34,211,238,0.0),rgba(34,211,238,0.22),rgba(167,139,250,0.0))] opacity-70" />
<svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 30" aria-hidden="true">
<path
d="M0 26 C 20 22, 35 18, 52 18 C 70 18, 80 10, 100 6"
fill="none"
stroke="rgba(34,211,238,0.85)"
strokeWidth="2"
/>
</svg>
</div>
</div>
<div className="absolute right-0 bottom-20 w-[190px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(167,139,250,0.10)]">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(167,139,250,0.10)] flex items-center justify-center">
<Mail className="w-5 h-5 text-[#a78bfa]" />
</div>
<div>
<div className="text-xs text-slate-100/90">AI Spam</div>
<div className="text-[11px] text-slate-200/55">Protection</div>
</div>
</div>
</div>
<div className="absolute left-20 top-4 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
A
</div>
<div className="absolute left-4 top-60 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
S
</div>
</div>
</div>
{/* Right copy */}
<div className="lg:col-span-6">
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[rgba(255,255,255,0.04)] border border-white/10 text-xs text-slate-200/70">
<span>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
<span className="w-1 h-1 rounded-full bg-emerald-400/70" />
<span>{badge2}</span>
</div>
<div className="mt-6">
<div className="text-emerald-300/90 text-sm font-semibold">{isFa ? 'ایمیل سازمانی' : 'Business Email'}</div>
<h1 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-100">
{title1} <span className="text-emerald-300">{title2}</span>
</h1>
<p className="mt-5 text-sm sm:text-base text-slate-200/60 leading-relaxed max-w-xl">
{subtitle}
</p>
</div>
<div className="mt-7 flex flex-col sm:flex-row gap-3 items-stretch">
<div className="flex-1 rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-xl flex items-center px-4 gap-3 h-14">
<Mail className="w-5 h-5 text-slate-200/60" />
<input
type="email"
placeholder={placeholder}
className={`w-full bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-200/35 ${isFa ? 'text-right' : 'text-left'
}`}
/>
</div>
<button className="h-14 rounded-2xl px-6 bg-gradient-to-r from-emerald-400 to-sky-400 text-slate-950 font-bold flex items-center justify-center gap-2 shadow-[0_0_35px_rgba(34,211,238,0.15)]">
<span>{cta}</span>
{isFa ? <ArrowLeft className="w-5 h-5" /> : <ArrowRight className="w-5 h-5" />}
</button>
</div>
<div className={`mt-5 flex flex-wrap gap-6 text-xs text-slate-200/65 ${isFa ? 'justify-end' : 'justify-start'}`}>
{chips.map((c) => (
<div key={c.t} className="flex items-center gap-2">
<span className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-md flex items-center justify-center">
<c.icon className="w-4 h-4 text-emerald-300/90" />
</span>
<span>{c.t}</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

741
src/app/components/org-email-landing.tsx Normal file
View File

@@ -0,0 +1,741 @@
import {
ArrowLeft,
ArrowRight,
Check,
Globe,
Headset,
Mail,
ShieldCheck,
Users,
} from 'lucide-react';
type Variant = 'iran' | 'international';
export default function OrgEmailLanding({
locale,
variant,
}: {
locale: string;
variant: Variant;
}) {
const isFa = locale === 'fa';
const dir = isFa ? 'rtl' : 'ltr';
const copy = {
badge: isFa ? 'ایمیل سازمانی' : 'Business Email',
badge2:
variant === 'iran'
? isFa
? 'ایران'
: 'Iran'
: isFa
? 'بین‌الملل'
: 'International',
eyebrow: isFa ? 'ایمیل سازمانی' : 'Business Email',
title1: isFa ? 'ایمیل سازمانی حرفه‌ای' : 'Professional business email',
title2: isFa ? 'برای تیم‌های مدرن' : 'for modern teams',
subtitle: isFa
? 'با ایمیل سازمانی MugCloud، ارتباطات کاری خود را امن، سریع و حرفه‌ای مدیریت کنید.'
: 'With MugCloud business email, manage your work communications securely, fast, and professionally.',
cta: isFa ? 'شروع کنید' : 'Get started',
placeholder: isFa ? 'name@yourbrand.com' : 'name@yourbrand.com',
chips: isFa
? [
{ t: 'امنیت پیشرفته', icon: ShieldCheck },
{ t: 'بدون تبلیغات', icon: Check },
{ t: 'دسترسی جهانی', icon: Globe },
]
: [
{ t: 'Advanced security', icon: ShieldCheck },
{ t: 'No ads', icon: Check },
{ t: 'Global access', icon: Globe },
],
featureTitle: isFa ? 'ویژگی‌ها' : 'Features',
featureCards: isFa
? [
{
t: 'صندوق ورودی هوشمند',
d: 'دسته‌بندی خودکار و فیلترهای هوشمند برای مدیریت بهتر ایمیل‌ها',
icon: Mail,
},
{
t: 'محافظت پیشرفته',
d: 'ضد اسپم و ضد فیشینگ با تکنولوژی هوش مصنوعی',
icon: ShieldCheck,
},
{
t: 'همکاری تیمی',
d: 'تقویم مشترک، پوشه‌های تیمی و مدیریت دسترسی‌ها',
icon: Users,
},
{
t: 'همگام‌سازی کامل',
d: 'دسترسی به ایمیل‌ها از تمامی دستگاه‌ها در هر زمان و مکان',
icon: Globe,
},
]
: [
{
t: 'Smart inbox',
d: 'Auto categorization and smart filters to manage mail better',
icon: Mail,
},
{
t: 'Advanced protection',
d: 'Anti-spam and anti-phishing with AI-powered protection',
icon: ShieldCheck,
},
{
t: 'Team collaboration',
d: 'Shared calendar, team folders, and access management',
icon: Users,
},
{
t: 'Full sync',
d: 'Access your emails on all devices anytime, anywhere',
icon: Globe,
},
],
flowTitle: isFa ? 'ارتباط امن، سریع و همیشه در دسترس' : 'Secure, fast, always available',
flow: isFa
? [
{ t: 'شما', d: 'ارسال ایمیل', icon: Users },
{ t: 'رمزگذاری', d: 'امنیت انتها به انتها', icon: ShieldCheck },
{ t: 'ایمیل', d: 'صندوق هوشمند', icon: Mail },
{ t: 'زیرساخت مطمئن', d: 'سرورهای پرسرعت', icon: Globe },
{ t: 'تحویل موفق', d: 'دریافت در لحظه', icon: Check },
]
: [
{ t: 'You', d: 'Send mail', icon: Users },
{ t: 'Encryption', d: 'End-to-end security', icon: ShieldCheck },
{ t: 'Email', d: 'Smart inbox', icon: Mail },
{ t: 'Reliable infra', d: 'Fast servers', icon: Globe },
{ t: 'Delivered', d: 'Instant delivery', icon: Check },
],
plansTitle: isFa ? 'پلن‌های ایمیل سازمانی' : 'Business email plans',
plans: isFa
? [
{
tag: '',
name: 'Starter',
desc: 'برای تیم‌های کوچک',
price: '۱۹,۹۰۰',
items: ['۵ گیگابایت فضای ایمیل', 'ایمیل‌های نامحدود', 'پشتیبانی استاندارد'],
},
{
tag: 'محبوب‌ترین',
name: 'Business',
desc: 'برای تیم‌های در حال رشد',
price: '۴۹,۹۰۰',
items: ['۵۰ گیگابایت فضای ایمیل', 'ایمیل‌های نامحدود', 'پشتیبانی اولویت‌دار', 'ابزارهای همکاری تیمی'],
},
{
tag: '',
name: 'Enterprise',
desc: 'برای سازمان‌های بزرگ',
price: '۹۹,۹۰۰',
items: ['فضای نامحدود', 'ایمیل‌های نامحدود', 'پشتیبانی ۲۴/۷ اختصاصی', 'امنیت پیشرفته و سفارشی‌سازی'],
},
]
: [
{
tag: '',
name: 'Starter',
desc: 'For small teams',
price: '19.9',
items: ['5GB mailbox', 'Unlimited emails', 'Standard support'],
},
{
tag: 'Most popular',
name: 'Business',
desc: 'For growing teams',
price: '49.9',
items: ['50GB mailbox', 'Unlimited emails', 'Priority support', 'Team collaboration tools'],
},
{
tag: '',
name: 'Enterprise',
desc: 'For large orgs',
price: '99.9',
items: ['Unlimited storage', 'Unlimited emails', '24/7 dedicated support', 'Advanced security & customization'],
},
],
stats: isFa
? [
{ t: '+120K', d: 'کاربر فعال', icon: Users },
{ t: '99.99%', d: 'آپتایم سرویس', icon: ShieldCheck },
{ t: '24/7', d: 'پشتیبانی دائمی', icon: Headset },
{ t: '+20', d: 'لوکیشن سرور جهانی', icon: Globe },
]
: [
{ t: '+120K', d: 'Active users', icon: Users },
{ t: '99.99%', d: 'Service uptime', icon: ShieldCheck },
{ t: '24/7', d: 'Support', icon: Headset },
{ t: '+20', d: 'Global locations', icon: Globe },
],
testimonialsTitle: isFa ? 'سازمان‌های موفق، تجربه‌ای مطمئن' : 'Trusted by successful teams',
testimonials: isFa
? [
{
n: 'علی رضایی',
r: 'مدیر فناوری، دیجی‌کالا',
q: 'ایمیل سازمانی MugCloud ارتباطات تیم ما را کاملاً حرفه‌ای و امن کرده است.',
},
{
n: 'سارا محمدی',
r: 'مدیر مارکتینگ، تپسی',
q: 'سرعت بالا، امنیت فوق‌العاده و پشتیبانی عالی. همه‌چیز عالیه!',
},
{
n: 'آرمان فرهادی',
r: 'مدیرعامل، اسنپ!',
q: 'مدیریت کاربران و ابزارهای همکاری تیمی واقعاً بی‌نظیر است.',
},
]
: [
{
n: 'Ali Rezaei',
r: 'CTO, Example Co.',
q: 'MugCloud business email made our communication professional and secure.',
},
{
n: 'Sara Mohammadi',
r: 'Marketing Lead, Example',
q: 'High speed, great security, and responsive support. Solid experience.',
},
{
n: 'Arman Farhadi',
r: 'CEO, Example',
q: 'User management and team collaboration tools are excellent.',
},
],
} as const;
return (
<section className="px-4 sm:px-6 pt-28 pb-16" dir={dir}>
<div className="max-w-7xl mx-auto">
<div className="relative overflow-hidden rounded-[2.5rem] border border-[color:var(--border-10)] bg-[#050b1a]">
<div className="pointer-events-none absolute inset-0">
<div className="absolute inset-0 bg-[radial-gradient(900px_520px_at_18%_30%,rgba(34,211,238,0.12),transparent_58%),radial-gradient(1000px_560px_at_70%_30%,rgba(167,139,250,0.12),transparent_62%),radial-gradient(900px_560px_at_50%_110%,rgba(16,185,129,0.10),transparent_62%)]" />
<div className="absolute inset-0 opacity-[0.08] [background-image:radial-gradient(rgba(255,255,255,0.75)_1px,transparent_1px)] [background-size:34px_34px]" />
</div>
<div className="relative p-6 sm:p-8 md:p-10">
{/* Hero */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div className="lg:col-span-6 order-2">
<div className="relative mx-auto w-full max-w-[560px] aspect-[6/5]">
<div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(closest-side_at_40%_45%,rgba(34,211,238,0.10),transparent_60%),radial-gradient(closest-side_at_70%_40%,rgba(167,139,250,0.10),transparent_62%)]" />
{/* Orbit lines */}
<svg className="absolute inset-0 w-full h-full" viewBox="0 0 600 500" aria-hidden="true">
<defs>
<linearGradient id="mailOrbit" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stopColor="rgba(34,211,238,0.0)" />
<stop offset="0.5" stopColor="rgba(34,211,238,0.85)" />
<stop offset="1" stopColor="rgba(167,139,250,0.0)" />
</linearGradient>
<filter id="mailGlow">
<feGaussianBlur stdDeviation="2.5" result="b" />
<feMerge>
<feMergeNode in="b" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path
d="M72 250 C 160 120, 380 110, 520 190"
fill="none"
stroke="url(#mailOrbit)"
strokeWidth="2"
strokeLinecap="round"
opacity="0.65"
filter="url(#mailGlow)"
/>
<path
d="M90 300 C 200 410, 420 410, 535 300"
fill="none"
stroke="url(#mailOrbit)"
strokeWidth="2"
strokeLinecap="round"
opacity="0.55"
filter="url(#mailGlow)"
/>
{[
{ cx: 124, cy: 318 },
{ cx: 505, cy: 210 },
{ cx: 452, cy: 360 },
].map((p, i) => (
<g key={i} filter="url(#mailGlow)">
<circle cx={p.cx} cy={p.cy} r="8" fill="rgba(34,211,238,0.10)" />
<circle cx={p.cx} cy={p.cy} r="3.6" fill="rgba(167,139,250,0.95)" />
</g>
))}
</svg>
{/* Main mail UI mock */}
<div className="absolute left-1/2 top-1/2 w-[76%] -translate-x-1/2 -translate-y-1/2 rounded-[1.6rem] border border-white/10 bg-[rgba(2,6,23,0.50)] backdrop-blur-xl shadow-[0_0_70px_rgba(59,130,246,0.14)]">
<div className="p-4">
<div className="h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center px-3 gap-2 text-xs text-slate-200/70">
<div className="w-6 h-6 rounded-lg border border-white/10 bg-[rgba(255,255,255,0.02)]" />
<span className="opacity-70">{isFa ? 'جستجو در ایمیل…' : 'Search mail…'}</span>
</div>
<div className="mt-4 grid grid-cols-[0.9fr_1.6fr] gap-3">
<div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
{[
isFa ? 'Inbox' : 'Inbox',
isFa ? 'Starred' : 'Starred',
isFa ? 'Sent' : 'Sent',
isFa ? 'Drafts' : 'Drafts',
isFa ? 'Spam' : 'Spam',
isFa ? 'Trash' : 'Trash',
].map((t, i) => (
<div
key={t}
className={`flex items-center justify-between rounded-lg px-2 py-1.5 text-[11px] ${i === 0 ? 'bg-[rgba(34,211,238,0.10)] text-slate-100' : 'text-slate-200/70'
}`}
>
<span className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-[#22d3ee]" />
{t}
</span>
{i === 0 ? (
<span className="px-2 py-0.5 rounded-full border border-white/10 bg-[rgba(255,255,255,0.03)] text-[10px]">
24
</span>
) : null}
</div>
))}
</div>
<div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
{[
{ n: isFa ? 'Ali Rezaei' : 'Ali Rezaei', s: isFa ? 'Project update' : 'Project update' },
{ n: isFa ? 'Sara Mohammadi' : 'Sara Mohammadi', s: isFa ? 'Meeting notes' : 'Meeting notes' },
{ n: isFa ? 'Design Team' : 'Design Team', s: isFa ? 'New design system' : 'New design system' },
{ n: isFa ? 'Support' : 'Support', s: isFa ? 'Ticket resolved' : 'Ticket resolved' },
{ n: 'MugCloud', s: isFa ? 'Welcome to your inbox' : 'Welcome to your inbox' },
].map((r) => (
<div key={r.s} className="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
<div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(255,255,255,0.02)]" />
<div>
<div className="text-[11px] text-slate-100/90">{r.n}</div>
<div className="text-[10px] text-slate-200/55">{r.s}</div>
</div>
</div>
<div className="text-[10px] text-slate-200/45">10:30</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Floating info cards */}
<div className="absolute left-0 top-12 w-[220px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(59,130,246,0.12)]">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(34,211,238,0.08)] flex items-center justify-center">
<ShieldCheck className="w-5 h-5 text-[#22d3ee]" />
</div>
<div>
<div className="text-xs text-slate-100/90">Encrypted</div>
<div className="text-[11px] text-slate-200/55">End-to-End</div>
</div>
</div>
</div>
<div className="absolute left-6 bottom-8 w-[230px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(34,211,238,0.10)]">
<div className="text-xs text-slate-100/90">99.99%</div>
<div className="text-[11px] text-slate-200/55">{isFa ? 'نرخ تحویل' : 'Delivery rate'}</div>
<div className="mt-3 h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] relative overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(34,211,238,0.0),rgba(34,211,238,0.22),rgba(167,139,250,0.0))] opacity-70" />
<svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 30" aria-hidden="true">
<path
d="M0 26 C 20 22, 35 18, 52 18 C 70 18, 80 10, 100 6"
fill="none"
stroke="rgba(34,211,238,0.85)"
strokeWidth="2"
/>
</svg>
</div>
</div>
<div className="absolute right-0 bottom-20 w-[190px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(167,139,250,0.10)]">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(167,139,250,0.10)] flex items-center justify-center">
<Mail className="w-5 h-5 text-[#a78bfa]" />
</div>
<div>
<div className="text-xs text-slate-100/90">AI Spam</div>
<div className="text-[11px] text-slate-200/55">Protection</div>
</div>
</div>
</div>
{/* Small floating avatars */}
<div className="absolute left-20 top-4 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
A
</div>
<div className="absolute left-4 top-60 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
S
</div>
</div>
</div>
<div className="lg:col-span-6" dir={dir}>
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[rgba(255,255,255,0.04)] border border-white/10 text-xs text-slate-200/70">
<span>{copy.badge}</span>
<span className="w-1 h-1 rounded-full bg-emerald-400/70" />
<span>{copy.badge2}</span>
</div>
<div className="mt-6">
<div className="text-emerald-300/90 text-sm font-semibold">{copy.eyebrow}</div>
<h1 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-100">
{copy.title1}{' '}
<span className="text-emerald-300">{copy.title2}</span>
</h1>
<p className="mt-5 text-sm sm:text-base text-slate-200/60 leading-relaxed max-w-xl">
{copy.subtitle}
</p>
</div>
<div className="mt-7 flex flex-col sm:flex-row gap-3 items-stretch">
<div className="flex-1 rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-xl flex items-center px-4 gap-3 h-14">
<Mail className="w-5 h-5 text-slate-200/60" />
<input
type="email"
placeholder={copy.placeholder}
className={`w-full bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-200/35 ${isFa ? 'text-right' : 'text-left'
}`}
/>
</div>
<button className="h-14 rounded-2xl px-6 bg-gradient-to-r from-emerald-400 to-sky-400 text-slate-950 font-bold flex items-center justify-center gap-2 shadow-[0_0_35px_rgba(34,211,238,0.15)]">
<span>{copy.cta}</span>
{isFa ? <ArrowLeft className="w-5 h-5" /> : <ArrowRight className="w-5 h-5" />}
</button>
</div>
<div className={`mt-5 flex flex-wrap gap-4 text-xs text-slate-200/65 ${isFa ? 'justify-end' : 'justify-start'}`}>
{copy.chips.map((c) => (
<div key={c.t} className="flex items-center gap-2">
<span className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-md flex items-center justify-center">
<c.icon className="w-4 h-4 text-emerald-300/90" />
</span>
<span>{c.t}</span>
</div>
))}
</div>
</div>
</div>
{/* Feature cards */}
<div className="mt-10 rounded-[2.2rem] border border-white/10 bg-[rgba(2,6,23,0.28)] overflow-hidden shadow-[0_0_80px_rgba(0,0,0,0.25)]">
<svg className="absolute w-0 h-0" aria-hidden="true">
<defs>
<linearGradient id="emailFeatGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stopColor="#22d3ee" />
<stop offset="1" stopColor="#a78bfa" />
</linearGradient>
</defs>
</svg>
<div
className={`grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x ${isFa ? 'md:divide-x' : ''
} divide-white/10`}
>
{copy.featureCards.map((f) => (
<div key={f.t} className="px-6 py-9 md:px-8 md:py-10 flex flex-col items-center text-center">
<div className="h-14 w-14 flex items-center justify-center">
<f.icon
className="w-12 h-12 drop-shadow-[0_0_18px_rgba(34,211,238,0.16)]"
color="url(#emailFeatGrad)"
strokeWidth={1.8}
/>
</div>
<div className="mt-5 font-extrabold text-slate-100">{f.t}</div>
<div className="mt-3 text-sm text-slate-200/55 leading-relaxed max-w-[240px]">{f.d}</div>
</div>
))}
</div>
</div>
{/* Flow */}
<div className="mt-10 rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden">
<div className="p-7 md:p-8">
<div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.flowTitle}</div>
<div className="mt-8 relative" dir="ltr">
{/* Desktop: pixel-perfect timeline (matches design) */}
<div className="hidden md:block relative h-[320px]">
{/* main line */}
<div className="absolute left-10 right-10 top-[45%] -translate-y-1/2 h-px bg-[linear-gradient(90deg,rgba(34,211,238,0.0),rgba(34,211,238,0.85),rgba(167,139,250,0.95),rgba(34,211,238,0.85),rgba(34,211,238,0.0))]" />
{/* dots */}
{[
{ x: '18%', c: 'bg-[#22d3ee]' },
{ x: '25%', c: 'bg-[#22d3ee]' },
{ x: '32%', c: 'bg-[#22d3ee]' },
{ x: '40%', c: 'bg-[#22d3ee]' },
{ x: '44%', c: 'bg-[#a78bfa]' },
{ x: '48%', c: 'bg-[#a78bfa]' },
{ x: '52%', c: 'bg-[#a78bfa]' },
{ x: '56%', c: 'bg-[#a78bfa]' },
{ x: '64%', c: 'bg-[#22d3ee]' },
{ x: '71%', c: 'bg-[#22d3ee]' },
{ x: '78%', c: 'bg-[#22d3ee]' },
{ x: '85%', c: 'bg-[#22d3ee]' },
].map((d, i) => (
<div
key={i}
className={`absolute top-[45%] -translate-y-1/2 ${d.c} rounded-full shadow-[0_0_16px_rgba(34,211,238,0.35)]`}
style={{ left: d.x, width: 8, height: 8 }}
/>
))}
{/* nodes */}
<div className="absolute inset-x-6 top-[45%] -translate-y-1/2 flex items-start justify-between">
{/* node 1 */}
<div className="flex flex-col items-center text-center w-[170px]">
<div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(59,130,246,0.16)] flex items-center justify-center">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
<Users className="relative w-12 h-12 text-[#60a5fa] drop-shadow-[0_0_18px_rgba(96,165,250,0.25)]" />
</div>
<div className="mt-4 font-bold text-slate-100">{copy.flow[0]?.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{copy.flow[0]?.d}</div>
</div>
{/* node 2 */}
<div className="flex flex-col items-center text-center w-[170px]">
<div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(59,130,246,0.16)] flex items-center justify-center">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
<ShieldCheck className="relative w-12 h-12 text-[#22d3ee] drop-shadow-[0_0_18px_rgba(34,211,238,0.25)]" />
</div>
<div className="mt-4 font-bold text-slate-100">{copy.flow[1]?.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{copy.flow[1]?.d}</div>
</div>
{/* node 3 (center) */}
<div className="flex flex-col items-center text-center w-[200px]">
<div className="relative w-[170px] h-[170px] rounded-full border border-[#2748ff]/40 bg-[rgba(2,6,23,0.30)] backdrop-blur-md shadow-[0_0_95px_rgba(34,211,238,0.20)] flex items-center justify-center">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(39,72,255,0.18),transparent_62%)]" />
<div className="absolute inset-[-28px] rounded-full border border-[#2748ff]/20" />
<div className="absolute inset-[-54px] rounded-full border border-[#2748ff]/10" />
<div className="absolute inset-[-78px] rounded-full border border-[#2748ff]/10 opacity-50" />
<div className="absolute inset-[10px] rounded-full border border-[#22d3ee]/35" />
<div className="absolute inset-[22px] rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.22),transparent_62%)]" />
<svg
viewBox="0 0 200 200"
className="relative w-[130px] h-[130px] drop-shadow-[0_0_34px_rgba(34,211,238,0.26)]"
aria-hidden="true"
>
<defs>
<linearGradient id="flowCenterGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stopColor="#22d3ee" />
<stop offset="1" stopColor="#a78bfa" />
</linearGradient>
<filter id="flowCenterGlow">
<feGaussianBlur stdDeviation="2.4" result="b" />
<feMerge>
<feMergeNode in="b" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<circle cx="100" cy="100" r="64" fill="rgba(2,6,23,0.22)" stroke="rgba(255,255,255,0.10)" />
<path
d="M58 76 H142 C148 76 152 80 152 86 V122 C152 128 148 132 142 132 H58 C52 132 48 128 48 122 V86 C48 80 52 76 58 76 Z"
fill="rgba(2,6,23,0.10)"
stroke="url(#flowCenterGrad)"
strokeWidth="4"
filter="url(#flowCenterGlow)"
strokeLinejoin="round"
/>
<path
d="M52 84 L100 118 L148 84"
fill="none"
stroke="url(#flowCenterGrad)"
strokeWidth="4"
filter="url(#flowCenterGlow)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M70 116 L52 130"
fill="none"
stroke="rgba(34,211,238,0.75)"
strokeWidth="3.2"
strokeLinecap="round"
opacity="0.9"
/>
<path
d="M130 116 L148 130"
fill="none"
stroke="rgba(167,139,250,0.65)"
strokeWidth="3.2"
strokeLinecap="round"
opacity="0.9"
/>
</svg>
</div>
<div className="mt-4 font-bold text-slate-100">{copy.flow[2]?.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{copy.flow[2]?.d}</div>
</div>
{/* node 4 */}
<div className="flex flex-col items-center text-center w-[170px]">
<div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(167,139,250,0.12)] flex items-center justify-center">
{/* <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(167,139,250,0.08),transparent_62%)]" /> */}
<Globe className="relative w-12 h-12 text-[#a78bfa] drop-shadow-[0_0_18px_rgba(167,139,250,0.20)]" />
</div>
<div className="mt-4 font-bold text-slate-100">{copy.flow[3]?.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{copy.flow[3]?.d}</div>
</div>
{/* node 5 */}
<div className="flex flex-col items-center text-center w-[170px]">
<div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(34,211,238,0.12)] flex items-center justify-center">
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
<Check className="relative w-12 h-12 text-[#22d3ee] drop-shadow-[0_0_18px_rgba(34,211,238,0.22)]" />
</div>
<div className="mt-4 font-bold text-slate-100">{copy.flow[4]?.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{copy.flow[4]?.d}</div>
</div>
</div>
</div>
{/* Mobile: keep readable stack */}
<div className="grid grid-cols-1 md:hidden gap-7 items-center">
{copy.flow.map((s, idx) => (
<div key={s.t} className="flex flex-col items-center text-center">
<div className="w-20 h-20 rounded-full border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-md flex items-center justify-center shadow-[0_0_50px_rgba(59,130,246,0.12)]">
<div
className={`w-14 h-14 rounded-full border border-white/10 flex items-center justify-center ${idx === 2
? 'bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.20),transparent_55%)]'
: 'bg-[rgba(255,255,255,0.03)]'
}`}
>
<s.icon className="w-7 h-7 text-emerald-300/95" />
</div>
</div>
<div className="mt-3 font-bold text-slate-100">{s.t}</div>
<div className="mt-1 text-xs text-slate-200/55">{s.d}</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Plans */}
<div className="mt-10">
<div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.plansTitle}</div>
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
{copy.plans.map((p) => (
<div
key={p.name}
className={`relative rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden p-7 ${p.tag ? 'ring-1 ring-emerald-400/25 shadow-[0_0_60px_rgba(16,185,129,0.08)]' : ''
}`}
>
{p.tag ? (
<div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs border border-white/10 bg-[rgba(16,185,129,0.14)] text-emerald-200/90">
{p.tag}
</div>
) : null}
<div className="flex items-start justify-between gap-4">
<div>
<div className="text-lg font-extrabold text-slate-100">{p.name}</div>
<div className="mt-1 text-sm text-slate-200/55">{p.desc}</div>
</div>
<div className="w-14 h-14 rounded-2xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
<Mail className="w-7 h-7 text-[#a78bfa]" />
</div>
</div>
<div className="mt-6">
<div className="text-sm text-slate-200/55">{isFa ? 'ماهانه' : 'Monthly'}</div>
<div className="mt-2 flex items-end gap-2">
<div className="text-3xl font-extrabold text-slate-100">{p.price}</div>
<div className="text-sm text-slate-200/55">{isFa ? 'تومان' : 'USD'}</div>
</div>
</div>
<div className="mt-6 space-y-3">
{p.items.map((it) => (
<div key={it} className="flex items-start gap-2 text-sm text-slate-200/60">
<span className="mt-1 w-5 h-5 rounded-full border border-white/10 bg-[rgba(16,185,129,0.10)] flex items-center justify-center">
<Check className="w-3.5 h-3.5 text-emerald-300" />
</span>
<span>{it}</span>
</div>
))}
</div>
</div>
))}
</div>
</div>
{/* Stats strip */}
<div className="mt-10 rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden">
<div className={`grid grid-cols-2 md:grid-cols-4 divide-x ${isFa ? 'divide-x-reverse' : ''} divide-white/10`}>
{copy.stats.map((s) => (
<div key={s.t} className="p-6 flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
<s.icon className="w-6 h-6 text-[#22d3ee]" />
</div>
<div>
<div className="text-lg font-extrabold text-slate-100">{s.t}</div>
<div className="text-xs text-slate-200/55">{s.d}</div>
</div>
</div>
))}
</div>
</div>
{/* Testimonials */}
<div className="mt-10 pb-2">
<div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.testimonialsTitle}</div>
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
{copy.testimonials.map((t, idx) => (
<div key={t.n} className="rounded-[1.8rem] border border-white/10 bg-[rgba(2,6,23,0.35)] p-7">
<div className="flex items-start justify-between">
<div className="text-emerald-300 font-extrabold text-2xl leading-none">99</div>
<div
className={`w-12 h-12 rounded-full border border-white/10 overflow-hidden flex items-center justify-center font-bold text-slate-100/80 ${idx === 0
? 'bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.28),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
: idx === 1
? 'bg-[radial-gradient(circle_at_30%_30%,rgba(16,185,129,0.26),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
: 'bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.28),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
}`}
>
{idx === 0 ? 'AR' : idx === 1 ? 'SM' : 'AF'}
</div>
</div>
<div className={`mt-4 text-sm text-slate-200/70 leading-relaxed ${isFa ? 'text-right' : 'text-left'}`}>{t.q}</div>
<div className="mt-6 flex items-center justify-between">
<div>
<div className="text-sm font-bold text-slate-100">{t.n}</div>
<div className="text-xs text-slate-200/55">{t.r}</div>
</div>
<div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
<Mail className="w-5 h-5 text-[#a78bfa]" />
</div>
</div>
</div>
))}
</div>
<div className="mt-5 flex items-center justify-center gap-2">
{[0, 1, 2].map((i) => (
<div
key={i}
className={`h-2 w-2 rounded-full ${i === 0 ? 'bg-emerald-300' : 'bg-white/15'}`}
/>
))}
</div>
</div>
</div>
</div>
</div>
</section>
);
}