/* ============================================================ HOME PAGE — The Bloom Company rebrand ============================================================ */ /* ── Video panel cycling hook ─────────────────────────────── */ function useVideoCycle(count, intervalMs) { const [active, setActive] = React.useState(0); const [pulsing, setPulsing] = React.useState(-1); const timer = React.useRef(null); const goTo = React.useCallback((idx) => { setActive((prev) => {if (prev === idx) return prev;setPulsing(idx);setTimeout(() => setPulsing(-1), 700);return idx;}); }, []); const start = React.useCallback(() => { timer.current = setInterval(() => setActive((prev) => {const next = (prev + 1) % count;setPulsing(next);setTimeout(() => setPulsing(-1), 700);return next;}), intervalMs); }, [count, intervalMs]); const stop = React.useCallback(() => clearInterval(timer.current), []); React.useEffect(() => {start();return stop;}, [start, stop]); return { active, pulsing, goTo, start, stop }; } function HomeHero() { const { nav } = useStore(); const { active, pulsing, goTo, start, stop } = useVideoCycle(4, 4500); /* Four panels: real product photo posters + Mixkit free videos */ const panels = [ { poster: IMG.hero.main, src: 'uploads/Screen_Recording_20260613_132724_Instagram_web-86423510.mp4', label: 'Party setup' }, { poster: IMG.hero.float, src: 'uploads/Screen_Recording_20260613_133025_Instagram_web-9d7bb52a.mp4', label: 'Balloon garland' }, { poster: BB.IMG.cats.favours, src: 'uploads/Screen_Recording_20260613_133541_Instagram_web-f36c53d1.mp4', label: 'Kids celebrating' }, { poster: BB.IMG.cats.edible, src: 'uploads/Screen_Recording_20260613_133822_Instagram_web-07802c1c.mp4', label: 'Party treats' }]; /* Try to play all videos (needed on iOS) */ const refs = React.useRef([]); React.useEffect(() => { refs.current.forEach((v) => v && v.play().catch(() => {})); const resume = () => refs.current.forEach((v) => v && v.play().catch(() => {})); document.addEventListener('pointerdown', resume, { once: true }); return () => document.removeEventListener('pointerdown', resume); }, []); return (
{/* ── 4-panel grid ─────────────────────────────── */}
{panels.map((p, i) =>
{stop();goTo(i);start();}} style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer', gridColumn: i + 1, gridRow: '1' }}> {/* Video element */} {/* Scrim — dims inactive panels */}
{/* Pulse flash on activation */} {pulsing === i &&
}
)}
{/* ── Gradient overlays for text legibility ───── */}
{/* ── Content ──────────────────────────────────── */}
{/* Eyebrow */}

Handmade in Lagos  •  Party Props  •  Custom Favours  •  Shipped Worldwide

{/* Headline */}

Make it
unforgettable.

{/* CTAs */}
{/* Stats */}
{[['1,800+', 'Parties styled'], ['20+', 'Countries'], ['100%', 'Handmade']].map(([n, l], i, a) =>
{n} {l}
{i < a.length - 1 &&
} )}
{/* ── Scroll indicator ─────────────────────────── */}
Scroll
{/* ── Keyframes (injected once) ─────────────────── */}
); } function TrustStrip() { const items = [ [I.truck, 'Worldwide Shipping', 'Multiple shipping options'], [I.shield, 'Secure NGN & USD checkout', 'Multiple payment options'], [I.gift, '100% handmade', 'Every piece crafted in Lagos']]; return (
{items.map(([Icon, t, s], i) =>
{Icon({ width: 22, height: 22 })}
{t}
{s}
)}
); } function FeaturedCategories() { const { nav } = useStore(); const [showCustomModal, setShowCustomModal] = React.useState(false); return (
{showCustomModal &&
{if (e.target === e.currentTarget) setShowCustomModal(false);}} role="dialog" aria-modal="true" style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(18,6,26,.72)', backdropFilter: 'blur(7px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'bbFadeIn .4s forwards' }}>

Custom order

Your vision, our artistry.

{['Any theme, any colour — we build it from scratch just for you.', 'Share your inspiration images and we’ll elevate them with our signature artistry.', 'Receive a personalised quote within 24–48 hours via WhatsApp.'].map((t, i) =>
✦

{t}

)}

“With us, your ideas don’t just come to life — they bloom into something unforgettable.”

}

Shop by category

Every detail, handmade

