d19701e275
Phase 2 visuals — la page d'accueil prend vie via 3 plugins activables : - theme-guyane : palette tropicale (vert canopée, eau Maroni, ocre latérite, bois karbé, blanc cassé), tokens CSS, typographie display Cormorant Garamond, gradient ambient discret. Activé via body[data-theme=guyane]. - landing-hero : section plein écran avec illustration vectorielle SVG (carbet sur pilotis au crépuscule + fleuve + jungle), claim 'Le karbé qui dort vous attend', double CTA Découvrir / Proposer. Fallback = hero minimaliste actuel. - landing-sections : 5 sections en cascade — 2 expériences (route+fleuve vs expédition fleuve), Comment ça marche (3 étapes), CE (registre coop sans commission), Témoignages (3 stubs), Footer riche avec navigation. Illustrations 100% SVG inline (pas de dépendance image externe). Quand le plugin image-gallery-seed sera activé (Phase 2.4), les photos remplaceront progressivement les SVG. Aucune coupure sur le rendu actuel : tous les plugins visuels sont disabled par défaut, le site garde son look minimaliste tant que l'admin ne les a pas activés depuis /admin/plugins.
55 lines
2.7 KiB
TypeScript
55 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
|
|
/**
|
|
* Section dédiée aux Comités d'Entreprise (CE). Registre coop/solidaire,
|
|
* voix différente du reste de la home (qui parle au touriste aventurier).
|
|
*/
|
|
export function CESection() {
|
|
return (
|
|
<section className="bg-[var(--color-karbe-canopy-700)] text-[var(--color-karbe-bone)]">
|
|
<div className="mx-auto grid max-w-6xl gap-8 px-6 py-20 sm:px-8 sm:py-24 lg:grid-cols-2 lg:gap-16 lg:px-12">
|
|
<div>
|
|
<span className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--color-karbe-laterite-300)]">
|
|
Pour comités d'entreprise
|
|
</span>
|
|
<h2 className="mt-3 font-serif text-3xl font-medium leading-tight tracking-tight sm:text-4xl md:text-5xl">
|
|
Les carbets dorment quand vous n'y êtes pas.
|
|
<br />
|
|
<span className="italic text-[var(--color-karbe-bone)]/80">Partageons-les.</span>
|
|
</h2>
|
|
<p className="mt-5 text-base leading-relaxed text-[var(--color-karbe-bone)]/85 sm:text-lg">
|
|
Karbé est conçu pour que les comités sociaux possédant déjà un carbet le réservent à
|
|
leurs membres certains week-ends, et l'ouvrent au public touriste le reste de
|
|
l'année. Sans commission sur le séjour : le paiement revient intégralement au CE.
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="grid grid-cols-1 gap-4 self-center sm:grid-cols-2">
|
|
{[
|
|
{ k: "0 %", v: "de commission sur le séjour" },
|
|
{ k: "CE first", v: "vos membres réservent en priorité" },
|
|
{ k: "Public ouvert", v: "le reste des dates rentre dans le pot" },
|
|
{ k: "Sans paperasse", v: "Stripe encaisse et reverse direct" },
|
|
].map(({ k, v }) => (
|
|
<li
|
|
key={k}
|
|
className="rounded-2xl border border-[var(--color-karbe-bone)]/15 bg-[var(--color-karbe-bone)]/5 p-5 backdrop-blur-sm"
|
|
>
|
|
<div className="font-serif text-2xl font-medium text-[var(--color-karbe-laterite-300)]">{k}</div>
|
|
<div className="mt-1 text-sm leading-relaxed text-[var(--color-karbe-bone)]/85">{v}</div>
|
|
</li>
|
|
))}
|
|
<li className="sm:col-span-2">
|
|
<Link
|
|
href="/pour-comites-entreprise"
|
|
className="inline-flex items-center gap-2 rounded-full bg-[var(--color-karbe-laterite-500)] px-5 py-2.5 text-sm font-semibold text-[var(--color-karbe-bone)] transition hover:bg-[var(--color-karbe-laterite-700)]"
|
|
>
|
|
En savoir plus pour votre CE
|
|
<span aria-hidden>→</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|