// VELOUR marketing site — four live pillar demos. Each section pairs editorial copy
// with a working miniature of the product: check a ritual and the ring closes,
// wear a piece and its cost-per-wear falls. Demo data only — nothing persists.
const { Card } = window.VelourDesignSystem_380ed4;
// Runs the enter animation once, when the element scrolls into view.
function useInView(threshold = 0.35) {
const ref = React.useRef(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
if (!("IntersectionObserver" in window)) { setInView(true); return; }
const io = new IntersectionObserver((es) => {
es.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
}, { threshold });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, []);
return [ref, inView];
}
const demoEase = "cubic-bezier(.16,1,.3,1)";
// Shared frame for each demo's product card.
function DemoCard({ label, greet, date, children }) {
return (
{greet}
{date}
{children}
);
}
// Copy column + card, alternating sides.
function DemoRow({ id, flip, accent, eyebrow, title, lede, points, card }) {
const copy = (
{title}
{lede}
{points.map((pt) => (
{pt}
))}
);
const visual = {card}
;
return (
{flip ? [visual, copy] : [copy, visual]}
);
}
/* ---------- Rituals: check in, the ring closes ---------- */
const RING_CIRC = 465; /* 2πr for r=74 */
const RITUAL_ITEMS = ["Morning pages, 10 minutes", "Stretch before coffee", "Phone stays outside the bedroom"];
const RITUAL_LINES = [
"One kept. The day is underway.",
"Two of three. Almost a full morning.",
"All three. Day 15 of the hold begins tomorrow.",
];
function RitualsDemo() {
const [ref, inView] = useInView();
const [done, setDone] = React.useState([false, false, false]);
const kept = done.filter(Boolean).length;
const days = kept === 3 ? 15 : 14;
const pct = inView ? Math.min(days / 21, 1) : 0; /* 21-day ring cycle */
const toggle = (i) => setDone((d) => d.map((v, j) => (j === i ? !v : v)));
return (
{RITUAL_ITEMS.map((name, i) => {
const d = done[i];
return (
toggle(i)} aria-pressed={d} style={{
display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", width: "100%", textAlign: "left",
border: `1px solid ${d ? "color-mix(in srgb, var(--sage) 40%, var(--border))" : "var(--border)"}`,
borderRadius: 12, fontSize: 14, fontFamily: "var(--font-sans)", cursor: "pointer",
background: d ? "color-mix(in srgb, var(--sage) 7%, transparent)" : "transparent",
color: d ? "var(--text-tertiary)" : "var(--text-primary)",
transition: `background .35s ${demoEase}, border-color .35s ${demoEase}, color .35s ${demoEase}`,
}}>
{name}
);
})}
{kept === 0 ? "Tap a ritual to check in." : RITUAL_LINES[kept - 1]}
);
}
/* ---------- Wellness: gauges fill, the score counts ---------- */
const GAUGE_CIRC = 226; /* 2πr for r=36 */
const GAUGES = [
{ pct: 88, val: "7.4h", label: "Sleep" },
{ pct: 72, val: "1.8L", label: "Hydration" },
{ pct: 81, val: "8.1k", label: "Steps" },
];
function WellnessDemo() {
const [ref, inView] = useInView();
const [score, setScore] = React.useState(0);
React.useEffect(() => {
if (!inView) return;
const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const target = 81, dur = reduced ? 1 : 1500, t0 = performance.now();
let raf;
const tick = (t) => {
const k = Math.min((t - t0) / dur, 1);
setScore(Math.round(target * (1 - Math.pow(1 - k, 3))));
if (k < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [inView]);
return (
Wellness score
{score}
+6 from last week
);
}
/* ---------- Wardrobe: wear a piece, cost-per-wear recalculates ---------- */
const CAPSULE_START = [
{ name: "Beige coat", swatch: "#C8BFAE", price: 240, worn: 61 },
{ name: "Navy knit", swatch: "#3E4A52", price: 88, worn: 34 },
{ name: "Wool trouser", swatch: "#7A6E5D", price: 165, worn: 12 },
{ name: "White oxford", swatch: "#EDE7DB", price: 120, worn: 48 },
{ name: "Suede loafer", swatch: "#5A5348", price: 210, worn: 8 },
{ name: "Linen shirt", swatch: "#9C8F7A", price: 95, worn: 27 },
];
function WardrobeDemo() {
const [pieces, setPieces] = React.useState(CAPSULE_START.map((p) => ({ ...p, wornToday: false })));
const wear = (i) => setPieces((ps) => ps.map((p, j) => (j === i ? { ...p, worn: p.worn + 1, wornToday: true } : p)));
const avg = pieces.reduce((s, p) => s + p.price / p.worn, 0) / pieces.length;
return (
{pieces.map((p, i) => (
wear(i)} style={{
position: "relative", border: "1px solid var(--border)", borderRadius: 14, padding: "16px 14px",
display: "flex", flexDirection: "column", gap: 8, textAlign: "left", width: "100%",
background: "transparent", cursor: "pointer", fontFamily: "var(--font-sans)",
}}>
{p.wornToday ? "Worn today" : "Wear today"}
{p.name}
${(p.price / p.worn).toFixed(2)} / wear · worn {p.worn}×
))}
Capsule average
${avg.toFixed(2)}
per wear
);
}
/* ---------- Efficiency: ROI tiers + weekly return bars ---------- */
const ROI_TASKS = {
high: [["Grocery order before the fridge empties", "Do first"], ["Prep tomorrow's client call", "Do first"], ["Sunday meal prep — four dinners", "Do first"]],
medium: [["Batch errands into one trip", "Batch together"], ["Answer the week's email", "Batch together"], ["Schedule dentist and oil change", "Batch together"]],
low: [["Reorganize the pantry", "Defer or delete"], ["Compare three note apps", "Defer or delete"], ["Rewatch the settings tutorial", "Defer or delete"]],
};
// Weekends carry real bars — errands and meal prep count as much as a work Tuesday.
const WEEK_BARS = [
{ d: "M", h: 52 }, { d: "T", h: 74 }, { d: "W", h: 66 }, { d: "T", h: 92 }, { d: "F", h: 80 },
{ d: "S", h: 44 }, { d: "S", h: 86 },
];
function EfficiencyDemo() {
const [ref, inView] = useInView();
const [tier, setTier] = React.useState("high");
return (
{[["high", "High ROI"], ["medium", "Medium ROI"], ["low", "Low ROI"]].map(([key, label]) => {
const active = tier === key;
return (
setTier(key)} style={{
padding: "8px 16px", borderRadius: 999, fontSize: 12, letterSpacing: "0.06em", cursor: "pointer", fontFamily: "var(--font-sans)",
border: `1px solid ${active ? "var(--terracotta)" : "var(--border)"}`,
background: active ? "var(--terracotta)" : "transparent", color: active ? "#fff" : "var(--text-secondary)",
transition: `.3s ${demoEase}`,
}}>{label}
);
})}
{ROI_TASKS[tier].map(([name, roi], i) => (
{name}
{roi}
))}
{WEEK_BARS.map((b, i) => (
{b.d}
))}
);
}
/* ---------- assembly ---------- */
function FeatureSplit() {
return (
);
}
window.FeatureSplit = FeatureSplit;