feat(sprint3-step1-2): vision B2B + Tailwind tokens + LandingPage + Pricing B2B
This commit is contained in:
19
.claude/settings.json
Normal file
19
.claude/settings.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(npm *)",
|
||||||
|
"Bash(git *)",
|
||||||
|
"Bash(pm2 *)",
|
||||||
|
"Bash(curl *)",
|
||||||
|
"Bash(ls *)",
|
||||||
|
"Bash(cat *)",
|
||||||
|
"Bash(grep *)",
|
||||||
|
"Bash(mkdir *)",
|
||||||
|
"Bash(cp *)",
|
||||||
|
"Bash(mv *)",
|
||||||
|
"Bash(node *)",
|
||||||
|
"Bash(npx *)",
|
||||||
|
"Write(*)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
80
docs/vision-b2b.md
Normal file
80
docs/vision-b2b.md
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
# OriginsDigital — Vision B2B
|
||||||
|
|
||||||
|
> Sprint 3 — Step 1 output
|
||||||
|
> Date : 2026-03-17
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Segment cible
|
||||||
|
|
||||||
|
**Studios indépendants et créateurs professionnels**
|
||||||
|
|
||||||
|
- Studios indé : 1-10 personnes, besoin d'une vitrine pro sans ressources design
|
||||||
|
- Créateurs pro : streamers, YouTubers, artistes digitaux qui monétisent leur audience
|
||||||
|
- Critère d'exclusion V1 : pas de grandes agences (cycle vente trop long), pas de B2C pur
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## White-label — Ce qui est personnalisable
|
||||||
|
|
||||||
|
| Élément | Personnalisable | Notes |
|
||||||
|
|---------|----------------|-------|
|
||||||
|
| Logo | ✅ | Upload SVG/PNG, remplacement complet |
|
||||||
|
| Couleurs | ✅ | Palette primaire + secondaire via config |
|
||||||
|
| Domaine | ✅ | CNAME custom (studio.client.com) |
|
||||||
|
| Emails transactionnels | ✅ | Templates brandés (sender name + domaine) |
|
||||||
|
| Favicon | ✅ | |
|
||||||
|
| Nom de la plateforme | ✅ | Affiché dans les headers + emails |
|
||||||
|
| Code source | ❌ | Pas d'accès au code — SaaS uniquement |
|
||||||
|
|
||||||
|
Isolation tenant complète via **SuperOAuth Tier 3** (per-tenant providers, déjà en prod ✅).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Identité visuelle cible
|
||||||
|
|
||||||
|
**3 mots** : Sobre. Précis. Autoritaire.
|
||||||
|
|
||||||
|
Références : Linear, Vercel, Pika.art
|
||||||
|
|
||||||
|
- Socle : Void Dark conservé
|
||||||
|
- Accent : or inchangé
|
||||||
|
- Typographie : ajout d'une typo display (Geist / Cal Sans) pour les H1
|
||||||
|
- Pas de gradients agressifs — micro-détails subtils (bordures fines, shadows légères)
|
||||||
|
- Motion : transitions rapides (150ms), pas d'animations décoratives
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pricing model B2B
|
||||||
|
|
||||||
|
**Abonnement mensuel par tier** — pas de per-seat, pas de commission en V1
|
||||||
|
|
||||||
|
| Tier | Prix/mois | Inclus |
|
||||||
|
|------|-----------|--------|
|
||||||
|
| Starter | 29€ | 1 projet, domaine custom, white-label basique |
|
||||||
|
| Studio | 99€ | 5 projets, analytics, intégration SuperOAuth |
|
||||||
|
| Pro | 249€ | Projets illimités, API access, support prioritaire |
|
||||||
|
| Enterprise | Sur devis | SLA, déploiement dédié, onboarding |
|
||||||
|
|
||||||
|
**Pourquoi abonnement et pas per-seat ?**
|
||||||
|
Cible studios indé = équipes petites → per-seat pénalise la croissance et complexifie la facturation.
|
||||||
|
Commission découragerait les cas d'usage à fort volume. Abonnement = prévisibilité pour le client et pour nous.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Différenciateur principal
|
||||||
|
|
||||||
|
**SuperOAuth Tier 3 intégré nativement** = auth multi-tenant per-tenant providers, en standard.
|
||||||
|
|
||||||
|
Aucun concurrent direct dans la cible (studios indé / créateurs pro) ne propose ça en standard.
|
||||||
|
C'est notre moat technique visible dès l'onboarding.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brief refonte visuelle → Step 2
|
||||||
|
|
||||||
|
- Palette : fond `#0a0a0a`, surface `#111`, accent `#c9a84c` (or mat)
|
||||||
|
- Typo display : Cal Sans ou Geist — pour H1 uniquement
|
||||||
|
- Composants prioritaires : hero landing, pricing card, CTA button, navbar avec login OAuth
|
||||||
|
- Mobile-first, dark mode natif (pas de toggle — dark only en V1)
|
||||||
|
- Densité : élevée — pas d'espaces vides décoratifs, chaque pixel justifié
|
||||||
@@ -4,6 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>OriginsDigital</title>
|
<title>OriginsDigital</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||||
import { AuthProvider } from './context/AuthContext';
|
import { AuthProvider } from './context/AuthContext';
|
||||||
import Layout from './components/layout/Layout';
|
import Layout from './components/layout/Layout';
|
||||||
import RequireAuth from './components/RequireAuth';
|
import RequireAuth from './components/RequireAuth';
|
||||||
|
import LandingPage from './pages/LandingPage';
|
||||||
import HomePage from './pages/HomePage';
|
import HomePage from './pages/HomePage';
|
||||||
import LoginPage from './pages/LoginPage';
|
import LoginPage from './pages/LoginPage';
|
||||||
import CallbackPage from './pages/CallbackPage';
|
import CallbackPage from './pages/CallbackPage';
|
||||||
@@ -12,26 +12,14 @@ import PlaylistPage from './pages/PlaylistPage';
|
|||||||
import AdminPage from './pages/AdminPage';
|
import AdminPage from './pages/AdminPage';
|
||||||
import ProfilePage from './pages/ProfilePage';
|
import ProfilePage from './pages/ProfilePage';
|
||||||
|
|
||||||
type Theme = 'dark' | 'light';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [theme, setTheme] = useState<Theme>(() => {
|
|
||||||
return (localStorage.getItem('od-theme') as Theme) ?? 'dark';
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
|
||||||
localStorage.setItem('od-theme', theme);
|
|
||||||
}, [theme]);
|
|
||||||
|
|
||||||
const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthProvider>
|
<AuthProvider>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
|
<Route element={<Layout />}>
|
||||||
<Route path="/" element={<HomePage />} />
|
<Route path="/" element={<LandingPage />} />
|
||||||
|
<Route path="/app" element={<HomePage />} />
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
<Route path="/callback" element={<CallbackPage />} />
|
<Route path="/callback" element={<CallbackPage />} />
|
||||||
<Route path="/video/:id" element={<VideoPage />} />
|
<Route path="/video/:id" element={<VideoPage />} />
|
||||||
|
|||||||
21
frontend/src/components/layout/Footer.tsx
Normal file
21
frontend/src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="border-t border-od-border bg-od-bg">
|
||||||
|
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-mono text-xs font-bold tracking-[0.2em] text-od-accent">OD</span>
|
||||||
|
<span className="text-xs text-od-muted">OriginsDigital</span>
|
||||||
|
</div>
|
||||||
|
<p className="font-mono text-2xs text-od-muted">
|
||||||
|
© {new Date().getFullYear()} OriginsDigital — Tous droits réservés
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<a href="mailto:contact@originsdigital.com" className="font-mono text-2xs text-od-muted hover:text-od-text transition-colors duration-150">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
<span className="font-mono text-2xs text-od-muted">Powered by SuperOAuth</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -5,13 +5,11 @@ import type { User } from '../../context/AuthContext';
|
|||||||
import UserBadge from '../UserBadge';
|
import UserBadge from '../UserBadge';
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
theme: 'dark' | 'light';
|
|
||||||
onToggleTheme: () => void;
|
|
||||||
user: User | null;
|
user: User | null;
|
||||||
onLogout: () => void;
|
onLogout: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
|
export default function Header({ user, onLogout }: HeaderProps) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
@@ -33,67 +31,65 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="border-b border-od-border bg-od-surface">
|
<header className="sticky top-0 z-40 border-b border-od-border bg-od-bg/90 backdrop-blur-sm">
|
||||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-6">
|
||||||
|
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link to="/" className="flex items-center gap-2 group">
|
<Link to="/" className="flex items-center gap-2.5 group">
|
||||||
<span className="font-mono text-xs font-bold text-od-accent tracking-widest group-hover:text-od-accent-dim transition-colors">
|
<span className="font-mono text-xs font-bold tracking-[0.2em] text-od-accent group-hover:text-od-accent-dim transition-colors duration-150">
|
||||||
OD
|
OD
|
||||||
</span>
|
</span>
|
||||||
<span className="text-sm font-semibold text-od-text">
|
<span className="text-sm font-semibold text-od-text tracking-tight">
|
||||||
OriginsDigital
|
OriginsDigital
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
<nav className="flex gap-6">
|
<nav className="flex items-center gap-8">
|
||||||
<Link to="/" className="text-sm text-od-muted hover:text-od-text transition-colors">
|
<Link to="/" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
|
||||||
Accueil
|
Accueil
|
||||||
</Link>
|
</Link>
|
||||||
{user && (
|
{user && (
|
||||||
<Link to="/playlists" className="text-sm text-od-muted hover:text-od-text transition-colors">
|
<Link to="/playlists" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
|
||||||
Playlists
|
Playlists
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
{!user && (
|
||||||
|
<Link to="/#pricing" className="text-sm text-od-muted hover:text-od-text transition-colors duration-150">
|
||||||
|
Tarifs
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
{user?.roles?.some((r) => r === 'admin' || r === 'super_admin') && (
|
{user?.roles?.some((r) => r === 'admin' || r === 'super_admin') && (
|
||||||
<Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
|
<Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors duration-150">
|
||||||
admin
|
admin
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Right — thème + auth */}
|
{/* Right — auth */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-3">
|
||||||
<button
|
|
||||||
onClick={onToggleTheme}
|
|
||||||
aria-label="Changer le thème"
|
|
||||||
className="font-mono text-xs text-od-muted hover:text-od-text transition-colors"
|
|
||||||
>
|
|
||||||
{theme === 'dark' ? '◑' : '◐'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{user ? (
|
{user ? (
|
||||||
<div className="relative" ref={dropdownRef}>
|
<div className="relative" ref={dropdownRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setOpen((o) => !o)}
|
onClick={() => setOpen((o) => !o)}
|
||||||
className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
|
className="flex items-center gap-1.5 hover:opacity-80 transition-opacity duration-150"
|
||||||
>
|
>
|
||||||
<UserBadge user={user} />
|
<UserBadge user={user} />
|
||||||
<span className="font-mono text-xs text-od-muted">▾</span>
|
<span className="font-mono text-xs text-od-muted">▾</span>
|
||||||
</button>
|
</button>
|
||||||
{open && (
|
{open && (
|
||||||
<div className="absolute right-0 top-full mt-1 w-36 rounded border border-od-border bg-od-surface shadow-lg z-50">
|
<div className="absolute right-0 top-full mt-1.5 w-40 rounded border border-od-border bg-od-surface shadow-xl z-50 animate-fade-in">
|
||||||
<Link
|
<Link
|
||||||
to="/profile"
|
to="/profile"
|
||||||
onClick={() => setOpen(false)}
|
onClick={() => setOpen(false)}
|
||||||
className="block px-3 py-2 text-xs text-od-muted hover:text-od-text transition-colors"
|
className="block px-4 py-2.5 text-xs text-od-muted hover:text-od-text transition-colors duration-150"
|
||||||
>
|
>
|
||||||
Profil
|
Profil
|
||||||
</Link>
|
</Link>
|
||||||
|
<div className="border-t border-od-border" />
|
||||||
<button
|
<button
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
className="w-full text-left px-3 py-2 font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
|
className="w-full text-left px-4 py-2.5 font-mono text-xs text-od-muted hover:text-od-crit transition-colors duration-150"
|
||||||
>
|
>
|
||||||
Déconnexion
|
Déconnexion
|
||||||
</button>
|
</button>
|
||||||
@@ -103,9 +99,9 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
|
|||||||
) : (
|
) : (
|
||||||
<Link
|
<Link
|
||||||
to="/login"
|
to="/login"
|
||||||
className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
|
className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-all duration-150"
|
||||||
>
|
>
|
||||||
Connexion
|
Se connecter
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,26 +1,21 @@
|
|||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
|
import Footer from './Footer';
|
||||||
import { useAuthContext } from '../../context/AuthContext';
|
import { useAuthContext } from '../../context/AuthContext';
|
||||||
|
|
||||||
interface LayoutProps {
|
export default function Layout() {
|
||||||
theme: 'dark' | 'light';
|
|
||||||
onToggleTheme: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Layout({ theme, onToggleTheme }: LayoutProps) {
|
|
||||||
const { user, loading, setUser } = useAuthContext();
|
const { user, loading, setUser } = useAuthContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-od-bg text-od-text">
|
<div className="min-h-screen bg-od-bg text-od-text flex flex-col">
|
||||||
<Header
|
<Header
|
||||||
theme={theme}
|
|
||||||
onToggleTheme={onToggleTheme}
|
|
||||||
user={loading ? null : user}
|
user={loading ? null : user}
|
||||||
onLogout={() => setUser(null)}
|
onLogout={() => setUser(null)}
|
||||||
/>
|
/>
|
||||||
<main className="mx-auto max-w-5xl px-4 py-8">
|
<main className="flex-1 mx-auto w-full max-w-6xl px-6 py-10">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
241
frontend/src/pages/LandingPage.tsx
Normal file
241
frontend/src/pages/LandingPage.tsx
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
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">
|
||||||
|
|
||||||
|
{/* ── Hero ──────────────────────────────────────────────────────────── */}
|
||||||
|
<section className="pt-16 flex flex-col gap-6 max-w-3xl">
|
||||||
|
|
||||||
|
{/* Badge */}
|
||||||
|
<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
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Headline */}
|
||||||
|
<h1 className="font-display text-5xl font-bold leading-[1.1] tracking-tight text-od-text">
|
||||||
|
La plateforme des{' '}
|
||||||
|
<span className="text-od-accent">studios indépendants.</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Sous-titre */}
|
||||||
|
<p className="text-base text-od-muted leading-relaxed max-w-xl">
|
||||||
|
Lancez votre vitrine de contenu en quelques minutes.
|
||||||
|
Auth multi-tenant, domaine custom, white-label complet —
|
||||||
|
sans compromis sur la qualité.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTAs */}
|
||||||
|
<div className="flex items-center gap-4 pt-2">
|
||||||
|
<Link
|
||||||
|
to="/login"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
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 ───────────────────────────────────────────────── */}
|
||||||
|
<section className="grid grid-cols-3 gap-4">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
label: 'Auth multi-tenant',
|
||||||
|
desc: 'SuperOAuth Tier 3 intégré nativement. Per-tenant providers, isolation complète des données.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'White-label total',
|
||||||
|
desc: 'Logo, domaine, emails, couleurs — votre marque, pas la nôtre. CNAME custom inclus dès Starter.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Prévisible',
|
||||||
|
desc: 'Abonnement fixe, pas de commission, pas de per-seat. Votre croissance ne nous rémunère pas.',
|
||||||
|
},
|
||||||
|
].map(({ label, desc }) => (
|
||||||
|
<div
|
||||||
|
key={label}
|
||||||
|
className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-5 transition-colors duration-150 hover:border-od-border-hi"
|
||||||
|
>
|
||||||
|
<div className="h-px w-8 bg-od-accent" />
|
||||||
|
<p className="text-sm font-semibold text-od-text">{label}</p>
|
||||||
|
<p className="text-xs text-od-muted leading-relaxed">{desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Pricing ───────────────────────────────────────────────────────── */}
|
||||||
|
<section id="pricing" className="flex flex-col gap-8 scroll-mt-20">
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<span className="font-mono text-2xs uppercase tracking-widest text-od-muted">Tarifs</span>
|
||||||
|
<h2 className="font-display text-3xl font-bold text-od-text tracking-tight">
|
||||||
|
Simple. Sans surprise.
|
||||||
|
</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">
|
||||||
|
{TIERS.map((tier) => (
|
||||||
|
<PricingCard key={tier.name} tier={tier} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enterprise mention */}
|
||||||
|
<div className="flex items-center justify-between rounded border border-od-border bg-od-surface px-6 py-4">
|
||||||
|
<div className="flex flex-col gap-0.5">
|
||||||
|
<span className="text-sm font-semibold text-od-text">Enterprise</span>
|
||||||
|
<span className="text-xs text-od-muted">SLA, déploiement dédié, onboarding personnalisé</span>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="mailto:contact@originsdigital.com"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
Nous contacter
|
||||||
|
</a>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -2,39 +2,31 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* ─── Void Dark (défaut) ─────────────────────────────────────────────────── */
|
/* ─── Void Dark — dark only V1 ──────────────────────────────────────────── */
|
||||||
:root,
|
:root {
|
||||||
[data-theme="dark"] {
|
--od-bg: #0a0a0a; /* fond principal — validated */
|
||||||
--od-bg: #0a0a0d; /* fond principal — quasi-noir cool */
|
--od-surface: #111111; /* panneaux, cartes */
|
||||||
--od-surface: #111115; /* panneaux, cartes */
|
--od-surface-hi: #1a1a1a; /* survol, éléments élevés */
|
||||||
--od-surface-hi: #191920; /* survol, éléments élevés */
|
--od-border: #222222; /* séparateurs subtils */
|
||||||
--od-border: #222228; /* séparateurs subtils */
|
--od-border-hi: #2e2e2e; /* bordures hover */
|
||||||
--od-text: #dddde8; /* texte principal */
|
--od-text: #e8e8e8; /* texte principal */
|
||||||
--od-muted: #62626e; /* texte secondaire, labels */
|
--od-muted: #5a5a5a; /* texte secondaire, labels */
|
||||||
--od-accent: #d4a853; /* or chaud — premium */
|
--od-accent: #c9a84c; /* or mat — validated */
|
||||||
--od-accent-dim: #a07830; /* survol accent */
|
--od-accent-dim: #a08038; /* survol accent */
|
||||||
|
--od-accent-glow: rgba(201,168,76,0.12); /* glow subtil */
|
||||||
--od-crit: #d95f5f; /* erreurs */
|
--od-crit: #d95f5f; /* erreurs */
|
||||||
--od-ok: #5fc875; /* succès */
|
--od-ok: #5fc875; /* succès */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Void Light ─────────────────────────────────────────────────────────── */
|
/* ─── Base ───────────────────────────────────────────────────────────────── */
|
||||||
[data-theme="light"] {
|
html {
|
||||||
--od-bg: #f2f2f5;
|
color-scheme: dark;
|
||||||
--od-surface: #ffffff;
|
|
||||||
--od-surface-hi: #e8e8ee;
|
|
||||||
--od-border: #d0d0da;
|
|
||||||
--od-text: #14141a;
|
|
||||||
--od-muted: #6a6a78;
|
|
||||||
--od-accent: #a07830;
|
|
||||||
--od-accent-dim: #7a5c20;
|
|
||||||
--od-crit: #c04040;
|
|
||||||
--od-ok: #3aa855;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Base ───────────────────────────────────────────────────────────────── */
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--od-bg);
|
background-color: var(--od-bg);
|
||||||
color: var(--od-text);
|
color: var(--od-text);
|
||||||
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import type { Config } from 'tailwindcss';
|
import type { Config } from 'tailwindcss';
|
||||||
|
|
||||||
// Design system "Void" — palette custom OriginsDigital
|
// Design system "Void Dark" — OriginsDigital V1
|
||||||
// Les couleurs sont définies comme variables CSS dans src/styles/index.css
|
// Palette validée Step 1 : fond #0a0a0a, surface #111, accent #c9a84c (or mat)
|
||||||
// → thème sombre/clair géré via data-theme="dark|light" sur <html>
|
// Dark only — pas de toggle en V1
|
||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||||
theme: {
|
theme: {
|
||||||
@@ -13,17 +13,46 @@ export default {
|
|||||||
surface: 'var(--od-surface)',
|
surface: 'var(--od-surface)',
|
||||||
'surface-hi': 'var(--od-surface-hi)',
|
'surface-hi': 'var(--od-surface-hi)',
|
||||||
border: 'var(--od-border)',
|
border: 'var(--od-border)',
|
||||||
|
'border-hi': 'var(--od-border-hi)',
|
||||||
text: 'var(--od-text)',
|
text: 'var(--od-text)',
|
||||||
muted: 'var(--od-muted)',
|
muted: 'var(--od-muted)',
|
||||||
accent: 'var(--od-accent)',
|
accent: 'var(--od-accent)',
|
||||||
'accent-dim': 'var(--od-accent-dim)',
|
'accent-dim': 'var(--od-accent-dim)',
|
||||||
|
'accent-glow':'var(--od-accent-glow)',
|
||||||
crit: 'var(--od-crit)',
|
crit: 'var(--od-crit)',
|
||||||
ok: 'var(--od-ok)',
|
ok: 'var(--od-ok)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
// display : Geist — headlines H1, titres premium
|
||||||
mono: ['"JetBrains Mono"', '"Fira Code"', 'ui-monospace', 'monospace'],
|
display: ['Geist', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||||
|
sans: ['Geist', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||||
|
mono: ['"JetBrains Mono"', '"Fira Code"', 'ui-monospace', 'monospace'],
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
// Densité élevée — chaque pixel justifié
|
||||||
|
'2xs': ['0.625rem', { lineHeight: '1rem' }],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
sm: '0.25rem',
|
||||||
|
DEFAULT: '0.375rem',
|
||||||
|
md: '0.5rem',
|
||||||
|
lg: '0.75rem',
|
||||||
|
},
|
||||||
|
transitionDuration: {
|
||||||
|
DEFAULT: '150ms',
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'accent-glow': '0 0 0 1px var(--od-accent-glow), 0 4px 20px var(--od-accent-glow)',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'fade-in': {
|
||||||
|
from: { opacity: '0', transform: 'translateY(4px)' },
|
||||||
|
to: { opacity: '1', transform: 'translateY(0)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fade-in 150ms ease-out',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user