Stratum landing page

Marketing site for Stratum PR: a landing page, the Walmart self-check (with the passport results), and the legal pages. It's static HTML, CSS and JS with no build step and no dependencies. Every page is bilingual (ES/EN).

index.html                 landing page (Spanish in the HTML; English in js/main.js)
autoevaluacion.html        5-step self-check → Walmart passport, to-do list, guide, calculator
precios.html               pricing page: tiers, comparison, ROI calculator, "Solicitar acceso" (pilot requests)
privacidad.html            Privacy Policy     (GDPR / ePrivacy draft; needs legal review)
terminos.html              Terms of Use       (draft; needs legal review)
cookies.html               Cookie Policy

css/fonts.css              self-hosted Archivo (no Google Fonts request)
css/styles.css             landing + legal page styles; tokens at the top in :root
css/consent.css            cookie banner, shared by every page
css/precios.css            pricing page styles
css/autoevaluacion.css     self-check styles
css/motion.css             landing animations (skipped for prefers-reduced-motion)
css/autoeval-motion.css    self-check animations
js/motion.js               landing animation triggers
js/autoeval-motion.js      self-check screen transitions and results animations
js/consent.js              cookie consent manager (window.StratumConsent)
js/analytics.js            anonymous analytics (Vercel Web Analytics), loaded only with consent
js/precios.js              pricing page: billing toggle, access requests, ROI calculator, events
js/main.js                 landing: language, nav, insights card, guide, forms. CONFIG at the top
js/guide.js                official links for the guide (shared by the landing and the results)
js/selfcheck-data.js       self-check requirements, tiers, sections (shared with api/selfcheck)
js/pricing.js              price math + sample catalog (self-check results only)
js/autoevaluacion.js       self-check: questions, scoring, results. TEST_MODE / SUBMIT_URL at the top
js/legal.js                shows the ES or EN block on the legal pages
api/                       Vercel functions: form submissions → Resend (see below)
assets/                    logos, favicon, fonts, texture tile

Forms and email (Resend)

Every form posts to a Vercel function in api/ (no dependencies). api/_lib.js is the only file that talks to Resend, so moving to Azure later means replacing that one file.

Endpoint	Sends
/api/selfcheck	Passport email to the user + lead email to LEADS_TO with every answer. Hot-lead email when they ask for a lab or the free review.
/api/guide	Lead email to LEADS_TO
/api/signup	Lead email + double opt-in confirmation to the user
/api/contact	Message to LEADS_TO (Reply-To = sender)
/api/pricing	"Solicitar acceso" from the pricing page → lead email to LEADS_TO with plan, billing, supplier range and ROI numbers (Reply-To = sender)
/api/confirm	Confirmation link target: adds the address to Resend Contacts

Anyone who ticks a "noticias" box (guide, early access, self-check) gets a confirmation email and joins the mailing list only after clicking it. Until the Azure database exists, the lead emails in contact@ are the record of submissions.

The passport email is built on the server from js/selfcheck-data.js (looked up by item key), never from text sent by the browser, and names can't contain links, so the forms can't be used to mail arbitrary content to strangers. There's also an origin check, a honeypot and a basic rate limit.

Vercel → foodsafetymvp → Settings → Environment Variables (Production + Preview):

Variable	Value
RESEND_API_KEY	Resend API key with sending access
RESEND_FROM	Stratum <[email protected]> (the domain must be verified in Resend)
RESEND_SEGMENT	Optional: name of the Resend segment for confirmed subscribers (default Food Safety MVP). RESEND_SEGMENT_ID also works and skips the lookup
LEADS_TO	[email protected]
CONFIRM_SECRET	A long random string. Signs the confirmation links; required once the API key is set
SITE_URL	https://mvp.stratumpr.com
PLAN_PASSWORD	Password for the private MVP plan page (/api/plan)
PLAN_KEY	32 random bytes in base64. Decrypts the plan page and signs its session cookie

Without RESEND_API_KEY nothing is sent: the functions run in dry-run mode and the site keeps working.

Pricing page and validation

precios.html shows the proposed tiers (Esencial $179, Profesional $429, Planta Plus from $849 per site a month; annual = 2 months free) to validate them before launch. "Solicitar acceso" is a pilot request, not a purchase: the page says nothing is charged, and each request becomes a lead email with the plan and billing chosen. The ROI calculator estimates the value of time saved against the plan price; its numbers travel with the request when someone asks for access from it.

Analytics (js/analytics.js): Vercel Web Analytics, cookieless, loaded only if the visitor allows the "Analítica" category in the consent banner (policy version 2). Pages call window.stratumTrack(name, data); data is limited to short values (never names, emails or text). Events on the pricing page:

Event	When	Data
pricing_billing	Monthly/annual toggled	billing
pricing_cta	A plan's "Solicitar acceso" (or the calculator's) clicked	tier, billing, source (card/roi)
request_open	Request dialog opened	tier
request_submit	Request sent	tier, billing, suppliers
request_abandon	Dialog closed without sending	tier
request_error	Sending failed	tier
roi_calc	Calculator used	tier, sup and hours buckets, result (pays/short)

Drop-off per tier = pricing_cta vs request_submit. To see the data: Vercel → foodsafetymvp → Analytics (enable Web Analytics there once). Page views work on every plan; custom events need a Vercel Pro plan. Without it, the lead emails (one per request, with plan and billing) are the record. Numbers only include visitors who accepted analytics.

The self-check also asks three unscored sizing questions (active suppliers, hours a month on supplier documents, current compliance spend); the answers arrive in the self-check lead email.

Private MVP plan page

The footer's "Plan del MVP" link opens /api/plan, which asks for PLAN_PASSWORD and then shows the SaaS MVP plan. The repo is public, so the page is committed only encrypted (api/_plan-data.js, AES-256-GCM); the plaintext docs/plan-page.html is git-ignored. A correct password gives a 12-hour session; after 5 wrong attempts from one IP, the form locks for 15 minutes.

To update the page, edit docs/plan-page.html, run node dev/encrypt-plan.js (it reads PLAN_KEY from the environment or a git-ignored .env.local; it must be the same key as in Vercel), and commit the new api/_plan-data.js.

Run locally

node dev/devserver.js

Serves the site at http://localhost:5173 with no caching and runs the api/ functions in dry-run mode: emails are saved to .claude/outbox/ and listed at http://localhost:5173/__outbox.

Before launch

1. Resend: set the environment variables above.
2. Legal pages: fill in the remaining [placeholders] (legal entity name, address, privacy email, EU representative if applicable, governing law), have an attorney review all three pages, then remove the "Borrador para revisión legal" notes. Put the postal address in the email footer too (api/_lib.js, CAN-SPAM).
3. Industry insights: add a source for the numbers in INSIGHTS (js/main.js) and for the Costco claim.

Search engines

The site is noindex while it's pre-launch: every page has <meta name="robots" content="noindex, nofollow"> and vercel.json sends an X-Robots-Tag: noindex, nofollow header. At launch, remove both (and don't block crawlers in robots.txt, or they can't see the change).

Deploy

Vercel project foodsafetymvp (team Stratum PR Projects) is connected to this repo; every push to main deploys to https://mvp.stratumpr.com. It needs Vercel (or another host that runs the api/ functions); plain static hosting like GitHub Pages would serve the pages but the forms wouldn't work.