/* Sunsets Collective — main React app */ const { useState, useEffect, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#FFBD59", "ink": "#F6E9CF", "bg": "#1c1c1c", "grain": 0.18, "displayFont": "Italiana", "showHeroPhoto": true } /*EDITMODE-END*/; // ---------- Brand wordmark ---------- function Wordmark({ size = 56, tagline = false }) { return (
sun.co {tagline && Sunsets Collective }
); } // ---------- Nav ---------- function Nav({ goTo }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } // ---------- Hero ---------- function Hero({ goTo, showPhoto }) { return (
{showPhoto &&
} {/* Featured-in liquid-glass badge */}
✦ The event band people talk about
{/* Central hero content with corner accents */}
{/* Massive brand mark — sun.co */}
Sunsets Collective
s u n . c o
   LIVE · 5-PIECE    EST. 2025 · SG
✦

Make Your Night unforgettable

A five-piece of veteran musicians — pop, rock and R&B, tailored setlists, concert-grade sound, and the rare chance to have  your own song  written.

WhatsApp Us +65 9023 6453
EST. 2025 5-piece · Producer-led
↓ Scroll
SG · 01°22'N Pop · Rock · R&B · DJ
); } // ---------- Marquee ---------- function Marquee() { const items = [ { text: 'Weddings', star: true }, { text: 'Corporate', star: true }, { text: 'Brand Activations', star: true }, { text: 'Afterparties', star: true }, { text: 'Private Events', star: true }, { text: 'Custom Songs', star: true }]; const Row = () => {items.map((it, i) => ✦ {it.text} )} ; return (
); } // ---------- About ---------- function About() { return (
02 — About Us

Five musicians. Ten years on stage.
One band.

Sunsets Collective started in 2025, but the players didn't. Each member is a veteran of the Singapore live circuit — a decade-plus across rooms big and small, from intimate hotel ballrooms to outdoor festivals.

We are producer-led, which means every set is arranged, not assembled — built around the room, the moment, and the people standing in it. Coupled with a sound rig that can fill any space you put us in.

Music is the point. Everything else is logistics — and we'll handle that too.

5.
Piece Band
20
Years In Live Sound
10
YEARS OF STAGE EXPERIENCE
∞
Setlists Tailored
Vocalist mid-set, smiling at the keys Live · Ballroom Set
The band on stage, full lineup The 5-Piece
DJ set at the afterparty Afterparty · DJ Set
); } // ---------- Offerings ---------- function Offerings() { const offers = [ { n: '01', title: 'Pop, Rock & R&B', body: 'A 5-piece built for range. Tailored setlists, customised to the vibe — first dance to the dance floor.' }, { n: '02', title: 'DJ for the After', body: 'When the band steps off, the DJ steps on. Seamless transition, one continuous evening.' }, { n: '03', title: 'Custom Songs', body: 'A song written for your event. Best for weddings — but who said a corporate launch can\'t have its own anthem?' }, { n: '04', title: 'Quality Sound', body: 'Twenty years of live-sound experience. Fuss-free coordination. We fill the room, talk to your venue and planner, and handle the wires.' }]; return (
03 — What We Do · TL;DR

Your most dynamic sounding 5-piece band, bringing the right mood and energy at every turn. Tailored to your night, from glasses full, till empty.

{offers.map((o, i) =>
{o.n} / 04

{o.title}

{o.body}

)}
); } // ---------- Pricing ---------- function Pricing({ goTo }) { const tiers = [ { name: 'Just the Band', tag: 'The Core', amount: '1,500', from: true, list: ['5-piece live band', 'Tailored setlist', 'Bring your own sound', 'Planner liaison'] }, { name: <>Band + Sound, tag: 'Plug & Play', amount: '2,900', from: true, featured: false, list: ['5-piece live band', 'Tailored setlist', 'In-house sound rig', 'Tech runs the room', 'Planner liaison'] }, { name: <>Band + Sound + Custom Song, tag: 'The Signature', amount: '3,300', from: true, featured: true, list: ['Everything in Plug & Play', 'One song written for your event', 'Arranged & performed live', 'Lyrics shaped with you', 'A night they can\'t copy'] }]; const addons = [ { name: <>DJ Afterparty Set, sub: 'Seamless handover when the band steps off' }, { name: <>Studio Recording of Custom Song, sub: 'Mixed, mastered, yours to keep' }, { name: <>Emcee Services, sub: 'A voice for the night — runs the run-of-show' }]; return (
04 — PRICING

