// ─── NAV ────────────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); // "Problèmes" replaced by "ROI" per request const links = [['ROI','#roi'],['Démo','#demo'],['Fonctionnement','#process'],['FAQ','#faq']]; const navStyle = { position:'fixed',top:0,left:0,right:0,zIndex:50,transition:'all 0.3s ease', background: scrolled ? 'rgba(255,255,255,0.97)' : 'transparent', backdropFilter: scrolled ? 'blur(20px)' : 'none', borderBottom: scrolled ? `1px solid ${B.border}` : 'none', boxShadow: scrolled ? B.shadow : 'none', }; return ( ); } window.Nav = Nav; // ─── HERO BACKGROUND ────────────────────────────────────────────────────────── function HeroBg() { return (
{/* Animated rings */} {[1,2,3,4,5].map(i=>(
))} {/* Particle dots */} {[...Array(12)].map((_,i)=>(
))}
); } // ─── GARAGE CAROUSEL ────────────────────────────────────────────────────────── const CAROUSEL_IMAGES = [ { src: 'uploads/gragiste caroussel 1.png', caption: 'Gérant de garage · Tablette connectée' }, { src: 'uploads/GARAGISTE CAROUSSEL 2.png', caption: "Technicien en action · L'atelier tourne" }, { src: 'uploads/GARAGISTE CAROUSSEL 3.png', caption: "Accueil client · Agenda toujours à jour" }, ]; function GarageCarousel() { const [active, setActive] = React.useState(0); const [animating, setAnimating] = React.useState(false); const [dir, setDir] = React.useState(1); // 1 = forward, -1 = backward const goTo = React.useCallback((idx) => { if (animating) return; setDir(idx > active ? 1 : -1); setAnimating(true); setTimeout(() => { setActive(idx); setAnimating(false); }, 420); }, [active, animating]); React.useEffect(() => { const t = setInterval(() => { setDir(1); setAnimating(true); setTimeout(() => { setActive(a => (a + 1) % CAROUSEL_IMAGES.length); setAnimating(false); }, 420); }, 4500); return () => clearInterval(t); }, []); const img = CAROUSEL_IMAGES[active]; return (
{/* Main frame */}
{/* Image */} {img.caption} {/* Gradient overlay */}
{/* Caption */}

{img.caption}

{/* Top gradient for frame feel */}
{/* Nav arrows */}
{/* Dot indicators */}
{CAROUSEL_IMAGES.map((_,i)=>(
{/* Live indicator badge */}
Agent actif 24/7
); } // ─── HERO ───────────────────────────────────────────────────────────────────── function Hero() { const [loaded, setLoaded] = React.useState(false); React.useEffect(() => { setTimeout(() => setLoaded(true), 100); }, []); return (
{/* Left copy */}
Réceptionniste IA · Garages indépendants
{/* Stars — just below the chip */}
{[...Array(5)].map((_,i)=>)}
5/5 · Garages indépendants

Ne ratez plus aucun appel client,{' '} même quand vous êtes sous une voiture.

Omnira est un réceptionniste IA pour garages : il décroche, prend les messages, filtre les urgences, planifie les RDV et vous transmet l'essentiel.

Écouter une démo d'appel Calculer mes appels perdus
{/* Right — Garage Carousel */}
{/* Wave separator */}
); } window.Hero = Hero;