/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */ const { useState, useEffect, useRef } = React; /* ────────────────────────────────────────────────────────── ANIMATION HELPERS — scroll-triggered reveals + counters ────────────────────────────────────────────────────────── */ function useInView({ threshold = 0.2, rootMargin = "0px" } = {}) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setInView(true); obs.disconnect(); } }, { threshold, rootMargin } ); obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, inView]; } function CountUp({ end, suffix = "", duration = 1400, trigger = true }) { const [val, setVal] = useState(0); useEffect(() => { if (!trigger) return; let raf; let start; const animate = (ts) => { if (!start) start = ts; const progress = Math.min((ts - start) / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); setVal(Math.floor(eased * end)); if (progress < 1) raf = requestAnimationFrame(animate); }; raf = requestAnimationFrame(animate); return () => { if (raf) cancelAnimationFrame(raf); }; }, [trigger, end, duration]); return React.createElement(React.Fragment, null, val, suffix); } function fadeUp(visible, delay = 0, distance = 24) { return { opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : `translateY(${distance}px)`, transition: `opacity .9s ease ${delay}ms, transform 1s cubic-bezier(.2,.7,.2,1) ${delay}ms`, willChange: "opacity, transform", }; } /* ────────────────────────────────────────────────────────── LOGO MARK — F construida con 6 bloques modulares ────────────────────────────────────────────────────────── */ function LogoMark({ size = 24, accent = "var(--grafito)", fg = "var(--carbono)" }) { const w = size * (64 / 88); return ( ); } function Wordmark({ light = false }) { const fg = light ? "var(--hueso)" : "var(--carbono)"; const accent = light ? "rgba(248,247,244,.35)" : "var(--grafito)"; return (
futuremind Modular Architecture
); } /* ────────────────────────────────────────────────────────── NAV ────────────────────────────────────────────────────────── */ function Nav({ scrolled }) { const links = [ ["El modelo", "modelo"], ["Incluye", "incluye"], ["Sistema SIP", "sip"], ["Ampliaciones", "ampliaciones"], ["Precio", "precio"], ]; const textColor = "var(--carbono)"; const textHover = "var(--carbono)"; return ( ); } /* ────────────────────────────────────────────────────────── HERO ────────────────────────────────────────────────────────── */ function Hero() { const [loaded, setLoaded] = useState(false); const [pillsRef, pillsInView] = useInView({ threshold: 0.25 }); useEffect(() => { const id = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(id); }, []); return (
{/* HOUSE IMAGE — 16:9 hero photo with sky on top + house on bottom */} Futuremind 22 — la casa en su entorno {/* dark overlay — strong black at top fading mid-section so the house stays clean */}
{/* soft atmospheric glow — subtle warm halo behind the headline */}
{/* subtle grid — light lines over the dark gradient at top */}
{/* HEADLINE BLOCK — compact, lives in the sky portion so the house stays clean below */}
FUTUREMIND 22 · Lanzamiento 2026

Tu casa, en 45 días.

Vivienda modular de 22 m², construida en seco y entregada llave en mano. Contrato formal, plazos firmados y terminaciones acordadas — en Córdoba, Argentina.

{/* Quick-info card — solid hueso, subtle, compact */}
{[ ["El modelo", "Futuremind 22", "1 dorm · 22 m²"], ["Entrega", "45 días", "Llave en mano"], ["Desde", "USD 17.000", "Precio lanzamiento"], ].map(([label, val, sub], i) => (
{label}
{val}
{sub}
))} e.currentTarget.style.background="var(--grafito)"} onMouseLeave={(e)=>e.currentTarget.style.background="var(--carbono)"}> Consultá
{/* STATS — 4 translucent pills touching the hero image, with count-up + stagger fade */}
{[ [22, "", "m²", "cubiertos"], [45, "", "días", "llave en mano"], [17, "K", "USD", "desde · lanzamiento"], [3, "", "ambientes", "dorm + baño + living"], ].map(([num, numSuffix, unit, label], i) => (
{unit}
{label}
))}
); } /* ────────────────────────────────────────────────────────── SECTION HEADER ────────────────────────────────────────────────────────── */ function SectionMarker({ num, label, light = false }) { const fg = light ? "rgba(248,247,244,.45)" : "var(--piedra)"; const line = light ? "rgba(248,247,244,.12)" : "var(--humo)"; return (
{num} · {label}
); } function SectionTitle({ children, light = false, max = 880 }) { return (

{children}

); } /* ────────────────────────────────────────────────────────── CAROUSEL — used in Modelo for fotos + planos ────────────────────────────────────────────────────────── */ function Carousel({ items, idx, setIdx, aspect = "16/10", fit = "contain", bg = "var(--carbono)", label, renderCaption }) { const n = items.length; const prev = () => setIdx((idx - 1 + n) % n); const next = () => setIdx((idx + 1) % n); const cur = items[idx]; return (
{cur.label} {/* top-left label */}
{label}
{/* bottom caption */}
{renderCaption ? renderCaption(cur, idx) : {cur.label}}
{/* counter */}
{String(idx + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}
{/* prev/next */}
{/* dot indicators */}
{items.map((_, i) => ( ))}
); } /* ────────────────────────────────────────────────────────── EL MODELO ────────────────────────────────────────────────────────── */ function Modelo() { const rooms = [ { id: "cocina", label: "Cocina · Living", w: "3.36", h: "2.60" }, { id: "dorm", label: "Dormitorio", w: "3.36", h: "2.06" }, { id: "bano", label: "Baño completo", w: "2.52", h: "1.10" }, ]; const planos = [ { src: "assets/3d_corte.png", label: "Corte frontal", desc: "Dormitorio, baño y living integrado." }, { src: "assets/3d_axo.png", label: "Isométrica", desc: "Volumetría completa del módulo." }, ]; const fotos = [ { src: "assets/22m1.jpg", label: "Vista frontal", n: "01" }, { src: "assets/22m2.jpg", label: "Vista angular", n: "02" }, ]; const [fotoIdx, setFotoIdx] = useState(0); const [planoIdx, setPlanoIdx] = useState(0); const [headerRef, headerInView] = useInView({ threshold: 0.2 }); const [fotosRef, fotosInView] = useInView({ threshold: 0.15 }); const [quoteRef, quoteInView] = useInView({ threshold: 0.4 }); const [planosRef, planosInView] = useInView({ threshold: 0.15 }); const [roomsRef, roomsInView] = useInView({ threshold: 0.25 }); return (
{/* soft atmospheric glow at top */}
Imaginalo una vez,
vivílo para siempre.

Un dormitorio, un baño completo, cocina y living integrados. Sin metros cuadrados perdidos. Lista para habitar el día que te entregamos las llaves — con contrato formal, plazos firmados y terminaciones acordadas.

{/* Carrusel — fotos exteriores */}
( <>N°{it.n}{it.label} )} />
{/* Motivational pull-quote — rounded translucent dark */}
La idea
Lo que pagás de alquiler en tres años,
acá lo convertís en una casa propia — en 45 días.
{/* Carrusel — planos 3D + técnico */}
( <>0{i + 1}{it.label} )} />
{/* Ambientes — 3 glass pills */}
Ambientes
Tres ambientes,
cero metros perdidos.
{rooms.map((r, i) => (
0{i + 1} · Ambiente {r.label} {r.w} × {r.h} m
))}
); } /* ────────────────────────────────────────────────────────── QUÉ INCLUYE ────────────────────────────────────────────────────────── */ function Incluye() { const grupos = [ { n: "01", title: "Estructura", tag: "Lo que sostiene la casa", items: [ "Estructura de acero — columnas y perfiles", "Paneles SIP (aislación superior al ladrillo)", "Platea de hormigón", "Techo de chapa con aislación", "Aberturas de PVC con vidrio", ], }, { n: "02", title: "Instalaciones", tag: "Lo que la hace funcionar", items: [ "Instalación eléctrica completa", "Instalación de agua completa", "Termotanque eléctrico 50 L", "1 panel solar", "Grifería completa baño y cocina", ], }, { n: "03", title: "Equipamiento", tag: "Lo que ya viene puesto", items: [ "Anafe eléctrico 2 hornallas", "Bajo mesada", "Contrato formal de obra", "Calidades + terminaciones por escrito", "Plazo de entrega comprometido: 45 días", ], }, ]; const [headerRef, headerInView] = useInView({ threshold: 0.2 }); const [cardsRef, cardsInView] = useInView({ threshold: 0.15 }); const [bannerRef, bannerInView] = useInView({ threshold: 0.4 }); return (
{/* warm atmospheric glow at top — gives life to the dark canvas */}
Llave en mano,
de verdad.

Todo lo que necesitás para entrar a vivir el día 45. Sin costos sorpresa, sin ítems "aparte". Lo único que no incluye es el transporte de materiales al terreno.

{/* Three glass-on-dark cards with stagger fade-in */}
{grupos.map((g, gi) => (
{/* header */}
Bloque {g.n}
{g.title}
{g.tag}
{/* items */}
    {g.items.map((it, i) => (
  • {it}
    • ))}
))}
{/* exclusion banner — INVERTED to light for editorial contrast */}
No incluye Transporte de materiales al terreno.
Lo cotizamos según ubicación →
); } /* ────────────────────────────────────────────────────────── SIP SYSTEM ────────────────────────────────────────────────────────── */ function SIP() { const [headerRef, headerInView] = useInView({ threshold: 0.2 }); const [b1Ref, b1InView] = useInView({ threshold: 0.18 }); const [b2Ref, b2InView] = useInView({ threshold: 0.18 }); const [b3Ref, b3InView] = useInView({ threshold: 0.15 }); const steelFeatures = [ "Acero macizo", "Estructura sólida y robusta", "No se pudre ni se polilla", "Antisísmica", "Larga vida útil", ]; const sipFeatures = [ "Aísla y estructura a la vez", "Sin puentes térmicos", "Aislación térmica y acústica", "Liviano y resistente", ]; const timeline = [ ["01–05", "Platea de hormigón"], ["06–18", "Estructura de acero + paneles SIP"], ["19–35", "Instalaciones + techo"], ["36–45", "Terminaciones + entrega"], ]; const beneficios = [ { tag: "Tiempo", big: "45", bigSub: "días", title: "Lista para vivir antes de que una obra tradicional tenga paredes.", foot: "Una casa con ladrillo tarda entre 18 y 36 meses", accent: "#5BD46F", }, { tag: "Confort", big: "5×", bigSub: "más aislante", title: "Como un termo: fresca en verano, cálida en invierno — solita.", foot: "Núcleo de espuma rígida de poliestireno de alta densidad", accent: "#E8B14F", }, { tag: "Orden", big: "Cero", bigSub: "barro", title: "Sin mezcla, sin escombros, sin sorpresas en el terreno.", foot: "Construcción en seco — tu terreno queda limpio", accent: "#7DB8E8", }, ]; return (
{/* soft glow */}
{/* Section header */}
Otro modo de construir,
otro modo de vivir.

Estructura de acero macizo y panel SIP. No es albañilería tradicional — es un sistema más rápido, más resistente y mucho mejor aislado que cualquier obra hecha con ladrillo.

{/* BLOCK 1 — ACERO MACIZO */}
{/* image */}
Estructura de acero macizo
{/* card */}
01 · Estructura
Acero macizo, no chapa.

La estructura de la casa es de acero macizo: perfiles sólidos y robustos, no chapa plegada ni perfilería liviana de steel frame. Es una estructura firme, calculada para durar — no se pudre, no se polilla y no se mueve con la humedad. Acero de verdad, que sostiene tu casa toda la vida.

{steelFeatures.map((f, i) => ( {f} ))}
{/* BLOCK 2 — CONSTRUCCIÓN RÁPIDA */}
{/* card with timeline */}
02 · Velocidad
45 días, no años.

Una obra tradicional con ladrillo tarda entre 18 y 36 meses. El sistema modular se entrega completo en 45 días: sin tiempos muertos, sin escasez de mano de obra, sin parates por lluvia.

{/* timeline */}
{timeline.map(([dias, label], i) => (
Día {dias} {label}
))}
{/* image (portrait) */}
Construcción rápida — montaje de paneles
{/* BLOCK 3 — PANEL SIP + COMPARISON */}
{/* image */}
Panel SIP — núcleo de espuma rígida de poliestireno entre placas de OSB
{/* card */}
03 · Aislación
Una pieza que hace todo.

El panel SIP es un sándwich de dos placas de OSB con un núcleo de espuma rígida de poliestireno de alta densidad. Una sola pieza que aísla, cierra y estructura a la vez — mantiene la casa fresca en verano y cálida en invierno, con muchísimo menos consumo eléctrico.

{sipFeatures.map((f, i) => ( {f} ))}
{/* What it means for you — 3 friendly benefit cards */}
Para vos, en simple.
Tres motivos prácticos
{beneficios.map((b, i) => (
{/* tag pill */} {b.tag} {/* big stat */}
{b.big} {b.bigSub}
{/* benefit headline */}

{b.title}

{/* comparison footer — supporting data */}
{b.foot}
))}
); } /* ────────────────────────────────────────────────────────── AMPLIACIONES ────────────────────────────────────────────────────────── */ function Ampliaciones() { const exts = [ { id: "dorm", label: "Dormitorio extra", dims: "3.36 × 2.14 m", m2: "7.19" }, { id: "quincho", label: "Quincho", dims: "4.52 × 2.16 m", m2: "9.76" }, { id: "deck", label: "Deck", dims: "3.36 × 2.20 m", m2: "7.39" }, { id: "cochera", label: "Cochera", dims: "2.08 × 2.70 m", m2: "5.62" }, ]; const fotos = [ { src: "assets/ampliacion1.jpg", label: "Ampliación con quincho", n: "01" }, { src: "assets/ampliacion2.jpg", label: "Ampliación con deck", n: "02" }, ]; const planos = [ { src: "assets/plano_22m.png", detail: "assets/plano_2d_22m.png", label: "Plano base", sub: "Futuremind 22 m²" }, { src: "assets/plano_amp_1.png", detail: "assets/plano_2d_dormitorio.png", label: "Con ampliación", sub: "Módulo + dormitorio" }, { src: "assets/plano_amp_quincho.png", detail: "assets/plano_2d_quincho.png", label: "Con quincho", sub: "Módulo + quincho + deck" }, ]; const [fotoIdx, setFotoIdx] = useState(0); const [openPlano, setOpenPlano] = useState(null); const [headerRef, headerInView] = useInView({ threshold: 0.2 }); const [fotosRef, fotosInView] = useInView({ threshold: 0.15 }); const [quoteRef, quoteInView] = useInView({ threshold: 0.4 }); const [extsRef, extsInView] = useInView({ threshold: 0.2 }); const [planosRef, planosInView] = useInView({ threshold: 0.15 }); // ESC key + body scroll lock for the lightbox useEffect(() => { if (!openPlano) return; const onKey = (e) => { if (e.key === "Escape") setOpenPlano(null); }; window.addEventListener("keydown", onKey); const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; }; }, [openPlano]); return (
{/* soft atmospheric glow at top */}
De 22 m²,
a más de 40.

La casa está diseñada para crecer con vos. Empezás con el módulo de 22 m² y agregás extensiones cuando lo necesites — mismo sistema, mismas terminaciones, mismo equipo.

{/* Carrusel — fotos de ampliaciones */}
( <>N°{it.n}{it.label} )} />
{/* Motivational pull-quote — rounded translucent dark */}
La idea
No necesitás tenerlo todo hoy.
Empezás con 22 m² y la casa crece cuando vos crecés.
{/* Ampliaciones disponibles — 4 glass pills */}
Disponibles
Cuatro extensiones,
mismo sistema.
{exts.map((e, i) => (
0{i + 1} · Ampliación {e.label}
+{e.m2} m²
{e.dims}
))}
{/* Planos — 3 vertical translucent plan cards */}
Los planos, en limpio.
Base · Ampliación · Quincho
{planos.map((p, i) => (
setOpenPlano(p)} style={{ background: "rgba(255,255,255,.5)", backdropFilter: "blur(20px) saturate(140%)", WebkitBackdropFilter: "blur(20px) saturate(140%)", border: "0.5px solid rgba(10,10,10,.06)", borderRadius: 22, overflow: "hidden", boxShadow: "0 12px 32px rgba(10,10,10,.06), inset 0 0 0 0.5px rgba(255,255,255,.7)", display: "flex", flexDirection: "column", position: "relative", zIndex: 1, transition: "transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease", cursor: "zoom-in", }} onMouseEnter={(e)=>{ e.currentTarget.style.transform = "scale(1.04)"; e.currentTarget.style.zIndex = "5"; e.currentTarget.style.boxShadow = "0 22px 50px rgba(10,10,10,.14), inset 0 0 0 0.5px rgba(255,255,255,.8)"; const img = e.currentTarget.querySelector("img"); if (img) img.style.opacity = "1"; }} onMouseLeave={(e)=>{ e.currentTarget.style.transform = "scale(1)"; e.currentTarget.style.zIndex = "1"; e.currentTarget.style.boxShadow = "0 12px 32px rgba(10,10,10,.06), inset 0 0 0 0.5px rgba(255,255,255,.7)"; const img = e.currentTarget.querySelector("img"); if (img) img.style.opacity = "0.9"; }}>
{`Plano
0{i + 1}
{p.label}
{p.sub}
))}
{/* Lightbox — detailed 2D plan */} {openPlano && (
setOpenPlano(null)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(10,10,10,.86)", backdropFilter: "blur(8px) saturate(140%)", WebkitBackdropFilter: "blur(8px) saturate(140%)", display: "flex", alignItems: "center", justifyContent: "center", padding: "60px 40px", animation: "fmFadeIn .25s ease forwards", }}> {/* close button */} {/* image + caption */}
e.stopPropagation()} style={{ maxWidth: "min(880px, 92vw)", maxHeight: "92vh", display: "flex", flexDirection: "column", gap: 16, alignItems: "center", animation: "fmZoomIn .3s cubic-bezier(.2,.7,.2,1) forwards", }}> {`Plano
Plano 2D
{openPlano.label}
{openPlano.sub}
)} ); } /* ────────────────────────────────────────────────────────── PRECIO + CTA ────────────────────────────────────────────────────────── */ function Precio() { const [headerRef, headerInView] = useInView({ threshold: 0.2 }); const [mainRef, mainInView] = useInView({ threshold: 0.15 }); const [ampRef, ampInView] = useInView({ threshold: 0.35 }); const [ctaRef, ctaInView] = useInView({ threshold: 0.4 }); const etapas = [ ["Firma de contrato", "10%", "Día 0"], ["Comienzo de obra · platea", "20%", "Día 5"], ["Estructura y paneles", "30%", "Día 18"], ["Terminaciones", "20%", "Día 35"], ["Llave en mano", "20%", "Día 45"], ]; return (
{/* soft glow */}
{/* Header */}
Un precio claro.
Un contrato firmado.

Plazos de pago que acompañan el avance de obra. Sin anticipo del 100%. Cada etapa se paga cuando se ve. Contrato formal con calidades, terminaciones y plazos por escrito.

{/* Main: price card + timeline */}
{/* Big price — dark rounded card */}
Futuremind 22 · Llave en mano
USD 17.000
Precio lanzamiento · Plazas limitadas
Alquiler mensual ref.
≈ USD 470
3 años = USD 16.920
Tu casa propia
en 45 días
El mismo dinero. Otro resultado.
{/* CTA on price card — direct to WhatsApp */} e.currentTarget.style.transform="translateY(-2px)"} onMouseLeave={(e)=>e.currentTarget.style.transform="translateY(0)"}> Asegurá el precio de lanzamiento →
{/* Payment timeline — light glass rounded card */}
Avance de obra
Pagás a medida que tu casa toma forma.
{etapas.map(([stage, pct, day], i) => (
0{i + 1} {stage} {day} {pct}
))}
Nunca pagás algo que todavía no podés ver.
{/* Custom projects banner — for leads who want their own / bigger design */}
Proyectos a medida
¿Ya tenés tu propio plano?

El modelo de lanzamiento no es la única opción. Si ya tenés un plano hecho, o querés una casa más grande y completamente a tu medida, también construimos proyectos personalizados. Traés tu diseño — o lo desarrollamos juntos — y lo levantamos con el mismo sistema de acero macizo y panel SIP.

e.currentTarget.style.transform="translateY(-2px)"} onMouseLeave={(e)=>e.currentTarget.style.transform="translateY(0)"}> Enviar mi proyecto →
{/* Closing motivational CTA */}
El momento es ahora
Dejá de pagar lo que nunca va a ser tuyo.
Empezá a construir lo que sí.

