// Hero — two variations toggled from Tweaks // --- Shared device mockup rendered with SVG + HTML --- function DeviceMockup({ rotate = 0, parallax = { x: 0, y: 0 } }) { return (
{/* Cyan ambient glow */}
{/* Laptop */}
{/* Phone */}
{/* Tablet */}
); } function LaptopFrame() { return (
{/* screen */}
{/* faint grid */}
InfinitDev
Construisons ensemble l'avenir digital.
{/* base */}
); } function PhoneFrame() { return (
InfinitDev
Solutions innovantes pour un monde digital.
); } function TabletFrame() { return (
InfinitDev
Créatif.
Moderne.
Performant.
); } // --- Hero variations --- function HeroSplit() { const [parallax, setParallax] = React.useState({ x: 0, y: 0 }); const [scroll, setScroll] = React.useState(0); const ref = React.useRef(null); const { isMobile, isTablet } = useViewport(); React.useEffect(() => { const onMove = (e) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; setParallax({ x: (e.clientX - cx) / 40, y: (e.clientY - cy) / 40 }); }; const onScroll = () => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); setScroll(Math.max(0, Math.min(1, -r.top / r.height))); }; window.addEventListener("mousemove", onMove); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("scroll", onScroll); }; }, []); return (
{/* Ambient cyan arc behind */}
{/* Decorative backgrounds */}
{/* Floating infinity SVG motifs */} {!isMobile &&
}
InfinitDev — Agence digitale

L'innovation
au service
de votre réussite.

Nous concevons et développons des solutions digitales sur mesure — web, mobile, interfaces et marketing — pour accompagner votre croissance et votre transformation.

{/* Inline trust strip */}
60+
Projets livrés
6 ans
D'expertise
98%
Clients satisfaits
); } function HeroCentered() { const [parallax, setParallax] = React.useState({ x: 0, y: 0 }); const ref = React.useRef(null); const { isMobile, isTablet } = useViewport(); React.useEffect(() => { const onMove = (e) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; setParallax({ x: (e.clientX - cx) / 50, y: (e.clientY - cy) / 50 }); }; window.addEventListener("mousemove", onMove); return () => window.removeEventListener("mousemove", onMove); }, []); return (
{/* Giant centered cyan wash */}
Agence digitale · Fondée 2020

L'innovation au service
de votre réussite digitale.

Spécialistes du développement sur mesure — nous transformons vos idées en produits digitaux performants, pensés pour durer.

{/* Centered device stack */}
); } function Hero({ variant = "split" }) { return variant === "centered" ? : ; } Object.assign(window, { Hero, DeviceMockup });