| Campo | Valor |
|---|---|
| Stack | Astro 5.7, TypeScript 5, Tailwind CSS 4 |
| Dependencias | 5 (astro, @astrojs/cloudflare, @astrojs/node, tailwindcss, @tailwindcss/vite) |
| Puerto local | 4321 (dev), 4000 (Docker) |
| Dominio | nvito.mx (PROD), dev-landing.nvito.mx (DEV), test-landing.nvito.mx (TEST) |
| Estado | Coming Soon + Smart Link SSR |
1. Propósito
nvito-landing es el sitio web público de la marca Nvito. Cumple dos funciones principales:
- Coming Soon: Página de marketing con animaciones cinematográficas puras en CSS, sin JavaScript en el bundle final
- Smart Link: Ruta SSR
/join/[token]que actúa como punto de entrada para deeplinks de la app móvil
Principio de diseño: Máxima calidad visual con mínimo peso. Las páginas estáticas logran Lighthouse 100/100/100/100 al ser HTML + CSS puro.
2. Stack y arquitectura
| Tecnología | Versión | Rol |
|---|---|---|
| Astro | 5.7.10 | Framework SSG + SSR híbrido |
| @astrojs/cloudflare | latest | Adapter para producción (Cloudflare Pages) |
| @astrojs/node | latest | Adapter para DEV/TEST (Docker en Coolify) |
| Tailwind CSS | 4.1.4 | Utility-first CSS, zero-runtime |
| @tailwindcss/vite | 4.1.4 | Plugin de build para Vite |
| TypeScript | strict | Tipado de configuración |
Adapter condicional
nvito-landing usa un adapter condicional controlado por la variable de entorno ASTRO_ADAPTER:
- Producción (sin
ASTRO_ADAPTERo valor por defecto):@astrojs/cloudflarepara Cloudflare Pages - DEV/TEST (
ASTRO_ADAPTER=node):@astrojs/nodepara ejecución en Docker vía Coolify
Todas las páginas son estáticas excepto /join/[token], que tiene prerender = false para servir contenido dinámico basado en el token del invitado.
3. Deeplinks y Smart Link
3.1 Flujo de deeplinks
Al enviar invitaciones por email, WhatsApp o SMS, nvito-api incluye un link con formato:
https://nvito.mx/join/(token)
Donde (token) es el access token del invitado (GuestAccessToken). Cuando el invitado abre este link:
- Si la app está instalada: iOS (Universal Links) o Android (App Links) interceptan el link y abren la app directamente
- Si la app NO está instalada: El navegador carga la página SSR del smart link
3.2 Página Smart Link (/join/[token])
La ruta /join/[token] es SSR (prerender = false) y muestra:
- Logo y branding de Nvito
- Botón App Store: Link a la app en Apple App Store
- Botón Google Play: Link a la app en Google Play Store
- Link "Continuar en el navegador": Redirige a la PWA (
app.nvito.mx) pasando el token - Instrucciones paso a paso para descargar e ingresar con el token
3.3 Archivos .well-known
Para que iOS y Android reconozcan la app como manejador de links del dominio nvito.mx:
/.well-known/apple-app-site-association: Configura Universal Links para iOS conTEAM_ID.com.nvito.clienty paths["/join/*"]/.well-known/assetlinks.json: Configura App Links para Android concom.nvito.client
3.4 Variable APP_DEEP_LINK_URL (nvito-api)
nvito-api usa la variable APP_DEEP_LINK_URL para construir los links en las notificaciones:
| Ambiente | Valor |
|---|---|
| Local | http://localhost:4000 |
| DEV | https://dev-landing.nvito.mx |
| TEST | https://test-landing.nvito.mx |
| PROD | https://nvito.mx |
Dominio nvito.mx para deeplinks
Se decidió usar nvito.mx (dominio principal registrado) como dominio de deeplinks. Se descartó nvito.app porque no está registrado y registrar un dominio .app adicional no aporta beneficio funcional. El dominio principal ya tiene SSL, DNS y Cloudflare configurados.
4. Estructura de archivos
Estructura de Directorios
5. Design system
Paleta oficial Nvito
| Token | Color | Uso |
|---|---|---|
nvito-blue | #0B3D5A | Color principal de marca |
nvito-orange | #F17F3A | Color de acento |
nvito-orange-intense | #FC5A0F | Acento intenso |
nvito-blue-comp | #005587 | Complementario azul |
nvito-orange-comp | #F1993A | Complementario naranja |
nvito-gray | #BDC0C2 | Fondo gris |
nvito-cream | #FBECD4 | Fondo crema |
Los colores se definen como CSS variables via @theme inline de Tailwind CSS 4.
Tipografía
| Fuente | Uso | Carga |
|---|---|---|
| Playfair Display | Display / títulos | Google Fonts preload |
| DM Sans | Body / texto general | Google Fonts preload |
Background cinematografico
El fondo combina un gradiente lineal de 3 paradas (#005587 a #0B3D5A a #072a3e) con un overlay radial sutil, creando profundidad visual sin imagenes.
6. Componentes visuales
La página Coming Soon se compone de elementos puramente CSS sin JavaScript:
| Componente | Descripción |
|---|---|
| Partículas flotantes | 10 círculos con 5 patrones de movimiento CSS |
| Logo SVG animado | Breathing glow + ambient light + 3 orbital rings |
| Tagline | "vive tu evento" con text-shadow glow |
| Shimmer line | Línea decorativa con animación de brillo |
| Hero title | "MUY PRONTO" responsivo (2rem-4.5rem) |
| Season text | "verano 2026" |
| Email link | hola@nvito.mx |
Animaciones
- 23 keyframes CSS definidos en
global.css - Staggered fade-in-up: 6 reveals con delays de 0.3s a 2.3s y easing cubic-bezier
- Breathing glow: Animación continua del logo SVG
- Partículas: 5 patrones de movimiento distintos (float, drift, ascend, sway, orbit)
7. Performance
| Métrica | Valor |
|---|---|
| JavaScript payload (Coming Soon) | 0 KB |
| Hidratación | Ninguna (páginas estáticas) |
| Lighthouse Performance | 100 |
| Lighthouse Accessibility | 100 |
| Lighthouse Best Practices | 100 |
| Lighthouse SEO | 100 |
Las páginas estáticas son HTML + CSS puro. La ruta SSR /join/[token] genera HTML en el servidor sin JavaScript del lado del cliente.
8. Accesibilidad
aria-hidden="true"en todos los elementos decorativos (partículas, orbital rings)role="img"+aria-labelen el logo SVGlang="es"en el elemento<html>prefers-reduced-motion: deshabilita todas las 23 animaciones CSS
9. SEO
- Meta description optimizada
- Open Graph tags (
og:title,og:description,og:image) - Twitter Card meta tags
- Favicon + Apple Touch Icon
theme-colormeta tag (#0B3D5A)
10. Deployment
Producción (Cloudflare Pages)
| Aspecto | Detalle |
|---|---|
| Plataforma | Cloudflare Pages |
| Adapter | @astrojs/cloudflare |
| Deploy trigger | Push a main (auto-deploy) |
| Dominio | nvito.mx |
| CDN | Cloudflare global edge |
| HTTPS | Automático |
| Costo | $0 (free tier) |
DEV/TEST (Docker en Coolify)
| Aspecto | Detalle |
|---|---|
| Plataforma | VPS + Coolify |
| Adapter | @astrojs/node |
| Puerto | 4000 |
| Dominio DEV | dev-landing.nvito.mx |
| Dominio TEST | test-landing.nvito.mx |
| Protección | Cloudflare Zero Trust |
| Deploy trigger | GitLab webhook a Coolify |
Dockerfile (DEV/TEST)
nvito-landing incluye un Dockerfile multi-stage para despliegue en Coolify:
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ENV ASTRO_ADAPTER=node
RUN npm run build
FROM node:20-alpine AS runtime
WORKDIR /app
COPY --from=build /app/dist ./dist
COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/package.json ./
EXPOSE 4000
ENV HOST=0.0.0.0
ENV PORT=4000
CMD ["node", "dist/server/entry.mjs"]
11. Variables de entorno
| Variable | Proyecto | Descripción | Ejemplo |
|---|---|---|---|
ASTRO_ADAPTER | nvito-landing | Adapter a usar (node para Docker, omitir para Cloudflare) | node |
PUBLIC_PWA_URL | nvito-landing | URL de la PWA para fallback del smart link | https://app.nvito.mx |
APP_DEEP_LINK_URL | nvito-api | URL base para construir deeplinks en notificaciones | https://nvito.mx |
12. Desarrollo local
# Clonar y configurar
cd nvito-landing
npm install
# Desarrollo
npm run dev # http://localhost:4321
# Build (modo Cloudflare, por defecto)
npm run build # Genera dist/
# Build (modo Node, para probar Docker localmente)
ASTRO_ADAPTER=node npm run build # Genera dist/ con server
# Preview
npm run preview # Sirve dist/ localmente
Smart link en desarrollo local
Para probar el flujo de deeplinks localmente, usar ASTRO_ADAPTER=node npm run build y ejecutar node dist/server/entry.mjs. La ruta /join/(token) estará disponible en http://localhost:4000/join/(token). Configurar APP_DEEP_LINK_URL=http://localhost:4000 en nvito-api para que las notificaciones apunten al servidor local.