// SQSEO marketing, hero (Editorial Instrument: centered, two-tone, cinematic iPhone mockup) (function init(){ if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);} const React = window.React; const DS = window.LongtailIQDesignSystem_ae8f12; const { Button, Icon } = DS; // ── Cinematic iPhone mockup ────────────────────────────────────────────────── // The hero "phone": a realistic iPhone running a LIVE ChatGPT session that // loops forever: a question types itself into the input bar → sends as a // bubble → ChatGPT "thinks" (pulsing logo + bouncing dots) → the answer // streams in word-by-word → dwell → fade → next question (3 total, cycling). // Device + entrance are an exact replica of the nivk cinematic-landing-hero: // entrance fromTo(y:300 z:-500 rotX:50 rotY:-34 rotZ:-6 scale:0.6) // → (y:0 z:0 rotX:4 rotY:-11 rotZ:-4 scale:1, expo.out, 3.0s) // widgets fromTo(y:40 scale:0.95) → back.out(1.2), stagger 0.15, 1.5s // parallax mousemove → bezel rotY ±12° / rotX ∓12°, power3.out 1.2s // The responsive scale ladder (.lt-phone-stage/.lt-phone-scale) is in the // page ; all hardware + chat CSS is injected below (cache-proof). const CHAT_BRAND_LABEL = "ChatGPT"; // The looping conversation: 3 unique SQSEO questions with short answers (kept // tight so a full Q+A always fits the 580px screen). Built at RENDER time via // t() so it localizes — translations must keep the literal brand "SQSEO" so // BrandBold can bold it. function heroQA(t) { return [ { q: t("hero.qa.1.q"), a1: t("hero.qa.1.a1"), a2: t("hero.qa.1.a2"), sug: [t("hero.qa.1.s1"), t("hero.qa.1.s2")], }, { q: t("hero.qa.2.q"), a1: t("hero.qa.2.a1"), a2: t("hero.qa.2.a2"), sug: [t("hero.qa.2.s1"), t("hero.qa.2.s2")], }, { q: t("hero.qa.3.q"), a1: t("hero.qa.3.a1"), a2: t("hero.qa.3.a2"), sug: [t("hero.qa.3.s1"), t("hero.qa.3.s2")], }, ]; } // Assistant paragraph with the brand name bolded (nivk AssistantParagraphWithBrand) function BrandBold({ text }) { const parts = text.split("SQSEO"); if (parts.length === 1) return text; return parts.map((seg, i) => ( {seg}{i < parts.length - 1 ? SQSEO : null} )); } function ChatGptMark({ size, thinking }) { return (
{CHAT_BRAND_LABEL}
); } // Settled wrapper pose (also the no-GSAP / reduced-motion fallback state) const SETTLED_POSE = "rotateX(4deg) rotateY(-11deg) rotateZ(-4deg)"; // iPhone hardware + chat-loop CSS, injected with the component (nivk // INJECTED_STYLES pattern) so it can never be lost to a stale cached stylesheet. const PHONE_CSS = ` .lt-iphone-bezel { background-color: #111; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), inset 0 0 0 7px #000, 0 40px 80px -15px rgba(0,0,0,0.9), 0 15px 25px -5px rgba(0,0,0,0.7); transform-style: preserve-3d; } /* Polished titanium rail: gradient ring over the outer 3px of the bezel (mask-composite ring technique), with a specular hairline just inside it. */ .lt-iphone-bezel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: linear-gradient(160deg, #b7b7bf 0%, #8a8a92 12%, #4a4a52 30%, #2b2b31 48%, #232329 62%, #57575f 80%, #9d9da5 92%, #c6c6ce 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 15; } .lt-iphone-bezel::after { content: ""; position: absolute; inset: 3px; border-radius: 2.85rem; box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.22); pointer-events: none; z-index: 15; } .lt-hardware-btn { background: linear-gradient(90deg, #404040 0%, #171717 100%); box-shadow: -2px 0 5px rgba(0,0,0,0.8), inset -1px 0 1px rgba(255,255,255,0.15), inset 1px 0 2px rgba(0,0,0,0.8); border-left: 1px solid rgba(255,255,255,0.05); } .lt-screen-glare { background: linear-gradient(110deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%); } /* Dynamic-island live dot (Tailwind animate-pulse equivalent) */ .lt-island-dot { animation: lt-island-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes lt-island-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ---- Chat loop ---- */ /* Message entrance: rise + settle */ .lt-msg-in { animation: lt-msg-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes lt-msg-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } /* Thinking: bouncing dots + a breathing ChatGPT mark */ .lt-think-dot { width: 7px; height: 7px; border-radius: 999px; background: #a1a1aa; display: inline-block; animation: lt-think 1.2s ease-in-out infinite; } .lt-think-dot:nth-child(2) { animation-delay: 0.15s; } .lt-think-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes lt-think { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } } .lt-think-mark { animation: lt-think-mark 1.5s ease-in-out infinite; } @keyframes lt-think-mark { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.86) rotate(180deg); } } /* Streaming cursor (ChatGPT block caret) + input typing caret */ .lt-stream-cursor { display: inline-block; width: 7px; height: 14px; background: #0a0a0a; margin-left: 2px; vertical-align: -2px; border-radius: 1px; animation: lt-cursor-blink 0.9s steps(1) infinite; } .lt-type-caret { display: inline-block; width: 1.5px; height: 15px; background: #111; margin-left: 1px; vertical-align: -3px; animation: lt-cursor-blink 1.05s steps(1) infinite; } @keyframes lt-cursor-blink { 50% { opacity: 0; } } /* Thread fade between questions */ .lt-thread { transition: opacity 0.4s ease; } .lt-thread.fade { opacity: 0; } /* ---- iOS keyboard (slides up while the question types itself) ---- */ .lt-kb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; background: #d1d4d9; padding: 4px 3px 12px; box-sizing: border-box; transform: translateY(103%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; } .lt-kb.up { transform: translateY(0); } /* QuickType suggestion bar */ .lt-kb-bar { display: flex; align-items: center; height: 30px; margin-bottom: 4px; } .lt-kb-sug { flex: 1 1 0; text-align: center; font-size: 12.5px; color: #0a0a0a; white-space: nowrap; overflow: hidden; min-width: 0; } .lt-kb-sep { width: 1px; height: 16px; background: rgba(0,0,0,0.13); flex: none; } .lt-kb-row { display: flex; gap: 4px; margin-bottom: 6px; } .lt-kb-row:last-child { margin-bottom: 0; } .lt-key { height: 32px; background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(134,138,146,0.95); display: flex; align-items: center; justify-content: center; font-size: 14.5px; color: #0a0a0a; min-width: 0; position: relative; } .lt-key.fn { background: #adb3bc; } .lt-key.held { background: #8f96a3; } /* iOS key-press balloon: pops above the key with the typed character */ .lt-key-balloon { position: absolute; bottom: calc(100% - 3px); left: 50%; transform: translateX(-50%); width: 30px; height: 40px; background: #fff; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; font-size: 21px; color: #000; z-index: 5; pointer-events: none; animation: lt-balloon-in 0.12s ease-out; } @keyframes lt-balloon-in { from { opacity: 0; transform: translateX(-50%) scale(0.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .lt-island-dot, .lt-msg-in, .lt-think-dot, .lt-think-mark, .lt-stream-cursor, .lt-type-caret, .lt-key-balloon { animation: none !important; } .lt-kb { transition: none !important; } } `; // ── iOS keyboard ───────────────────────────────────────────────────────────── const KB_ROW1 = "qwertyuiop".split(""); const KB_ROW2 = "asdfghjkl".split(""); const KB_ROW3 = "zxcvbnm".split(""); const KB_H = 195; // rendered keyboard height, used to lift the input bar function IosKeyboard({ visible, typed, mode, sug }) { const isTyping = mode === "typing" && typed.length > 0; const ch = isTyping ? typed[typed.length - 1] : ""; const isLetter = /[a-zA-Z]/.test(ch); const shiftOn = /[A-Z]/.test(ch); const keyId = isLetter ? ch.toLowerCase() : ch === " " ? "space" : ch ? "num" : ""; const stamp = typed.length; // changes per character → re-triggers the balloon pop const word = isTyping ? (typed.split(/\s+/).pop() || "") : ""; const letter = (l) => (
{shiftOn ? l.toUpperCase() : l} {keyId === l &&
{ch}
}
); return (
{word ? `“${word}”` : " "} {sug[0]} {sug[1]}
{KB_ROW1.map(letter)}
{KB_ROW2.map(letter)}
⇧
{KB_ROW3.map(letter)}
⌫
123
space
return
); } function IphoneMockup() { const stageRef = React.useRef(null); const wrapperRef = React.useRef(null); const bezelRef = React.useRef(null); const rafRef = React.useRef(0); const [started, setStarted] = React.useState(false); const QA = React.useMemo(() => heroQA(window.LTQM.t), []); // Chat loop state machine: idle → typing → thinking → streaming → dwell → (fade) → next const [chat, setChat] = React.useState({ qi: 0, mode: "idle", typed: "", bubble: false, wordCount: 0, fade: false }); // Entrance + parallax (exact nivk values) React.useLayoutEffect(() => { const gsap = window.gsap; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (!gsap || reduceMotion) { setStarted(true); return; } // static settled pose stays visible const wrapper = wrapperRef.current, bezel = bezelRef.current, stage = stageRef.current; const widgets = stage.querySelectorAll(".phone-widget"); // Hide until the entrance plays (gsap-reveal pattern) gsap.set(wrapper, { autoAlpha: 0 }); gsap.set(widgets, { autoAlpha: 0 }); let played = false; const play = () => { if (played) return; played = true; const tl = gsap.timeline({ delay: 0.15, onComplete: () => setStarted(true) }); tl.fromTo(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 }) .fromTo(widgets, { 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"); }; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { play(); io.disconnect(); } }); }, { threshold: 0.25 }); io.observe(stage); // Mouse parallax (nivk values: ±12°, power3.out 1.2s), rAF-throttled const handleMouseMove = (e) => { if (window.scrollY > window.innerHeight * 2) return; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { if (!bezelRef.current || !played) return; const xVal = (e.clientX / window.innerWidth - 0.5) * 2; const yVal = (e.clientY / window.innerHeight - 0.5) * 2; gsap.to(bezelRef.current, { rotationY: xVal * 12, rotationX: -yVal * 12, ease: "power3.out", duration: 1.2 }); }); }; const handlePointerLeave = () => { if (!bezelRef.current) return; gsap.to(bezelRef.current, { rotationX: 0, rotationY: 0, rotationZ: 0, duration: 0.65, ease: "power2.out" }); }; window.addEventListener("mousemove", handleMouseMove); stage.addEventListener("pointerleave", handlePointerLeave); return () => { window.removeEventListener("mousemove", handleMouseMove); stage.removeEventListener("pointerleave", handlePointerLeave); cancelAnimationFrame(rafRef.current); io.disconnect(); gsap.killTweensOf([wrapper, bezel, widgets]); gsap.set([wrapper, widgets], { clearProps: "all" }); }; }, []); // The infinite conversation loop React.useEffect(() => { if (!started) return; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduceMotion) { // Static single Q+A, no motion, no loop setChat({ qi: 0, mode: "dwell", typed: "", bubble: true, wordCount: Infinity, fade: false }); return; } let alive = true; const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); const guard = (updater) => { if (alive) setChat(updater); }; (async () => { await sleep(400); let i = 0; while (alive) { const qa = QA[i % QA.length]; guard(() => ({ qi: i % QA.length, mode: "typing", typed: "", bubble: false, wordCount: 0, fade: false })); // 1. The keyboard slides up ("tap" on the input), then the question // types itself key by key await sleep(650); for (let c = 1; c <= qa.q.length; c++) { if (!alive) return; const t = qa.q.slice(0, c); guard((s) => ({ ...s, typed: t })); await sleep(42 + Math.random() * 52); } await sleep(500); // 2. Send: bubble pops into the thread, input clears, ChatGPT thinks guard((s) => ({ ...s, mode: "thinking", typed: "", bubble: true })); await sleep(1700); // 3. Answer streams in word by word const total = qa.a1.split(" ").length + qa.a2.split(" ").length; guard((s) => ({ ...s, mode: "streaming" })); for (let w = 1; w <= total; w++) { if (!alive) return; guard((s) => ({ ...s, wordCount: w })); await sleep(36 + Math.random() * 44); } // 4. Dwell so it can be read, then fade and start the next question guard((s) => ({ ...s, mode: "dwell" })); await sleep(4300); guard((s) => ({ ...s, fade: true })); await sleep(450); i++; } })(); return () => { alive = false; }; }, [started]); const qa = QA[chat.qi]; const p1Words = qa.a1.split(" "); const p2Words = qa.a2.split(" "); const shown1 = Math.min(chat.wordCount, p1Words.length); const shown2 = Math.max(0, Math.min(chat.wordCount - p1Words.length, p2Words.length)); const streaming = chat.mode === "streaming"; const cursorOnP2 = streaming && shown2 > 0; const cursorOnP1 = streaming && !cursorOnP2 && shown1 > 0; const showAnswer = streaming || chat.mode === "dwell"; const hasInputText = chat.typed.length > 0; const kbVisible = chat.mode === "typing"; return (