59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
|
import { AuthBackground } from './AuthBackground';
|
||
|
|
import { AuthPanel } from './AuthPanel';
|
||
|
|
import { TripoliLogo, TripoliWordmark } from '../layout/TripoliLogo';
|
||
|
|
|
||
|
|
const AUTH_STATS = [
|
||
|
|
{ value: '12 480', label: 'documents indexés' },
|
||
|
|
{ value: '4', label: 'postes sauvegardés' },
|
||
|
|
{ value: '100 %', label: 'chiffré localement' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function AuthLayout() {
|
||
|
|
return (
|
||
|
|
<div className="relative min-h-screen overflow-hidden bg-[#07080c]">
|
||
|
|
<AuthBackground />
|
||
|
|
|
||
|
|
<div className="relative flex min-h-screen flex-col justify-between gap-11 p-6 sm:p-10 lg:p-[60px]">
|
||
|
|
<div className="flex items-center gap-2.5 text-white">
|
||
|
|
<TripoliLogo size={30} variant="hero" />
|
||
|
|
<TripoliWordmark className="text-base" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap items-center justify-between gap-8 sm:gap-14 lg:gap-[72px]">
|
||
|
|
<div className="min-w-0 max-w-[560px] flex-1 basis-[340px] text-white">
|
||
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/14 bg-white/8 px-[13px] py-1.5 text-xs font-semibold tracking-wide text-white/80 backdrop-blur-md">
|
||
|
|
<span className="h-1.5 w-1.5 animate-tc-pulse rounded-full bg-success" />
|
||
|
|
Coffre-fort en ligne
|
||
|
|
</span>
|
||
|
|
<h1 className="m-0 my-4 text-[36px] font-extrabold leading-[1.04] tracking-tight text-balance sm:text-[48px] lg:text-[62px]">
|
||
|
|
Vos documents,
|
||
|
|
<br />
|
||
|
|
sous clé.
|
||
|
|
</h1>
|
||
|
|
<p className="m-0 max-w-[44ch] text-[15px] leading-relaxed text-white/62 sm:text-[17.5px]">
|
||
|
|
Documents sensibles, archives et sauvegardes dans un coffre-fort chiffré de bout en bout. Vous seul
|
||
|
|
détenez la clé.
|
||
|
|
</p>
|
||
|
|
<div className="mt-[38px] flex flex-wrap gap-7">
|
||
|
|
{AUTH_STATS.map((s) => (
|
||
|
|
<div key={s.label}>
|
||
|
|
<p className="m-0 mb-[3px] text-[22px] font-bold tracking-tight text-white">{s.value}</p>
|
||
|
|
<p className="m-0 text-[12.5px] text-white/50">{s.label}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<AuthPanel />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-5 text-xs text-white/34">
|
||
|
|
<span>Tripoli Cloud — 2026</span>
|
||
|
|
<span>Hébergé sur votre propre matériel</span>
|
||
|
|
<span>Sans publicité, sans traçage</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|