// SMASH — Landing page sections
// Built on top of the mobile UI kit components (Wordmark, Button, etc.)
// and the IOSDevice frame. Each section is a stand-alone component.
const { useState, useEffect, useRef } = React;
// ─── Supabase config ──────────────────────────────────────────────────────
const SUPABASE_URL = 'https://tkbhebrievhwgcxishyy.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRrYmhlYnJpZXZod2djeGlzaHl5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA4MzAzMTksImV4cCI6MjA5NjQwNjMxOX0.6XpWNem1uxpgbcg9SOGRMYxBfjsNUzM3bR_X-_vhN4k';
async function saveToWaitlist({ email, ntrp, district }) {
const res = await fetch(`${SUPABASE_URL}/rest/v1/waitlist`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'apikey': SUPABASE_ANON_KEY,
'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
'Prefer': 'return=minimal',
},
body: JSON.stringify({
email,
ntrp: ntrp || null,
district: district || null,
}),
});
if (!res.ok) {
const text = await res.text();
throw new Error(text);
}
}
// ─── Tabler-style outline icons used on the landing page ──────────────────
const LandingIcon = {
calendarX: (s = 32) =>
,
arrowsUpDown: (s = 32) =>
,
clockX: (s = 32) =>
,
telegram: (s = 20) =>
,
instagram: (s = 20) =>
,
x: (s = 20) =>
};
// ─── Scroll reveal hook ───────────────────────────────────────────────────
function useReveal() {
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
}
// ─── Phone scaler — renders an IOSDevice at full size, scales via CSS ─────
function PhoneStage({ scale = 0.75, rotate = 0, children, width = 390, height = 812 }) {
return (
);
}
// Phone with green welcome bg
function PhoneStageDark({ scale = 0.75, rotate = 0, children, width = 390, height = 812 }) {
return (
);
}
// ─── Top nav ──────────────────────────────────────────────────────────────
function Nav() {
return (
SMASH
смотреть демо
Войти · скоро
);
}
// ─── Waitlist form (controlled, with optional NTRP + district) ────────────
function WaitlistForm({ variant = 'dark', ctaLabel = 'Хочу играть', showExtras = false }) {
const [email, setEmail] = useState('');
const [ntrp, setNtrp] = useState('');
const [district, setDistrict] = useState('');
const [submitted, setSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [showOptional, setShowOptional] = useState(showExtras);
const onSubmit = async (e) => {
e.preventDefault();
if (!email.includes('@')) return;
setLoading(true);
setError('');
try {
await saveToWaitlist({ email, ntrp, district });
setSubmitted(true);
} catch (err) {
// Duplicate email — treat as success (already registered)
if (err.message && err.message.includes('duplicate')) {
setSubmitted(true);
} else {
setError('Что-то пошло не так. Попробуй ещё раз.');
}
} finally {
setLoading(false);
}
};
const formClass = `email-form${variant === 'light' || variant === 'yellow' ? ' light' : ''}`;
const extrasClass = `form-extras${variant === 'light' || variant === 'yellow' ? ' light' : ''}`;
const noteClass = `form-note${variant === 'yellow' ? ' on-yellow' : ''}`;
const successClass = `success-msg${variant === 'yellow' ? ' on-yellow' : variant === 'light' ? ' light' : ''}`;
if (submitted) {
return (
Готово.
Сообщим, когда запустим. Расскажи другу — каждый приглашённый поднимает тебя в очереди.
);
}
return (
);
}
Object.assign(window, { LandingIcon, useReveal, PhoneStage, PhoneStageDark, Nav, WaitlistForm });