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.
75 lines
5 KiB
TypeScript
75 lines
5 KiB
TypeScript
import { RoadIcon, PirogueIcon } from "@/components/illustrations/Icons";
|
||
|
||
/**
|
||
* Section « 2 expériences » — route+fleuve vs expédition fleuve.
|
||
* Reflète la distinction métier qu'on appliquera côté schema dans le plugin
|
||
* `access-type`. Ici on ne fait que l'éditorialiser pour la home.
|
||
*/
|
||
export function ExperiencesSection() {
|
||
return (
|
||
<section className="relative bg-[var(--color-karbe-bone)] py-20 sm:py-24">
|
||
<div className="mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
|
||
<div className="max-w-2xl">
|
||
<span className="text-xs font-semibold uppercase tracking-[0.15em] text-[var(--color-karbe-canopy-700)]">
|
||
Deux façons de vivre Karbé
|
||
</span>
|
||
<h2 className="mt-3 font-serif text-3xl font-medium tracking-tight text-[var(--color-karbe-ink)] sm:text-4xl md:text-5xl">
|
||
Du bord du fleuve à l'expédition pirogue.
|
||
</h2>
|
||
<p className="mt-4 max-w-xl text-base leading-relaxed text-[var(--color-karbe-ink)]/75 sm:text-lg">
|
||
Selon l'envie, on choisit le carbet qui se rejoint en voiture pour un week-end facile,
|
||
ou celui qu'on n'atteint qu'en pirogue, à plusieurs heures du dernier village.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-12 grid gap-6 md:grid-cols-2 md:gap-8">
|
||
{/* Route + fleuve */}
|
||
<article className="group relative overflow-hidden rounded-3xl border border-[var(--color-karbe-canopy-100)] bg-white p-8 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
|
||
<div className="absolute right-6 top-6 h-12 w-12 rounded-full bg-[var(--color-karbe-canopy-50)] p-3 text-[var(--color-karbe-canopy-700)]">
|
||
<RoadIcon className="h-full w-full" />
|
||
</div>
|
||
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-karbe-canopy-500)]">
|
||
🛣️ Route + fleuve
|
||
</p>
|
||
<h3 className="mt-3 font-serif text-2xl font-medium text-[var(--color-karbe-ink)]">
|
||
Le carbet du week-end
|
||
</h3>
|
||
<p className="mt-3 text-sm leading-relaxed text-[var(--color-karbe-ink)]/75">
|
||
Accessible par la piste depuis Kourou, Saint-Laurent ou Régina. Garez la voiture,
|
||
prenez vos affaires et vous y êtes. Pour les familles, les couples qui veulent du calme
|
||
sans logistique, les CE qui réservent des séjours courts.
|
||
</p>
|
||
<ul className="mt-5 space-y-1.5 text-sm text-[var(--color-karbe-ink)]/70">
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> 1 à 3 nuits typiques</li>
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> Voiture ou 4×4 selon la piste</li>
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-canopy-500)]" /> Carbets équipés, baignade possible</li>
|
||
</ul>
|
||
</article>
|
||
|
||
{/* Expédition fleuve */}
|
||
<article className="group relative overflow-hidden rounded-3xl border border-[var(--color-karbe-laterite-300)]/60 bg-gradient-to-br from-[var(--color-karbe-canopy-50)] via-white to-[var(--color-karbe-bone)] p-8 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
|
||
<div className="absolute right-6 top-6 h-12 w-12 rounded-full bg-[var(--color-karbe-laterite-300)]/30 p-3 text-[var(--color-karbe-laterite-700)]">
|
||
<PirogueIcon className="h-full w-full" />
|
||
</div>
|
||
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-karbe-laterite-700)]">
|
||
🛶 Expédition fleuve
|
||
</p>
|
||
<h3 className="mt-3 font-serif text-2xl font-medium text-[var(--color-karbe-ink)]">
|
||
Le carbet qu'on mérite
|
||
</h3>
|
||
<p className="mt-3 text-sm leading-relaxed text-[var(--color-karbe-ink)]/75">
|
||
Aucune route n'y mène. On embarque en pirogue depuis un dégrad, parfois deux ou
|
||
trois heures de remontée. Pour ceux qui veulent vraiment dormir loin — singes hurleurs,
|
||
ciel sans halo, l'eau du fleuve à 5 mètres du hamac.
|
||
</p>
|
||
<ul className="mt-5 space-y-1.5 text-sm text-[var(--color-karbe-ink)]/70">
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> 2 nuits minimum recommandées</li>
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> Pirogue avec passeur (loueur ou partenaire)</li>
|
||
<li className="flex items-center gap-2"><span className="h-1 w-1 rounded-full bg-[var(--color-karbe-laterite-500)]" /> Saison sèche conseillée (juillet-novembre)</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|