/* global React */ // landing-body.jsx — Pillars, Mockups, Day-with-Valence, FAQ, Waitlist, Footer const { useEffect: useEffectB, useRef: useRefB, useState: useStateB, useMemo: useMemoB } = React; // ─── Intersection-based reveal hook ────────────────────────────────────── function useReveal() { const ref = useRefB(null); useEffectB(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("in"); } }); }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } // ─── Tilt-on-hover wrapper ─────────────────────────────────────────────── function Tilt({ children, max = 8 }) { const ref = useRefB(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; const y = (e.clientY - r.top) / r.height; const rx = (0.5 - y) * max; const ry = (x - 0.5) * max; el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`; }; const onLeave = () => { if (ref.current) ref.current.style.transform = ""; }; return (
{children}
); } // ─── Value pillars: Contacts · Calendar · Pipeline ─────────────────────── function Pillars() { const ref = useReveal(); const items = [ { key: "contacts", label: "Contacts", title: "Every name. Every signal.", body: "One place for who you know — with the context that makes the next conversation matter.", bullets: ["Auto-enriched from the web", "Last-touch + warmth indicators", "Tied to firms and opportunities"], icon: ( ), widget: (
RP
Riley Park
VP Leasing · Eaton Capital
Warm
Last touched
14 days ago
Open deals
3 · $4.2M
Suggested next step
Call back about the verbal yes on the Eaton Capital lease — going on five days quiet.
), }, { key: "calendar", label: "Calendar", title: "The week, decoded.", body: "Your meetings already exist. Valence connects them to the people, deals, and follow-ups that matter.", bullets: ["Bound to leads and accounts", "Prep notes, automatic", "Today, tomorrow, no-show alerts"], icon: ( ), widget: (
Today
Tuesday, May 12
11:42
09:15
Prep — Eaton Capital
30 min quiet block · done
11:30
Lunch · Eaton Capital
The Avenue · with R. Chen
Lease — verbal yes
14:00
Riley Park site visit
Prep auto-attached · 3 docs
), }, { key: "pipeline", label: "Pipeline", title: "Deals you don't drop.", body: "Stages, amounts, the names you've been meaning to call back. Quietly tracked. Quietly nudged.", bullets: ["Drag through stages", "Forecast vs. last quarter", "The 'who hasn't heard from you' list"], icon: ( ), widget: (
Forecast · this quarter
$4.2M
+12% wk
62% to goal $6.8M target
Verbal 2
Eaton Capital
$1.4M
M. Tanaka
$310K
Proposal 1
Riley Park
$680K
), }, ]; return (

How it works

Three things you carry in your head.
One place to put them.

Valence is built around the three nouns of independent sales: the contact, the calendar, the deal. Everything else gets out of the way.

{items.map((it, i) => (
{it.icon}

0{i + 1} · {it.label}

{it.title}

{it.body}

    {it.bullets.map((b, bi) => (
  • {b}
    • ))}
{it.widget}
))}
); } // ─── Product mockups in iPhone frames ──────────────────────────────────── function Mockups() { const ref = useReveal(); const phones = [ { src: "screens/dashboard.html", label: "Dashboard", caption: "The morning landing page.", note: "Greeting, today's calendar, what needs a call." }, { src: "screens/Calendar.html", label: "Calendar", caption: "Bound to the deal.", note: "Meetings tagged to leads, prepped automatically." }, { src: "screens/Contact.html", label: "Contact", caption: "Everything you know.", note: "History, firm, opportunities — one calm screen." }, ]; return (

The product

Built like a Moleskine.
Runs like a CRM.

Native iOS first. The interface is deliberately quiet — but every screen is bound to the next.

{phones.map((p, i) => (