254 lines
12 KiB
TypeScript
254 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { ArrowLeft, ArrowRight, ShieldCheck, SlidersHorizontal, UserCircle2, Lock, Smartphone, KeyRound, MailCheck, LogIn, Layers } from "lucide-react";
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { useLoginModal } from "@/components/login-modal-provider";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { Reveal } from "@/components/ui/reveal";
|
|
import { ScrollProgress } from "@/components/ui/scroll-progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function Home() {
|
|
const { t, lang } = useLanguage();
|
|
const { open: openLogin } = useLoginModal();
|
|
const Arrow = lang === "fa" ? ArrowLeft : ArrowRight;
|
|
const [heroIn, setHeroIn] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const t = setTimeout(() => setHeroIn(true), 80);
|
|
return () => clearTimeout(t);
|
|
}, []);
|
|
|
|
const CHIPS = [
|
|
{ icon: ShieldCheck, fa: "احراز هویت امن", en: "Secure auth" },
|
|
{ icon: MailCheck, fa: "تأیید ایمیل", en: "Email verified" },
|
|
{ icon: LogIn, fa: "ورود بیدردسر", en: "Frictionless login" },
|
|
{ icon: Layers, fa: "احراز چند مرحلهای", en: "Multi-step auth" },
|
|
];
|
|
|
|
return (
|
|
<main className="bg-white dark:bg-white">
|
|
<ScrollProgress />
|
|
|
|
<section className="mx-auto max-w-4xl px-6 pb-14 pt-16 text-center sm:pt-24 overflow-hidden">
|
|
<div
|
|
className="inline-flex items-center rounded-full border border-violet-100 bg-[#f4f2ff] px-3.5 py-1.5 text-xs font-medium text-[#6d5ef0]"
|
|
style={{
|
|
opacity: heroIn ? 1 : 0,
|
|
transform: heroIn ? "translateY(0)" : "translateY(10px)",
|
|
transition: "opacity 500ms ease 0ms, transform 500ms cubic-bezier(0.16,1,0.3,1) 0ms",
|
|
}}
|
|
>
|
|
{t.hero.badge}
|
|
</div>
|
|
<h1
|
|
className="mt-5 text-4xl font-extrabold leading-[1.15] tracking-tight text-[#1c1d3a] sm:text-[52px]"
|
|
style={{
|
|
opacity: heroIn ? 1 : 0,
|
|
transform: heroIn ? "translateY(0)" : "translateY(16px)",
|
|
transition: "opacity 600ms ease 120ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 120ms",
|
|
}}
|
|
>
|
|
{t.hero.title}
|
|
</h1>
|
|
<p
|
|
className="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-slate-500"
|
|
style={{
|
|
opacity: heroIn ? 1 : 0,
|
|
transform: heroIn ? "translateY(0)" : "translateY(14px)",
|
|
transition: "opacity 600ms ease 240ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 240ms",
|
|
}}
|
|
>
|
|
{t.hero.subtitle}
|
|
</p>
|
|
<div
|
|
className="mt-8 flex flex-wrap items-center justify-center gap-3"
|
|
style={{
|
|
opacity: heroIn ? 1 : 0,
|
|
transform: heroIn ? "translateY(0)" : "translateY(12px)",
|
|
transition: "opacity 600ms ease 360ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 360ms",
|
|
}}
|
|
>
|
|
<button onClick={openLogin} className={cn(buttonVariants({ size: "lg" }), "rounded-full px-8 bg-[#6d5ef0] hover:bg-[#5747d8] text-white shadow-[0_8px_24px_rgba(109,94,240,0.35)] hover:scale-[1.02] transition-transform")}>
|
|
{t.hero.ctaPrimary}
|
|
<Arrow className="h-4 w-4" />
|
|
</button>
|
|
<Link
|
|
href="/account"
|
|
className="inline-flex h-12 items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:scale-[1.02] transition-transform"
|
|
>
|
|
{t.hero.ctaSecondary}
|
|
</Link>
|
|
</div>
|
|
|
|
<div
|
|
className="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4"
|
|
style={{ opacity: heroIn ? 1 : 0, transition: "opacity 700ms ease 520ms" }}
|
|
>
|
|
{CHIPS.map((c) => (
|
|
<span key={c.fa} className="inline-flex items-center gap-2 text-sm font-medium text-slate-600">
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f4f2ff] text-[#6d5ef0]">
|
|
<c.icon className="h-[18px] w-[18px]" />
|
|
</span>
|
|
{lang === "fa" ? c.fa : c.en}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="benefits" className="bg-[#f8f9fa] py-16 sm:py-20">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<Reveal>
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.benefits.eyebrow}</div>
|
|
<h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.benefits.title}</h2>
|
|
<p className="mt-3 text-[#5f6368]">{t.benefits.subtitle}</p>
|
|
</div>
|
|
</Reveal>
|
|
<div className="mt-10 grid gap-5 md:grid-cols-3">
|
|
{t.benefits.points.map((p, i) => (
|
|
<Reveal key={p.title} delay={i * 90}>
|
|
<GoogleCard
|
|
title={p.title}
|
|
body={p.body}
|
|
icon={i === 0 ? UserCircle2 : i === 1 ? SlidersHorizontal : ShieldCheck}
|
|
color={i === 0 ? "bg-[#ece8fd] text-[#6d5ef0]" : i === 1 ? "bg-[#fef7e0] text-[#e37400]" : "bg-[#e6f4ea] text-[#137333]"}
|
|
/>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ecosystem" className="mx-auto max-w-6xl px-6 py-16 sm:py-20">
|
|
<Reveal>
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.ecosystem.eyebrow}</div>
|
|
<h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.ecosystem.title}</h2>
|
|
<p className="mt-3 text-[#5f6368]">{t.ecosystem.subtitle}</p>
|
|
</div>
|
|
</Reveal>
|
|
<div className="mx-auto mt-10 grid max-w-4xl gap-4 sm:grid-cols-3">
|
|
<Reveal delay={0}>
|
|
<EcosysCard name="Bermooda" desc={lang === "fa" ? "مدیریت کسبوکار" : "Business management"} color="border-[#6d5ef0]/20 bg-[#ece8fd]" letter="B" />
|
|
</Reveal>
|
|
<Reveal delay={90}>
|
|
<EcosysCard name="Hamsoo" desc={lang === "fa" ? "شبکه استعدادها" : "Talent network"} color="border-[#34a853]/20 bg-[#e6f4ea]" letter="H" />
|
|
</Reveal>
|
|
<Reveal delay={180}>
|
|
<EcosysCard name={lang === "fa" ? "محصول بعدی" : "Next product"} desc={t.ecosystem.futureNote} color="border-slate-200 bg-white" letter="+" dashed />
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="capabilities" className="bg-[#f8f9fa] py-16 sm:py-20">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<Reveal>
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.capabilities.eyebrow}</div>
|
|
<h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.capabilities.title}</h2>
|
|
<p className="mt-3 text-[#5f6368]">{t.capabilities.subtitle}</p>
|
|
</div>
|
|
</Reveal>
|
|
<div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{t.capabilities.items.map((it, idx) => (
|
|
<Reveal key={it.title} delay={idx * 70}>
|
|
<GoogleCard
|
|
title={it.title}
|
|
body={it.body}
|
|
icon={it.icon === "shield" ? ShieldCheck : it.icon === "devices" ? Smartphone : it.icon === "privacy" ? Lock : it.icon === "recovery" ? KeyRound : UserCircle2}
|
|
color="bg-white text-[#6d5ef0] border border-slate-200"
|
|
/>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="safety" className="mx-auto max-w-6xl px-6 py-16 sm:py-20">
|
|
<div className="grid items-center gap-10 lg:grid-cols-2">
|
|
<Reveal>
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-widest text-[#6d5ef0]">{t.safety.eyebrow}</div>
|
|
<h2 className="mt-2 text-3xl font-bold tracking-tight text-[#202124] sm:text-4xl">{t.safety.title}</h2>
|
|
<p className="mt-3 text-[#5f6368]">{t.safety.subtitle}</p>
|
|
<div className="mt-6 space-y-4">
|
|
{t.safety.points.map((p, i) => (
|
|
<Reveal key={p.title} delay={i * 80}>
|
|
<div className="flex gap-3 rounded-2xl border border-slate-200 bg-white p-4 hover:shadow-sm transition-shadow">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#e6f4ea] text-[#137333]">
|
|
<ShieldCheck className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-semibold text-[#202124]">{p.title}</div>
|
|
<div className="mt-1 text-sm leading-6 text-[#5f6368]">{p.body}</div>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={160}>
|
|
<div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_8px_40px_rgba(0,0,0,0.06)]">
|
|
<div className="text-sm font-semibold text-[#202124]">{t.preview.title}</div>
|
|
<div className="mt-1 text-sm text-[#5f6368]">{t.preview.subtitle}</div>
|
|
<div className="mt-5 grid grid-cols-2 gap-3">
|
|
{t.preview.cards.map((c, i) => (
|
|
<Reveal key={c.label} delay={i * 70}>
|
|
<div className="rounded-2xl bg-[#f8f9fa] p-4 text-center">
|
|
<div className="text-xl font-bold text-[#202124]">{c.value}</div>
|
|
<div className="mt-1 text-xs text-[#5f6368]">{c.label}</div>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
<Link href="/account" className={cn(buttonVariants({ size: "lg" }), "mt-6 w-full rounded-full bg-[#6d5ef0] hover:bg-[#5747d8] text-white")}>
|
|
{t.preview.cta}
|
|
<Arrow className="h-4 w-4" />
|
|
</Link>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
<Reveal>
|
|
<section className="bg-[#6d5ef0] py-14">
|
|
<div className="mx-auto max-w-6xl px-6 text-center text-white">
|
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{t.cta.title}</h2>
|
|
<p className="mx-auto mt-3 max-w-2xl text-white/90">{t.cta.subtitle}</p>
|
|
<button onClick={openLogin} className="mt-6 inline-flex h-12 items-center justify-center gap-2 rounded-full bg-white px-8 text-sm font-semibold text-[#6d5ef0] hover:bg-slate-50 hover:scale-[1.02] transition-transform">
|
|
{t.cta.button}
|
|
<Arrow className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</Reveal>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function GoogleCard({ title, body, icon: Icon, color }: { title: string; body: string; icon: any; color: string }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-slate-200 bg-white p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-300">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-full ${color}`}>
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<h3 className="mt-4 text-base font-semibold text-[#202124]">{title}</h3>
|
|
<p className="mt-2 text-sm leading-6 text-[#5f6368]">{body}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EcosysCard({ name, desc, color, letter, dashed }: { name: string; desc: string; color: string; letter: string; dashed?: boolean }) {
|
|
return (
|
|
<div className={`rounded-[24px] border p-6 text-center hover:shadow-md hover:-translate-y-1 transition-all duration-300 ${color} ${dashed ? "border-dashed" : ""}`}>
|
|
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-lg font-bold text-[#202124] shadow-sm">{letter}</div>
|
|
<div className="mt-3 text-sm font-semibold text-[#202124]">{name}</div>
|
|
<div className="mt-1 text-xs text-[#5f6368]">{desc}</div>
|
|
</div>
|
|
);
|
|
}
|