{/* Dynamic island */}

{/* ChatGPT app */}

{t("geo.chat.brand")}

{t("geo.chat.user")}

{t("geo.chat.a2")}

{t("geo.chat.placeholder")}

); } // ── Section 1: the cinematic pinned hero (nivk CinematicHero, GSAP timeline) ─ const PIN_SCROLL_END = "+=4200"; // nivk CINEMATIC_HERO_PIN_SCROLL_END_COMPACT const SCROLL_SCRUB = 0.12; function CinematicHero() { const t = window.LTQM.t; const containerRef = React.useRef(null); const mainCardRef = React.useRef(null); const mockupRef = React.useRef(null); const rafRef = React.useRef(0); const [staticMode, setStaticMode] = React.useState(window.LTQEngine.tier === "static"); React.useEffect(() => { let cleanup = null, disposed = false; window.LTQEngine.load("scrolltrigger").then((ST) => { const gsap = window.gsap; if (disposed) return; if (!ST || !gsap) { setStaticMode(true); return; } const el = containerRef.current; if (!el) return; const isMobile = window.innerWidth < 768; const q = (sel) => el.querySelectorAll(sel); // Mouse parallax + card sheen tracking const onMove = (e) => { if (window.scrollY > window.innerHeight * 2) return; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { if (!mainCardRef.current || !mockupRef.current) return; 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; gsap.to(mockupRef.current, { rotationY: xVal * 12, rotationX: -yVal * 12, ease: "power3.out", duration: 1.2 }); }); }; const onLeave = () => { if (!mockupRef.current) return; gsap.to(mockupRef.current, { rotationX: 0, rotationY: 0, rotationZ: 0, duration: 0.65, ease: "power2.out" }); }; window.addEventListener("mousemove", onMove); mainCardRef.current && mainCardRef.current.addEventListener("pointerleave", onLeave); // Intro: taglines blur in gsap.set(q(".text-track"), { autoAlpha: 0, y: 60, scale: 0.85, filter: "blur(20px)", rotationX: -20 }); gsap.set(q(".text-days"), { autoAlpha: 1, clipPath: "inset(0 100% 0 0)" }); const introTl = gsap.timeline({ delay: 0.3 }); introTl .to(q(".text-track"), { duration: 1.8, autoAlpha: 1, y: 0, scale: 1, filter: "blur(0px)", rotationX: 0, ease: "expo.out" }) .to(q(".text-days"), { duration: 1.4, clipPath: "inset(0 0% 0 0)", ease: "power4.inOut" }, "-=1.0"); // Scroll timeline (verbatim nivk choreography) gsap.set(q(".main-card"), { y: window.innerHeight + 200, autoAlpha: 1 }); gsap.set([...q(".card-left-text"), ...q(".card-right-text"), ...q(".mockup-scroll-wrapper"), ...q(".phone-widget")], { autoAlpha: 0 }); gsap.set(q(".cta-wrapper"), { autoAlpha: 0, scale: 0.8, filter: "blur(30px)" }); gsap.set(q(".globe-wrapper"), { autoAlpha: 0 }); gsap.set(q(".globe-visual"), { autoAlpha: 0, scale: 0.8 }); gsap.set(q(".globe-adoption-copy"), { autoAlpha: 0, y: 14 }); const scrollTl = gsap.timeline({ scrollTrigger: { trigger: el, start: "top top", end: PIN_SCROLL_END, pin: true, scrub: SCROLL_SCRUB, anticipatePin: 1, fastScrollEnd: true, invalidateOnRefresh: true }, }); scrollTl .add("start", 1.35) .to(q(".hero-text-wrapper"), { scale: 1, filter: "blur(0px)", opacity: 1, duration: 2 }, 0) .to(q(".main-card"), { y: window.innerHeight + 200, duration: 2 }, 0) .to(q(".hero-text-wrapper"), { scale: 1.15, filter: "blur(20px)", opacity: 0.2, ease: "power2.inOut", duration: 2 }, "start") .to(q(".main-card"), { y: 0, ease: "power3.inOut", duration: 2 }, "start") .to(q(".main-card"), { width: "100%", height: "100%", borderRadius: "0px", ease: "power3.inOut", duration: 1.5 }) .fromTo(q(".mockup-scroll-wrapper"), { y: 300, z: -500, rotationX: 50, rotationY: -34, rotationZ: -6, autoAlpha: 0, scale: 0.6 }, { y: 0, z: 0, rotationX: 4, rotationY: -11, rotationZ: -4, autoAlpha: 1, scale: 1, ease: "expo.out", duration: 3.0 }, "-=0.8") .fromTo(q(".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") .fromTo(q(".card-left-text"), { x: -50, autoAlpha: 0 }, { x: 0, autoAlpha: 1, ease: "power4.out", duration: 1.5 }, "-=1.5") .fromTo(q(".card-right-text"), { x: 50, autoAlpha: 0, scale: 0.8 }, { x: 0, autoAlpha: 1, scale: 1, ease: "expo.out", duration: 1.5 }, "<") .to({}, { duration: 2.5 }) .set(q(".hero-text-wrapper"), { autoAlpha: 0 }) .set(q(".cta-wrapper"), { autoAlpha: 1 }) .to({}, { duration: 1.5 }) .to([...q(".mockup-scroll-wrapper"), ...q(".card-left-text"), ...q(".card-right-text")], { scale: 0.95, y: -20, z: -100, autoAlpha: 0, ease: "power2.inOut", duration: 2.5, stagger: 0.1 }) .to(q(".main-card"), { width: isMobile ? "92vw" : "85vw", height: isMobile ? "92vh" : "85vh", borderRadius: isMobile ? "32px" : "40px", ease: "expo.inOut", duration: 2.8 }, "pullback") .to(q(".cta-wrapper"), { scale: 1, filter: "blur(0px)", ease: "expo.inOut", duration: 2.8 }, "pullback") .to(q(".globe-wrapper"), { autoAlpha: 1, duration: 0.35, ease: "power2.out" }, "pullback+=0.8") .to(q(".globe-visual"), { autoAlpha: 1, scale: 1, duration: 2.0, ease: "power2.out" }, "pullback+=0.8") .to(q(".globe-adoption-copy"), { autoAlpha: 1, y: 0, duration: 0.9, ease: "power2.out" }, "pullback+=2.8") .to({}, { duration: 2.9 }) .to(q(".main-card"), { y: -window.innerHeight - 300, ease: "power3.inOut", duration: 2.5 }); let resizeId; const onResize = () => { clearTimeout(resizeId); resizeId = setTimeout(() => ST.refresh(), 150); }; window.addEventListener("resize", onResize); window.addEventListener("orientationchange", onResize); cleanup = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("resize", onResize); window.removeEventListener("orientationchange", onResize); mainCardRef.current && mainCardRef.current.removeEventListener("pointerleave", onLeave); cancelAnimationFrame(rafRef.current); clearTimeout(resizeId); introTl.kill(); scrollTl.scrollTrigger && scrollTl.scrollTrigger.kill(); scrollTl.kill(); }; }); return () => { disposed = true; cleanup && cleanup(); }; }, []); const explore = () => { const target = document.getElementById("what-is-geo"); if (target) target.scrollIntoView({ behavior: "smooth", block: "start" }); else window.scrollTo({ top: window.innerHeight * 1.5, behavior: "smooth" }); }; return (

