// App root — composes everything + Tweaks wiring
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "split",
"heroHeadline": "default",
"heroShot": "browser",
"pricingLayout": "cards",
"typeset": "editorial"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply typeset to
useEffect(() => {
document.body.dataset.typeset = t.typeset || "editorial";
}, [t.typeset]);
return (
<>
setTweak("heroVariant", v)}
options={[
{ value: "split", label: "Split (texto + visual)" },
{ value: "centered", label: "Centrado, gran titular" },
{ value: "editorial", label: "Editorial (titular protagonista)" },
]}
/>
setTweak("heroHeadline", v)}
options={[
{ value: "default", label: '"Crea tu plan de marketing pro con IA…"' },
{ value: "methodology", label: '"No es un chatbot. Es metodología."' },
{ value: "method", label: '"El método, ahora con IA"' },
{ value: "learn", label: '"Aprende mientras creas tu plan"' },
]}
/>
setTweak("heroShot", v)}
options={[
{ value: "browser", label: "Browser" },
{ value: "floating", label: "Flotantes" },
{ value: "stack", label: "Stack" },
]}
/>
setTweak("typeset", v)}
options={[
{ value: "editorial", label: "Editorial (Instrument Serif + Geist)" },
{ value: "modern", label: "Modern (Geist con itálicas serif)" },
{ value: "classic", label: "Classic (Newsreader + Plus Jakarta)" },
{ value: "bold", label: "Bold (Fraunces + Geist)" },
]}
/>
setTweak("pricingLayout", v)}
options={[
{ value: "cards", label: "Cards" },
{ value: "table", label: "Tabla" },
]}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();