diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..3e307df --- /dev/null +++ b/.claude/settings.json @@ -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(*)" + ] + } +} diff --git a/docs/vision-b2b.md b/docs/vision-b2b.md new file mode 100644 index 0000000..5b463ce --- /dev/null +++ b/docs/vision-b2b.md @@ -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é diff --git a/frontend/index.html b/frontend/index.html index 6c3188c..c92879b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,9 @@ OriginsDigital + + +
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8072b20..6274432 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,8 @@ -import { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { AuthProvider } from './context/AuthContext'; import Layout from './components/layout/Layout'; import RequireAuth from './components/RequireAuth'; +import LandingPage from './pages/LandingPage'; import HomePage from './pages/HomePage'; import LoginPage from './pages/LoginPage'; import CallbackPage from './pages/CallbackPage'; @@ -12,26 +12,14 @@ import PlaylistPage from './pages/PlaylistPage'; import AdminPage from './pages/AdminPage'; import ProfilePage from './pages/ProfilePage'; -type Theme = 'dark' | 'light'; - function App() { - const [theme, setTheme] = useState(() => { - 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 ( - }> - } /> + }> + } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx new file mode 100644 index 0000000..d6a5e5d --- /dev/null +++ b/frontend/src/components/layout/Footer.tsx @@ -0,0 +1,21 @@ +export default function Footer() { + return ( +
+
+
+ OD + OriginsDigital +
+

+ © {new Date().getFullYear()} OriginsDigital — Tous droits réservés +

+
+ + Contact + + Powered by SuperOAuth +
+
+
+ ); +} diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx index 9153605..dcc6677 100644 --- a/frontend/src/components/layout/Header.tsx +++ b/frontend/src/components/layout/Header.tsx @@ -5,13 +5,11 @@ import type { User } from '../../context/AuthContext'; import UserBadge from '../UserBadge'; interface HeaderProps { - theme: 'dark' | 'light'; - onToggleTheme: () => void; user: User | null; onLogout: () => void; } -export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) { +export default function Header({ user, onLogout }: HeaderProps) { const [open, setOpen] = useState(false); const dropdownRef = useRef(null); @@ -33,67 +31,65 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP } return ( -
-
+
+
{/* Logo */} - - + + OD - + OriginsDigital {/* Navigation */} -