Nocron Landing Page

Next.jstypescriptweb-developmentTailwindCSSPostCSS


🔗 Ver en GitHub 🚀 Ver Demo Live

Resumen del Proyecto Nocron - One Page Launch

🎯 Producto

Nocron Landing Page es una página de aterrizaje para un motor de automatización y programación ligero diseñado para flujos de trabajo basados en Notion.

Características principales:

  • Formulario de lista de espera con envío por email
  • Soporte multiidioma (Inglés, Español, Francés)
  • Modo oscuro/claro con persistencia
  • Diseño responsive mobile-first
  • FAQ interactivo con acordeón
  • Sección “Cómo funciona” con proceso de 3 pasos
  • SEO optimizado con meta tags Open Graph y Twitter Card
  • Notificaciones Telegram vía GitHub Actions

🛠️ Stack Tecnológico

Frontend

  • Next.js 15.5.4 - Framework React con SSR
  • React 19.1.0 - Biblioteca UI
  • TypeScript 5+ - Tipado estático con modo strict

Estilos

  • TailwindCSS v4 - Framework CSS utility-first
  • PostCSS v4 - Procesador CSS

Herramientas de Desarrollo

  • npm - Gestor de paquetes
  • Git - Control de versiones
  • GitHub Actions - CI/CD y notificaciones

Integraciones Preparadas

  • Google Analytics - Puntos de tracking implementados
  • Backend API - Código comentado listo para activar
  • Telegram Bot API - Notificaciones de deployment e issues

🏗️ Arquitectura

Estructura de Carpetas

onePageLauch/
├── app/                          # Next.js App Router
│   ├── components/               # Componentes React
│   │   ├── NocronLaunchPage.tsx # Componente principal (849 líneas)
│   │   ├── LaunchingBadgeOption1.tsx # Badge animado
│   │   └── ErrorMessageBox.tsx  # Pantalla de error/404
│   ├── layout.tsx               # Layout raíz + metadata SEO
│   ├── page.tsx                 # Página home
│   ├── not-found.tsx            # Página 404
│   └── globals.css              # Estilos globales TailwindCSS v4
├── public/                      # Assets estáticos (SVGs)
├── .github/workflows/           # GitHub Actions
│   ├── deploy-notification.yml
│   └── issue-notification.yml
└── [archivos de configuración]

Componente Principal (NocronLaunchPage.tsx)

Estado gestionado con React Hooks:

  • theme - Tema claro/oscuro con localStorage
  • lang - Idioma (en/es/fr) con auto-detección del navegador
  • email - Input del formulario
  • isSubmitting - Estado de carga
  • submitStatus - Resultado del envío (idle/success/error)
  • openFaq - FAQ abierta actualmente

Contenido multiidioma (líneas 26-318):

  • 3 objetos completos (en, es, fr) con todas las traducciones
  • Incluye textos UI, descripciones de features, FAQs y meta tags SEO

Secciones renderizadas:

  1. Header - Logo + selector de idioma + toggle tema
  2. Hero - Badge animado + slogan + formulario waitlist
  3. How It Works - Proceso de 3 pasos
  4. Propuestas de Valor - 4 tarjetas de features
  5. Social Proof - Logos de empresas (placeholder)
  6. FAQ - Preguntas expandibles
  7. About - Descripción breve
  8. Footer - Links + redes sociales

Flujo de Envío del Formulario

Usuario ingresa email
    ↓
Validación frontend
    ↓
Track evento Analytics (preparado)
    ↓
[API backend - comentado] → Fallback a mailto:
    ↓
Mensaje éxito/error
    ↓
Reset formulario (5s)

Implementación actual: Abre cliente de email con mensaje pre-llenado Listo para: Descomentar líneas 421-426 para envío a backend

Sistema de Temas

// Persistencia en localStorage
localStorage.getItem('nocron_theme')

// Detección de preferencia del sistema
window.matchMedia('(prefers-color-scheme: dark)')

// Aplicación vía clase CSS
document.documentElement.classList.add('dark')

Archivo: app/components/NocronLaunchPage.tsx:321-347

Sistema Multiidioma

Auto-detección:

navigator.language.startsWith('es') → 'es'
navigator.language.startsWith('fr') → 'fr'
default → 'en'

Persistencia: localStorage.getItem('nocron_lang') Archivo: app/components/NocronLaunchPage.tsx:330-352

SEO Dinámico

Meta tags actualizados dinámicamente según idioma seleccionado:

  • Title
  • Description
  • Open Graph tags (og:title, og:description, og:image)
  • Twitter Card tags

Archivo: app/components/NocronLaunchPage.tsx:354-388

Redes Sociales

Contacto

GitHub Actions - Notificaciones Telegram

Deploy Notification (.github/workflows/deploy-notification.yml):

  • Trigger: push a main/production, deployment status, manual
  • Envía: mensaje de commit, autor, branch, link al workflow
  • Emojis: 🔔 (update), ✅ (success), ❌ (failure)

Issue Notification (.github/workflows/issue-notification.yml):

  • Trigger: opened, edited, closed, reopened, assigned, labeled
  • Envía: título, descripción, labels, assignee, autor
  • Diferentes emojis según el tipo de acción

Patrones de Diseño Implementados

  1. Composición de Componentes - Componentes reutilizables (Card, Logo, Badge)
  2. Client-Side State Management - React Hooks sin librerías externas
  3. Progressive Enhancement - Funciona sin JavaScript para contenido básico
  4. Mobile-First Responsive - Diseño optimizado para móvil primero
  5. Error Boundary - Manejo de errores en runtime (líneas 792-838)

Optimizaciones de Rendimiento

  • Imágenes SVG inline - Sin requests HTTP adicionales
  • Lazy loading - Carga diferida de contenido
  • CSS-in-JS - Animaciones vía Tailwind sin JavaScript
  • Sin librerías externas - Bundle mínimo (solo React + Next.js)
  • Memoización - Cálculo de año memoizado (useMemo)

Seguridad

Implementado:

  • ✅ TypeScript strict mode
  • ✅ Error boundary para errores runtime
  • ✅ Protección XSS via React escaping
  • ✅ Secrets en GitHub Actions (no hardcodeados)
  • ✅ Acceso read-only mencionado para integraciones Notion

Última actualización: 2025-10-17 Versión del documento: 1.0