onOpen(product, colorId)}>
{entry.badge &&
{entry.badge}
}
![{product.name}]()
![]()
{entry.overrideName || product.name}
{fmtPrice(entry.overridePrice || product.price)}
{entry.overrideSub || `${product.colors.length} ${product.colors.length === 1 ? "colour" : "colours"}`}
·
{product.category}
{product.colors.length > 1 && (
e.stopPropagation()}>
{product.colors.map(c => (
setColorId(c.id)} />
))}
)}
);
};
/* ─── Collection ───────────────────────────────────────────── */
const Collection = ({ data, filter, setFilter, onOpen, onQuickAdd, wishlist, toggleWish }) => {
const ref = useReveal();
const filters = [
{ id: "all", label: "All Pieces" },
...data.categories.map(c => ({ id: c.key, label: c.name })),
];
const cards = data.gridCards.filter(c => {
if (filter === "all") return true;
const p = data.findProduct(c.productId);
return p.categoryKey === filter;
});
return (
);
};
/* ─── Lookbook ─────────────────────────────────────────────── */
const Lookbook = () => {
const ref = useReveal();
const pieceCount = window.IL_MANO_DATA.products.length;
const mediaRef = React.useRef(null);
React.useEffect(() => {
const el = mediaRef.current?.querySelector("img");
if (!el) return;
const onScroll = () => {
const rect = mediaRef.current.getBoundingClientRect();
const progress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
const clamped = Math.max(0, Math.min(1, progress));
const offset = (clamped - 0.5) * 80;
el.style.transform = `translate3d(0, ${offset}px, 0) scale(1.12)`;
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
};
/* ─── Story / Manifesto ────────────────────────────────────── */
const Story = ({ pillars }) => {
const containerRef = React.useRef(null);
// Word-by-word reveal as user scrolls into the statement
React.useEffect(() => {
const wordEls = containerRef.current?.querySelectorAll(".word");
if (!wordEls) return;
const onScroll = () => {
const rect = containerRef.current.getBoundingClientRect();
const progress = (window.innerHeight * 0.85 - rect.top) / (window.innerHeight * 0.6);
const total = wordEls.length;
const lit = Math.max(0, Math.min(total, Math.round(progress * total)));
wordEls.forEach((el, i) => {
el.classList.toggle("is-lit", i < lit);
});
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
const statement = "We carve garments like leather — tested by use, refined by wear, and made to outlast the trend cycle.";
const words = statement.split(" ");
return (
— Manifesto · Connect · Create · Inspire
{words.map((w, i) => (
{w}{" "}
))}
);
};
/* ─── Newsletter ───────────────────────────────────────────── */
const useNewsletter = (source) => {
const [email, setEmail] = React.useState("");
const [status, setStatus] = React.useState("idle"); // idle | sending | done | error
const [error, setError] = React.useState("");
const submit = async (e) => {
e.preventDefault();
if (!email || status === "sending") return;
setStatus("sending");
try {
const r = await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, source }),
});
const j = await r.json().catch(() => ({}));
if (!r.ok) throw new Error(j.error || "Something went wrong.");
try { localStorage.setItem(NEWS_KEY, "joined"); } catch (e) {}
setStatus("done");
} catch (err) {
setError(err.message || "Something went wrong.");
setStatus("error");
}
};
return { email, setEmail, status, error, submit };
};
/* Low-key slide-in: appears ~20s after landing, once, bottom-right. Waits for the
cookie notice to be dismissed so the two never stack. Dismissal is remembered
for 30 days; a signup is remembered permanently. */
const NEWS_KEY = "ilmano-newsletter";
const NEWS_DELAY_MS = 20000;
const NEWS_SNOOZE_MS = 30 * 24 * 60 * 60 * 1000;
const NewsletterSlideIn = () => {
const [open, setOpen] = React.useState(false);
const news = useNewsletter("slide-in");
React.useEffect(() => {
try {
const v = localStorage.getItem(NEWS_KEY);
if (v === "joined") return;
if (v && Date.now() - Number(v) < NEWS_SNOOZE_MS) return;
} catch (e) {}
let timer;
const arm = () => { timer = setTimeout(() => {
// hold off while the cookie notice is still on screen
if (document.querySelector(".cookie-notice")) arm(); else setOpen(true);
}, NEWS_DELAY_MS); };
arm();
return () => clearTimeout(timer);
}, []);
const close = () => {
if (news.status !== "done") { try { localStorage.setItem(NEWS_KEY, String(Date.now())); } catch (e) {} }
setOpen(false);
};
React.useEffect(() => {
if (news.status !== "done") return;
const t = setTimeout(() => setOpen(false), 2600);
return () => clearTimeout(t);
}, [news.status]);
if (!open) return null;
return (
);
};
/* ─── Footer ───────────────────────────────────────────────── */
// Text and links come from the CMS (content/footer.json → Decap "Footer").
// Social "kind" must be one of the keys below; a url of "#" or empty hides nothing — set the real link in the CMS.
const SOCIAL_ICONS = {
instagram: <>
,
tiktok:
,
email: <>
,
x: <>
,
youtube: <>
,
};
const Footer = () => {
const news = useNewsletter("footer");
const F = (window.IL_MANO_CONTENT || {}).footer || {};
return (
);
};
Object.assign(window, {
Nav, CookieNotice, NewsletterSlideIn, Hero, Categories,
ProductCard, Collection, Lookbook, Story, Footer,
});