// GreenLeaze landing — expressive tweaks // Three controls that re-shape the entire visual identity: // 1. Palette — re-skins surfaces & accents (Forêt / Sable / Sauge) // 2. Typographie — swaps display font personality (Éditorial / Sérif / Tech) // 3. Atmosphère — density, radius & rhythm (Compact / Équilibré / Aéré) const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "foret", "type": "editorial", "air": "balanced" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply tweaks as data-* attributes on so the CSS in tweaks-overrides.css picks them up React.useEffect(() => { document.body.setAttribute('data-palette', t.palette); document.body.setAttribute('data-type', t.type); document.body.setAttribute('data-air', t.air); }, [t.palette, t.type, t.air]); // Render swatches as inline SVG previews instead of plain hex so the palette // option reads as a full "mood" not a single color const paletteOptions = [ ['#0D5537', '#E7F2F1', '#F2B814'], // Forêt — original ['#0D5537', '#F6EFE3', '#C1914C'], // Sable — warm cream + tan ['#0D5537', '#DBE6D9', '#98C293'], // Sauge — soft sage ]; const paletteLabels = ['Forêt', 'Sable', 'Sauge']; const paletteKey = { 0: 'foret', 1: 'sable', 2: 'sauge' }; const paletteIdx = ['foret', 'sable', 'sauge'].indexOf(t.palette); return (

{paletteOptions.map((cols, i) => ( ))}

setTweak('type', v)} />

Vos produits, en circulaire.

setTweak('air', v)} />

{t.air === 'compact' && 'Dense · startup tech, plus d\'info à l\'écran'} {t.air === 'balanced' && 'Équilibré · le rythme par défaut'} {t.air === 'aere' && 'Aéré · éditorial, généreux, premium'}

); } const root = ReactDOM.createRoot(document.getElementById('tweaks-root')); root.render();