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)

This is the beginning of the README. Read the rest at the original. Read the full README ↗