// SPOT pre-launch landing page (design variant 1A "Centered").
//
// One screen: say what SPOT is, capture an email for early access, show that
// other people signed up. Everything below the fold is supporting cast.
//
// Two deliberate departures from the design hand-off, both because the page
// collects personal data from strangers:
//
// * a consent checkbox, unticked, next to a link to the privacy policy.
// "No spam, unsubscribe anytime" in fine print is a promise, not consent,
// and an EU mailing list needs the second one.
// * a name field. The hand-off had email + city; the list is more useful
// with a name, and asking for it up front beats guessing later.
//
// The subscriber counter is null until the backend decides there are enough
// sign-ups to be worth showing (WAITLIST_COUNT_MIN). "3 people already
// subscribed" is weaker than saying nothing.
const NEON = '#d8ff00';
const INK = '#0a0a09';
const USE_CASES = [
{ id: 'discover', title: 'Discover events', desc: 'Find festivals, club nights and house parties near you.' },
{ id: 'create', title: 'Host and invite', desc: 'Create your own events and invite your friends.' },
{ id: 'friends', title: 'See where friends go', desc: 'Spot which events your friends are attending.' },
{ id: 'organize', title: 'Publish as an organiser', desc: 'Put your events in front of the whole scene.' },
];
const FEATURES = [
{ n: '01', title: 'Discover events', desc: 'Festivals, club nights, house parties - all in one feed.' },
{ n: '02', title: 'Host your own', desc: 'Public or private, free or invite-only. Your scene, your rules.' },
{ n: '03', title: "See who's going", desc: 'Spot the crowd before you commit. Bring your people.' },
];
// The API lives on another origin, so this cannot be a relative path. CORS
// already allows spotevent.be - see the allowlist in the backend.
const API = 'https://api.spotevent.be/api';
// The privacy policy is bilingual and defaults to the browser's language.
// This page is English, so link to the English side explicitly - the whole
// point of the link is to show the wording being agreed to.
const PRIVACY_URL = 'privacy/?lang=en';
const SUPPORT_URL = 'support/?lang=en';
// The public event feed. Served by the backend through a rewrite in
// vercel.json, so it is same-origin and an absolute path is correct here.
//
// Footer only, deliberately: this page exists to convert to sign-ups
// while the app is in closed testing, and a prominent "browse events"
// button hands visitors what they came for without asking anything back.
// It earns a real placement once the app is publicly downloadable.
//
// Labelled "Browse events", not "Discover events": the feature grid above
// already has a card by that name, and two identical labels pointing at
// different things read as an anchor link to the one you can see.
const DISCOVER_URL = '/discover';
// ── Background ───────────────────────────────────────────────────────────
// The spotlight the product is named after. On a pointer device it follows
// the cursor; on a touch device there is no cursor to follow, so it drifts
// in a slow circle instead - without that it reads as a static gradient on
// exactly the devices most visitors will use.
//
// Position is written straight to the DOM inside a rAF rather than held in
// state, so neither mode re-renders the tree.
function useSpotlight(enabled) {
const frameRef = React.useRef(null);
const layerRef = React.useRef(null);
const darkRef = React.useRef(null);
const raf = React.useRef(0);
React.useEffect(() => {
const frame = frameRef.current;
if (!frame) return;
const paint = (mx, my) => {
if (layerRef.current) {
// Muted olive rather than full NEON at the core. The copy on this
// page is white, and the spotlight tracks the cursor straight over
// it - white on #d8ff00 is ~1.1:1 contrast, so the hero text used to
// disappear whenever the beam crossed it. These stops keep the same
// hue and falloff but cap the brightest point around 4.6:1, and the
// text spends most of its time over the 6:1+ mid-stops.
layerRef.current.style.background =
`radial-gradient(circle at ${mx}% ${my}%, #6e7d00 0%, #5a6600 10%, #2e3400 28%, ${INK} 60%)`;
}
if (darkRef.current) {
darkRef.current.style.background =
`radial-gradient(circle at ${100 - mx}% ${100 - my}%, rgba(0,0,0,0.55) 0%, transparent 50%)`;
}
};
paint(50, 50);
if (!enabled) return;
// No hover means no cursor to track: orbit instead.
if (window.matchMedia('(hover: none)').matches) {
// The 0.4s ease that smooths cursor jumps has to go here. This path
// repaints every frame, so each change would start a transition the
// next frame immediately supersedes - the browser ends up animating
// toward a target that never arrives, which on a phone is both
// stuttery and needless work.
if (layerRef.current) layerRef.current.style.transition = 'none';
const start = performance.now();
const tick = (now) => {
const angle = ((now - start) / 6000) * Math.PI * 2;
paint(50 + Math.cos(angle) * 18, 50 + Math.sin(angle) * 14);
raf.current = requestAnimationFrame(tick);
};
raf.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf.current);
}
const onMove = (e) => {
const r = frame.getBoundingClientRect();
const mx = ((e.clientX - r.left) / r.width) * 100;
const my = ((e.clientY - r.top) / r.height) * 100;
cancelAnimationFrame(raf.current);
raf.current = requestAnimationFrame(() => paint(mx, my));
};
const onLeave = () => {
cancelAnimationFrame(raf.current);
raf.current = requestAnimationFrame(() => paint(50, 50));
};
frame.addEventListener('pointermove', onMove);
frame.addEventListener('pointerleave', onLeave);
return () => {
cancelAnimationFrame(raf.current);
frame.removeEventListener('pointermove', onMove);
frame.removeEventListener('pointerleave', onLeave);
};
}, [enabled]);
return { frameRef, layerRef, darkRef };
}
// Grain, as an inline SVG data URI so it costs no request.
const GRAIN =
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")";
// ── Small pieces ─────────────────────────────────────────────────────────
function Dot({ size = 8, animate }) {
return (
);
}
function Field({ label, ...props }) {
return (
);
}
// A personal invite link is /i/, rewritten to this page by
// vercel.json so the id is still in the path when we read it here. It is only
// ever attribution - the backend drops it unless it names a real account.
function inviterFromPath() {
const m = window.location.pathname.match(/^\/i\/([A-Za-z0-9_-]{1,64})\/?$/);
return m ? m[1] : null;
}
// ── Subscribe sheet ──────────────────────────────────────────────────────
function SubscribeSheet({ onClose, animate }) {
const [picks, setPicks] = React.useState([]);
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const [city, setCity] = React.useState('');
const [consent, setConsent] = React.useState(false);
const [website, setWebsite] = React.useState(''); // honeypot
const [platform, setPlatform] = React.useState('');
const [playAccount, setPlayAccount] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState('');
const [position, setPosition] = React.useState(null);
const toggle = (id) =>
setPicks((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
const submit = async (e) => {
e.preventDefault();
if (busy) return;
// Asked before consent because it is the cheaper thing to fix: someone who
// has to re-tick a checkbox they already read is more annoyed than someone
// told they missed a two-button question.
if (!platform) { setError('Let us know which phone you have.'); return; }
if (!consent) { setError('Tick the box to sign up.'); return; }
setBusy(true); setError('');
try {
const res = await fetch(`${API}/subscribe`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: email.trim(), name: name.trim(), city: city.trim(),
use_cases: picks, accepted_privacy: true, website, platform,
play_account: platform === 'android' ? playAccount.trim() : '',
invited_by: inviterFromPath(),
}),
});
if (!res.ok) {
const d = await res.json().catch(() => ({}));
setError(d.detail || 'Sign-up failed. Please try again in a moment.');
return;
}
const d = await res.json();
setPosition(d.position || null);
} catch {
setError('No connection. Please try again in a moment.');
} finally {
setBusy(false);
}
};
return (
// Fixed, not absolute, so the sheet is bound to the visible viewport.
//
// The page frame is `min-height: 100dvh`, and dvh is the viewport with
// the browser UI retracted. With the URL bar on screen the frame is
// therefore ~100px taller than what the visitor can actually see (848
// vs 752 on a 390x844 phone). An absolute `inset: 0` inherits that
// taller box, so `bottom: 0` put the sheet's lower edge behind the URL
// bar, and `maxHeight: 92%` resolved to 92% of 848 - just enough to fit
// the form's 772px without ever triggering `overflow: auto`. No inner
// scroll, body scroll locked, and the Sign up button stranded 29px past
// the bottom of the screen.
//
// Fixed makes both numbers refer to the real viewport: the 92% becomes
// 692px against 772px of content, so the sheet scrolls internally and
// the button is reachable again.
We'll email you as soon as Spot is available.
{position ? <> You're #{position.toLocaleString('en-GB')} in line. : null}
);
}
// ── Page ─────────────────────────────────────────────────────────────────
function Landing() {
// One source of truth for motion: the OS setting. No manual toggle - a
// preference the visitor already expressed beats one we invent.
const [animate] = React.useState(
() => !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,
);
const { frameRef, layerRef, darkRef } = useSpotlight(animate);
// spotevent.be/#signup opens straight into the form, so a link in a social
// bio or a story can skip the landing screen.
const [sheet, setSheet] = React.useState(() => window.location.hash === '#signup');
const [count, setCount] = React.useState(null);
const [hover, setHover] = React.useState(false);
const [invitedBy] = React.useState(inviterFromPath);
React.useEffect(() => {
let alive = true;
fetch(`${API}/subscribe/count`)
.then((r) => (r.ok ? r.json() : null))
.then((d) => { if (alive && d && typeof d.count === 'number') setCount(d.count); })
.catch(() => {}); // no counter is fine; a broken page is not
return () => { alive = false; };
}, []);
React.useEffect(() => {
document.body.style.overflow = sheet ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [sheet]);
return (
spotevent.be
Release date: 15th of September
{invitedBy && (
// Someone arriving on a personal link should see that the link
// worked. We deliberately do not name the inviter: their name is
// in the message they sent, and looking it up here would mean a
// public endpoint that turns any user_id into a name.
You have been invited to Spot
)}
SPOT. On.
Find your next night out. A social app for discovering, hosting and joining
the next events - from festivals to the smallest house party.
{/* Hidden until the backend says the number is worth showing. */}
{count !== null ? (
{count.toLocaleString('en-GB')} people already signed up