NEXA — web pública

En producción: https://nexa-web-one.vercel.app

Estática. HTML + CSS + JS. Cero dependencias, cero build, cero cookies.

index.html    · las 9 secciones
styles.css    · el sistema de diseño entero
script.js     · movimiento + lista de espera
favicon.svg   · la X como cruce
vercel.json   · headers y caché

1. Conectar la lista de espera (Supabase)

En el SQL Editor de Supabase:

create table public.waitlist (
  id          uuid primary key default gen_random_uuid(),
  email       text not null unique,
  universidad text,
  ciudad      text not null default 'valencia',
  created_at  timestamptz not null default now()
);

alter table public.waitlist enable row level security;

-- Solo se puede INSERTAR desde el cliente. Nadie puede leer la lista.
create policy "waitlist_insert_anon"
  on public.waitlist for insert
  to anon
  with check (
    char_length(email) between 5 and 254
    and email ~* '^[^@\s]+@[^@\s]+\.[^@\s]{2,}$'
    and ciudad = 'valencia'
  );

No hay policy de select: la anon key no puede leer nada. Es seguro exponerla.

Luego, en script.js, líneas 8–9:

const SUPABASE_URL = "https://TU-PROYECTO.supabase.co";
const SUPABASE_ANON_KEY = "eyJ...";

Sin configurar, el formulario funciona igual (muestra "Estás dentro") y escribe los datos en consola. Útil para enseñar la web antes de tener backend.

Anti-spam: si empieza a llegar basura, añade Cloudflare Turnstile o un rate limit por IP en una Edge Function. No lo metas antes de necesitarlo.

2. Fotos

13 fotos reales de Pexels, servidas desde su CDN (images.pexels.com). Licencia Pexels: uso libre, también comercial, sin atribución obligatoria.

Pinterest no. Esas imágenes son de terceros con copyright. En una web pública de una empresa, es un riesgo real y evitable.

Cuando tengas fotos reales de gente de Valencia, sustituye el src de cada <img> y quita el dominio de Pexels del preconnect. Los alt ya están escritos. Ratios:

Sitio	Ratio	Ancho
Hero	3:2	≥1800px
Tarjetas Tus 9	4:5	800px
Rejilla del móvil	1:1	220px
Tira animada	4:3	700px
Historial	16:10	400px

Si una foto falla al cargar, script.js la sustituye por un degradado gris. Nunca se ve una imagen rota.

Falta og.jpg (1200×630) para las stories y los links compartidos. Es el activo con más ROI de toda la web.

3. Deploy

npx vercel        # preview
npx vercel --prod

O arrastra la carpeta a vercel.com. No hay build step.

4. Reglas que no se rompen

• Una tipografía. Inter. La jerarquía es peso y tamaño, nunca una segunda familia.
• Un azul: #0A5CFF. Si algo es azul, se toca. No hay azul decorativo en toda la web. El gris #9099AB es de marca pero no tiene contraste suficiente para texto: para texto secundario usa --gris-txt (#5A6377, 6.0:1).
• Nunca amarillo. Nunca nada fuera de paleta.
• Sin métricas de vanidad. Si algún día hay una cifra, es una: experiencias vividas.
• text-wrap: balance en todos los titulares. Ninguna palabra suelta colgando.
• prefers-reduced-motion desactiva parallax, entradas y animaciones. Ya está.

5. El filtro

Antes de añadir una sección: ¿esto hace que alguien quiera vivir algo que no habría vivido sin NEXA? Si no, sobra.