/** Shopify CDN: Minification failed Line 16:17 Expected ":" Line 16:57 Unexpected "'react'" Line 18:0 Comments in CSS use "/* ... */" instead of "//" Line 20:7 Expected ":" Line 31:7 Expected ":" Line 33:2 Expected identifier but found "useEffect(" Line 38:8 Expected ":" Line 41:0 Comments in CSS use "/* ... */" instead of "//" Line 43:7 Expected ":" Line 45:2 Expected identifier but found "useEffect(" ... and 54 more hidden warnings **/ import { useState, useEffect, useRef, useCallback } from 'react'; // ─── Countdown Hook ──────────────────────────────────────────────── function useCountdown(targetDate: Date) { const calculateTimeLeft = useCallback(() => { const diff = targetDate.getTime() - Date.now(); if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }; return { days: Math.floor(diff / (1000 * 60 * 60 * 24)), hours: Math.floor((diff / (1000 * 60 * 60)) % 24), minutes: Math.floor((diff / (1000 * 60)) % 60), seconds: Math.floor((diff / 1000) % 60), }; }, [targetDate]); const [timeLeft, setTimeLeft] = useState(calculateTimeLeft); useEffect(() => { const timer = setInterval(() => setTimeLeft(calculateTimeLeft()), 1000); return () => clearInterval(timer); }, [calculateTimeLeft]); return timeLeft; } // ─── Scroll Reveal Hook ──────────────────────────────────────────── function useScrollReveal() { const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' } ); const el = ref.current; if (el) { const children = el.querySelectorAll('.reveal'); children.forEach((child) => observer.observe(child)); observer.observe(el); } return () => observer.disconnect(); }, []); return ref; } // ─── Marquee Bar ─────────────────────────────────────────────────── function MarqueeBar() { const items = [ 'OPENING SOON', '✦', '3D REFLECTIVE EMBROIDERY', '✦', 'THE ART OF ATTENTION', '✦', 'SEEN BEFORE HEARD', '✦', '5 EXCLUSIVE COLORWAYS', '✦', 'PREMIUM ACTIVEWEAR', '✦', 'OPENING SOON', '✦', '3D REFLECTIVE EMBROIDERY', '✦', 'THE ART OF ATTENTION', '✦', 'SEEN BEFORE HEARD', '✦', '5 EXCLUSIVE COLORWAYS', '✦', 'PREMIUM ACTIVEWEAR', '✦', ]; const text = items.join(' '); return (

{text} {' ' + text}

); } // ─── Navigation ──────────────────────────────────────────────────── function Navigation() { return ( ); } // ─── Countdown Digit ─────────────────────────────────────────────── function CountdownDigit({ value, label }: { value: number; label: string }) { return (

{String(value).padStart(2, '0')}

{label}

); } // ─── Hero Section ────────────────────────────────────────────────── function HeroSection() { const launchDate = new Date(); launchDate.setDate(launchDate.getDate() + 14); const timeLeft = useCountdown(launchDate); const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (email) { setSubmitted(true); setEmail(''); setTimeout(() => setSubmitted(false), 3000); } }; return (

{/* Decorative elements */}

{/* Badge */}

✦ COMING SOON ✦

{/* Headline */}

The Art of Attention.
Seen Before Heard.

{/* Subtext */}

Premium activewear designed with 3D reflective embroidery. Every angle. Every detail. Five exclusive colorways dropping soon.

{/* Countdown */}

: : :

{/* Email Form */} {submitted && (

✓ You're on the list! We'll be in touch.

)}

Be the first to shop. No spam, just the drop.

); } // ─── Brand Logo Section ──────────────────────────────────────────── function BrandLogoSection() { const ref = useScrollReveal(); return (

); } // ─── Editorial Hero Panel ────────────────────────────────────────── function EditorialPanel() { const ref = useScrollReveal(); return (

{/* Left Panel */}

INTRODUCING

Five Colorways.
One Statement.

From timeless charcoal to bold hot pink — each piece is designed with 3D reflective embroidery that catches the light from every angle.

{/* Right Panel */}

S SIREN

); } // ─── Product Preview ─────────────────────────────────────────────── function ProductPreview() { const ref = useScrollReveal(); return (

{/* Section Header */}

THE COLLECTION

Every Detail, Considered

{/* Product Image */}

SIREN Activewear Collection — Charcoal, Light Blue, Yellow, Hot Pink, Purple

); } // ─── Color Swatches ──────────────────────────────────────────────── function ColorSwatches() { const ref = useScrollReveal(); const colors = [ { name: 'CHARCOAL', hex: '#2d2d2d', desc: 'Effortless. Elevated. Essential.' }, { name: 'LIGHT BLUE', hex: '#8db8e8', desc: 'Soft. Feminine. Dreamy.' }, { name: 'YELLOW', hex: '#e8c84a', desc: 'Bright. Uplifting. Confident.' }, { name: 'HOT PINK', hex: '#e84daa', desc: 'Bold. Playful. Fearless.' }, { name: 'PURPLE', hex: '#b68de8', desc: 'Bold. Luxe. Magnetic.' }, ]; return (

COLORWAYS

Choose Your Statement

{colors.map((color, i) => (

(e.currentTarget.style.transform = 'scale(1.15)') } onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)') } /> {color.name} {color.desc}

))}

); } // ─── Features ────────────────────────────────────────────────────── function Features() { const ref = useScrollReveal(); const features = [ { icon: '◇', title: '3D REFLECTIVE EMBROIDERY', desc: 'Premium detailing that catches light from every angle, setting you apart.', }, { icon: '◈', title: 'PREMIUM FABRIC', desc: 'Butter-soft, moisture-wicking material that moves with you all day.', }, { icon: '✧', title: 'FIVE COLORWAYS', desc: 'From timeless neutrals to bold statements — find your signature shade.', }, { icon: '❋', title: 'COMPLETE SETS', desc: 'Headband, crop top, and shorts — each piece designed to complement.', }, ]; return (

WHY SIREN

Made to Stand Out

{features.map((f, i) => (

{ e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(212, 83, 126, 0.08)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }} >

{f.icon}

{f.title}

{f.desc}

))}

); } // ─── Newsletter CTA ──────────────────────────────────────────────── function NewsletterCTA() { const ref = useScrollReveal(); const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (email) { setSubmitted(true); setEmail(''); } }; return (

STAY IN THE KNOW

Be the First to Shop

{!submitted ? ( ) : (

✓ Welcome to the SIREN inner circle!

We'll be in touch before launch.

)}

); } // ─── Footer ──────────────────────────────────────────────────────── function Footer() { return ( ); } // ─── Main App ────────────────────────────────────────────────────── export default function App() { return (

); }