{/* Background layer: animated taglines */}

{t("geo.hero.tag1")} {t("geo.hero.tag2")}

{/* Background layer 2: the CTA the card flies away to reveal */}

{t("geo.def.title")}

{t("geo.hero.cta_desc")}

{/* Foreground: the physical ink card */}

{/* Globe pullback panel */}

{t("geo.hero.globe_heading")}

{t("geo.hero.adoption_lead")} {t("geo.hero.adoption_stat")} {t("geo.hero.adoption_rest")}

SQSEO

{t("geo.hero.sub")}

); } // ── Section 2: What is GEO? ───────────────────────────────────────────────── function Definition() { const t = window.LTQM.t; return (

{t("geo.def.pill")}

{t("geo.def.title")}

{t("geo.def.quote")}

{["geo.def.p1", "geo.def.p2", "geo.def.p3"].map((k, i) => (

{t(k)}

))}

); } // ── Section 3: Why GEO matters (editorial insight cards) ──────────────────── // Abstract data-viz covers replace the nivk photos: same media area, SQSEO palette. const COVER_BG = "%23F5F2EC"; const COVER_LINE = "%23DDD8CE"; const COVERS = [ // rising line chart `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='${COVER_BG}'/%3E%3Cg stroke='${COVER_LINE}' stroke-width='1'%3E%3Cpath d='M0 60h400M0 120h400M0 180h400M0 240h400'/%3E%3C/g%3E%3Cpath d='M20 250 C 90 240, 120 200, 170 190 S 260 130, 310 90 S 370 50, 385 42' fill='none' stroke='%230E8A5F' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='385' cy='42' r='9' fill='%230E8A5F'/%3E%3Ccircle cx='385' cy='42' r='16' fill='%230E8A5F' opacity='0.25'/%3E%3C/svg%3E`, // bars `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='${COVER_BG}'/%3E%3Cg stroke='${COVER_LINE}' stroke-width='1'%3E%3Cpath d='M0 60h400M0 120h400M0 180h400M0 240h400'/%3E%3C/g%3E%3Cg%3E%3Crect x='55' y='170' width='44' height='90' rx='8' fill='%231A1A1E'/%3E%3Crect x='125' y='140' width='44' height='120' rx='8' fill='%231A1A1E'/%3E%3Crect x='195' y='108' width='44' height='152' rx='8' fill='%231A1A1E'/%3E%3Crect x='265' y='58' width='44' height='202' rx='8' fill='%230E8A5F'/%3E%3C/g%3E%3C/svg%3E`, // donut `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='${COVER_BG}'/%3E%3Cg stroke='${COVER_LINE}' stroke-width='1'%3E%3Cpath d='M0 60h400M0 120h400M0 180h400M0 240h400'/%3E%3C/g%3E%3Ccircle cx='200' cy='150' r='84' fill='none' stroke='%231A1A1E' stroke-width='30'/%3E%3Ccircle cx='200' cy='150' r='84' fill='none' stroke='%230E8A5F' stroke-width='30' stroke-dasharray='370 528' stroke-dashoffset='-40' stroke-linecap='round' transform='rotate(-90 200 150)'/%3E%3C/svg%3E`, ]; const AVATAR_TONES = ["var(--grad-accent, #0E8A5F)", "var(--grad-ink, #16161A)", "var(--blue-500, #3b6ef5)"]; function InsightEditorialCard({ title, description, cover, author, initials, tone, date, category }) { return (

