Jair Rivera · Blog

Eventube — Página de Evento

Eventube es una aplicación web desarrollada en React con TailwindCSS y Lucide Icons, diseñada como plantilla para eventos, conferencias o festivales. Incluye secciones dinámicas como ponentes, agenda, ubicación, boletos, galería y contacto, siguiendo una estructura modular con componentes reutilizables.

Ver proyecto en vivo

Objetivo del proyecto

Desarrollar una plantilla profesional para la promoción de eventos, totalmente responsiva, modular y personalizable. Ideal para congresos, festivales, conferencias o presentaciones con agenda, ponentes y registro en línea.

Tecnologías y herramientas

  • React + Vite — estructura modular y componentes dinámicos.
  • TailwindCSS v3 — diseño minimalista y adaptable.
  • Lucide React — íconos SVG como componentes nativos de React.
  • Google Fonts (Figtree) — tipografía moderna y legible.
  • HTML5 + JSX — estructura semántica y rendimiento óptimo.

Estructura del proyecto

src/
├── components/
│   ├── Header.jsx
│   ├── Hero.jsx
│   ├── About.jsx
│   ├── Speakers.jsx
│   ├── Schedule.jsx
│   ├── Location.jsx
│   ├── Tickets.jsx
│   ├── Sponsors.jsx
│   ├── Gallery.jsx
│   ├── Contact.jsx
│   └── Footer.jsx
├── App.jsx
└── main.jsx

Principales secciones

  • Header — navegación fija y logo.
  • Hero — portada con CTA principal.
  • About — descripción del evento.
  • Speakers — lista de ponentes con fotos.
  • Schedule — agenda con horarios por día.
  • Location — mapa embebido y dirección.
  • Tickets — tipos de acceso y precios.
  • Gallery — galería visual de eventos.
  • Contact — formulario de contacto.
  • Footer — redes sociales y derechos.

Diseño e interfaz

Se priorizó un diseño moderno, dinámico y completamente responsivo. Se utilizaron bloques modulares con fondos claros, íconos Lucide integrados y tipografía Figtree para mantener una estética limpia y profesional.

Resultados y aprendizajes

Este proyecto demuestra el dominio de React y TailwindCSS en la construcción de sitios para eventos. Refuerza la arquitectura por componentes, el uso de íconos SVG, y la optimización visual mediante clases utilitarias.