feat(landing): repositionner plateforme vidéo — supprimer pitch B2B SaaS

Landing reécrite : vidéos, playlists, créateurs.
Supprimé : pricing, white-label, mentions SuperOAuth, PricingCard component.
CTA principal → /app (explorer les vidéos).

frontend/src/pages/LandingPage.tsx

@@ -1,66 +1,5 @@
 import { Link } from 'react-router-dom';
 
-// ─── Pricing data ─────────────────────────────────────────────────────────────
-
-interface Tier {
-  name: string;
-  price: string;
-  period: string;
-  tagline: string;
-  features: string[];
-  cta: string;
-  highlighted: boolean;
-}
-
-const TIERS: Tier[] = [
-  {
-    name: 'Starter',
-    price: '29€',
-    period: '/mois',
-    tagline: 'Pour démarrer proprement.',
-    features: [
-      '1 projet',
-      'Domaine custom',
-      'White-label basique',
-      'Support communauté',
-    ],
-    cta: 'Commencer',
-    highlighted: false,
-  },
-  {
-    name: 'Studio',
-    price: '99€',
-    period: '/mois',
-    tagline: 'Pour les studios actifs.',
-    features: [
-      '5 projets',
-      'Analytics intégrés',
-      'SuperOAuth Tier 3',
-      'White-label complet',
-      'Support email',
-    ],
-    cta: 'Choisir Studio',
-    highlighted: true,
-  },
-  {
-    name: 'Pro',
-    price: '249€',
-    period: '/mois',
-    tagline: 'Pour les opérations à fort volume.',
-    features: [
-      'Projets illimités',
-      'API access complet',
-      'Support prioritaire',
-      'SuperOAuth Tier 3',
-      'SLA 99.9%',
-    ],
-    cta: 'Choisir Pro',
-    highlighted: false,
-  },
-];
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
 export default function LandingPage() {
   return (
     <div className="flex flex-col gap-24 pb-16">
@@ -72,60 +11,55 @@ export default function LandingPage() {
         <div className="inline-flex w-fit items-center gap-2 rounded border border-od-border bg-od-surface px-3 py-1">
           <span className="h-1.5 w-1.5 rounded-full bg-od-accent" />
           <span className="font-mono text-2xs text-od-muted tracking-widest uppercase">
-            SuperOAuth Tier 3 — multi-tenant natif
+            Vidéos · Playlists · Communauté
           </span>
         </div>
 
         {/* Headline */}
         <h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
-          La plateforme des{' '}
+          Partagez vos vidéos.{' '}
-          <span className="text-od-accent">studios indépendants.</span>
+          <span className="text-od-accent">Construisez votre audience.</span>
         </h1>
 
         {/* Sous-titre */}
         <p className="text-base text-od-muted leading-relaxed max-w-xl">
-          Lancez votre vitrine de contenu en quelques minutes.
+          OriginsDigital est une plateforme de partage vidéo pensée pour les créateurs.
-          Auth multi-tenant, domaine custom, white-label complet —
+          Organisez votre contenu en playlists, proposez du contenu libre ou premium,
-          sans compromis sur la qualité.
+          et faites grandir votre communauté.
         </p>
 
         {/* CTAs */}
         <div className="flex items-center gap-4 pt-2">
           <Link
-            to="/login"
+            to="/app"
             className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
+          >
+            Explorer les vidéos
+          </Link>
+          <Link
+            to="/login"
+            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
           >
             Se connecter
           </Link>
-          <a
-            href="#pricing"
-            className="inline-flex items-center gap-2 rounded border border-od-border px-6 py-2.5 font-mono text-sm text-od-muted transition-all duration-150 hover:border-od-border-hi hover:text-od-text"
-          >
-            Voir les tarifs
-          </a>
         </div>
 
-        {/* Social proof minimal */}
-        <p className="font-mono text-2xs text-od-muted pt-2">
-          Intégration SuperOAuth Tier 3 · Auth per-tenant · CNAME custom
-        </p>
-
       </section>
 
-      {/* ── Différenciateur ───────────────────────────────────────────────── */}
+      {/* ── Features ──────────────────────────────────────────────────────── */}
-      <section className="grid grid-cols-3 gap-4">
+      <section className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         {[
           {
-            label: 'Auth multi-tenant',
+            label: 'Playlists organisées',
-            desc: 'SuperOAuth Tier 3 intégré nativement. Per-tenant providers, isolation complète des données.',
+            desc: 'Regroupez vos vidéos par thème, série ou parcours. Vos spectateurs retrouvent facilement ce qui les intéresse.',
           },
           {
-            label: 'White-label total',
+            label: 'Contenu libre & premium',
-            desc: 'Logo, domaine, emails, couleurs — votre marque, pas la nôtre. CNAME custom inclus dès Starter.',
+            desc: 'Proposez du contenu en accès libre pour attirer, et du contenu premium pour fidéliser. Vous décidez.',
           },
           {
-            label: 'Prévisible',
+            label: 'Fait pour les créateurs',
-            desc: 'Abonnement fixe, pas de commission, pas de per-seat. Votre croissance ne nous rémunère pas.',
+            desc: 'Interface épurée, recherche rapide, profil personnalisé. Le contenu au centre, pas la distraction.',
           },
         ].map(({ label, desc }) => (
           <div
@@ -139,103 +73,48 @@ export default function LandingPage() {
         ))}
       </section>
 
-      {/* ── Pricing ───────────────────────────────────────────────────────── */}
+      {/* ── Comment ça marche ─────────────────────────────────────────────── */}
-      <section id="pricing" className="flex flex-col gap-8 scroll-mt-20">
+      <section className="flex flex-col gap-8">
-
         <div className="flex flex-col gap-2">
-          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Tarifs</span>
+          <span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Comment ça marche</span>
           <h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
-            Simple. Sans surprise.
+            Simple et direct.
           </h2>
-          <p className="text-sm text-od-muted max-w-md">
-            Abonnement mensuel sans engagement. Pas de commission sur vos revenus.
-          </p>
         </div>
 
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
-          {TIERS.map((tier) => (
+          {[
-            <PricingCard key={tier.name} tier={tier} />
+            { step: '01', title: 'Connectez-vous', desc: 'Via Discord, GitHub, Google ou Twitch. Un clic, pas de formulaire.' },
+            { step: '02', title: 'Explorez', desc: 'Parcourez les vidéos libres, cherchez par thème, découvrez les playlists.' },
+            { step: '03', title: 'Accédez au premium', desc: 'Débloquez les formations complètes et le contenu exclusif.' },
+          ].map(({ step, title, desc }) => (
+            <div key={step} className="flex flex-col gap-2">
+              <span className="font-mono text-lg font-bold text-od-accent">{step}</span>
+              <p className="text-sm font-semibold text-od-text">{title}</p>
+              <p className="text-xs text-od-muted leading-relaxed">{desc}</p>
+            </div>
           ))}
         </div>
+      </section>
 
-        {/* Enterprise mention */}
+      {/* ── CTA final ─────────────────────────────────────────────────────── */}
-        <div className="flex items-center justify-between rounded border border-od-border bg-od-surface px-6 py-4">
+      <section className="flex flex-col items-center gap-4 rounded border border-od-border bg-od-surface px-8 py-10 text-center">
-          <div className="flex flex-col gap-0.5">
+        <h2 className="font-display text-2xl font-bold text-od-text">
-            <span className="text-sm font-semibold text-od-text">Enterprise</span>
+          Prêt à découvrir ?
-            <span className="text-xs text-od-muted">SLA, déploiement dédié, onboarding personnalisé</span>
+        </h2>
-          </div>
+        <p className="text-sm text-od-muted max-w-md">
-          <a
+          Pas besoin de compte pour explorer. Connectez-vous quand vous êtes prêt.
-            href="mailto:contact@originsdigital.com"
+        </p>
-            className="rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-all duration-150"
+        <div className="flex items-center gap-4 pt-2">
+          <Link
+            to="/app"
+            className="inline-flex items-center gap-2 rounded border border-od-accent bg-od-accent px-6 py-2.5 font-mono text-sm font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim"
           >
-            Nous contacter
+            Explorer les vidéos
-          </a>
+          </Link>
         </div>
-
       </section>
 
     </div>
   );
 }
-
-// ─── PricingCard ──────────────────────────────────────────────────────────────
-
-function PricingCard({ tier }: { tier: Tier }) {
-  const base =
-    'relative flex flex-col gap-5 rounded border p-6 transition-all duration-150';
-  const highlighted =
-    tier.highlighted
-      ? 'border-od-accent bg-od-surface shadow-accent-glow'
-      : 'border-od-border bg-od-surface hover:border-od-border-hi';
-
-  return (
-    <div className={`${base} ${highlighted}`}>
-
-      {tier.highlighted && (
-        <div className="absolute -top-px left-0 right-0 h-px bg-od-accent" />
-      )}
-
-      {tier.highlighted && (
-        <div className="absolute -top-3 right-4 rounded-full border border-od-accent bg-od-bg px-2 py-0.5">
-          <span className="font-mono text-2xs text-od-accent tracking-wider">Populaire</span>
-        </div>
-      )}
-
-      {/* Header */}
-      <div className="flex flex-col gap-1">
-        <span className="font-mono text-xs uppercase tracking-widest text-od-muted">{tier.name}</span>
-        <div className="flex items-baseline gap-1">
-          <span className="font-display text-4xl font-bold text-od-text">{tier.price}</span>
-          <span className="font-mono text-xs text-od-muted">{tier.period}</span>
-        </div>
-        <span className="text-xs text-od-muted">{tier.tagline}</span>
-      </div>
-
-      {/* Separator */}
-      <div className="border-t border-od-border" />
-
-      {/* Features */}
-      <ul className="flex flex-col gap-2.5 flex-1">
-        {tier.features.map((f) => (
-          <li key={f} className="flex items-start gap-2 text-xs text-od-muted">
-            <span className="mt-0.5 text-od-accent">—</span>
-            <span>{f}</span>
-          </li>
-        ))}
-      </ul>
-
-      {/* CTA */}
-      <Link
-        to="/login"
-        className={
-          tier.highlighted
-            ? 'inline-flex items-center justify-center rounded border border-od-accent bg-od-accent px-4 py-2 font-mono text-xs font-semibold text-od-bg transition-all duration-150 hover:bg-od-accent-dim hover:border-od-accent-dim'
-            : 'inline-flex items-center justify-center rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted transition-all duration-150 hover:border-od-accent hover:text-od-accent'
-        }
-      >
-        {tier.cta}
-      </Link>
-
-    </div>
-  );
-}