{title}

{description}

{initials} {author} {date}

{category}

); } function WhyMatters() { const t = window.LTQM.t; const authors = [ { name: t("geo.why.a1"), initials: "ME" }, { name: t("geo.why.a2"), initials: "DR" }, { name: t("geo.why.a3"), initials: "PN" }, ]; const stats = [1, 2, 3].map((i) => ({ v: t(`geo.why.s${i}.v`), d: t(`geo.why.s${i}.d`) })); return (

{t("geo.why.pill")}

{t("geo.why.title")}

{stats.map((s, i) => ( ))}

); } // ── Section 4: GEO vs SEO ─────────────────────────────────────────────────── function Comparison() { const t = window.LTQM.t; const rows = [1, 2, 3, 4, 5].map((i) => ({ label: t(`geo.cmp.r${i}.label`), seo: t(`geo.cmp.r${i}.seo`), geo: t(`geo.cmp.r${i}.geo`) })); return (

{t("geo.cmp.pill")}

{t("geo.cmp.title")}

{t("geo.cmp.sub")}

{/* Desktop */}

{t("geo.cmp.seo")}

{t("geo.cmp.geo")}

{rows.map((row, i) => (

{row.label}

{row.seo}

{row.geo}

))}

{/* Mobile */}

{rows.map((row, i) => (

{row.label}

{t("geo.cmp.seo_short")}

{row.seo}

{t("geo.cmp.geo_short")}

{row.geo}

))}

); } // ── Section 5: How GEO works ──────────────────────────────────────────────── function HowItWorks() { const t = window.LTQM.t; const steps = [1, 2, 3].map((i) => ({ n: "0" + i, title: t(`geo.how.s${i}.title`), points: [1, 2, 3, 4].map((j) => t(`geo.how.s${i}.p${j}`)), })); return (

{t("geo.how.pill")}

{t("geo.how.title")} {t("geo.how.gray")}

{steps.map((s, i) => (

{s.title}

))}

); } // ── Section 6: GEO with SQSEO (nivk "GEO for Shopify" layout) ─────────────── const SQ_ICONS = ["message-circle", "bar-chart-3", "search-check", "target"]; function GeoInSqseo() { const t = window.LTQM.t; const benefits = [1, 2, 3, 4].map((i) => ({ title: t(`geo.sq.b${i}.t`), d: t(`geo.sq.b${i}.d`) })); return (

); } // ── Section 7: FAQ (nivk FAQItem: chevron + grid-rows) ────────────────────── function FAQItem({ q, a, index }) { const [open, setOpen] = React.useState(false); return (

{a}

); } function GeoFaq() { const t = window.LTQM.t; const items = [1, 2, 3, 4, 5].map((i) => ({ q: t(`geo.faq.${i}.q`), a: t(`geo.faq.${i}.a`) })); return (

{t("geo.faq.pill")}

{t("geo.faq.title")}

{items.map((item, i) => )}

); } // ── Section 8: Final CTA (nivk dark band, ink + emerald glow) ─────────────── function FinalCta() { const t = window.LTQM.t, href = window.LTQM.href; return (

{t("geo.cta.title")}

{t("geo.cta.sub")}

{t("geo.cta.primary")} {t("geo.cta.secondary")}

); } function WhatIsGeo() { return (

); } window.LTQM = window.LTQM || {}; window.LTQM.WhatIsGeo = WhatIsGeo; })();

{t("geo.hero.tag1")} {t("geo.hero.tag2")}

{t("geo.def.title")}

{t("geo.hero.globe_heading")}

{t("geo.hero.sub")}

{t("geo.def.title")}

{title}

{t("geo.why.title")}

{t("geo.cmp.title")}

{t("geo.how.title")} {t("geo.how.gray")}

{s.title}

{t("geo.sq.title")} {t("geo.sq.gray")}

{b.title}

{t("geo.faq.title")}

{t("geo.cta.title")}