// shared.jsx — logo, icons, nav, footer, router, Three.js background // Loaded after React/Babel. const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; // ─────── Router (hash-based, instant page swap) ─────── const RouteContext = createContext({ route: '/', go: () => {} }); function useRouter() { return useContext(RouteContext); } function RouterProvider({ children }) { const [route, setRoute] = useState(() => window.location.hash.replace('#', '') || '/'); useEffect(() => { const onHash = () => { setRoute(window.location.hash.replace('#', '') || '/'); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const go = useCallback((path) => { window.location.hash = path; }, []); return {children}; } function Link({ to, children, className, style, onClick }) { const { go } = useRouter(); const handle = (e) => { e.preventDefault(); onClick && onClick(e); go(to); }; return {children}; } // ─────── Tweaks context ─────── const TweaksContext = createContext(null); function useTw() { return useContext(TweaksContext); } // ─────── Icons (line, 1.5 weight) ─────── const Icon = ({ d, size = 16, stroke = 'currentColor', fill = 'none', children, sw = 1.6, ...rest }) => ( {d ? : children} ); const Icons = { arrow: (p) => , arrowDown: (p) => , check: (p) => , spark: (p) => , bolt: (p) => , inbox: (p) => , message: (p) => , calendar: (p) => , book: (p) => , plug: (p) => , chart: (p) => , globe: (p) => , layers: (p) => , search: (p) => , bell: (p) => , settings: (p) => , user: (p) => , users: (p) => , send: (p) => , paperclip: (p) => , smile: (p) => , filter: (p) => , more: (p) => , plus: (p) => , x: (p) => , edit: (p) => , trash: (p) => , copy: (p) => , external: (p) => , shield: (p) => , zap: (p) => , brain: (p) => , lock: (p) => , qr: (p) => , upload: (p) => , star: (p) => , flow: (p) => , // Channel logos whatsapp: (p) => , instagram: (p) => , facebook: (p) => , telegram: (p) => , viber: (p) => , email: (p) => , website: (p) => , sms: (p) => , }; window.Icons = Icons; window.Icon = Icon; // ─────── Logo ─────── function Logo({ size = 16, showText = true }) { const box = Math.round(size * 1.75); return ( {/* Speech bubble shape — rounded square with tail */} {/* Top sheen */} {/* R inside the bubble */} {showText && ReplyFlow.ai} ); } window.Logo = Logo; // ─────── Marketing nav ─────── function MarketingNav() { const [scrolled, setScrolled] = useState(false); const { route } = useRouter(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const isActive = (p) => route === p || (p === '/' && route === '/'); return ( ); } window.MarketingNav = MarketingNav; // ─────── Footer ─────── function Footer() { const cols = [ { title: 'Product', links: ['Features', 'Pricing', 'Channels', 'Integrations', 'Changelog'] }, { title: 'Industries', links: ['Restaurants', 'Cafés', 'Salons', 'Barbershops', 'Hotels'] }, { title: 'Company', links: ['About', 'Customers', 'Careers', 'Press', 'Contact'] }, { title: 'Resources', links: ['Docs', 'Help center', 'API reference', 'Status', 'Privacy'] }, ]; return ( ); } window.Footer = Footer; // ─────── Background — three.js particle field + mouse light + orbs/aurora/grid ─────── function ParticleField({ density = 1, mouse, palette = 'emerald' }) { const ref = useRef(null); const stateRef = useRef({ raf: 0, dispose: null }); useEffect(() => { const canvas = ref.current; if (!canvas || !window.THREE) return; const THREE = window.THREE; const w = () => canvas.clientWidth; const h = () => canvas.clientHeight; const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setSize(w(), h(), false); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, w() / h(), 0.1, 1000); camera.position.z = 50; // Particles const count = Math.floor(900 * density); const positions = new Float32Array(count * 3); const speeds = new Float32Array(count); for (let i = 0; i < count; i++) { positions[3*i] = (Math.random() - 0.5) * 200; positions[3*i+1] = (Math.random() - 0.5) * 120; positions[3*i+2] = (Math.random() - 0.5) * 80; speeds[i] = Math.random() * 0.02 + 0.005; } const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const colorMain = palette === 'blue' ? 0x3B82F6 : palette === 'violet' ? 0x8B5CF6 : 0x10B981; const mat = new THREE.PointsMaterial({ color: colorMain, size: 0.6, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending, depthWrite: false, }); const points = new THREE.Points(geo, mat); scene.add(points); // Glowing larger center particles const glowGeo = new THREE.BufferGeometry(); const glowCount = 60; const glowPos = new Float32Array(glowCount * 3); for (let i = 0; i < glowCount; i++) { glowPos[3*i] = (Math.random()-0.5)*120; glowPos[3*i+1] = (Math.random()-0.5)*80; glowPos[3*i+2] = (Math.random()-0.5)*40; } glowGeo.setAttribute('position', new THREE.BufferAttribute(glowPos, 3)); const glowMat = new THREE.PointsMaterial({ color: 0x34D399, size: 2.5, transparent: true, opacity: 0.5, blending: THREE.AdditiveBlending, depthWrite: false, }); const glowPoints = new THREE.Points(glowGeo, glowMat); scene.add(glowPoints); let t = 0; const animate = () => { t += 0.005; const pos = geo.attributes.position.array; for (let i = 0; i < count; i++) { pos[3*i+2] += speeds[i]; if (pos[3*i+2] > 60) pos[3*i+2] = -40; } geo.attributes.position.needsUpdate = true; // Subtle parallax from mouse const mx = (mouse?.current?.x || 0); const my = (mouse?.current?.y || 0); camera.position.x += (mx * 6 - camera.position.x) * 0.03; camera.position.y += (-my * 4 - camera.position.y) * 0.03; camera.lookAt(0, 0, 0); points.rotation.y += 0.0006; glowPoints.rotation.y -= 0.0008; renderer.render(scene, camera); stateRef.current.raf = requestAnimationFrame(animate); }; animate(); const onResize = () => { camera.aspect = w() / h(); camera.updateProjectionMatrix(); renderer.setSize(w(), h(), false); }; window.addEventListener('resize', onResize); stateRef.current.dispose = () => { window.removeEventListener('resize', onResize); cancelAnimationFrame(stateRef.current.raf); geo.dispose(); mat.dispose(); glowGeo.dispose(); glowMat.dispose(); renderer.dispose(); }; return () => stateRef.current.dispose && stateRef.current.dispose(); }, [density, palette]); return ; } window.ParticleField = ParticleField; function BackgroundStage({ variant = 'mesh', anim = 'cinematic' }) { const mouseRef = useRef({ x: 0, y: 0 }); const lightRef = useRef(null); useEffect(() => { if (anim === 'off') return; const onMove = (e) => { const x = (e.clientX / window.innerWidth) * 2 - 1; const y = (e.clientY / window.innerHeight) * 2 - 1; mouseRef.current = { x, y }; if (lightRef.current) { lightRef.current.style.transform = `translate(${e.clientX - 300}px, ${e.clientY - 300}px)`; } }; window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, [anim]); return (
{variant !== 'minimal' &&
} {variant === 'mesh' && <>
} {variant === 'aurora' &&
} {variant === 'starfield' && anim !== 'off' && } {variant !== 'minimal' &&
} {anim === 'cinematic' && variant !== 'minimal' && (
)}
); } window.BackgroundStage = BackgroundStage; // ─────── Reveal on scroll ─────── function Reveal({ children, delay = 0, className = '', style }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); obs.disconnect(); } }, { threshold: 0.15 }); obs.observe(el); return () => obs.disconnect(); }, [delay]); return
{children}
; } window.Reveal = Reveal; window.useRouter = useRouter; window.RouterProvider = RouterProvider; window.Link = Link; window.TweaksContext = TweaksContext; window.useTw = useTw;