// home.jsx — Lumera homepage. Each numbered section corresponds to the brand brief. const { useState, useEffect, useRef } = React; const Home = ({ onNav, onOpenProduct, onAdd }) => { return (
); }; /* ───────────────────────────────────────────────────────────── 1 · HERO — split layout. Type sits on bone, photograph on the right. No protection-wash legibility gamble. ───────────────────────────────────────────────────────────── */ const HeroSection = ({ onNav, onAdd }) => (
{/* Type column */}
◆ The Atelier Collection · Geneva

Skin,
returned to light.

A small collection of considered formulations.
Made in restraint. Felt in radiance.

{/* Lower meta strip */}
The Essentials · Six products Formulated in Geneva · Sourced with conscience
{/* Image column */}
{/* small editorial overlay — sun mark + caption */}
Edition · MMXXVI
); /* ───────────────────────────────────────────────────────────── 2 · PHILOSOPHY ───────────────────────────────────────────────────────────── */ const PhilosophySection = ({ onNav }) => (
{/* Top label */}
Our principle · Section i

Luxury is what you leave out.

Lumera is a house of skincare built on a single principle: that the skin, given the right inputs and nothing more, knows how to return to its quietest, most luminous state.

Six products. No noise. Only what works.

We formulate slowly. We disclose everything. We do not chase trends, and we do not release a product until it meets a threshold of measurable performance.

What we leave out is as deliberate as what we include.

onNav("house")}>Read our full philosophy
"A balm that begins as solid and finishes as silk. Worn nightly, it returns the skin to its quietest state."
); /* ───────────────────────────────────────────────────────────── 2.5 · VIDEO TRANSITION — the cinematic golden-drop moment. Full-bleed noir frame. The video is the entire section. ───────────────────────────────────────────────────────────── */ const VideoTransition = () => { const videoRef = useRef(null); const sectionRef = useRef(null); // Always-on autoplay. IntersectionObserver pause is optional and skipped // here because the iframe sandbox swallows IO callbacks. useEffect(() => { const v = videoRef.current; if (!v) return; v.muted = true; const tryPlay = () => v.play().catch(() => {}); tryPlay(); v.addEventListener("loadedmetadata", tryPlay); v.addEventListener("canplay", tryPlay); return () => { v.removeEventListener("loadedmetadata", tryPlay); v.removeEventListener("canplay", tryPlay); }; }, []); return (
{/* Video as full-bleed backdrop */}
); }; window.Home = Home; window.HeroSection = HeroSection; window.PhilosophySection = PhilosophySection; window.VideoTransition = VideoTransition;