Import Tripoli Cloud frontend prototype

React/TypeScript/Vite/Tailwind prototype from the design session (login,
dashboard, photos, backups, settings views with mocked API layer).
Infra work (Rust services, Ansible, OpenTofu) follows in subsequent commits.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/src/components/auth/AuthBackground.tsx

@@ -0,0 +1,20 @@
+import { BACKGROUND_IMAGES } from '../../lib/backgrounds';
+import { useBackgroundCrossfade } from '../../hooks/useBackgroundCrossfade';
+
+export function AuthBackground() {
+  const activeIndex = useBackgroundCrossfade();
+
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-[#07080c]">
+      {BACKGROUND_IMAGES.map((bg, i) => (
+        <div
+          key={bg}
+          className="absolute inset-0 scale-105 bg-cover bg-center transition-opacity duration-[2000ms] ease-in-out"
+          style={{ background: bg, opacity: i === activeIndex ? 1 : 0 }}
+        />
+      ))}
+      <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.92)_0%,rgba(6,7,11,0.62)_46%,rgba(6,7,11,0.28)_100%)]" />
+      <div className="absolute -right-[8%] -top-[18%] h-[52vw] w-[52vw] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.26)_0%,transparent_66%)] blur-[10px]" />
+    </div>
+  );
+}

app/src/components/auth/AuthLayout.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}

app/src/components/auth/AuthPanel.tsx

@@ -0,0 +1,163 @@
+import { AlertCircle, ArrowRight, Eye, Lock, Mail, ShieldCheck } from 'lucide-react';
+import { useAuthForm } from '../../hooks/useAuthForm';
+
+export function AuthPanel() {
+  const {
+    mode,
+    setMode,
+    name,
+    setName,
+    email,
+    setEmail,
+    password,
+    setPassword,
+    emailError,
+    passwordError,
+    handleSubmit,
+    continueAsGuest,
+    loading,
+  } = useAuthForm();
+
+  const isSignup = mode === 'signup';
+
+  return (
+    <div
+      className="w-full max-w-[430px] rounded-[22px] border border-white/16 bg-white/[0.075] p-6 shadow-[0_32px_80px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.18)] backdrop-blur-2xl backdrop-saturate-150 sm:p-[34px]"
+      style={{ colorScheme: 'dark' }}
+    >
+      <h2 className="m-0 mb-1.5 text-[23px] font-bold tracking-tight text-white">
+        {isSignup ? 'Créer votre espace' : 'Bon retour'}
+      </h2>
+      <p className="m-0 mb-6 text-[13.5px] text-white/55">
+        {isSignup ? 'Un coffre-fort chiffré, une seule clé : la vôtre.' : 'Déverrouillez votre coffre-fort.'}
+      </p>
+
+      <div className="mb-6 flex gap-1 rounded-xl border border-white/8 bg-black/28 p-1">
+        <button
+          type="button"
+          onClick={() => setMode('login')}
+          className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
+            mode === 'login' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
+          }`}
+        >
+          Connexion
+        </button>
+        <button
+          type="button"
+          onClick={() => setMode('signup')}
+          className={`flex-1 rounded-[9px] py-2.5 text-[13px] font-semibold transition-colors ${
+            mode === 'signup' ? 'bg-white/14 text-white' : 'bg-transparent text-white/55'
+          }`}
+        >
+          Créer un compte
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        {isSignup && (
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor="tc-name" className="text-[12.5px] font-semibold text-white/72">
+              Nom complet
+            </label>
+            <input
+              id="tc-name"
+              name="name"
+              type="text"
+              autoComplete="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Leïla Barghouti"
+              className="w-full rounded-xl border border-white/14 bg-black/26 px-[15px] py-3.5 text-[14.5px] text-white outline-none placeholder:text-white/34"
+            />
+          </div>
+        )}
+
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="tc-email" className="text-[12.5px] font-semibold text-white/72">
+            Adresse e-mail
+          </label>
+          <div className="relative flex items-center">
+            <Mail size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
+            <input
+              id="tc-email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              aria-invalid={emailError}
+              aria-describedby="tc-email-err"
+              placeholder="vous@domaine.tn"
+              className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
+                emailError ? 'border-danger' : 'border-white/14'
+              }`}
+            />
+          </div>
+          {emailError && (
+            <span id="tc-email-err" className="flex items-center gap-1.5 text-xs text-danger">
+              <AlertCircle size={13} />
+              Saisissez une adresse e-mail valide.
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-baseline justify-between gap-3">
+            <label htmlFor="tc-pass" className="text-[12.5px] font-semibold text-white/72">
+              Mot de passe
+            </label>
+            <a href="#tc-pass" className="text-xs text-brand-soft hover:text-[#a8c2ff]">
+              Oublié ?
+            </a>
+          </div>
+          <div className="relative flex items-center">
+            <Lock size={16} className="absolute left-3.5 text-white/40" strokeWidth={1.8} />
+            <input
+              id="tc-pass"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              aria-invalid={passwordError}
+              aria-describedby="tc-pass-err"
+              placeholder="••••••••••"
+              className={`w-full rounded-xl border bg-black/26 py-3.5 pl-10 pr-[15px] text-[14.5px] text-white outline-none placeholder:text-white/34 ${
+                passwordError ? 'border-danger' : 'border-white/14'
+              }`}
+            />
+          </div>
+          {passwordError && (
+            <span id="tc-pass-err" className="flex items-center gap-1.5 text-xs text-danger">
+              <AlertCircle size={13} />
+              Huit caractères minimum.
+            </span>
+          )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="mt-1 flex w-full items-center justify-center gap-2.5 rounded-xl bg-brand-gradient px-[18px] py-3.5 text-[14.5px] font-bold text-white shadow-[0_12px_30px_rgba(91,140,255,0.34)] transition-[filter] hover:brightness-110 disabled:opacity-70"
+        >
+          <span>{isSignup ? 'Créer mon compte' : 'Se connecter'}</span>
+          <ArrowRight size={17} />
+        </button>
+
+        <button
+          type="button"
+          onClick={() => void continueAsGuest()}
+          className="flex w-full items-center justify-center gap-2 rounded-xl border border-white/18 bg-white/6 px-[18px] py-[13px] text-[13.5px] font-semibold text-white transition-colors hover:bg-white/12"
+        >
+          <Eye size={16} strokeWidth={1.8} />
+          Visiter en tant qu'invité
+        </button>
+
+        <div className="mt-1.5 flex items-center gap-2.5 border-t border-white/10 pt-4 text-xs text-white/48">
+          <ShieldCheck size={14} className="text-success" strokeWidth={2} />
+          Chiffrement AES-256 côté client — aucune donnée en clair sur le serveur.
+        </div>
+      </form>
+    </div>
+  );
+}