feat(landing): repositionner plateforme vidéo — supprimer pitch B2B SaaS
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 44s
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 44s
Landing reécrite : vidéos, playlists, créateurs. Supprimé : pricing, white-label, mentions SuperOAuth, PricingCard component. CTA principal → /app (explorer les vidéos).
This commit is contained in:
@@ -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{' '}
|
||||
<span className="text-od-accent">studios indépendants.</span>
|
||||
Partagez vos vidéos.{' '}
|
||||
<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.
|
||||
Auth multi-tenant, domaine custom, white-label complet —
|
||||
sans compromis sur la qualité.
|
||||
OriginsDigital est une plateforme de partage vidéo pensée pour les créateurs.
|
||||
Organisez votre contenu en playlists, proposez du contenu libre ou premium,
|
||||
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 ───────────────────────────────────────────────── */}
|
||||
<section className="grid grid-cols-3 gap-4">
|
||||
{/* ── Features ──────────────────────────────────────────────────────── */}
|
||||
<section className="grid grid-cols-1 sm: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: 'Playlists organisé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',
|
||||
desc: 'Logo, domaine, emails, couleurs — votre marque, pas la nôtre. CNAME custom inclus dès Starter.',
|
||||
label: 'Contenu libre & premium',
|
||||
desc: 'Proposez du contenu en accès libre pour attirer, et du contenu premium pour fidéliser. Vous décidez.',
|
||||
},
|
||||
{
|
||||
label: 'Prévisible',
|
||||
desc: 'Abonnement fixe, pas de commission, pas de per-seat. Votre croissance ne nous rémunère pas.',
|
||||
label: 'Fait pour les créateurs',
|
||||
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 ───────────────────────────────────────────────────────── */}
|
||||
<section id="pricing" className="flex flex-col gap-8 scroll-mt-20">
|
||||
|
||||
{/* ── Comment ça marche ─────────────────────────────────────────────── */}
|
||||
<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">
|
||||
{TIERS.map((tier) => (
|
||||
<PricingCard key={tier.name} tier={tier} />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
{[
|
||||
{ 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 */}
|
||||
<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"
|
||||
{/* ── CTA final ─────────────────────────────────────────────────────── */}
|
||||
<section className="flex flex-col items-center gap-4 rounded border border-od-border bg-od-surface px-8 py-10 text-center">
|
||||
<h2 className="font-display text-2xl font-bold text-od-text">
|
||||
Prêt à découvrir ?
|
||||
</h2>
|
||||
<p className="text-sm text-od-muted max-w-md">
|
||||
Pas besoin de compte pour explorer. Connectez-vous quand vous êtes prêt.
|
||||
</p>
|
||||
<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
|
||||
</a>
|
||||
Explorer les vidéos
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user