feat: revue de code, doc CODE_REVIEW, forfaits 2026, traduction LLM, providers avec modèle
Made-with: Cursor
This commit is contained in:
Sepehr Ramezani
420
frontend/src/components/landing/landing-page.tsx
Normal file
420
frontend/src/components/landing/landing-page.tsx
Normal file
@@ -0,0 +1,420 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { LanguageSwitcher } from "@/components/ui/language-switcher";
|
||||
import {
|
||||
Table2,
|
||||
FileText,
|
||||
Presentation,
|
||||
Bot,
|
||||
Lock,
|
||||
Zap,
|
||||
Check,
|
||||
PlayCircle,
|
||||
ShieldCheck,
|
||||
Clock,
|
||||
Languages,
|
||||
} from "lucide-react";
|
||||
|
||||
export function LandingPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0A0A0B] text-white font-sans">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 w-full border-b border-[#27272A] bg-[#0A0A0B]/80 backdrop-blur-md">
|
||||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-center rounded-lg bg-primary/10 p-1.5">
|
||||
<Languages className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<span className="text-white text-lg font-bold tracking-tight">
|
||||
Office Translator
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
className="text-slate-300 hover:text-white text-sm font-medium transition-colors"
|
||||
href="#features"
|
||||
>
|
||||
{t("nav.features")}
|
||||
</a>
|
||||
<a
|
||||
className="text-slate-300 hover:text-white text-sm font-medium transition-colors"
|
||||
href="#pricing"
|
||||
>
|
||||
{t("nav.pricing")}
|
||||
</a>
|
||||
<a
|
||||
className="text-slate-300 hover:text-white text-sm font-medium transition-colors"
|
||||
href="#enterprise"
|
||||
>
|
||||
{t("nav.enterprise")}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<LanguageSwitcher variant="button" />
|
||||
<a
|
||||
className="hidden sm:inline-flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-slate-300 transition-colors hover:text-white"
|
||||
href="/auth/login"
|
||||
>
|
||||
{t("common.login")}
|
||||
</a>
|
||||
<Button
|
||||
asChild
|
||||
className="bg-primary text-[#0A0A0B] font-bold hover:bg-primary/90"
|
||||
>
|
||||
<Link href="/auth/register">{t("common.signup")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-20 pb-32 overflow-hidden">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-[#0A0A0B] to-[#0A0A0B]" />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
|
||||
{/* Hero Text */}
|
||||
<div className="flex-1 text-center lg:text-left space-y-8">
|
||||
<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl xl:text-7xl">
|
||||
{t("hero.title")}
|
||||
<br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
|
||||
{t("hero.titleHighlight")}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto lg:mx-0 max-w-2xl text-lg text-slate-400">
|
||||
{t("hero.subtitle")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-primary text-[#0A0A0B] font-bold hover:bg-primary/90"
|
||||
>
|
||||
<Link href="/auth/register">{t("hero.cta")}</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-[#27272A] bg-[#141416] text-white hover:bg-[#27272A] gap-2"
|
||||
>
|
||||
<PlayCircle className="h-5 w-5" />
|
||||
{t("hero.demoCta")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div className="pt-8 flex flex-wrap justify-center lg:justify-start gap-6">
|
||||
<div className="flex items-center gap-2 text-sm text-slate-400">
|
||||
<ShieldCheck className="h-5 w-5 text-primary" />
|
||||
<span>{t("hero.badge1")}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-slate-400">
|
||||
<Clock className="h-5 w-5 text-primary" />
|
||||
<span>{t("hero.badge2")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Visual */}
|
||||
<div className="flex-1 w-full max-w-lg lg:max-w-none relative">
|
||||
<div className="relative rounded-xl bg-[#141416] border border-[#27272A] p-2 shadow-2xl">
|
||||
<div className="absolute -inset-0.5 bg-gradient-to-br from-primary/30 to-transparent opacity-30 blur-lg rounded-xl" />
|
||||
<div className="relative aspect-[16/10] overflow-hidden rounded-lg bg-[#0A0A0B]">
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="w-full h-full flex">
|
||||
<div className="w-1/2 border-r border-[#27272A] relative p-4">
|
||||
<div className="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
|
||||
{t("landing.originalLabel")} (EN)
|
||||
</div>
|
||||
<div className="mt-8 space-y-2">
|
||||
<div className="h-3 bg-slate-700 rounded w-3/4" />
|
||||
<div className="h-3 bg-slate-700 rounded w-1/2" />
|
||||
<div className="h-3 bg-slate-700 rounded w-5/6" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2 relative p-4">
|
||||
<div className="absolute top-2 left-2 bg-primary text-[#0A0A0B] font-bold text-xs px-2 py-1 rounded">
|
||||
{t("landing.translatedLabel")} (FR)
|
||||
</div>
|
||||
<div className="mt-8 space-y-2">
|
||||
<div className="h-3 bg-primary/30 rounded w-3/4" />
|
||||
<div className="h-3 bg-primary/30 rounded w-1/2" />
|
||||
<div className="h-3 bg-primary/30 rounded w-5/6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="py-24 bg-[#0A0A0B] relative" id="features">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl mb-4">
|
||||
{t("features.title")}
|
||||
</h2>
|
||||
<p className="text-lg text-slate-400 max-w-2xl mx-auto">
|
||||
{t("features.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Feature 1 - Excel */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Table2 className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.excel.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">{t("features.excel.description")}</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2 - Word */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<FileText className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.word.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">{t("features.word.description")}</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3 - PowerPoint */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Presentation className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.powerpoint.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">
|
||||
{t("features.powerpoint.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4 - AI */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Bot className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.ai.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">{t("features.ai.description")}</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 5 - Privacy */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Lock className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.privacy.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">{t("features.privacy.description")}</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 6 - Speed */}
|
||||
<div className="group relative rounded-2xl border border-[#27272A] bg-[#141416] p-8 hover:border-primary/50 transition-colors">
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Zap className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
{t("features.speed.title")}
|
||||
</h3>
|
||||
<p className="text-slate-400">{t("features.speed.description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section className="py-24 bg-[#050505]" id="pricing">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl mb-4">
|
||||
{t("pricing.title")}
|
||||
</h2>
|
||||
<p className="text-lg text-slate-400">{t("pricing.subtitle")}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Free Plan */}
|
||||
<div className="rounded-2xl border border-[#27272A] bg-[#141416] p-8 flex flex-col">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{t("pricing.free.name")}
|
||||
</h3>
|
||||
<p className="mt-4 text-slate-400 text-sm">
|
||||
{t("pricing.free.description")}
|
||||
</p>
|
||||
<div className="my-6">
|
||||
<span className="text-4xl font-bold text-white">
|
||||
{t("pricing.free.price")}
|
||||
</span>
|
||||
<span className="text-slate-500">/{t("common.month")}</span>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
{["5 documents / month", "Word & Excel only", "Community support"].map(
|
||||
(feature, i) => (
|
||||
<li key={i} className="flex items-center text-slate-300 text-sm">
|
||||
<Check className="h-4 w-4 text-primary mr-2" />
|
||||
{feature}
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="border-[#27272A] text-white hover:bg-[#27272A]"
|
||||
>
|
||||
<Link href="/auth/register">{t("common.signup")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Pro Plan */}
|
||||
<div className="relative rounded-2xl border border-primary bg-[#141416] p-8 flex flex-col shadow-lg shadow-primary/10 scale-105 z-10">
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-[#F59E0B] px-3 py-1 text-xs font-bold text-black uppercase tracking-wide">
|
||||
{t("common.popular")}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{t("pricing.pro.name")}
|
||||
</h3>
|
||||
<p className="mt-4 text-slate-400 text-sm">
|
||||
{t("pricing.pro.description")}
|
||||
</p>
|
||||
<div className="my-6">
|
||||
<span className="text-4xl font-bold text-white">
|
||||
{t("pricing.pro.price")}
|
||||
</span>
|
||||
<span className="text-slate-500">/{t("common.month")}</span>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
{[
|
||||
"50 documents / month",
|
||||
"All formats (PPTX included)",
|
||||
"Advanced AI models (GPT-4)",
|
||||
"Priority support",
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center text-white text-sm">
|
||||
<Check className="h-4 w-4 text-primary mr-2" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button
|
||||
asChild
|
||||
className="bg-primary text-[#0A0A0B] font-bold hover:bg-primary/90"
|
||||
>
|
||||
<Link href="/auth/register">{t("common.tryPro")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="rounded-2xl border border-[#27272A] bg-[#141416] p-8 flex flex-col">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{t("pricing.enterprise.name")}
|
||||
</h3>
|
||||
<p className="mt-4 text-slate-400 text-sm">
|
||||
{t("pricing.enterprise.description")}
|
||||
</p>
|
||||
<div className="my-6">
|
||||
<span className="text-4xl font-bold text-white">
|
||||
{t("common.onRequest")}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-8 flex-1">
|
||||
{[
|
||||
"Unlimited documents",
|
||||
"API Access",
|
||||
"SSO & Advanced Security",
|
||||
"Dedicated Account Manager",
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center text-slate-300 text-sm">
|
||||
<Check className="h-4 w-4 text-primary mr-2" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="border-[#27272A] text-white hover:bg-[#27272A]"
|
||||
>
|
||||
<Link href="#contact">{t("common.contactSales")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 px-4">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary/5 to-transparent pointer-events-none" />
|
||||
<div className="mx-auto max-w-4xl rounded-3xl bg-[#141416] border border-[#27272A] p-12 text-center shadow-2xl overflow-hidden relative">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-50" />
|
||||
<h2 className="text-3xl font-bold text-white mb-6">
|
||||
{t("cta.title")}
|
||||
</h2>
|
||||
<p className="text-slate-400 mb-8 max-w-2xl mx-auto">
|
||||
{t("cta.subtitle")}
|
||||
</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-primary text-[#0A0A0B] font-bold hover:bg-primary/90"
|
||||
>
|
||||
<Link href="/auth/register">{t("cta.button")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-[#27272A] bg-[#0A0A0B] py-12">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center rounded-lg bg-primary/10 p-1">
|
||||
<Languages className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<span className="text-white font-bold text-lg">
|
||||
Office Translator
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm text-slate-400">
|
||||
<a className="hover:text-white transition-colors" href="#">
|
||||
{t("footer.privacy")}
|
||||
</a>
|
||||
<a className="hover:text-white transition-colors" href="#">
|
||||
{t("footer.terms")}
|
||||
</a>
|
||||
<a className="hover:text-white transition-colors" href="#">
|
||||
{t("footer.contact")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-slate-500 text-sm">{t("footer.copyright")}</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user