Binder — landing page
Landing page for Binder: founder ↔ investor matchmaking. Swipe on fit,
mutual interest only, 20-minute coffee chats booked on both calendars.
A static page plus one serverless function, deployed on Vercel. No build step
and no dependencies.
index.html the whole page — markup, styles, step → screen table, form logic
demo/ the interactive app prototype, imported from the mock export
index.html prototype as exported, plus the three files below
boot.js lets the page open it on a screen and drive it (hand-written)
embed.css frame-less layout when embedded; full-screen on phones (hand-written)
icons.js Lucide subset, generated — 10 KB instead of 600 KB
api/contact.js POST /api/contact → emails the request via Resend
assets/og-image.png 1200×630 social card, rendered from build/og.html
build/import-mock.mjs pulls a new mock export into demo/
build/smoke.mjs headless-Chrome test of every demo screen and landing step
build/check-site.mjs missing files, external scripts, step table, weight budget
build/ci.sh the pipeline: syntax, tests, site checks, smoke test
tests/ node:test suite for the contact route
vercel.json security + cache headers
Run it
make serve # static preview on http://localhost:8000 (form returns an error: no API)
make dev # full Vercel runtime incl. /api/contact — needs `npx vercel link` once
make ci # what GitHub Actions runs on every push (needs Chrome for the smoke test)
make shots # the smoke test, saving a screenshot of every screen to .shots/
make demo-export # the live demo as a folder that opens from disk: Binder/4 - Operations/0.2 - Live demo
make export # browsable copy in Binder/4 - Operations/0 - website: clone + logos, articles, legal, screenshots, fonts
Deploy on Vercel
Live at https://binder.red — Vercel project binder-site (team
vitodelcambios-projects), domain registered through Vercel.
- Production deploys from
main; every push to dev gets a preview URL
(behind Vercel login). Merge dev → main to publish.
www.binder.red 308-redirects to binder.red (set on the project's domains).binder-site-six.vercel.app serves the same production deployment.make live runs the browser smoke test against the deployed site.
Routing comes from vercel.json: cleanUrls + trailingSlash: false serve
demo/index.html at /demo, so anything the demo loads must use an absolute
/demo/... path. The smoke test's local server emulates this.
Environment variables
| Variable | Required | Value |
|---|
RESEND_API_KEY | yes | resend.com → API Keys → Create (sending access) |
CONTACT_TO | yes | inbox that receives requests; comma-separate several |
CONTACT_FROM | no | e.g. Binder <hello@yourdomain> once the domain is verified in Resend |
Without CONTACT_FROM, mail is sent from Resend's shared [email protected]
sender, which only delivers to the address that owns the Resend account.
Set CONTACT_TO to that address until a domain is verified.
Until the key and recipient are set, the route answers 503 not_configured.
The page never shows "received" for a request that was not sent.
Page configuration
At the top of the <script> in index.html:
| Setting | Effect |
|---|
BOOKING_URL | Cal.com / Calendly / Google appointment link. When set, "Book a demo" opens it directly and a "Pick a time now" card appears. Empty → buttons scroll to the form. |
CONTACT_EMAIL | Shown as a direct contact, and used to open a prefilled email if the form backend fails. Empty → hidden. |
Search and AI answers (SEO / GEO)
| File | Purpose |
|---|
investor-list.html, meet-investors.html, capital-raise.html, founder-list.html | One guide per search intent, served at /investor-list etc. |
sitemap.xml | Every public page; make ci fails if a page is missing from it |
robots.txt | Everything allowed except /api/; AI crawlers named explicitly; points to the sitemap |
llms.txt | Plain-text summary of what Binder is, for AI assistants and their crawlers |
<key>.txt + make indexnow | IndexNow: pushes the sitemap's URLs to Bing (which feeds ChatGPT search), Yandex and others |
| JSON-LD in each page | Organization, WebSite/Article, Breadcrumbs, FAQPage |
404.html | Served by Vercel for unknown paths |
privacy.html, cookies.html, terms.html, legal.html | GDPR privacy notice, cookie policy (no cookies), terms with financial-intermediary disclaimers, company legal notice |
assets/fonts/ | Self-hosted Inter (+ OFL licence). No request goes to Google Fonts — the privacy policy promises no third parties |
Every page's FAQPage structured data mirrors its visible FAQ exactly — make ci
fails if they drift, because answers the page doesn't show are against Google's
guidelines. Titles must be unique and under ~60 characters, descriptions
120–160, one <h1> per page, canonical = the page's own clean URL.
The legal pages contain [[PLACEHOLDERS]] for company details until they
exist. make ci lists them; make publish-check fails on them — run it
before merging to main.
After publishing changes to pages: make indexnow.
The demo
Every phone on the page is the real prototype from the mock export
(Binder-Export-mock-v2/prototype), embedded at its native 390×844 and scaled.
Nothing a visitor does in it leaves the browser.
- Hero — the free demo: either side of the app, anywhere in it.
- For founders / For investors — one walkthrough per side. Each phone is
opened with
?lock, which pins it to its role: visitors can tap around that
side of the app, but the Founder/Investor picker is a label, not a control.
On touch screens the embedded phones are look-only, so the page still
scrolls under a thumb, and a button opens /demo/ full screen instead.
The prototype was built as a ChatGPT widget: it restores its state from
window.openai.widgetState and re-renders on an openai:set_globals event.
demo/boot.js provides exactly that interface, which is how the page opens it
on a given screen (/demo/?role=vc&page=booking) and moves it as you scroll
through each walkthrough — without editing the prototype itself.
Importing a new mock
make import MOCK=../Binder-Export-mock-v3 # rewrites demo/index.html and demo/icons.js
make shots # check every screen in .shots/
make icons # refresh the social card
If a step should land on a different screen, edit STEPS.founder or
STEPS.vc in index.html; make ci checks each table matches its steps.
The import stops with a reason if the export's shape has changed (script tag,
state version, Lucide layout) rather than writing a half-working demo.
