// App entry — composes everything and wires Tweaks panel. const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{ "accent": "none", "accentCustom": "#4F6651", "useCustomAccent": false, "heroVariant": "split", "ctaLabel": "Book a demo", "secondaryCtaLabel": "Hear a sample call", "brandName": "Samika", "showMarquee": true, "marqueeSpeed": 38, "showTrust": true, "showHowItWorks": true, "showSpecialty": true, "showRoi": true, "showDemo": true, "showComparison": true, "showMetrics": true, "showIntegrations": true, "showTestimonial": true, "showFaq": true, "showLeadForm": true, "headingFont": "sans", "displayScale": 100, "bodyScale": 100, "bgTone": "warm-cream", "navStyle": "floating-pill", "containerWidth": 1320, "sectionPadding": 120, "buttonShape": "pill", "showApprovalDot": true, "approvalDotColor": "#7CC7A1" }/*EDITMODE-END*/; function MarqueeStrip({ speed }) { const items = [ "100% inbound calls answered", "24/7 — no menus, no hold", "Doctor-approved bookings", "HIPAA · BAA · audit trail", "Writes to your PMS", "Live in 7–14 days", ]; return (
{[...items, ...items].map((t, i) => {t})}
); } const BG_TONES = { "warm-cream": "linear-gradient(180deg, #F7F1E4 0%, #F0E7D2 38%, #E6D9BC 100%)", "cool-paper": "linear-gradient(180deg, #F2F4F1 0%, #E7ECE5 38%, #D9E1D6 100%)", "neutral-fog": "linear-gradient(180deg, #F4F2EE 0%, #EBE7E0 38%, #DDD6CB 100%)", "ink": "linear-gradient(180deg, #161412 0%, #1F1D1A 100%)", "flat-paper": "#FAF6EC", }; function App() { const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULS); // Apply tokens via CSS custom properties on React.useEffect(() => { const root = document.documentElement; root.setAttribute("data-accent", tweaks.accent); // Custom accent override const accentMap = { none: "#1F1D1A", green: "#4F6651", teal: "#3B6364", terracotta: "#B5754D" }; const activeAccent = tweaks.useCustomAccent ? tweaks.accentCustom : accentMap[tweaks.accent]; root.style.setProperty("--accent-active", activeAccent); // Background tone document.body.style.background = BG_TONES[tweaks.bgTone] || BG_TONES["warm-cream"]; document.body.style.backgroundAttachment = "fixed"; document.body.style.color = tweaks.bgTone === "ink" ? "#F7F1E4" : ""; // Type scale root.style.setProperty("--display-scale", tweaks.displayScale / 100); root.style.setProperty("--body-scale", tweaks.bodyScale / 100); // Heading font const headingMap = { sans: 'var(--font-sans)', serif: 'var(--font-display)', mono: 'var(--font-mono)', }; root.style.setProperty("--font-heading", headingMap[tweaks.headingFont]); // Container + padding root.style.setProperty("--container", tweaks.containerWidth + "px"); root.style.setProperty("--section-pad", tweaks.sectionPadding + "px"); // Button shape const radiusMap = { pill: "999px", rounded: "10px", square: "2px" }; root.style.setProperty("--btn-radius", radiusMap[tweaks.buttonShape]); // Approval dot root.style.setProperty("--dot-color", tweaks.showApprovalDot ? tweaks.approvalDotColor : "transparent"); }, [tweaks]); return (
{tweaks.showMarquee && }
); } ReactDOM.createRoot(document.getElementById("root")).render();