feat(plugins-visuels): theme-guyane + landing-hero + landing-sections
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.
This commit is contained in:
Claude Integration
parent
4454f7331d
commit
d19701e275
11 changed files with 691 additions and 30 deletions
|
|
@ -10,10 +10,45 @@
|
|||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
/* === Theme Guyane (plugin theme-guyane) === */
|
||||
/* Activé lorsque <body data-theme="guyane"> (gated par le plugin). */
|
||||
--color-karbe-canopy-50: #f1f7f1;
|
||||
--color-karbe-canopy-100: #dceadc;
|
||||
--color-karbe-canopy-300: #82b58a;
|
||||
--color-karbe-canopy-500: #2f7a3f; /* vert canopée Guyane */
|
||||
--color-karbe-canopy-700: #1f5530;
|
||||
--color-karbe-canopy-900: #103018;
|
||||
|
||||
--color-karbe-maroni-100: #e6e7d8; /* eau Maroni — vert-brun chargé latérite */
|
||||
--color-karbe-maroni-300: #b4b690;
|
||||
--color-karbe-maroni-500: #8a8a55;
|
||||
--color-karbe-maroni-700: #5e5e32;
|
||||
|
||||
--color-karbe-laterite-300: #d99c6a; /* ocre latérite rougeâtre */
|
||||
--color-karbe-laterite-500: #c46434;
|
||||
--color-karbe-laterite-700: #8c3d18;
|
||||
|
||||
--color-karbe-wood-300: #c0a280;
|
||||
--color-karbe-wood-500: #8d6b48; /* bois karbé */
|
||||
--color-karbe-wood-700: #5a4329;
|
||||
|
||||
--color-karbe-bone: #f5f1e8; /* blanc cassé chaud */
|
||||
--color-karbe-ink: #1a1a14;
|
||||
}
|
||||
|
||||
body[data-theme="guyane"] {
|
||||
--background: var(--color-karbe-bone);
|
||||
--foreground: var(--color-karbe-ink);
|
||||
font-family: var(--font-geist-sans), system-ui, sans-serif;
|
||||
background-image:
|
||||
radial-gradient(ellipse at top, rgba(47, 122, 63, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at bottom, rgba(196, 100, 52, 0.04) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
:root:not([data-theme="guyane"]) {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Geist, Geist_Mono, Cormorant_Garamond } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { PluginProvider } from "@/lib/plugins/client";
|
||||
import { getEnabledPluginKeys, syncPluginsFromRegistry } from "@/lib/plugins/server";
|
||||
|
|
@ -14,6 +14,15 @@ const geistMono = Geist_Mono({
|
|||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
// Cormorant Garamond : typographie display pour le theme Guyane (gated par
|
||||
// le plugin `theme-guyane`). Sert pour `font-serif`.
|
||||
const cormorant = Cormorant_Garamond({
|
||||
variable: "--font-serif",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
|
@ -50,12 +59,17 @@ export default async function RootLayout({
|
|||
enabledKeys = [];
|
||||
}
|
||||
|
||||
const themeGuyane = enabledKeys.includes("theme-guyane");
|
||||
|
||||
return (
|
||||
<html
|
||||
lang="fr"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${cormorant.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">
|
||||
<body
|
||||
data-theme={themeGuyane ? "guyane" : undefined}
|
||||
className="min-h-full flex flex-col font-sans"
|
||||
>
|
||||
<PluginProvider enabledKeys={enabledKeys}>{children}</PluginProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,63 @@
|
|||
import Link from "next/link";
|
||||
import { IfPluginEnabled } from "@/components/IfPluginEnabled";
|
||||
import { HeroSection } from "@/components/landing/HeroSection";
|
||||
import { ExperiencesSection } from "@/components/landing/ExperiencesSection";
|
||||
import { HowItWorksSection } from "@/components/landing/HowItWorksSection";
|
||||
import { CESection } from "@/components/landing/CESection";
|
||||
import { TestimonialsSection } from "@/components/landing/TestimonialsSection";
|
||||
import { LandingFooter } from "@/components/landing/Footer";
|
||||
|
||||
/**
|
||||
* Page d'accueil — la majorité du contenu est conditionnée par les plugins :
|
||||
* - `landing-hero` → hero plein écran
|
||||
* - `landing-sections` → 2 expériences + comment ça marche + CE + témoignages + footer riche
|
||||
*
|
||||
* Si aucun de ces plugins n'est activé, on retombe sur la home historique
|
||||
* minimaliste (fallback). Activable depuis /admin/plugins.
|
||||
*/
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center bg-zinc-50 px-6 dark:bg-black">
|
||||
<main className="flex w-full max-w-2xl flex-col items-center gap-6 text-center">
|
||||
<h1 className="text-4xl font-semibold tracking-tight text-black sm:text-5xl dark:text-zinc-50">
|
||||
Karbé — carbets fluviaux de Guyane
|
||||
</h1>
|
||||
<p className="max-w-xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
La marketplace pour louer des carbets le long des fleuves de Guyane.
|
||||
Connecter voyageurs et hôtes pour des séjours authentiques au cœur de
|
||||
la forêt amazonienne.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<Link
|
||||
href="/carbets"
|
||||
className="rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700"
|
||||
>
|
||||
Découvrir les carbets
|
||||
</Link>
|
||||
<Link
|
||||
href="/espace-hote"
|
||||
className="rounded-md border border-zinc-300 px-5 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
|
||||
>
|
||||
Espace hôte
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<>
|
||||
<IfPluginEnabled
|
||||
plugin="landing-hero"
|
||||
fallback={
|
||||
// Fallback héro minimaliste — historique
|
||||
<div className="flex flex-1 items-center justify-center bg-zinc-50 px-6 dark:bg-black">
|
||||
<main className="flex w-full max-w-2xl flex-col items-center gap-6 text-center">
|
||||
<h1 className="text-4xl font-semibold tracking-tight text-black sm:text-5xl dark:text-zinc-50">
|
||||
Karbé — carbets fluviaux de Guyane
|
||||
</h1>
|
||||
<p className="max-w-xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
La marketplace pour louer des carbets le long des fleuves de Guyane.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<Link
|
||||
href="/carbets"
|
||||
className="rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700"
|
||||
>
|
||||
Découvrir les carbets
|
||||
</Link>
|
||||
<Link
|
||||
href="/espace-hote"
|
||||
className="rounded-md border border-zinc-300 px-5 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-900"
|
||||
>
|
||||
Espace hôte
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<HeroSection />
|
||||
</IfPluginEnabled>
|
||||
|
||||
<IfPluginEnabled plugin="landing-sections">
|
||||
<ExperiencesSection />
|
||||
<HowItWorksSection />
|
||||
<CESection />
|
||||
<TestimonialsSection />
|
||||
<LandingFooter />
|
||||
</IfPluginEnabled>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue