Petra · Landing

La página de presentación de Petra (petraeventos.com). Una sola página que cuenta qué es Petra y lleva al sistema: "Crear mi cuenta gratis" (/registrarme) y "Entrar al sistema" (/entrar).

Hecha con Next.js 16, TypeScript y Tailwind 4. No tiene base de datos ni variables secretas.

Verla en tu compu

Necesitás Node.js 20 o más nuevo.

npm install
npm run dev

Y abrí http://localhost:3000.

Dónde está cada cosa

Archivo	Qué tiene
app/page.tsx	Todas las secciones y sus textos
app/layout.tsx	Título y descripción para Google y WhatsApp
app/globals.css	Tokens de marca (paleta clara del sistema, tipografía, esquinas)
components/pasos-apilados.tsx	Los tres pasos: tarjetas blanco crema, azul y marino que se apilan al bajar
components/cotizador-demo.tsx	La demo del celular, con las dos vistas
components/logo.tsx	Isotipo, firma y recurso de las piedras (no modificar)
lib/enlaces.ts	Links al sistema (registrarme, entrar, términos, privacidad) y al WhatsApp
app/icon.svg	Favicon
app/fonts/	Fraunces y Manrope, incluidas en el proyecto (licencia OFL)

La dirección del sistema

Los botones apuntan a https://app.petraeventos.com. Si hace falta otra dirección (por ejemplo, una preview), se cambia en Vercel con la variable NEXT_PUBLIC_URL_SISTEMA, sin tocar el código.

Notas

• Diseño: la estructura se basa en Launch UI (licencia MIT, copia en licencias/launch-ui.md). Los colores y la tipografía son los del sistema: fondo hueso, texto marino, el azul de la marca para la acción, celeste para suavizar y ámbar solo como detalle. Los títulos van en Fraunces, como en el sistema; Manrope para el resto.
• Una sola acción: "Armá tu cotizador gratis" en toda la página. WhatsApp y el cotizador de ejemplo van como links.
• Las fuentes están dentro del proyecto en vez de bajarse de Google Fonts: se ven igual y no dependen de Google.
• El formulario de "acceso anticipado" se sacó: ahora cada cliente se registra solo en el sistema.