\")",
pointerEvents: "none",
}}
/>
);
if (kind === "mesh")
return (
);
return null;
}
// ---------- Logo mark ----------
function LogoMark({ accent, size = 28 }) {
return (
);
}
// ---------- Nav ----------
function Nav({ brand, accent, fg, bg, onCta, ctaLabel }) {
return (
);
}
// ---------- HERO: Centered ----------
function HeroCentered({ tw, accent, fg, bg, onCta }) {
const ref = useRef(null);
const mouse = useMouse(ref);
return (
{/* Spotlight */}
{tw.eyebrow}
{tw.headline.split("◆").map((part, i) =>
i === 0 ? (
{part}
) : (
{part.split(" ")[0]}
{part.slice(part.split(" ")[0].length)}
)
)}
{tw.subhead}
SOC 2 ready
•
EU + US data residency
•
Built on your stack
);
}
// ---------- HERO: Split ----------
function HeroSplit({ tw, accent, fg, bg, onCta }) {
const ref = useRef(null);
const mouse = useMouse(ref);
return (
{tw.eyebrow}
{tw.headline.split("◆").map((part, i) =>
i === 0 ? (
{part}
) : (
{part.split(" ")[0]}
{part.slice(part.split(" ")[0].length)}
)
)}
{tw.subhead}
{tw.cta}
{/* Right: animated console */}
);
}
// ---------- Animated console ----------
function ConsoleAnim({ accent, fg }) {
const lines = [
{ t: "→ trigger", v: "new lead from website", c: accent },
{ t: " agent", v: "enrich · score · route", c: fg + "90" },
{ t: " decision", v: "high intent → SDR queue", c: fg + "90" },
{ t: " draft", v: "personalized reply (3 variants)", c: fg + "90" },
{ t: "✓ done", v: "42s · $0.02 · approved", c: accent },
];
const [shown, setShown] = useState(0);
useEffect(() => {
const id = setInterval(() => setShown((s) => (s + 1) % (lines.length + 3)), 700);
return () => clearInterval(id);
}, []);
return (
workflow.run
{lines.map((l, i) => (
{String(i + 1).padStart(2, "0")}
{l.t}
{l.v}
))}
running · {Math.min(shown, lines.length)}/{lines.length} steps
);
}
// ---------- HERO: Stacked (numbered, like reference) ----------
function HeroStacked({ tw, accent, fg, bg, onCta }) {
return (
{tw.eyebrow}
{tw.headline.split("◆").map((part, i) =>
i === 0 ? (
{part}
) : (
{part.split(" ")[0]}
{part.slice(part.split(" ")[0].length)}
)
)}
);
}
function Marquee({ accent, fg }) {
const items = ["Customer Support", "Lead Enrichment", "RAG Search", "Ops Automation", "Sales Outreach", "Data Pipelines", "Doc Processing"];
return (
{[...items, ...items].map((it, i) => (
{it}
))}
);
}
// ---------- What we do (numbered slabs) ----------
function WhatWeDo({ tw, accent, fg, bg }) {
const items = tw.bullets;
return (
What we do
{tw.whatHeadline}
{tw.whatSub}
{items.map((it, i) => (
))}
);
}
function Slab({ idx, item, accent, fg, bg }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: "relative",
display: "grid",
gridTemplateColumns: "120px 1fr 1fr auto",
gap: 32,
alignItems: "center",
padding: "36px 0",
borderTop: `1px solid ${fg}15`,
cursor: "default",
transition: "all 0.3s",
}}
>
{String(idx + 1).padStart(2, "0")}
{item.title}
{item.body}
{/* Accent bar */}
);
}
// ---------- Contact form ----------
function Contact({ tw, accent, fg, bg }) {
const [form, setForm] = useState({ name: "", email: "", company: "", role: "", size: "", budget: "", goal: "" });
const [sent, setSent] = useState(false);
const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
const submit = (e) => {
e.preventDefault();
setSent(true);
};
const fieldStyle = {
width: "100%",
background: "transparent",
border: "none",
borderBottom: `1px solid ${fg}25`,
padding: "16px 0",
fontSize: 16,
color: fg,
fontFamily: "inherit",
outline: "none",
transition: "border-color 0.2s",
};
const labelStyle = { fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: fg + "70", marginBottom: 4, display: "block" };
return (
);
}
function Dot({ accent }) {
return
;
}
// ---------- Footer ----------
function Footer({ brand, accent, fg }) {
return (
);
}
// ---------- Tweaks UI ----------
function TweaksUI({ tw, set }) {
return (
set("brand", v)} />
set("eyebrow", v)} />
set("headline", v)} />
set("subhead", v)} />
set("cta", v)} />
set("layout", v)} options={[
{ value: "centered", label: "Centered" },
{ value: "split", label: "Split" },
{ value: "stacked", label: "Stacked" },
]} />
set("mode", v)} options={[
{ value: "dark", label: "Dark" },
{ value: "light", label: "Light" },
]} />
set("accent", v)} />
set("fonts", v)}
options={Object.entries(FONT_PAIRS).map(([k, v]) => ({ value: k, label: v.label }))} />
set("texture", v)}
options={TEXTURES.map((t) => ({ value: t, label: t }))} />
set("whatHeadline", v)} />
set("whatSub", v)} />
{tw.bullets.map((b, i) => (
{
const next = [...tw.bullets]; next[i] = { ...next[i], title: v }; set("bullets", next);
}} />
{
const next = [...tw.bullets]; next[i] = { ...next[i], body: v }; set("bullets", next);
}} />
))}
set("contactHeadline", v)} />
set("contactSub", v)} />
);
}
// ---------- App ----------
function App() {
const [tw, setTweak] = useTweaks(DEFAULTS);
const set = (k, v) => setTweak({ [k]: v });
const pair = FONT_PAIRS[tw.fonts] || FONT_PAIRS["grotesk-inter"];
const dark = tw.mode === "dark";
const fg = dark ? "#f5f5f4" : "#0a0a0a";
const bg = dark ? "#0a0a0a" : "#fafaf9";
// Apply CSS vars
useEffect(() => {
const r = document.documentElement;
r.style.setProperty("--font-display", pair.display);
r.style.setProperty("--font-body", pair.body);
r.style.setProperty("--display-weight", pair.displayWeight);
r.style.setProperty("--tracking", pair.tracking);
r.style.setProperty("--accent", tw.accent);
r.style.setProperty("--fg", fg);
r.style.setProperty("--bg", bg);
document.body.style.background = bg;
document.body.style.color = fg;
document.body.style.fontFamily = pair.body;
}, [tw.fonts, tw.accent, tw.mode]);
const onCta = useCallback(() => {
document.getElementById("contact")?.scrollIntoView?.({ behavior: "smooth" });
}, []);
const Hero = tw.layout === "split" ? HeroSplit : tw.layout === "stacked" ? HeroStacked : HeroCentered;
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
);