556a0b2f3f
Un pot de crédits global (BASIC 100 / PRO 1 000 / BUSINESS 4 000) remplace les seaux par fonction côté débit. Packs one-shot S/M/L, admin sans seaux legacy, usage multi-features, hints de coût, anti-flash thème et hydratation admin. Inclut aussi le pipeline slides renforcé et la page publique polishée.
631 lines
29 KiB
TypeScript
631 lines
29 KiB
TypeScript
'use client'
|
|
|
|
import { motion, AnimatePresence } from 'motion/react'
|
|
import {
|
|
ArrowRight, Menu, X, Check, BrainCircuit,
|
|
Network, GraduationCap, Bot, KeyRound, Globe, ChevronDown
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import type { SupportedLanguage } from '@/lib/i18n/load-translations'
|
|
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
|
|
|
const ECHO_LINES = ['echo0', 'echo1', 'echo2'] as const
|
|
|
|
const LANDING_LANGS: { code: SupportedLanguage; labelKey: string }[] = [
|
|
{ code: 'fr', labelKey: 'languages.fr' },
|
|
{ code: 'en', labelKey: 'languages.en' },
|
|
{ code: 'es', labelKey: 'languages.es' },
|
|
{ code: 'de', labelKey: 'languages.de' },
|
|
{ code: 'it', labelKey: 'languages.it' },
|
|
{ code: 'pt', labelKey: 'languages.pt' },
|
|
{ code: 'nl', labelKey: 'languages.nl' },
|
|
{ code: 'pl', labelKey: 'languages.pl' },
|
|
{ code: 'ru', labelKey: 'languages.ru' },
|
|
{ code: 'zh', labelKey: 'languages.zh' },
|
|
{ code: 'ja', labelKey: 'languages.ja' },
|
|
{ code: 'ko', labelKey: 'languages.ko' },
|
|
{ code: 'ar', labelKey: 'languages.ar' },
|
|
{ code: 'fa', labelKey: 'languages.fa' },
|
|
{ code: 'hi', labelKey: 'languages.hi' },
|
|
]
|
|
|
|
export function LandingPage() {
|
|
const { t, language, setLanguage } = useLanguage()
|
|
const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly')
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const [langOpen, setLangOpen] = useState(false)
|
|
const [echoIndex, setEchoIndex] = useState(0)
|
|
const langRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!langOpen) return
|
|
const onPointer = (e: MouseEvent) => {
|
|
if (langRef.current && !langRef.current.contains(e.target as Node)) setLangOpen(false)
|
|
}
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') setLangOpen(false)
|
|
}
|
|
document.addEventListener('mousedown', onPointer)
|
|
document.addEventListener('keydown', onKey)
|
|
return () => {
|
|
document.removeEventListener('mousedown', onPointer)
|
|
document.removeEventListener('keydown', onKey)
|
|
}
|
|
}, [langOpen])
|
|
useEffect(() => {
|
|
const id = setInterval(() => setEchoIndex((i) => (i + 1) % ECHO_LINES.length), 3200)
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const root = document.querySelector<HTMLElement>('[data-public-scroll-root]')
|
|
if (!root) return
|
|
const prev = root.style.overflow
|
|
if (menuOpen) root.style.overflow = 'hidden'
|
|
else root.style.overflow = prev || ''
|
|
return () => { root.style.overflow = prev }
|
|
}, [menuOpen])
|
|
|
|
const PLANS = [
|
|
{ key: 'basic', popular: false, price: t('landing.pricing.basicPrice'), period: '' },
|
|
{ key: 'pro', popular: true, price: billingInterval === 'monthly' ? '9,90€' : '7,90€', period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual') },
|
|
{ key: 'business', popular: false, price: billingInterval === 'monthly' ? '29,90€' : '23,90€', period: billingInterval === 'monthly' ? t('landing.pricing.perMonth') : t('landing.pricing.perMonthAnnual') },
|
|
{ key: 'enterprise', popular: false, price: billingInterval === 'monthly' ? '49,90€' : '39,90€', period: billingInterval === 'monthly' ? t('landing.pricing.perUser') : t('landing.pricing.perUserAnnual') },
|
|
]
|
|
|
|
const NAV = [
|
|
{ href: '#product', label: t('landing.nav.secondBrain') },
|
|
{ href: '#echo', label: t('landing.nav.echo') },
|
|
{ href: '#agents', label: t('landing.nav.agents') },
|
|
{ href: '#pricing', label: t('landing.nav.pricing') },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0B0A09] text-[#F4F1EA] font-[family-name:var(--font-manrope)] selection:bg-[#D4A373]/40 selection:text-white">
|
|
{/* Nav */}
|
|
<nav className="fixed top-0 left-0 right-0 z-[100] px-5 sm:px-8 py-4 flex items-center justify-between bg-[#0B0A09]/70 backdrop-blur-xl border-b border-white/[0.06]">
|
|
<Link href="/" className="flex items-center gap-2.5 group">
|
|
<div className="w-9 h-9 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-lg transition-transform group-hover:scale-105">
|
|
<span className="font-serif text-xl font-bold leading-none">M</span>
|
|
</div>
|
|
<span className="font-serif text-xl font-medium tracking-tight text-[#F4F1EA]">Memento</span>
|
|
</Link>
|
|
<div className="hidden lg:flex items-center gap-8">
|
|
{NAV.map((l) => (
|
|
<a key={l.href} href={l.href} className="text-[13px] text-white/55 hover:text-white transition-colors">
|
|
{l.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
{/* Language switcher */}
|
|
<div ref={langRef} className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setLangOpen((o) => !o)}
|
|
aria-expanded={langOpen}
|
|
aria-haspopup="listbox"
|
|
aria-label={t('landing.nav.language')}
|
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/15 text-[12px] text-white/70 hover:text-white hover:border-white/30 transition-colors"
|
|
>
|
|
<Globe size={14} />
|
|
<span className="uppercase font-semibold tracking-wide">{language}</span>
|
|
<ChevronDown size={12} className={`opacity-60 transition-transform ${langOpen ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
<AnimatePresence>
|
|
{langOpen && (
|
|
<motion.ul
|
|
role="listbox"
|
|
initial={{ opacity: 0, y: 6 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 6 }}
|
|
transition={{ duration: 0.15 }}
|
|
className="absolute end-0 mt-2 w-48 max-h-72 overflow-y-auto rounded-2xl border border-white/10 bg-[#141210] shadow-2xl py-1.5 z-[110]"
|
|
>
|
|
{LANDING_LANGS.map((lang) => (
|
|
<li key={lang.code} role="option" aria-selected={language === lang.code}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setLanguage(lang.code)
|
|
setLangOpen(false)
|
|
}}
|
|
className={`w-full text-start px-4 py-2.5 text-[13px] transition-colors ${
|
|
language === lang.code
|
|
? 'bg-[#D4A373]/15 text-[#D4A373]'
|
|
: 'text-white/70 hover:bg-white/5 hover:text-white'
|
|
}`}
|
|
>
|
|
{t(lang.labelKey)}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</motion.ul>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<Link href="/login" className="hidden sm:inline text-[13px] text-white/55 hover:text-white transition-colors px-2">
|
|
{t('landing.nav.login')}
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[13px] font-semibold hover:bg-white transition-colors"
|
|
>
|
|
{t('landing.nav.cta')}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
aria-label={menuOpen ? t('landing.nav.closeMenu') : t('landing.nav.openMenu')}
|
|
onClick={() => setMenuOpen((o) => !o)}
|
|
className="lg:hidden w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-white/80"
|
|
>
|
|
{menuOpen ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<AnimatePresence>
|
|
{menuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[99] bg-[#0B0A09] pt-24 px-8 lg:hidden"
|
|
>
|
|
<div className="flex flex-col gap-1">
|
|
{NAV.map((l) => (
|
|
<a
|
|
key={l.href}
|
|
href={l.href}
|
|
onClick={() => setMenuOpen(false)}
|
|
className="py-4 text-3xl font-serif border-b border-white/10"
|
|
>
|
|
{l.label}
|
|
</a>
|
|
))}
|
|
<Link href="/register" onClick={() => setMenuOpen(false)} className="mt-10 py-4 rounded-2xl bg-[#F4F1EA] text-[#0B0A09] text-center font-semibold">
|
|
{t('landing.nav.cta')}
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* ── HERO ── */}
|
|
<section className="relative min-h-[100dvh] flex flex-col justify-center pt-28 pb-16 px-5 sm:px-8 overflow-hidden">
|
|
{/* Atmosphere — warm, not purple neon */}
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-[#D4A373]/15 blur-[120px] rounded-full" />
|
|
<div className="absolute bottom-0 right-0 w-[500px] h-[400px] bg-[#A47148]/10 blur-[100px] rounded-full" />
|
|
<div
|
|
className="absolute inset-0 opacity-[0.07]"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 1px 1px, #F4F1EA 1px, transparent 0)',
|
|
backgroundSize: '28px 28px',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-5xl mx-auto w-full text-center">
|
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-[#D4A373]/35 bg-[#D4A373]/10 mb-7">
|
|
<BrainCircuit size={14} className="text-[#D4A373]" />
|
|
<span className="text-[12px] tracking-[0.18em] uppercase text-[#D4A373] font-semibold">
|
|
{t('landing.hero.badge')}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-[13px] tracking-[0.12em] uppercase text-white/40 mb-5 font-medium">
|
|
{t('landing.hero.eyebrow')}
|
|
</p>
|
|
|
|
<h1 className="font-serif text-[clamp(2.5rem,7.5vw,5.4rem)] font-medium tracking-tight leading-[1.05] text-[#F4F1EA] mb-6">
|
|
{t('landing.hero.headline')}
|
|
<br />
|
|
<span className="italic text-[#D4A373]">{t('landing.hero.headlineAccent')}</span>
|
|
</h1>
|
|
|
|
<p className="max-w-xl mx-auto text-[17px] sm:text-lg text-white/55 leading-relaxed mb-10">
|
|
{t('landing.hero.subtitle')}
|
|
</p>
|
|
|
|
<div className="flex flex-col items-center gap-3">
|
|
<Link
|
|
href="/register"
|
|
className="group inline-flex items-center justify-center gap-3 px-9 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02] shadow-[0_0_40px_-8px_rgba(212,163,115,0.45)]"
|
|
>
|
|
{t('landing.hero.cta')}
|
|
<ArrowRight size={18} className="transition-transform group-hover:translate-x-0.5" />
|
|
</Link>
|
|
<p className="text-[12px] text-white/35">{t('landing.hero.ctaHint')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product stage */}
|
|
<div className="relative z-10 mt-14 sm:mt-20 max-w-5xl mx-auto w-full">
|
|
<div className="relative rounded-[20px] sm:rounded-[28px] overflow-hidden border border-white/10 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.7)]">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#0B0A09] via-transparent to-transparent z-10 pointer-events-none" />
|
|
<Image
|
|
src="/images/workspace-hero.jpg"
|
|
alt={t('landing.hero.imageAlt')}
|
|
width={2000}
|
|
height={1200}
|
|
priority
|
|
className="w-full h-auto object-cover aspect-[16/10] opacity-90"
|
|
/>
|
|
{/* Live Memory Echo chip */}
|
|
<div className="absolute bottom-5 left-5 right-5 sm:bottom-8 sm:left-8 sm:right-auto sm:max-w-md z-20">
|
|
<div className="rounded-2xl border border-white/15 bg-[#0B0A09]/85 backdrop-blur-xl p-4 sm:p-5 text-left shadow-2xl">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="relative flex h-2 w-2">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#D4A373] opacity-60" />
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-[#D4A373]" />
|
|
</span>
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[#D4A373]">
|
|
{t('landing.hero.echoLive')}
|
|
</span>
|
|
</div>
|
|
<AnimatePresence mode="wait">
|
|
<motion.p
|
|
key={ECHO_LINES[echoIndex]}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.35 }}
|
|
className="text-sm sm:text-[15px] font-serif italic text-[#F4F1EA]/90 leading-relaxed"
|
|
>
|
|
{t(`landing.hero.${ECHO_LINES[echoIndex]}`)}
|
|
</motion.p>
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Trust strip */}
|
|
<section className="px-5 sm:px-8 py-10 border-y border-white/[0.06]">
|
|
<div className="max-w-5xl mx-auto flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-[12px] sm:text-[13px] text-white/40 tracking-wide">
|
|
{['trust0', 'trust1', 'trust2', 'trust3'].map((k) => (
|
|
<span key={k} className="flex items-center gap-2">
|
|
<Check size={14} className="text-[#D4A373]" />
|
|
{t(`landing.trust.${k}`)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pain → Promise */}
|
|
<section className="px-5 sm:px-8 py-24 sm:py-32">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-5 font-medium">{t('landing.pain.label')}</p>
|
|
<h2 className="font-serif text-3xl sm:text-5xl tracking-tight leading-[1.15] mb-6">
|
|
{t('landing.pain.title')}
|
|
</h2>
|
|
<p className="text-lg text-white/50 leading-relaxed mb-8">{t('landing.pain.desc')}</p>
|
|
<p className="text-base sm:text-lg font-serif italic text-[#D4A373]/90 leading-relaxed">
|
|
{t('landing.pain.secondBrain')}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product moments — large narrative blocks, not wireframe cards */}
|
|
<section id="product" className="px-5 sm:px-8 pb-8">
|
|
<div className="max-w-6xl mx-auto space-y-4">
|
|
<ProductMoment
|
|
id="echo"
|
|
eyebrow={t('landing.moments.echo.eyebrow')}
|
|
title={t('landing.moments.echo.title')}
|
|
desc={t('landing.moments.echo.desc')}
|
|
dark
|
|
>
|
|
<div className="space-y-3 p-2">
|
|
{[0, 1, 2].map((i) => (
|
|
<div
|
|
key={i}
|
|
className={`rounded-xl border p-4 ${i === 0 ? 'border-[#D4A373]/40 bg-[#D4A373]/10' : 'border-white/10 bg-white/[0.03]'}`}
|
|
>
|
|
<p className="text-[11px] uppercase tracking-wider text-[#D4A373] mb-1">
|
|
{t(`landing.moments.echo.card${i}Label`)}
|
|
</p>
|
|
<p className="text-sm text-white/75 font-serif italic leading-relaxed">
|
|
{t(`landing.moments.echo.card${i}`)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ProductMoment>
|
|
|
|
<ProductMoment
|
|
eyebrow={t('landing.moments.dashboard.eyebrow')}
|
|
title={t('landing.moments.dashboard.title')}
|
|
desc={t('landing.moments.dashboard.desc')}
|
|
>
|
|
<div className="grid grid-cols-2 gap-2 p-2">
|
|
{['w0', 'w1', 'w2', 'w3'].map((w) => (
|
|
<div key={w} className="rounded-xl bg-[#0B0A09]/40 border border-black/10 p-4 min-h-[88px]">
|
|
<p className="text-[10px] uppercase tracking-wider text-[#A47148] mb-2">{t(`landing.moments.dashboard.${w}Label`)}</p>
|
|
<p className="text-sm font-medium text-[#0B0A09]/80">{t(`landing.moments.dashboard.${w}`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ProductMoment>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<ProductMoment
|
|
compact
|
|
eyebrow={t('landing.moments.insights.eyebrow')}
|
|
title={t('landing.moments.insights.title')}
|
|
desc={t('landing.moments.insights.desc')}
|
|
dark
|
|
>
|
|
<div className="relative h-36 flex items-center justify-center">
|
|
<Network className="text-[#D4A373]/80" size={48} strokeWidth={1.25} />
|
|
<p className="absolute bottom-2 left-4 text-[11px] uppercase tracking-wider text-white/35">
|
|
{t('landing.moments.insights.chip')}
|
|
</p>
|
|
</div>
|
|
</ProductMoment>
|
|
<ProductMoment
|
|
compact
|
|
eyebrow={t('landing.moments.revision.eyebrow')}
|
|
title={t('landing.moments.revision.title')}
|
|
desc={t('landing.moments.revision.desc')}
|
|
>
|
|
<div className="rounded-xl bg-white border border-black/5 p-5 mx-2 mb-2">
|
|
<GraduationCap className="text-[#A47148] mb-3" size={22} />
|
|
<p className="font-serif text-[#0B0A09] text-base mb-3">{t('landing.moments.revision.card')}</p>
|
|
<div className="flex gap-2">
|
|
<span className="flex-1 py-2 rounded-lg bg-[#0B0A09]/5 text-center text-[11px] font-semibold text-[#0B0A09]/50">?</span>
|
|
<span className="flex-1 py-2 rounded-lg bg-[#0B0A09] text-center text-[11px] font-semibold text-[#F4F1EA]">SM-2</span>
|
|
</div>
|
|
</div>
|
|
</ProductMoment>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How it works */}
|
|
<section className="px-5 sm:px-8 py-28">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h2 className="font-serif text-3xl sm:text-4xl tracking-tight text-center mb-16">
|
|
{t('landing.how.title')}
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6">
|
|
{['s0', 's1', 's2'].map((s, i) => (
|
|
<div key={s} className="relative text-center md:text-left">
|
|
<div className="text-[13px] font-semibold text-[#D4A373] mb-4 tracking-widest">0{i + 1}</div>
|
|
<h3 className="font-serif text-xl mb-3">{t(`landing.how.${s}.title`)}</h3>
|
|
<p className="text-sm text-white/45 leading-relaxed">{t(`landing.how.${s}.desc`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Agents */}
|
|
<section id="agents" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="max-w-2xl mb-14">
|
|
<p className="text-[12px] uppercase tracking-[0.25em] text-[#D4A373] mb-4 font-medium">{t('landing.agents.label')}</p>
|
|
<h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-5">{t('landing.agents.title')}</h2>
|
|
<p className="text-white/50 text-lg leading-relaxed">{t('landing.agents.desc')}</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{(['scraper', 'researcher', 'slideGen', 'monitor', 'diagramGen', 'custom'] as const).map((key) => (
|
|
<div key={key} className="p-6 rounded-2xl border border-white/[0.08] bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
|
|
<Bot size={18} className="text-[#D4A373] mb-4" />
|
|
<h4 className="font-serif text-lg mb-2">{t(`landing.agents.${key}.title`)}</h4>
|
|
<p className="text-sm text-white/40 leading-relaxed">{t(`landing.agents.${key}.desc`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* BYOK */}
|
|
<section className="px-5 sm:px-8 py-20">
|
|
<div className="max-w-5xl mx-auto rounded-[28px] border border-white/10 bg-gradient-to-br from-[#1a1612] to-[#0B0A09] p-8 sm:p-12 flex flex-col md:flex-row gap-10 items-start">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 text-[#D4A373] mb-4">
|
|
<KeyRound size={18} />
|
|
<span className="text-[12px] uppercase tracking-[0.2em] font-semibold">{t('landing.byok.label')}</span>
|
|
</div>
|
|
<h3 className="font-serif text-3xl tracking-tight mb-4">{t('landing.byok.title')}</h3>
|
|
<p className="text-white/50 leading-relaxed">{t('landing.byok.desc')}</p>
|
|
</div>
|
|
<div className="w-full md:w-[320px] font-mono text-[11px] text-white/35 space-y-1.5 rounded-2xl border border-white/10 bg-black/40 p-5">
|
|
<p className="text-[#D4A373]">{'{'}</p>
|
|
<p className="pl-3">"provider": "anthropic",</p>
|
|
<p className="pl-3">"model": "claude-sonnet",</p>
|
|
<p className="pl-3 text-[#F4F1EA]/70">"apiKey": "sk-ant-…",</p>
|
|
<p className="pl-3">"yours": true</p>
|
|
<p className="text-[#D4A373]">{'}'}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing */}
|
|
<section id="pricing" className="px-5 sm:px-8 py-28 border-t border-white/[0.06]">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-4">{t('landing.pricing.title')}</h2>
|
|
<p className="text-white/45 mb-8">{t('landing.pricing.desc')}</p>
|
|
<div className="inline-flex p-1 rounded-full border border-white/10 bg-white/[0.03]">
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingInterval('monthly')}
|
|
className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all ${billingInterval === 'monthly' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/45'}`}
|
|
>
|
|
{t('landing.pricing.monthly')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBillingInterval('annual')}
|
|
className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all relative ${billingInterval === 'annual' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/45'}`}
|
|
>
|
|
{t('landing.pricing.annual')}
|
|
<span className="absolute -top-3 -right-1 text-[10px] text-[#D4A373]">-20%</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
|
|
{PLANS.map((plan) => (
|
|
<div
|
|
key={plan.key}
|
|
className={`rounded-2xl border p-6 flex flex-col ${
|
|
plan.popular
|
|
? 'border-[#D4A373]/50 bg-[#D4A373]/10'
|
|
: 'border-white/[0.08] bg-white/[0.02]'
|
|
}`}
|
|
>
|
|
{plan.popular && (
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373] mb-3">
|
|
{t('landing.pricing.popular')}
|
|
</span>
|
|
)}
|
|
<h4 className="text-[12px] uppercase tracking-widest text-white/40 mb-2">
|
|
{t(`landing.pricing.${plan.key}.name`)}
|
|
</h4>
|
|
<div className="flex items-baseline gap-1 mb-2">
|
|
<span className="text-3xl font-serif">{plan.price}</span>
|
|
{plan.period && <span className="text-xs text-white/35">{plan.period}</span>}
|
|
</div>
|
|
<p className="text-sm text-white/45 mb-6">{t(`landing.pricing.${plan.key}.desc`)}</p>
|
|
<ul className="space-y-2.5 mb-8 flex-1">
|
|
{[0, 1, 2, 3, 4, 5].map((j) => {
|
|
const feat = t(`landing.pricing.${plan.key}.feature${j}`)
|
|
if (!feat || feat.startsWith('landing.')) return null
|
|
return (
|
|
<li key={j} className="flex gap-2 text-xs text-white/60">
|
|
<Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
|
|
{feat}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
<Link
|
|
href="/register"
|
|
className={`py-3 rounded-xl text-center text-[12px] font-semibold transition-colors ${
|
|
plan.popular
|
|
? 'bg-[#F4F1EA] text-[#0B0A09] hover:bg-white'
|
|
: 'bg-white/10 text-white hover:bg-white/15'
|
|
}`}
|
|
>
|
|
{t(`landing.pricing.${plan.key}.cta`)}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="relative px-5 sm:px-8 py-36 text-center overflow-hidden">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] bg-[#D4A373]/20 blur-[100px] rounded-full" />
|
|
</div>
|
|
<div className="relative z-10 max-w-2xl mx-auto">
|
|
<BrainCircuit className="mx-auto text-[#D4A373] mb-6" size={32} strokeWidth={1.25} />
|
|
<h2 className="font-serif text-4xl sm:text-6xl tracking-tight leading-tight mb-6">
|
|
{t('landing.cta.title')}
|
|
</h2>
|
|
<p className="text-white/50 text-lg mb-10">{t('landing.cta.desc')}</p>
|
|
<Link
|
|
href="/register"
|
|
className="inline-flex items-center gap-3 px-10 py-4 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[15px] font-semibold hover:bg-white transition-all hover:scale-[1.02]"
|
|
>
|
|
{t('landing.cta.button')}
|
|
<ArrowRight size={18} />
|
|
</Link>
|
|
<p className="mt-4 text-[12px] text-white/30">{t('landing.hero.ctaHint')}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer className="px-5 sm:px-8 py-14 border-t border-white/[0.06]">
|
|
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-10">
|
|
<div className="max-w-xs">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-7 h-7 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-md">
|
|
<span className="font-serif font-bold text-sm">M</span>
|
|
</div>
|
|
<span className="font-serif text-lg">Memento</span>
|
|
</div>
|
|
<p className="text-sm text-white/35">{t('landing.footer.desc')}</p>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-10 text-sm">
|
|
{(['product', 'community', 'legal'] as const).map((section) => (
|
|
<div key={section}>
|
|
<p className="text-[11px] uppercase tracking-widest text-white/40 mb-3">
|
|
{t(`landing.footer.${section}.title`)}
|
|
</p>
|
|
<ul className="space-y-2 text-white/50">
|
|
{[0, 1, 2].map((j) => {
|
|
const label = t(`landing.footer.${section}.link${j}`)
|
|
const href = t(`landing.footer.${section}.link${j}Href`)
|
|
if (!label || label.startsWith('landing.')) return null
|
|
return (
|
|
<li key={j}>
|
|
<a href={href} className="hover:text-white transition-colors">{label}</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="max-w-6xl mx-auto mt-12 pt-8 border-t border-white/[0.06] text-[11px] text-white/25 tracking-wide">
|
|
© 2026 Memento. {t('landing.footer.rights')}
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ProductMoment({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
desc,
|
|
children,
|
|
dark,
|
|
compact,
|
|
}: {
|
|
id?: string
|
|
eyebrow: string
|
|
title: string
|
|
desc: string
|
|
children: ReactNode
|
|
dark?: boolean
|
|
compact?: boolean
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
id={id}
|
|
initial={{ opacity: 0, y: 28 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-60px' }}
|
|
transition={{ duration: 0.55 }}
|
|
className={`rounded-[24px] sm:rounded-[32px] border overflow-hidden ${
|
|
dark
|
|
? 'bg-[#141210] border-white/[0.08] text-[#F4F1EA]'
|
|
: 'bg-[#EDE8DF] border-transparent text-[#0B0A09]'
|
|
} ${compact ? '' : 'grid grid-cols-1 lg:grid-cols-2'}`}
|
|
>
|
|
<div className={`p-8 sm:p-10 flex flex-col justify-center ${compact ? 'pb-4' : ''}`}>
|
|
<p className={`text-[11px] uppercase tracking-[0.22em] font-semibold mb-3 ${dark ? 'text-[#D4A373]' : 'text-[#A47148]'}`}>
|
|
{eyebrow}
|
|
</p>
|
|
<h3 className="font-serif text-2xl sm:text-3xl tracking-tight mb-3 leading-tight">{title}</h3>
|
|
<p className={`text-[15px] leading-relaxed ${dark ? 'text-white/50' : 'text-[#0B0A09]/55'}`}>{desc}</p>
|
|
</div>
|
|
<div className={`${compact ? 'px-4 pb-6' : 'p-6 sm:p-8'} flex items-center`}>
|
|
<div className="w-full">{children}</div>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|