); } // ── Showgaze mark (Kenaz, flipped to face right) ─────────────────────────── function Mark({ size = 20, animate = false }) { return (

); } // ── Header ───────────────────────────────────────────────────────────────── function Header() { return (

showgaze

{/* Status indicator */}

App in development

{/* 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); React.useEffect(() => { function tick() { if (!pathRef.current) return; const angle = window.scrollY * 0.10; pathRef.current.setAttribute('transform', `rotate(${angle}, 700, 512)`); } window.addEventListener('scroll', tick, { passive: true }); return () => window.removeEventListener('scroll', tick); }, []); return ( ); } // ── Hero CTA — links to the intake form ──────────────────────────────────── function HeroForm() { return (

Ready to start?

{ e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C.cyan; }} onMouseLeave={e => { e.currentTarget.style.background = C.cyan; e.currentTarget.style.color = '#0B0C0E'; }} > 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?

hello@showgaze.app

); } // ── 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.

A tool for live event producers — festival teams, venue operators, and anyone who wants to do something with the clips fans are already shooting.

{/* 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.

How it works today

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.

); } // ── Contact form → Firestore ─────────────────────────────────────────────── function ContactForm() { const [email, setEmail] = React.useState(''); const [message, setMessage] = React.useState(''); const [status, setStatus] = React.useState('idle'); // status: 'idle' | 'loading' | 'success' | 'fallback' async function handleSubmit(e) { e.preventDefault(); setStatus('loading'); try { if (!window.db) throw new Error('Firestore not configured'); await window.db.collection('intake_submissions').add({ email: email.trim(), message: message.trim() || null, source: 'showgaze.app', timestamp: firebase.firestore.FieldValue.serverTimestamp(), }); setStatus('success'); } catch (_err) { // Firebase not wired up yet — fall back to mailto const body = [message.trim(), `\n— ${email.trim()}`].filter(Boolean).join('\n'); window.location.href = `mailto:hello@showgaze.app?subject=${encodeURIComponent('Showgaze enquiry')}&body=${encodeURIComponent(body)}`; setStatus('fallback'); } } const btnBase = { fontFamily: F.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', background: 'transparent', borderRadius: 4, padding: '12px 28px', cursor: 'pointer', transition: `all 180ms ${ease}`, }; return (

Get in touch.

{status === 'success' ? (

Thanks — we'll be in touch soon.

) : (

setEmail(e.target.value)} placeholder="your@email.com" style={{ display: 'block', width: '100%', padding: '13px 14px', fontSize: 13, marginBottom: 10, borderRadius: 4, }} />

setMessage(e.target.value)}
            placeholder="Tell us about your event — or just say hello. (optional)"
            rows={3}
            style={{
              display: 'block',
              width: '100%',
              padding: '13px 14px',
              fontSize: 13,
              resize: 'vertical',
              marginBottom: 14,
              lineHeight: 1.55,
              borderRadius: 4,
            }}
          />
          <button
            type="submit"
            disabled={status === 'loading'}
            style={{
              ...btnBase,
              color:       status === 'loading' ? C.mute : C.bone,
              borderColor: status === 'loading' ? C.border : C.borderHi,
              borderWidth: 1,
              borderStyle: 'solid',
            }}
            onMouseEnter={e => {
              if (status !== 'loading') {
                e.currentTarget.style.borderColor = C.cyan;
                e.currentTarget.style.color = C.cyan;
              }
            }}
            onMouseLeave={e => {
              if (status !== 'loading') {
                e.currentTarget.style.borderColor = C.borderHi;
                e.currentTarget.style.color = C.bone;
              }
            }}
          >
            {status === 'loading' ? 'Sending…' : 'Send'}
          </button>

<p style={{
            margin: '22px 0 0',
            fontFamily: F.mono,
            fontSize: 10,
            letterSpacing: '0.06em',
            color: C.mute,
          }}>
            Or reach us directly:{' '}
            <a
              href="mailto:hello@showgaze.app"
              style={{ color: C.grey, textDecoration: 'none', transition: `color 140ms ${ease}` }}
              onMouseEnter={e => e.currentTarget.style.color = C.bone}
              onMouseLeave={e => e.currentTarget.style.color = C.grey}
            >
              hello@showgaze.app
            </a>
          </p>
        </form>
      )}
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ borderTop: `1px solid ${C.border}` }}>
      <div style={{
        ...wrap,
        padding: '22px 0 28px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        gap: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Mark size={15} />
          <span style={{ fontFamily: F.display, fontSize: 15, color: C.bone }}>showgaze</span>
        </div>
        <span style={{
          fontFamily: F.mono,
          fontSize: 9,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: C.mute,
        }}>
          © 2026 Showgaze
        </span>
      </div>
    </footer>
  );
}

// ── Root ───────────────────────────────────────────────────────────────────
function PromoSite() {
  return (
    <div style={{ background: C.bg, color: C.bone, minHeight: '100vh' }}>
      <Header />
      <main>
        <Hero />
        <InfoRow />
      </main>
      <Footer />
    </div>
  );
}

window.PromoSite = PromoSite;