/* global React */ // ── Design tokens ────────────────────────────────────────────────────────── const C = { bg: '#0B0C0E', bg1: '#141518', bone: '#E6DCCB', grey: '#8A8A86', mute: '#52524F', border: '#1F2024', borderHi: '#33353A', cyan: '#59A3B3', cyanHi: '#7EBFCD', }; const F = { display: "'Playfair Display', Georgia, serif", sans: "'IBM Plex Sans', system-ui, sans-serif", mono: "'IBM Plex Mono', monospace", }; const ease = 'cubic-bezier(0.2,0.7,0.2,1)'; const wrap = { width: 'min(1080px, calc(100% - 48px))', margin: '0 auto' }; // ── Viewfinder corner bracket ─────────────────────────────────────────────── function Corner({ top, right, bottom, left }) { const color = 'rgba(89,163,179,0.5)'; const t = 1; return (
); } // ── Showgaze mark (Kenaz) ────────────────────────────────────────────────── function Mark({ size = 20, animate = false }) { return ( Showgaze mark ); } // ── Header ───────────────────────────────────────────────────────────────── function Header() { return (
Showgaze
{/* Organizer login */} { e.currentTarget.style.borderColor = C.borderHi; e.currentTarget.style.color = C.bone; }} onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.color = C.grey; }} > {/* Lock icon inline SVG */} Organizer Login
); } // ── Kenaz mark — draws on load, rune pivots around circle on scroll ──────── function KenazMark({ size = 80 }) { const pathRef = React.useRef(null); const angleRef = React.useRef(-45); // Initial offset to ease into place const targetAngleRef = React.useRef(0); React.useEffect(() => { let frameId; function update() { // Lower damping = more 'skid' / less resistance const damping = 0.06; const diff = targetAngleRef.current - angleRef.current; // Only update if there's a meaningful difference to save cycles if (Math.abs(diff) > 0.01) { angleRef.current += diff * damping; if (pathRef.current) { pathRef.current.setAttribute('transform', `rotate(${angleRef.current}, 700, 512)`); } } frameId = requestAnimationFrame(update); } function onScroll() { // Calculate target angle based on scroll depth targetAngleRef.current = window.scrollY * 0.90; } // Initialize position onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); frameId = requestAnimationFrame(update); return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(frameId); }; }, []); return ( ); } // ── Hero CTA — links to the intake form ──────────────────────────────────── function HeroForm() { return (

Ready to start?

{ e.currentTarget.style.background = C.cyanHi || '#7EBFCD'; e.currentTarget.style.borderColor = C.cyanHi || '#7EBFCD'; }} onMouseLeave={e => { e.currentTarget.style.background = C.cyan; e.currentTarget.style.borderColor = C.cyan; }} > Apply Now { e.currentTarget.style.borderColor = C.borderHi; e.currentTarget.style.color = C.bone; }} onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.color = C.grey; }} > Want to know more? { e.currentTarget.style.color = C.grey; }} onMouseLeave={e => { e.currentTarget.style.color = C.mute; }} > hello@showgaze.app {/* Beta Status Panel */}
BETA STATUS
Private beta · limited event intake
Each event is currently reviewed and quality-checked by hand, so availability is limited.
); } // ── Hero — text over photograph ──────────────────────────────────────────── function Hero() { const imgRef = React.useRef(null); React.useEffect(() => { function tick() { if (!imgRef.current) return; imgRef.current.style.transform = `translateY(${window.scrollY * 0.22}px)`; } window.addEventListener('scroll', tick, { passive: true }); return () => window.removeEventListener('scroll', tick); }, []); return (
{/* Photograph — slightly oversized for parallax headroom */} {/* Gradient — darkens bottom so text reads clean */}
{/* Viewfinder corner marks */}
{/* Slow scanline sweep */}
{/* Text — two-column, bottom-anchored */}
{/* Left — branding + headline */}
{/* Logo lockup */}
SHOWGAZE

Well... You've got all these people filming anyway.

Sync. Cut. Post.

Showgaze helps event teams collect, sync, review, and deliver audience-shot footage after a show. It is currently in private beta with limited event capacity.

{/* Right — compact contact form */}
); } // ── Two-column info ──────────────────────────────────────────────────────── function Kicker({ children }) { return (

{children}

); } function InfoRow() { return (
Who it's for

Event producers and post-production teams who want to capture what the crowd sees, without adding complexity to the night itself.

In practice

Fans contribute through a simple web link — no install required. A dedicated fan app is in development. For producers, everything arrives in one organised view after the event.

); } function ProcessSection() { const steps = [ { n: '01', title: 'Submit your event', body: 'Fill in the details — event name, date, venue, expected attendance. The intake form takes about two minutes.', }, { n: '02', title: 'We set up the workflow', body: 'We review the submission, configure a dedicated upload point, and generate a QR code and upload link for your event.', }, { n: '03', title: 'Share, collect, deliver', body: 'Display the QR at the venue. Footage arrives in one organised folder. After the show, we sync, review, and deliver.', }, ]; return (
Getting started
{steps.map((step) => (
{step.n}
{step.title}

{step.body}

))}
); } // ── Contact form ─────────────────────────────────────────────────────────── function ContactForm() { const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const [sent, setSent] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); async function handleSubmit(e) { e.preventDefault(); setSubmitting(true); try { const response = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, message }), }); if (response.ok) { setSent(true); } else { const error = await response.json(); console.error('Contact form error:', error); alert('There was a problem sending your message. Please try again or email us directly at hello@showgaze.app'); } } catch (err) { console.error('Contact form submission failed:', err); alert('Network error. Please check your connection and try again.'); } finally { setSubmitting(false); } } const inputStyle = { display: 'block', width: '100%', padding: '11px 14px', fontSize: 13, fontFamily: F.mono, background: C.bg, border: `1px solid ${C.border}`, borderRadius: 4, color: C.bone, outline: 'none', transition: `border-color 180ms ${ease}`, }; const labelStyle = { display: 'block', fontFamily: F.mono, fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.grey, marginBottom: 8, }; return (

Get in touch

Tell us about your event.

We'll follow up with next steps and availability.

{sent ? (

✓ Message sent

We've received your inquiry and will follow up with you shortly.

) : (
setEmail(e.target.value)} placeholder="you@company.com" style={inputStyle} onFocus={e => { e.target.style.borderColor = C.cyan; }} onBlur={e => { e.target.style.borderColor = C.border; }} />