{BB.categories.slice(0, 6).map((c, i) => nav('shop', { cat: c.id })} style={{ cursor: 'pointer' }}>

{c.name}

Shop now
)} {/* Customisation CTA tile */}
); } function Bestsellers() { const { nav } = useStore(); const [tab, setTab] = useState('best'); const list = BB.products.filter((p) => tab === 'best' ? p.tags.includes('best') : p.tags.includes('new')).slice(0, 4); return (

Parents also love!

{list.map((p, i) => )}
); } function InspirationGallery() { const { nav } = useStore(); const photos = [ { src: IMG.social[0], label: 'Butterfly party bundle' }, { src: IMG.social[1], label: 'Roblox treats & party bag' }, { src: IMG.social[2], label: 'Moana gable boxes' }, { src: IMG.social[3], label: 'Personalised colouring book' }, { src: IMG.social[4], label: 'Party bundle' }, { src: IMG.social[5], label: 'Party props' }]; return (

Real work, real magic

Made for moments like yours

A glimpse into celebrations we've had the joy of creating — each one handmade, each one unforgettable.

{photos.map((p, i) => nav('shop')}>
e.currentTarget.style.opacity = '1'} onMouseLeave={(e) => e.currentTarget.style.opacity = '0'}> {p.label}
)}
); } function EditorialSplit() { const { nav } = useStore(); return (

"With us, your ideas don't just come to life — they bloom into something unforgettable."

— BELLE, FOUNDER

Belle & Bloom Designs

Two sister brands, one shared purpose

We are Belle and Bloom Designs — home to two sister brands united by one purpose: crafting beautiful, meaningful pieces that keep your most precious memories alive.

Through The Belle and Bloom Company, we handcraft bespoke party favours, props and décor that transform every celebration into a lasting experience. With Belle Journals, we help parents savour life's most tender milestones — through thoughtfully designed baby journals that grow alongside your little one.

    {['Made with heart — handcrafted with love, care and intention', 'Uniquely yours — custom designs that reflect your story and style', 'Always on time — we respect your deadlines and deliver on our promise'].map((t) =>
  • {t}
    • )}
); } function Testimonials() { const [i, setI] = useState(0); const t = BB.testimonials; useEffect(() => {const id = setInterval(() => setI((p) => (p + 1) % t.length), 5500);return () => clearInterval(id);}, []); return (

Real parents, real parties

{t.map((item, idx) =>

"{item.quote}"

{item.name}
{item.role}
)}
{t.map((_, idx) =>
); } function TikTokSection() { const { nav } = useStore(); return (

@thebloomcompany

See the craft in the making

Watch behind-the-scenes process videos, unboxings, party setups and full decorations on our TikTok and Instagram — updated weekly with fresh party inspiration.

Follow on TikTok Instagram
{IMG.social.slice(0, 6).map((src, i) =>
)}
); } /* ── Things To Note Popup ─────────────────────────────────── */ function ThingsToNotePopup() { const STORAGE_KEY = 'bb_popup_hidden_date'; const [visible, setVisible] = React.useState(false); const [closing, setClosing] = React.useState(false); const [seconds, setSeconds] = React.useState(60); const [dontShow, setDontShow] = React.useState(false); const timerRef = React.useRef(null); const countRef = React.useRef(null); React.useEffect(() => { const today = new Date().toDateString(); if (localStorage.getItem(STORAGE_KEY) === today) return; const t = setTimeout(() => setVisible(true), 1400); return () => clearTimeout(t); }, []); React.useEffect(() => { if (!visible) return; timerRef.current = setTimeout(() => dismiss(), 60000); countRef.current = setInterval(() => setSeconds((s) => Math.max(0, s - 1)), 1000); return () => {clearTimeout(timerRef.current);clearInterval(countRef.current);}; }, [visible]); function dismiss() { if (dontShow) localStorage.setItem(STORAGE_KEY, new Date().toDateString()); clearTimeout(timerRef.current);clearInterval(countRef.current); setClosing(true); setTimeout(() => {setVisible(false);setClosing(false);setSeconds(60);}, 480); } if (!visible) return null; const circumference = 2 * Math.PI * 13; const progress = seconds / 60 * circumference; return (
{if (e.target === e.currentTarget) dismiss();}} role="dialog" aria-modal="true" aria-labelledby="ttn-title" style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(18,6,26,.72)', backdropFilter: 'blur(7px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: closing ? 'ttnOut .48s forwards' : 'ttnIn .45s forwards' }}>
{/* Header row */}
{seconds}
auto-closes
{/* Eyebrow + title */}

Things to note

Your vision, our artistry.

{/* Bullets */}
{[ 'Our catalogue is simply a starting point — your possibilities are limitless.', 'Every piece can be tailored in design, colour and finish to perfectly reflect your vision.', 'We welcome your inspiration images, but each creation will be elevated with our signature artistry and bespoke detailing.', 'Prices reflect the designs as presented; design complexity may affect final pricing.']. map((t, i) =>
✦

{t}

)}
{/* Quote */}

“With us, your ideas don’t just come to life — they bloom into something unforgettable.”

{/* Footer */}
); } function HomePage() { return ( <> ); } Object.assign(window, { HomePage });