/* Marquee + Results (Before-After + Shade strip) + How it Works + Why 360 + UGC reels + Footer */ const { useState: u3S, useEffect: u3E, useRef: u3R, useCallback: u3CB } = React; /* ---------- Marquee — between hero and results ---------- */ function Marquee() { const items = [ "Loved by dentists", "★", "2.4M+ TikTok views", "★", "Sold out twice", "★", "Made for sensitive teeth", "★", "Featured by @[Stassie]", "★", "Whisper-network favourite", "★", ]; const track = ( ); return (

{track} {track}

); } /* ---------- Results — B/A slider + Shade strip ---------- */ function Results() { return (

— The verdict Real mouths · No filter · No retouch

From "is that veneers?" in fourteen days.

{/* Stat band */}

{[ ["14", "days", "standard course"], ["2", "ways", "one hour or overnight"], ["0", "drama", "near-zero sensitivity"], ].map(([n, u, l]) => (

{n} {u}

{l}

))}

Results vary by starting shade, formulation and adherence. Shade estimates are AI-assisted from progress photos and are indicative, not clinical measurements.

); } /* Draggable B/A slider — captions placeholder, real photos drop in later */ function BeforeAfter() { const wrapRef = u3R(null); const [pos, setPos] = u3S(52); const dragging = u3R(false); const update = (clientX) => { const r = wrapRef.current.getBoundingClientRect(); const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); setPos(p); }; u3E(() => { const onMove = (e) => { if (dragging.current) update(e.clientX); }; const onTouchMove = (e) => { if (dragging.current && e.touches[0]) update(e.touches[0].clientX); }; const onUp = () => { dragging.current = false; }; window.addEventListener("mousemove", onMove); window.addEventListener("touchmove", onTouchMove, { passive: true }); window.addEventListener("mouseup", onUp); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("touchmove", onTouchMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchend", onUp); }; }, []); return (

{ dragging.current = true; update(e.clientX); }} onTouchStart={(e) => { dragging.current = true; if (e.touches[0]) update(e.touches[0].clientX); }} > {/* AFTER (full) — base layer, yellow sweater, brighter teeth */} After 14 days of 360 Whitening

{/* BEFORE — clipped left side, black sweater */}

{/* Drag handle */}

‹ ›

{/* Labels */} Before · Day 0 After · Day 14

); } /* Shade strip — interactive thumb across A4 → B1 */ function ShadeStrip() { const shades = [ { code: "A4", color: "#9F7B4A" }, { code: "A3.5", color: "#B49266" }, { code: "A3", color: "#C6A983" }, { code: "A2", color: "#D7BD9C" }, { code: "A1", color: "#E6D3B6" }, { code: "B1", color: "#F4E6C9" }, { code: "BL3", color: "#F8EDD3" }, { code: "BL2", color: "#FBF3DC" }, { code: "BL1", color: "#FDF8E8" }, ]; const [pos, setPos] = u3S(7); // index of "starts here" const wrapRef = u3R(null); const dragging = u3R(false); const update = (clientX) => { const r = wrapRef.current.getBoundingClientRect(); const p = (clientX - r.left) / r.width; const idx = Math.round(p * (shades.length - 1)); setPos(Math.max(0, Math.min(shades.length - 1, idx))); }; u3E(() => { const onMove = (e) => { if (dragging.current) update(e.clientX); }; const onTouchMove = (e) => { if (dragging.current && e.touches[0]) update(e.touches[0].clientX); }; const onUp = () => { dragging.current = false; }; window.addEventListener("mousemove", onMove); window.addEventListener("touchmove", onTouchMove, { passive: true }); window.addEventListener("mouseup", onUp); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("touchmove", onTouchMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchend", onUp); }; }, []); const start = 1; // where most users start const startShade = shades[start]; const targetShade = shades[pos]; return (

— Pick your goal

The shade ladder.
You start here. We get you there.

{/* Strip */}

{ dragging.current = true; update(e.clientX); }} onTouchStart={(e) => { dragging.current = true; if (e.touches[0]) update(e.touches[0].clientX); }} >

{shades.map((s, i) => (

= start && i <= pos ? 1 : 0.55, transition: "opacity .3s ease" }} /> ))}

{/* Start marker */}

↓ you

{/* Goal thumb */}

Goal

{/* Readout */}

Day 0

Where you are

Day 14

Noticeably brighter

); } Object.assign(window, { Marquee, Results });

From "is that veneers?" in fourteen days.

The shade ladder. You start here. We get you there.

The shade ladder.
You start here. We get you there.