Lo que hoy pagás de alquiler, en pocos años desaparece. Acá esa misma plata queda en una casa que es tuya.

); } /* ────────────────────────────────────────────────────────── CONTACTO · CTA FINAL + form ────────────────────────────────────────────────────────── */ function Contacto() { const [headerRef, headerInView] = useInView({ threshold: 0.25 }); const [cardsRef, cardsInView] = useInView({ threshold: 0.15 }); const [infoRef, infoInView] = useInView({ threshold: 0.3 }); const WA = "5493513042304"; const waLink = (msg) => `https://wa.me/${WA}?text=${encodeURIComponent(msg)}`; const intereses = [ { label: "Primera vivienda", desc: "Quiero que la Futuremind 22 sea mi primer hogar propio.", msg: "Hola! Me interesa la Futuremind 22 como mi primera vivienda. ¿Me pasan más info?", accent: "#5BD46F", }, { label: "Inversión / Airbnb", desc: "La pienso como inversión o para alquiler temporario.", msg: "Hola! Estoy pensando en una Futuremind como inversión o para alquiler temporario. ¿Me pasan más info?", accent: "#E8B14F", }, { label: "Ampliar mi casa", desc: "Quiero sumar un módulo a la casa que ya tengo.", msg: "Hola! Quiero ampliar mi casa actual con el sistema Futuremind. ¿Cómo seguimos?", accent: "#7DB8E8", }, { label: "Proyecto a medida", desc: "Tengo un plano propio o quiero algo más grande.", msg: "Hola! Tengo un proyecto propio o quiero una casa a medida más grande que el modelo de lanzamiento. ¿Cómo seguimos?", accent: "#C95B3D", }, ]; const contacto = [ { k: "WhatsApp", v: "+54 9 3513 04-2304", sub: "Lunes a sábado · 9 a 19 hs", href: waLink("Hola! Quiero más información sobre las casas Futuremind.") }, ]; const social = [ { k: "Instagram", href: "https://www.instagram.com/futuremind.ar/" }, { k: "Facebook", href: "https://www.facebook.com/Futuremind.ar" }, ]; return (
{/* Header */}

Tu próxima casa
empieza con un mensaje.

Contanos qué tenés en mente y te respondemos enseguida por WhatsApp. Tocá la opción que más se acerque a lo que buscás.

{/* Interest cards — each opens WhatsApp with a tailored message */}
{intereses.map((it, i) => ( { e.currentTarget.style.transform="translateY(-3px)"; e.currentTarget.style.borderColor="rgba(248,247,244,.28)"; }} onMouseLeave={(e)=>{ e.currentTarget.style.transform="translateY(0)"; e.currentTarget.style.borderColor="rgba(248,247,244,.12)"; }}> 0{i + 1}
{it.label}

{it.desc}

Escribir por WhatsApp →
))}
{/* Contact info + social strip */}
{contacto.map((c, i) => ( {c.k} {c.v} {c.sub} ))} {/* social */}
{social.map((s, i) => ( e.currentTarget.style.background="rgba(248,247,244,.14)"} onMouseLeave={(e)=>e.currentTarget.style.background="rgba(248,247,244,.07)"}> {s.k}↗ ))}
); } /* ────────────────────────────────────────────────────────── FOOTER ────────────────────────────────────────────────────────── */ function Footer() { return ( ); } /* ────────────────────────────────────────────────────────── FLOATING WHATSAPP ────────────────────────────────────────────────────────── */ function FloatingCTA() { return ( e.currentTarget.style.transform="translateY(-2px)"} onMouseLeave={(e)=>e.currentTarget.style.transform="translateY(0)"}> {/* custom geometric chat icon — matches the modular block identity */} {/* subtle online dot */} Escribinos Te respondemos ya ); } /* ────────────────────────────────────────────────────────── TWEAKS — micro variations ────────────────────────────────────────────────────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#2E3A47", "background": "hueso", "headlineStyle": "serif-italic", "showFloatingCTA": true }/*EDITMODE-END*/; function TweaksUI({ tweaks, setTweak }) { return ( setTweak("accent", v)} options={["#2E3A47", "#0A0A0A", "#888780", "#5C4738"]} /> setTweak("background", v)} options={[ { value: "hueso", label: "Hueso" }, { value: "humo", label: "Humo" }, ]} /> setTweak("headlineStyle", v)} options={[ { value: "serif-italic", label: "Serif italic" }, { value: "serif-roman", label: "Serif roman" }, ]} /> setTweak("showFloatingCTA", v)} /> ); } /* ────────────────────────────────────────────────────────── APP ────────────────────────────────────────────────────────── */ function App() { const [scrolled, setScrolled] = useState(false); const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); // apply tweaks live useEffect(() => { document.documentElement.style.setProperty("--grafito", tweaks.accent); if (tweaks.background === "humo") { document.documentElement.style.setProperty("--hueso", "#EDECEA"); } else { document.documentElement.style.setProperty("--hueso", "#F8F7F4"); } document.documentElement.style.setProperty("--headline-style", tweaks.headlineStyle === "serif-italic" ? "italic" : "normal"); }, [tweaks]); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();