// ff-hero.jsx — Hero section with rotating audience text + two variants const { useState: __h_useState, useEffect: __h_useEffect } = React; // Fade-in-up rotator — whole phrase swaps with a stable width function Rotator({ items, interval = 2800 }) { const [i, setI] = __h_useState(0); const [key, setKey] = __h_useState(0); __h_useEffect(() => { setI(0); setKey((k) => k + 1); }, [items]); __h_useEffect(() => { const id = setInterval(() => { setI((v) => (v + 1) % items.length); setKey((k) => k + 1); }, interval); return () => clearInterval(id); }, [items, interval]); return ( {items[i]} ); } function HeroMetric({ value, label, sub }) { return (
{value}
{label}
{sub &&
{sub}
}
); } function Hero({ variant = "flow", accent, s }) { return (
{variant === "split" && }
{variant === "flow" ? : }
); } function HeroFlow({ s }) { return (
{s.hero.titlePre}
{s.hero.sub} {s.hero.ctaPrimary} → {s.hero.ctaSecondary} } label={s.hero.metric1.label} sub={s.hero.metric1.sub} /> } label={s.hero.metric2.label} sub={s.hero.metric2.sub} /> } label={s.hero.metric3.label} sub={s.hero.metric3.sub} /> ~} label={s.hero.metric4.label} sub={s.hero.metric4.sub} />
); } // ─────────── Hero W — Three.js 3D glass model ─────────── const W_SVG_STRING = '' + '' + '' + ''; function HeroW3D() { const containerRef = React.useRef(null); __h_useEffect(() => { const THREE = window.THREE; const container = containerRef.current; if (!THREE || !container || !THREE.SVGLoader) return; const accentVar = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#3b82f6"; const width = container.clientWidth || 200; const height = container.clientHeight || 200; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(width, height); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.7; container.appendChild(renderer.domElement); // Scene const scene = new THREE.Scene(); // Environment for glass reflections let envMap = null; if (THREE.RoomEnvironment && THREE.PMREMGenerator) { const pmrem = new THREE.PMREMGenerator(renderer); envMap = pmrem.fromScene(new THREE.RoomEnvironment(), 0.04).texture; scene.environment = envMap; pmrem.dispose(); } // Camera const camera = new THREE.PerspectiveCamera(35, width / height, 1, 2000); camera.position.set(0, 0, 520); // Lights — soft accent rim const ambient = new THREE.AmbientLight(0xffffff, 0.15); scene.add(ambient); const key = new THREE.DirectionalLight(0xffffff, 0.35); key.position.set(120, 180, 200); scene.add(key); const rim = new THREE.DirectionalLight(new THREE.Color(accentVar), 0.7); rim.position.set(-160, -80, -140); scene.add(rim); // Parse SVG, build extruded meshes const loader = new THREE.SVGLoader(); const svgData = loader.parse(W_SVG_STRING); const pivot = new THREE.Group(); const meshGroup = new THREE.Group(); const meshes = []; svgData.paths.forEach((path, idx) => { const isTopW = idx === 1; const shapes = THREE.SVGLoader.createShapes(path); shapes.forEach((shape) => { const geo = new THREE.ExtrudeGeometry(shape, { depth: 32, bevelEnabled: true, bevelThickness: 4, bevelSize: 3, bevelSegments: 6, curveSegments: 16, }); const mat = new THREE.MeshPhysicalMaterial({ color: isTopW ? new THREE.Color(accentVar) : 0xdfe2ea, transmission: 0, transparent: false, opacity: 1, roughness: 0.4, metalness: 0, clearcoat: 0.6, clearcoatRoughness: 0.25, envMapIntensity: 0.4, side: THREE.FrontSide, }); const mesh = new THREE.Mesh(geo, mat); meshes.push(mesh); meshGroup.add(mesh); }); }); // SVG y-axis is inverted vs Three.js — flip and center meshGroup.scale.set(1, -1, 1); const bbox = new THREE.Box3().setFromObject(meshGroup); const center = bbox.getCenter(new THREE.Vector3()); meshGroup.position.set(-center.x, -center.y, -center.z); pivot.add(meshGroup); scene.add(pivot); // Animation const reducedMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; let frame; const start = performance.now(); const animate = () => { const t = (performance.now() - start) / 1000; if (!reducedMotion) { pivot.rotation.y = t * 0.4; pivot.rotation.x = Math.sin(t * 0.3) * 0.12; } else { pivot.rotation.y = 0.5; pivot.rotation.x = 0.1; } renderer.render(scene, camera); frame = requestAnimationFrame(animate); }; animate(); // Resize const onResize = () => { const w = container.clientWidth || 200; const h = container.clientHeight || 200; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); }; window.addEventListener("resize", onResize); return () => { cancelAnimationFrame(frame); window.removeEventListener("resize", onResize); meshes.forEach((m) => { m.geometry.dispose(); m.material.dispose(); }); if (envMap) envMap.dispose(); renderer.dispose(); if (renderer.domElement && renderer.domElement.parentNode === container) { container.removeChild(renderer.domElement); } }; }, []); return