import { useState } from "react";
export default function HomePreview() {
type Mode = "quiet" | "drop"; // drop kept for preview but hidden by default
const [mode, setMode] = useState
("quiet");
const [showShop, setShowShop] = useState(true); // toggle shop preview on/off
const [latestKey, setLatestKey] = useState("vibrant-tides");
const latest: Record= {
"vibrant-tides": {
title: "Vibrant Tides",
tag: "Latest Project",
blurb: "Ten super‑short visual breaths to help you slow down and choose with clarity.",
ctas: ["Watch", "Read notes", "Shop"],
},
"pixel-disorder": {
title: "Pixel Disorder",
tag: "Installation",
blurb: "A looping 6‑minute projection for calm interruption in shared spaces.",
ctas: ["See installation", "Preview", "Host it"],
},
};
const projects = [
{
title: "Vibrant Tides",
caption: "Ten short visual affirmations. Breathe, then decide.",
actions: ["Watch", "Shop"],
},
{
title: "Pixel Disorder",
caption: "A looping installation for calm interruption.",
actions: ["See installation", "Preview"],
},
{
title: "Self‑Care Arches",
caption: "Ceramic‑inspired forms that suggest portals into stillness.",
actions: ["See project"],
},
{
title: "Breathe Flowers",
caption: "Motion studies inspired by the slow intelligence of nature.",
actions: ["See project"],
},
];
const products = [
{ title: "Vibrant Tides — Print #01", caption: "A4 Giclée on cotton rag", price: "$48", state: "in-stock" },
{ title: "Breathe — Tee (Soft Black)", caption: "100% cotton, relaxed fit", price: "$34", state: "coming-soon" },
{ title: "Pixel Disorder — Loop (4K)", caption: "Personal use license", price: "$12", state: "digital" },
];
const notes = [
{ title: "On moving slowly, on purpose", caption: "Why seasonal work beats constant output.", href: "#" },
{ title: "There is still light", caption: "Staying honest without forced positivity.", href: "#" },
{ title: "A visual breath between tabs", caption: "Designing tiny pauses that you can feel.", href: "#" },
];
const LatestSpotlight = () => {
const d = latest[latestKey];
return (
{d.tag}
We make in seasons, not sprints
{d.title}
{d.blurb}
{d.ctas.map((c) => (
{c}
))}
Preview:
setLatestKey(e.target.value)} className="rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-sm">
Vibrant Tides
Pixel Disorder
);
};
return (
{/* Top Nav */}
{/* Hero */}
W·A·C — We Are Colours
We move slowly, on purpose.
We create quiet visual experiences and small sensory reminders to help you pause and reconnect. {mode === "quiet" ? (
<>We’re not always here—if we’re quiet, we’re just breathing.
) : (
<>When we release something, it’s because we felt it deeply.
)}
{/* Latest Spotlight (replaces seasonal module) */}
{/* Seamless connector */}
Next ↓
{/* Why Slow (tighter and integrated) */}
This isn’t a brand that’s always online.
We don’t believe in constant output. We make when it feels honest—when it’s needed and ready. If you’re here today, welcome. This space is for reflection, not rush.
{/* Projects */}
{projects.map((p) => (
{p.title}
{p.caption}
{p.actions.map((a) => (
{a}
))}
))}
{/* Objects (Shop preview) */}
{showShop && (
Objects for slow living
The shop is our donation jar—with beauty inside.
Visit Shop
{products.map((p) => (
{p.state === "coming-soon" && (
Coming soon
)}
))}
)}
{/* Notes (Blog) */}
Notes
Short reflections paired with illustrations. Quiet thoughts for a fast world.
Read all
{/* Stay Close (integrated near Notes) */}
Stay close
We don’t send many emails—only when there’s something honest to share. A film. A note. A small reminder to pause.
{/* Footer with Support note */}
W·A·C moves in seasons. If we’re quiet, we’re resting. If we’re back, we’re ready.
This isn’t about getting rich. If something here helped, your purchase, share, or commission funds the next piece.
