PrintTrack

0 orders

{PT_STAGES.map((s) => (

{s.label}

{s.count}

))}

{PT_ORDERS.map((o) => (

{o.name}

{o.item}

{o.price}

{o.stage}

))}

); } function CinematicHero({ brandName = "IAMAI", eyebrow = "Miami · Q3 '26 builds open", tagline1 = "We build the system", tagline2 = "your shop is missing.", cardHeading = "Your shop deserves better than WhatsApp.", cardDescription = "Dashboard, client portal, automations — custom-built around how your business actually works. Ibrahim visits your shop. Oussama builds your system. Live in days. From $799.", metricValue = 20, metricLabel = "Active orders", ctaHeading = "Show us what's slowing you down.", ctaHeadingItalic = "Let's fix it.", ctaDescription = "A free visit. No commitment. Ibrahim comes to your shop, sees what's broken, and shows you what a system would look like. You decide.", }) { const containerRef = useRef(null); const mainCardRef = useRef(null); const mockupRef = useRef(null); const requestRef = useRef(0); // Mouse interaction (sheen + parallax) useEffect(() => { const handleMouseMove = (e) => { if (window.scrollY > window.innerHeight * 2) return; cancelAnimationFrame(requestRef.current); requestRef.current = requestAnimationFrame(() => { if (mainCardRef.current && mockupRef.current) { const rect = mainCardRef.current.getBoundingClientRect(); mainCardRef.current.style.setProperty("--mouse-x", `${e.clientX - rect.left}px`); mainCardRef.current.style.setProperty("--mouse-y", `${e.clientY - rect.top}px`); const xVal = (e.clientX / window.innerWidth - 0.5) * 2; const yVal = (e.clientY / window.innerHeight - 0.5) * 2; window.gsap?.to(mockupRef.current, { rotationY: xVal * 12, rotationX: -yVal * 12, ease: "power3.out", duration: 1.2, }); } }); }; window.addEventListener("mousemove", handleMouseMove); return () => { window.removeEventListener("mousemove", handleMouseMove); cancelAnimationFrame(requestRef.current); }; }, []); // Cinematic scroll timeline useEffect(() => { if (!window.gsap || !window.ScrollTrigger) return; const gsap = window.gsap; gsap.registerPlugin(window.ScrollTrigger); const isMobile = window.innerWidth < 768; const ctx = gsap.context(() => { gsap.set(".ch-text-track", { autoAlpha: 0, y: 60, scale: 0.85, filter: "blur(20px)", rotationX: -20 }); gsap.set(".ch-text-days", { autoAlpha: 1, clipPath: "inset(0 100% 0 0)" }); gsap.set(".ch-eyebrow", { autoAlpha: 0, y: 20 }); gsap.set(".ch-main-card", { y: window.innerHeight + 200, autoAlpha: 1 }); gsap.set([".ch-left-text", ".ch-brand-col", ".ch-mockup-wrapper", ".ch-floating-badge", ".phone-widget"], { autoAlpha: 0 }); gsap.set(".ch-cta-wrapper", { autoAlpha: 0, scale: 0.8, filter: "blur(30px)" }); // Intro const introTl = gsap.timeline({ delay: 0.3 }); introTl .to(".ch-eyebrow", { duration: 1.0, autoAlpha: 1, y: 0, ease: "power2.out" }, 0) .to(".ch-text-track", { duration: 1.8, autoAlpha: 1, y: 0, scale: 1, filter: "blur(0px)", rotationX: 0, ease: "expo.out" }, 0.1) .to(".ch-text-days", { duration: 1.4, clipPath: "inset(0 0% 0 0)", ease: "power4.inOut" }, "-=1.0"); // Scroll-pinned timeline const scrollTl = gsap.timeline({ scrollTrigger: { trigger: containerRef.current, start: "top top", end: "+=7000", pin: true, scrub: 1, anticipatePin: 1, }, }); scrollTl .to([".ch-hero-text-wrapper", ".ch-grid"], { scale: 1.15, filter: "blur(20px)", opacity: 0.2, ease: "power2.inOut", duration: 2 }, 0) .to(".ch-main-card", { y: 0, ease: "power3.inOut", duration: 2 }, 0) .to(".ch-main-card", { width: "100%", height: "100%", borderRadius: "0px", ease: "power3.inOut", duration: 1.5 }) .fromTo(".ch-mockup-wrapper", { y: 300, z: -500, rotationX: 50, rotationY: -30, autoAlpha: 0, scale: 0.6 }, { y: 0, z: 0, rotationX: 0, rotationY: 0, autoAlpha: 1, scale: 1, ease: "expo.out", duration: 2.5 }, "-=0.8" ) .fromTo(".phone-widget", { y: 40, autoAlpha: 0, scale: 0.95 }, { y: 0, autoAlpha: 1, scale: 1, stagger: 0.15, ease: "back.out(1.2)", duration: 1.5 }, "-=1.5") .to(".ch-progress-ring", { strokeDashoffset: 60, duration: 2, ease: "power3.inOut" }, "-=1.2") .to("[data-counter]", { innerHTML: metricValue, snap: { innerHTML: 1 }, duration: 2, ease: "expo.out" }, "-=2.0") .fromTo(".ch-floating-badge", { y: 100, autoAlpha: 0, scale: 0.7, rotationZ: -10 }, { y: 0, autoAlpha: 1, scale: 1, rotationZ: 0, ease: "back.out(1.5)", duration: 1.5, stagger: 0.2 }, "-=2.0") .fromTo(".ch-left-text", { x: -50, autoAlpha: 0 }, { x: 0, autoAlpha: 1, ease: "power4.out", duration: 1.5 }, "-=1.5") .fromTo(".ch-brand-col", { x: 50, autoAlpha: 0, scale: 0.8 }, { x: 0, autoAlpha: 1, scale: 1, ease: "expo.out", duration: 1.5 }, "<") .to({}, { duration: 2.5 }) .set(".ch-hero-text-wrapper", { autoAlpha: 0 }) .set(".ch-cta-wrapper", { autoAlpha: 1 }) .to({}, { duration: 1.5 }) .to([".ch-mockup-wrapper", ".ch-floating-badge", ".ch-left-text", ".ch-brand-col"], { scale: 0.9, y: -40, z: -200, autoAlpha: 0, ease: "power3.in", duration: 1.2, stagger: 0.05, }) .to(".ch-main-card", { width: isMobile ? "92vw" : "85vw", height: isMobile ? "92vh" : "85vh", borderRadius: isMobile ? "32px" : "40px", ease: "expo.inOut", duration: 1.8, }, "pullback") .to(".ch-cta-wrapper", { scale: 1, filter: "blur(0px)", ease: "expo.inOut", duration: 1.8 }, "pullback") .to(".ch-main-card", { y: -window.innerHeight - 300, ease: "power3.in", duration: 1.5 }); }, containerRef); return () => ctx.revert(); }, [metricValue]); return (