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).

backend/src/routes/auth.routes.ts

@@ -92,7 +92,7 @@ router.post("/login", async (req: Request, res: Response): Promise<void> => {
  * le valide, puis le pose en httpOnly cookie.
  */
 router.post("/session", async (req: Request, res: Response): Promise<void> => {
-  const { token } = req.body as { token?: string };
+  const { token, refreshToken } = req.body as { token?: string; refreshToken?: string };
 
   if (!token) {
     res.status(400).json({ success: false, error: "MISSING_TOKEN" });
@@ -126,6 +126,9 @@ router.post("/session", async (req: Request, res: Response): Promise<void> => {
     await upsertUser(data.data.user as { id: string; email: string | null; nickname: string });
 
     res.cookie(COOKIE_NAME, token, COOKIE_OPTIONS);
+    if (refreshToken) {
+      res.cookie(REFRESH_COOKIE_NAME, refreshToken, REFRESH_COOKIE_OPTIONS);
+    }
     res.json({ success: true, data: { user: data.data.user } });
   } catch (err) {
     logger.error("POST /auth/session — auth service unavailable", { err });

frontend/src/components/auth/LoginButton.tsx

@@ -3,9 +3,10 @@ import { buildAuthUrl, saveVerifier } from '../../lib/oauth';
 
 interface LoginButtonProps {
   className?: string;
+  provider?: string;
 }
 
-export default function LoginButton({ className }: LoginButtonProps) {
+export default function LoginButton({ className, provider = 'discord' }: LoginButtonProps) {
   const [loading, setLoading] = useState(false);
 
   async function handleClick() {
@@ -13,7 +14,7 @@ export default function LoginButton({ className }: LoginButtonProps) {
     setLoading(true);
     try {
       const redirectUri = `${window.location.origin}/callback`;
-      const { url, verifier } = await buildAuthUrl(redirectUri);
+      const { url, verifier } = await buildAuthUrl(redirectUri, provider);
       saveVerifier(verifier);
       window.location.href = url;
     } catch {

frontend/src/lib/oauth.ts

@@ -33,6 +33,7 @@ export async function generateCodeChallenge(verifier: string): Promise<string> {
 
 export async function buildAuthUrl(
   redirectUri: string,
+  provider: string,
   scope = 'openid profile email',
   clientId  = OAUTH_CLIENT_ID,
 ): Promise<{ url: string; verifier: string }> {
@@ -46,6 +47,7 @@ export async function buildAuthUrl(
     redirect_uri:          redirectUri,
     scope,
     state,
+    provider,
     code_challenge:        challenge,
     code_challenge_method: 'S256',
   });
@@ -58,12 +60,20 @@ export async function buildAuthUrl(
 
 // --- Token exchange ---
 
+export interface TokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  token_type: string;
+  expires_in: number;
+  scope?: string;
+}
+
 export async function exchangeCode(
   code: string,
   verifier: string,
   redirectUri: string,
   clientId = OAUTH_CLIENT_ID,
-): Promise<string> {
+): Promise<TokenResponse> {
   const response = await fetch(`${OAUTH_URL}/oauth/token`, {
     method:  'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
@@ -81,11 +91,10 @@ export async function exchangeCode(
     throw new Error(`OAuth token exchange failed (${response.status}): ${text}`);
   }
 
-  const data = await response.json() as { access_token?: string };
+  const data = await response.json() as TokenResponse;
   if (!data.access_token) throw new Error('No access_token in OAuth response');
 
-  sessionStorage.setItem(SESSION_KEY_TOKEN, data.access_token);
+  return data;
-  return data.access_token;
 }
 
 // --- Token accessors ---

frontend/src/pages/CallbackPage.tsx

@@ -37,8 +37,19 @@ export default function CallbackPage() {
       const redirectUri = `${window.location.origin}/callback`;
 
       exchangeCode(code, verifier, redirectUri)
-        .then(() => {
+        .then((tokens) => {
-          navigate('/app', { replace: true });
+          // Pass tokens to backend to set httpOnly cookies + sync user
+          return apiFetch<SessionResponse>('/auth/session', {
+            method: 'POST',
+            body: JSON.stringify({
+              token: tokens.access_token,
+              refreshToken: tokens.refresh_token,
+            }),
+          });
+        })
+        .then((res) => {
+          setUser(res.data.user);
+          navigate('/', { replace: true });
         })
         .catch(() => setError("Échec de l'échange de code OAuth. Réessaie."));
       return;

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>
-  );
-}

frontend/src/pages/LoginPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
 import { useAuthContext, type User } from '../context/AuthContext';
+import { buildAuthUrl, saveVerifier } from '../lib/oauth';
 
 const PROVIDERS = [
   { id: 'discord', label: 'Discord' },
@@ -15,8 +16,6 @@ export default function LoginPage() {
   const location = useLocation();
   const { setUser } = useAuthContext();
   const from = (location.state as { from?: Location })?.from?.pathname ?? '/';
-  const base = import.meta.env.VITE_SUPEROAUTH_URL;
-  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
 
   const [email, setEmail]         = useState('');
   const [password, setPassword]   = useState('');
@@ -24,10 +23,18 @@ export default function LoginPage() {
   const [error, setError]         = useState<string | null>(null);
   const [oauthLoading, setOauthLoading] = useState<string | null>(null);
 
-  function handleOAuth(providerId: string) {
+  async function handleOAuth(providerId: string) {
     if (oauthLoading) return;
     setOauthLoading(providerId);
-    window.location.href = `${base}/api/v1/oauth/${providerId}?redirectUrl=${redirectUrl}&tenantId=origins`;
+    try {
+      const redirectUri = `${window.location.origin}/callback`;
+      const { url, verifier } = await buildAuthUrl(redirectUri, providerId);
+      saveVerifier(verifier);
+      window.location.href = url;
+    } catch {
+      setOauthLoading(null);
+      setError('Impossible de démarrer la connexion OAuth.');
+    }
   }
 
   async function handleSubmit(e: React.FormEvent) {