// Shared components for Gestopia const { useState, useEffect, useRef } = React; // ───────────────────────────────────────────────────────────── // LogoMark — the real Gestopia G mark (PNG). // ───────────────────────────────────────────────────────────── function LogoMark({ size = 28, style }) { return ( ); } // Logo lockup (mark + wordmark) used in nav and footer. function Logo({ size = 22, onClick }) { return ( ); } // ───────────────────────────────────────────────────────────── // Nav — sticky, logo left + center links + right (Login + CTA). // ───────────────────────────────────────────────────────────── function Nav({ view, setView, goToInfo }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Each nav link is either a same-page anchor or an info-page route. // Order MUST match the on-page section flow so users can scan top→bottom. const navLinks = [ { label: "Clients", kind: "anchor", target: "#clients" }, // 1st section after hero { label: "Fonctionnalités", kind: "anchor", target: "#features" }, // then features grid { label: "Produit", kind: "anchor", target: "#produit" }, // then "L'atelier en direct" { label: "Tarifs", kind: "anchor", target: "#tarifs" }, // then pricing { label: "Docs", kind: "info", target: "documentation" }, // → info page ]; const onLinkClick = (e, l) => { if (l.kind === "info") { e.preventDefault(); const go = goToInfo || window.__goToInfo; if (go) go(l.target); } else if (view !== "landing") { // We're not on landing — bounce to landing, then scroll once mounted. e.preventDefault(); const anchor = l.target; setView("landing"); setTimeout(() => { const el = document.querySelector(anchor); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 64; window.scrollTo({ top, behavior: "smooth" }); } }, 80); } // else: default anchor behavior on landing }; return (
setView("landing")} />
); } // ───────────────────────────────────────────────────────────── // MockDashboard — a placeholder dashboard composed only of // rectangles & lines. NOT the real product UI; gives a sense // of density and structure. // ───────────────────────────────────────────────────────────── function MockDashboard({ height = 560 }) { return (
{/* Window chrome */}
app.gestopia.fr / tableau de bord
{/* Body */}
{/* Sidebar */} {/* Main */}
{/* KPI row */}
{[ ["Tickets ouverts", "27", "+4"], ["CA du jour", "1 284 €", "+12%"], ["Pièces faibles", "6", "—"], ["Délai moyen", "1.8 j", "-0.3j"], ].map(([k, v, d], i) => (
{k}
{v}
{d}
))}
{/* Tickets table */}
FICHE RÉPA · LIVE
27 résultats
{[ ["#R-4821", "iPhone 13 — écran", "M. Bertrand", "En cours", "var(--accent)"], ["#R-4820", "Galaxy S22 — batterie", "L. Moreau", "Devis envoyé", "#FFD400"], ["#R-4819", "MacBook Air — clavier", "Atelier X", "Prêt", "#00E5A0"], ["#R-4818", "iPad Pro — vitre", "C. Robin", "Pièce attendue", "#4F8BFF"], ["#R-4817", "Pixel 8 — port USB", "A. Diop", "À diagnostiquer", "var(--fg-faint)"], ].map(([id, item, client, status, color], i) => (
{id}
{item}
{client}
{status}
›
))}
); } // ───────────────────────────────────────────────────────────── // Hero backdrop — clean architecture. // // SYSTEM: // The grid lives only in the upper portion of the hero (top 55%) // where the headline & ticket card sit. Below that the hero is // plain dark bg — so when the next section starts, there's nothing // to "fade" because both are already the same flat color. // No horizon, no decorative junk — the visual continuity is // structural, not a special effect. // ───────────────────────────────────────────────────────────── function HeroBackdrop({ variant = "motion" }) { if (variant === "mockup") return null; return (