Transparent pricing.
Honest conversations.

We've all been on the other side of this — chasing quotes, wondering what's really included. So here's a public floor. Customisation is the norm; reach out for a proper quote.

{tiers.map((t, i) =>
{t.tag} {t.featured && ★ Popular}

{t.name}

{t.from && from} SGD{t.amount}
    {t.list.map((li, j) =>
  • {li}
    • )}
)}
{addons.map((a, i) =>
{a.name}
{a.sub}
On request
)}
); } // ---------- Questionnaire / Contact ---------- const Q_STEPS = [ { key: 'vibe', label: 'Step 01 of 02', prompt: <>What kind of event?, options: ['Wedding', 'Corporate', 'Private / Birthday', 'Brand Activation', 'Something else'], multi: false }, { key: 'details', label: 'Step 02 of 02', prompt: <>Where can we reach you?, sub: 'We\'ll reply within 24 hours.', form: true }]; function Questionnaire() { const [step, setStep] = useState(0); const [answers, setAnswers] = useState({}); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const total = Q_STEPS.length; const current = Q_STEPS[step]; const select = (key, val, multi) => { setAnswers((a) => { if (!multi) return { ...a, [key]: val }; const arr = a[key] || []; if (arr.includes(val)) return { ...a, [key]: arr.filter((v) => v !== val) }; return { ...a, [key]: [...arr, val] }; }); }; const isSelected = (key, val) => { const v = answers[key]; if (Array.isArray(v)) return v.includes(val); return v === val; }; const canProceed = () => { if (current.form) { return answers.name && answers.email && answers.date; } const v = answers[current.key]; if (Array.isArray(v)) return v.length > 0; return !!v; }; const next = () => { if (step < total - 1) setStep(step + 1); }; const onFormSubmit = async (e) => { e.preventDefault(); if (submitting) return; setError(null); setSubmitting(true); try { const form = e.currentTarget; const fd = new FormData(form); const res = await fetch(form.action, { method: form.method || 'POST', headers: { Accept: 'application/json' }, body: fd }); if (!res.ok) { let msg = 'Something went wrong. Please try again or WhatsApp us directly.'; try { const data = await res.json(); if (data?.errors?.length) msg = data.errors.map((er) => er.message).join(' · '); } catch (_) {} throw new Error(msg); } setSubmitted(true); } catch (err) { setError(err.message || 'Network error. Please try again.'); } finally { setSubmitting(false); } }; const back = () => step > 0 && setStep(step - 1); if (submitted) { return (
Booking Enquiry Received
✦

Thanks, {answers.name?.split(' ')[0] || 'friend'}.

We've got your details and we're already thinking about the vibe. Expect a real human reply within 24 hours — usually sooner.

Email Us Directly →
); } return (
{/* Hidden meta fields carried across steps */}
Booking Enquiry · Step {step + 1} of {total}
{Q_STEPS.map((_, i) => )}
{current.label}

{current.prompt}

{current.sub &&
{current.sub}
} {current.form ?
setAnswers((a) => ({ ...a, name: e.target.value }))} placeholder="Alex Tan" />
setAnswers((a) => ({ ...a, email: e.target.value }))} placeholder="alex@example.com" type="email" required />
setAnswers((a) => ({ ...a, date: e.target.value }))} placeholder="DD / MM / YYYY" />
setAnswers((a) => ({ ...a, phone: e.target.value }))} placeholder="+65 9023 6453" />