/* global React, ReactDOM,
useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakText,
TopRibbon, Nav, Hero, StatBand, Marquee, ParaQuemE, Metodo, SobreCarla,
Plataforma, Cronograma, Depoimentos, Planos, FinalCTA, FAQ, SuporteCallout, Footer */
const { useEffect: useEffectApp } = React;
function App() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
// Apply tweak values to attrs so CSS can react.
useEffectApp(() => {
const root = document.documentElement;
root.setAttribute("data-mode", t.mode);
root.setAttribute("data-radius", t.radius);
root.setAttribute("data-anim", t.anim);
root.style.setProperty("--accent", t.accent);
// Derive a darker hover from accent
root.style.setProperty(
"--accent-600",
`color-mix(in oklab, ${t.accent} 80%, #000 20%)`,
);
}, [t.mode, t.radius, t.anim, t.accent]);
return (
<>
setTweak("mode", v)}
options={[
{ label: "Creme", value: "cream" },
{ label: "Navy", value: "navy" },
]}
/>
setTweak("accent", v)}
options={["#E63C2F", "#0E1230", "#7C3AED", "#16855B", "#D97757"]}
/>
setTweak("radius", v)}
options={[
{ label: "Retos", value: "sharp" },
{ label: "Médio", value: "medium" },
{ label: "Redondos", value: "round" },
]}
/>
setTweak("anim", v)}
options={[
{ label: "Sutil", value: "subtle" },
{ label: "Médio", value: "medium" },
{ label: "Intenso", value: "intense" },
]}
/>
setTweak("heroEyebrow", v)}
/>
setTweak("heroLine1", v)}
/>
setTweak("heroItalic", v)}
/>
setTweak("heroLine2", v)}
/>
setTweak("heroLede", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();