// variant-party.jsx — Variant B: PARTY MODE // Bauhaus primary palette: pure white + bold red / blue / yellow / green. // Clearly distinct from B-Side (dark neon) and Fiesta (warm cultural). const PT = { bg: '#ffffff', // pure white — stark contrast to B-Side dark and Fiesta cream ink: '#0a0a0a', // neutral near-black inkDim: 'rgba(10,10,10,0.55)', pink: '#ff2d92', // brand pink — kept hot: '#ff1f1f', // bold primary red lemon: '#ffe600', // pure yellow indigo: '#1a1aff', // pure bold blue mint: '#00cc44', // bold green hair: 'rgba(10,10,10,0.12)', }; const ptDisplayFont = "'Big Shoulders Display', system-ui, sans-serif"; const ptMonoFont = "'JetBrains Mono', ui-monospace, monospace"; const ptSerifFont = "'Instrument Serif', serif"; // Confetti background — animated dots rising function Confetti({ count = 36 }) { const dots = React.useMemo(() => Array.from({ length: count }).map((_, i) => { const palette = [PT.pink, PT.lemon, PT.indigo, PT.mint, PT.hot]; return { left: Math.random() * 100, size: 6 + Math.random() * 14, delay: Math.random() * -20, dur: 9 + Math.random() * 8, color: palette[i % palette.length], shape: i % 3, // 0 dot, 1 square, 2 stripe rot: Math.random() * 360, }; }), [count]); return (
{dots.map((d, i) => (
))}
); } // A big pill button function PTButton({ children, color = PT.ink, bg = PT.pink, href, big = false }) { return ( {children} ); } // Sticker — rotated label function PTSticker({ children, color = PT.lemon, rot = -6, size = 14 }) { return ( {children} ); } // Nav function PTNav() { return (
kantahan.app
▶ Launch
); } // HERO function PTHero() { return (
{/* Stickers */}
★ FREE FOREVER
NO APP! ✨
50,000+ TRACKS
━━ a b-side · track 01 · home karaoke ━━
{/* Massive marquee headline */}

sing!{' '} scream {' '} cry.

Kantahan is browser-based karaoke. Plug a TV in, point your phone at the QR, and it's your turn at the mic.

▶ Start a session free See how it works
{/* Live animated logo + screen mockup */}
{SITE.displayPath} ● LIVE
▸ SCAN THE QR ▸ PICK A SONG ▸ HAND OFF THE MIC
); } // Big rotating marquee between sections function PTMarquee({ text = 'KANTAHAN ★ KANTAHAN ✿ KANTAHAN ● KANTAHAN ✦ ', bg = PT.ink, color = PT.lemon }) { const repeated = (text + text + text + text); return (
{repeated}
); } // How it works — three big colorful cards function PTHow() { const steps = [ { n: 1, t: 'Plug in.', body: `Open ${SITE.displayPath} on a laptop. Point a TV at it.`, mock: MockDisplay, color: PT.pink }, { n: 2, t: 'Pass the phone.', body: 'Guests scan the QR. They pick songs from their pocket. No installs, no logins.', mock: MockRequest, color: PT.indigo }, { n: 3, t: 'Lose your voice.', body: 'Auto-queue, singer rotation, banners for breaks. Sing till somebody cries.', mock: MockDJ, color: PT.mint }, ]; return (
HOW IT WORKS

Three steps. Zero homework.

{steps.map((s, i) => (
{s.n}

{s.t}

{s.body}

))}
); } // Features — chunky color blocks function PTFeatures() { // Cycle palette per card const palette = [PT.pink, PT.indigo, PT.lemon, PT.mint, PT.hot, '#ffffff']; const inkOn = [PT.lemon, PT.lemon, PT.ink, PT.ink, PT.lemon, PT.ink]; return (
EVERYTHING IN THE BOX

Built for actual parties.

{FEATURES.map((f, i) => (
{f.monoTag}

{f.title}

{f.sub}

{f.body}

))}
); } // Pricing function PTPricing() { return (
PRICING

Free for the home.
Pro for the room.

{[PRICING.free, PRICING.paid].map((tier, idx) => { const isPro = idx === 1; return (
{isPro && (
FOR VENUES & BARS
)}
{tier.name}
{tier.sub}
{tier.price} {!isPro && / forever-ish}

{tier.blurb}

    {tier.features.map((f, i) => (
  • {f.t ? '✓' : '×'} {f.label}
    • ))}
{tier.cta} →
); })}
); } // Kantahan meaning — playful, big function PTKantahan() { return (
WHAT'S IN A NAME
kantahán
/kan·ta·hán/  ·  Filipino, noun & verb

"A Filipino party without karaoke is just a meeting with food."

{[ { color: PT.lemon, t: 'Birthdays', body: 'The machine comes out before the cake. The cake comes out before the song is over.' }, { color: PT.mint, t: 'Tuesdays', body: 'No occasion required. Someone said "kantahan tayo" and that was the occasion.' }, { color: PT.indigo, ink: PT.lemon, t: '"My Way"', body: 'Always sung. Always emotional. Always at least one ballad past midnight.' }, ].map((c, i) => (
{c.t}

{c.body}

))}

We named the app after the thing itself — not the machine. Kantahan is what happens between the songs.

); } // FAQ function PTFAQ() { const [open, setOpen] = React.useState(0); return (
FAQ

You asked. We answered.

{FAQS.map((item, i) => { const isOpen = open === i; const colors = [PT.lemon, PT.mint, PT.pink, PT.indigo, PT.hot, '#ffffff']; const inkOn = [PT.ink, PT.ink, PT.lemon, PT.lemon, PT.lemon, PT.ink]; const bg = colors[i % colors.length]; const ink = inkOn[i % inkOn.length]; return (
{isOpen && (

{item.a}

)}
); })}
); } // Big CTA strip function PTCTA() { return (

ready to hold court?

One URL. No installs. The TV does the rest.

▶ Start free Compare plans
); } // Footer function PTFooter() { return ( ); } function VariantParty() { return (
); } window.VariantParty = VariantParty;