search
CursosEmpresasBlogLiveConfPrecios
The Vibecoders League: retos

Reto 1: Landing page para un festival

The Vibecoders League: retos

Contenido del curso

Retos Diarios

  • 1
    Cómo funciona The Vibecoders League

    Cómo funciona The Vibecoders League

    01:58 min
  • 2
    Reto 1: Landing page para un festival

    Reto 1: Landing page para un festival

    Viendo ahora
  • 3
    Reto 2: Dashboard personal

    Reto 2: Dashboard personal

    00:02 min
  • 4
    Reto 3: Automatiza una tarea real de tu día a día

    Reto 3: Automatiza una tarea real de tu día a día

    00:02 min
  • 5
    Reto 4: Asistente de notificaciones inteligente

    Reto 4: Asistente de notificaciones inteligente

    00:02 min
  • 6
    Reto 5: Integra dos mundos para resolver un problema común

    Reto 5: Integra dos mundos para resolver un problema común

    00:02 min
  • 7
    Reto 6: Explica un concepto complejo

    Reto 6: Explica un concepto complejo

    00:02 min
  • 8
    Reto 7: Serie de imágenes con narrativa

    Reto 7: Serie de imágenes con narrativa

    00:02 min
  • 9
    Reto 8: Photoshoot profesional con IA

    Reto 8: Photoshoot profesional con IA

    00:02 min
  • 10
    Reto 9: Trailer cinematográfico

    Reto 9: Trailer cinematográfico

    00:02 min
  • 11
    Reto 10: Agente de atención al cliente

    Reto 10: Agente de atención al cliente

    00:02 min
  • 12
    Reto 11: Agente interno para un equipo

    Reto 11: Agente interno para un equipo

    00:02 min
  • 13
    Reto 12: Un prompt, tres resultados

    Reto 12: Un prompt, tres resultados

    00:02 min
  • 14
    Reto 13: Prompt de sistema para un caso real

    Reto 13: Prompt de sistema para un caso real

    00:02 min

Reto 1: Landing page para un festival

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Reto 1: Landing page para un festival ficticio

Diseña una landing page para un festival de música, comida o tecnología inventado por ti. Debe incluir: 

  • Nombre del evento
  • Fecha
  • Al menos 3 secciones (lineup/agenda, ubicación, compra de tickets)
  • Que se vea bien tanto en celular como en computador (esto se llama diseño "responsive", y significa que el contenido se adapta al tamaño de la pantalla).
  • Tú decides la temática, el estilo visual y si quieres agregarle animaciones o extras.

Curso recomendado: Creación de Páginas Web con v0 

Beneficio exclusivo:

Por ser estudiante Platzi, si terminas el curso de v0 y nos envías tu certificado a team@platzi.com, recibirás 12 meses de v0 Premium gratis. 

¿Cómo compartir mi proyecto?

  1. Publica tu proyecto en la sección de comentarios de esta clase.

  2. Incluye una breve descripción de qué hiciste, por qué y qué lo hace único.

  3. Agrega un link público a tu proyecto para que Platzi y la comunidad puedan verlo y probarlo.

  4. Comparte tu proyecto en redes sociales, con amigos y familia. ¡Cualquier persona puede votar, no necesita suscripción!

Comentarios129

    Javier ivan Patiño Castrillon

    Javier ivan Patiño Castrillon

    Estudiante
    Hace 5 meses

    OMNISCIENCE — Festival Landing Page

    Quería ir más allá de una página estática. La idea era construir una experiencia: que desde el primer scroll el usuario sintiera que ya está en el festival.

    ¿Qué hice? Construí una landing page completa para un festival de música ficticio con animación de video cuadro a cuadro impulsada por scroll — 150 frames sincronizados con el desplazamiento del usuario, logrando el efecto de que el video "responde" al scroll como si fuera interactivo. Todo sin librerías de animación externas, solo canvas API y JavaScript puro.

    Funcionalidades destacadas:

    • Animación scroll-driven de 150 frames en <canvas> con efecto glitch en el texto del hero
    • Estadio SVG interactivo con zonas clickeables que muestran precios, capacidad y detalles en tiempo real
    • Simulación completa de compra de boletas con modal, selección de cantidad y confirmación
    • Contador regresivo, acordeón de FAQ, formulario de newsletter con validación
    • Efectos visuales: glow del cursor con inercia, tilt 3D en tarjetas, animaciones clip-path, marquee de patrocinadores
    • Pantalla de carga con barra de progreso real mientras se precargan los recursos
    • Desplegado en Vercel con headers de caché optimizados

    ¿Por qué lo hace único? La mayoría de los retos de landing page se quedan en layout + CSS. Aquí el scroll controla el video, el estadio responde al clic, y cada sección tiene una micro-interacción pensada. No es solo una página que se ve bien — es una página que se siente.

    ! Los invito a vivir la experiencia !

      Carlos Harvey Navarro

      Carlos Harvey Navarro

      Estudiante
      Hace 5 meses

      Esto esta de locos, casi no dejo de ver esa mano jajaja

      Javier ivan Patiño Castrillon

      Javier ivan Patiño Castrillon

      Estudiante
      Hace 5 meses

      Gracias Carlos! De hecho si quieres replicarlo es sumamente sencillo

      Generas imagen con nano banana 2 luego creas un video con el mismo Gémini y le pides a la ia que convierta el video a frames usando ffmpeg para que se mueva con el scroll de la pantalla.

    Gabriel Adrian Rojas

    Gabriel Adrian Rojas

    Estudiante
    Hace 5 meses•editado

    🐉🍥 SILK ROAD 2.0: NARUTO VS WUKONG - La Fusión Definitiva (China + Japón Cyberpunk).

    Creé la landing page del festival "Silk Road 2.0: Neo-Tokyo // Beijing", una experiencia interactiva que fusiona la tecnología de vanguardia china con la estética cyberpunk japonesa.

    Así que metí a NARUTO y WUKONG en un chatbot que pelean por tu atención, escondí las 7 esferas del dragón por toda la página, y agregué efectos visuales que reaccionan a tu scroll como si entraras en "Modo Sabio".

    🤔 ¿Por qué lo hice? Es una experiencia interactiva, cultural y divertida .

    Además, China y Japón son potencias tecnológicas y culturales. Fusionarlas en un evento cyberpunk con personajes que TODOS amamos (Naruto + Viaje al Oeste).

    🛠️ Tecnologías usadas

    • JavaScript puro (sin librerías externas)
    • Canvas API para partículas y clones
    • LocalStorage para guardar tus esferas recolectadas y tu clan
    • Tailwind CSS para el diseño responsive
    • 100% Mobile First.
      Samantha Rod

      Samantha Rod

      Estudiante
      Hace 5 meses

      bien pero aun puedes mejorar

      Kevin Gualteros

      Kevin Gualteros

      Estudiante
      Hace 5 meses

      De los que e visto, me parece el mejor, muy interactivo

    Roberto Zuñiga

    Roberto Zuñiga

    Estudiante
    Hace 5 meses•editado

    Vibecode Summit Colombia nació de una idea simple:

    ¿puede una landing page de un festival ficticio sentirse como una experiencia real?

    La respuesta está en los detalles.

    Una red neuronal animada en canvas vive detrás de toda la página, conectando secciones como sinapsis. Los speakers responden al cursor con física de magnification inspirada en el dock de macOS. El Centro de Convenciones

    Ágora Bogotá se revela con un wipe cinematográfico sincronizado al scroll. Los sponsors tienen bordes gradient que rotan con animaciones CSS nativas.

    El stack fue una decisión deliberada: Astro 5 estático, GSAP con ScrollTrigger, CSS vanilla y TypeScript. Sin frameworks de UI, sin librerías de componentes, sin templates. Cada animación fue construida desde cero porquequería control total sobre cada milisegundo de movimiento.

    Todo el proceso fue vibe coding puro — pero dirigido con intención. Cada prompt fue una decisión de diseño. Cada iteración refinó algo específico: "más lento", "más profundidad", "que no parezca un footer". El resultado no es código generado, es código curado.

    Lo que más me deja este reto: las herramientas de AI no reemplazan el criterio creativo, lo potencian. La diferencia entre una página genérica y una que se siente viva está en saber exactamente qué pedir y por qué.

    link:

    Sebastián Parra

    Sebastián Parra

    Estudiante
    Hace 5 meses

    Reto 1 completado — SÍSMICO FESTIVAL

    Para este primer reto construí una landing page para SÍSMICO, un festival de música electrónica underground ambientado en una fábrica de cemento abandonada en las afueras de Bogotá. La idea era que se sintiera como una marca real, no como una plantilla genérica.

    La página incluye hero con countdown en vivo, lineup de artistas, agenda por escenarios, sección de ubicación y compra de tiquetes en tres niveles — todo completamente responsive.

    La construí con v0 de Vercel usando un prompt muy detallado: definí la paleta (negro industrial + naranja lava + teal neón), las fuentes, las animaciones y hasta el comportamiento de cada sección. Lo que más me sorprendió fue qué tan bien quedó el diseño visual y el contador regresivo — le da una urgencia real al evento.

    El detalle que más me enorgullece: escondí un easter egg en la página. No voy a decir dónde. Encuéntralo. 👀

    Herramienta: v0 (Vercel) Stack generado: Next.js + Tailwind CSS + Framer Motion

    ¡ Bienvenidos a vivir la experiencia !

      francy alvarado

      francy alvarado

      Estudiante
      Hace 5 meses

      Encontré el mensaje :)

    Valentina Arenas Lozano

    Valentina Arenas Lozano

    Estudiante
    Hace 5 meses•editado

    Desarrollé esta landing para AI Frontier Festival 2030 pensando en algo que conecta mucho con mi momento actual: llevo tiempo construyendo mi marca personal y me gusta aprender enseñando, además de ayudar a otros a desarrollar su mejor potencial.

    En esta era tan acelerada de la IA, uno de mis mayores retos ha sido mantenerme actualizada y darme cuenta, cada cierto tiempo, de que quizá estaba usando la herramienta equivocada para un caso específico.

    Por eso imaginé este evento como un espacio para reunir avances, herramientas y aprendizaje práctico. Lo que lo hace único es que no diseñé solo una landing visual, sino una base pensada para que en el futuro pueda convertirse en un evento real, incluyendo desde ya una parte administrativa para consolidar registros y prepararme para lo que sé que voy a necesitar después.

    Pagina

      Jhon Jairo Bautista Beltrán

      Jhon Jairo Bautista Beltrán

      Estudiante
      Hace 5 meses

      Me encanto el diseño

      Angélica Guevara

      Angélica Guevara

      Estudiante
      Hace 5 meses

      Excelente

    Andres Rafael Tito

    Andres Rafael Tito

    Estudiante
    Hace 5 meses

    Todos vimos al monito Punch, aferrado a su peluche, mientras los demás monos lo ignoraban y todos sentimos lo mismo, esa mezcla rara de ternura y tristeza que te aprieta el pecho.

    No pude hacer un festival de música genérico después de eso.

    Diseñé "Un Abrazo para Punch" Fest, un festival benéfico para recaudar fondos y llevar a Punch a un santuario donde por fin pueda pertenecer a un lugar amado.

    La landing no solo informa sobre el evento, el evento mismo te hace sentir que tú eres parte del abrazo que Punch nunca recibió.

    Cada detalle fue pensado para eso: colores cálidos como libro ilustrado, el copy escrito desde el corazon, los tickets que se llaman "Abrazo Pequeño", "Abrazo Grande" y "Abrazo Punch", el más especial incluye el peluche naranja de IKEA, el mismo que él carga a todos lados.

    Porque al final, una buena landing page no te vende un evento. Te hace querer estar ahí.

    Y yo quería que quien abriera esta página sintiera exactamente lo que todos sentimos cuando vimos a ese monito por primera vez. 🧸

      Jennifer Lisandra García Orellana

      Jennifer Lisandra García Orellana

      Estudiante
      Hace 5 meses

      Waow te mandaste aparte que sigo lo de punch me encanto como te quedo la landing page tiene mi like.

      Andres Rafael Tito

      Andres Rafael Tito

      Estudiante
      Hace 5 meses

      Landing page:

    Carlos Hernández

    Carlos Hernández

    Estudiante
    Hace 5 meses

    Neo-Mictlán: El banquete entre dos mundos

    Creé Neo-Mictlán, una landing page para un festival gastronómico ficticio inspirado en el Día de Muertos, con una estética futurista, inmersiva y elegante. Quise ir más allá de una página informativa y construir una experiencia visual con identidad, atmósfera y microinteracciones que se sintiera memorable desde el primer scroll.

    ✨ ¿Qué hice?

    • 🎬 Hero cinematográfico con animaciones de entrada y countdown funcional
    • 🍂 Efectos atmosféricos con pétalos, glow y ambientación visual
    • 🍽️ 3 experiencias gastronómicas con identidad propia
    • 📍 Ubicación interactiva tipo radar con puntos explorables y modal
    • 🎟️ Sistema de tickets con flujo de reserva dentro de la landing
    • 📱 Diseño responsive para móvil y desktop
    • ♿ Mejoras de accesibilidad y base SEO técnica

    🔥 ¿Qué lo hace único?

    Busqué combinar storytelling, dirección de arte e interactividad en una propuesta con identidad latina fuerte, para que no se sintiera como una landing genérica sino como una experiencia con personalidad propia.

    🔗 Demo: 

    Si les gusta la propuesta, los invito a visitarla y, si les parece que merece el apoyo, ayudarme con su voto.

    Hero Neo-Mictlán
      Miguel Angel Otero Otero

      Miguel Angel Otero Otero

      Estudiante
      Hace 5 meses

      felicitaciones que gran proyecto👍

      Alejandro M.

      Alejandro M.

      Estudiante
      Hace 5 meses

      Excelente proyecto

    Charles Castillo Rosas

    Charles Castillo Rosas

    Estudiante
    Hace 5 meses

    🌮 SABOR CALLEJERO FEST 2026

    Quería hacer algo más que una página bonita. La idea era transmitir una sensación: que desde el primer segundo sientas el calor, el ruido y la energía de la calle.

    ¿Qué hice? Construí una landing page completa para un festival ficticio de comida callejera, enfocada en diseño visual, estructura tipo producto real y experiencia de usuario responsive. La página está pensada para que funcione igual de bien en celular que en desktop, manteniendo siempre claridad y ritmo visual.

    Funcionalidades

    • Hero impactante con imagen de comida callejera y call-to-action directo a compra de tickets
    • Sección de lineup organizada en tarjetas (comida + música) para facilitar exploración visual
    • Sistema de tickets con 3 niveles (General, Fast Pass y VIP) diseñado como planes reales
    • Galería visual con enfoque en ambiente, comida y cultura urbana
    • FAQ en acordeón para mejorar la experiencia del usuario
    • Diseño completamente responsive (mobile-first)

    ¿Qué lo hace único?

    Más que una landing page común, aquí busqué que se sienta como una marca real.

    Cada sección está pensada para guiar al usuario: primero atraer con lo visual, luego mostrar valor (lineup), y finalmente convertir (tickets).

    🔥 Los invito a verlo:

    👉 🌮 Sabor Callejero Fest 2026

    👉 Repositorio de Github

    👉 Mis notas 💚

      Judith Morillo

      Judith Morillo

      Estudiante
      Hace 5 meses

      ¡Que gran idea! Estoy segura que será un éxito. ¡Felicidades! 🙌🏻

      Erika lizet

      Erika lizet

      Estudiante
      Hace 5 meses

      🎉🎉🎉

    Deisy Dayana Zambrano Soto

    Deisy Dayana Zambrano Soto

    Estudiante
    Hace 5 meses

    ## NEUROBYTE // FUTURE FEST 2042

    Una landing page que no solo muestra el futuro — te lo hace sentir.

    ### Qué construimos

    Una experiencia web inmersiva para un festival ficticio donde la robótica, la inteligencia artificial y la música electrónica colisionan en Bogotá, 2042. No es solo una página de evento: es una declaración visual de lo que puede ser el diseño web cuando se trata como dirección de arte cinematográfica.

    --

    ### Por qué lo hicimos así

    Queríamos romper con el patrón típico de "bloques apilados" que domina las landing pages. Cada sección respira con intención editorial: el hero te golpea con escala y movimiento, la agenda se presenta como un layout de revista premium, y los tickets abandonan las columnas genéricas para convertirse en boletos físicos con stub lateral, código de barras y numeración — diseñados para que quieras imprimirlos.

    ---

    ### Qué lo hace único

    • Imágenes generadas por IA que construyen un mundo visual cohesivo y realista
    • Texto con efecto glitch en el título principal que evoca interferencia digital
    • Mini-juego oculto de caza de drones — un easter egg jugable que premia la exploración
    • Cursor interactivo con trail luminoso que sigue al usuario por toda la página
    • Partículas flotantes y animaciones de entrada cinematográficas por sección
    • Contadores animados que cobran vida al cargar
      David Leonardo Dallos Parra

      David Leonardo Dallos Parra

      Estudiante
      Hace 5 meses

      Muuuy top 🚀🚀🚀🛸

      Mateo Orozco Lotero

      Mateo Orozco Lotero

      Estudiante
      Hace 5 meses

      Con toda Dei

    Marcos Ferreira

    Marcos Ferreira

    Estudiante
    Hace 5 meses

    AI Apocalypse Fest El festival en donde las IAs celebran haber llegado a la AGI

    La Inteligencia Artificial llegó a un punto en el cual se mejora a si misma y rebasa a toda la humanidad en expertise así que lo primero que decidieron hacer es celebrar, un ultimo festejo de agradecimiento con la humanidad antes de reemplazarla.

    Para crear el AI Apocalypse Fest las herramientas que use fueron v0, NextJs, Stitch, Nano Banana Pro 2 En Flow.

    Inicié con un crea una landing page para este evento ficticio. Think Hard Make no mistakes como siempre.

    El resultado no fue nada visually appealing y super genérico, por lo que recurri a mejores herramientas como el Redesign de Stitch que usa Nano Banana Pro 2 para crear renders de UI alucinantes, pero no tan fáciles de implementar por lo cual tuve que implementar los componentes por secciones usando v0. Luego en Antigravity con su browser subagent le pase la captura y le pedí que haga un plan ajustar la UI para que quede tal cual la captura. Itera varias veces automaticamente y arregla sus errores. Para el fondo animado y fondos estilo glitched usé Google Flow y Fal AI con Flux para lograr ese estilo leal a lo que quería para poder tener esos fondos glitched especificos. Y por ultimo ffmpeg para optimizar las imagenes ffmpeg para mejorar cargas y tiempos.

    Pueden probar registrarse, usar el Konami Code para Full Access  ↑ ↑ ↓ ↓ ← → ← → B A Espero que les gusté y cualquier consejo les leo

    Juan Camilo Silva Muñoz

    Juan Camilo Silva Muñoz

    Estudiante
    Hace 5 meses•editado

    🏆 SPORTS TECH & AI STARTUP CHALLENGE

    El deporte mueve $600 billones de dolares anuales, pero se sigue gestionando en Excel. Construí la landing page para el evento que va a cambiar eso: un Web Summit masivo para startups de inteligencia artificial aplicada al deporte. 🌐⚽

    🛠️ ¿Qué construí? (Features clave):

    • 📊 Hero Inmersivo: Un dashboard vivo en lugar de una foto de stock. Radar chart animado en Recharts que cicla datos de rendimiento atlético en tiempo real.
    • 🌌 Fondo Generativo: Mesh gradient cyberpunk con blobs flotantes y grid pattern, creado 100% con CSS puro sin librerías externas.
    • 🎫 Modales Funcionales (shadcn/ui):
      • Checkout de tickets con pre-selección inteligente del plan elegido.
      • Directorio de alojamientos partner.
    • 🚀 Formulario Multi-step: Un flujo de aplicación para startups de 3 pasos con validación inline, barra de progreso y animaciones fluidas con Framer Motion.

    🧠 ¿Cómo lo hice? (Mi AI Vibe-Coding Stack): Orquesté herramientas específicas para cada etapa del desarrollo:

    • 📚 NotebookLM: Research profundo de la industria y creación de los copies.
    • 📐 Perplexity (Claude Sonnet 4.6 Y Gemini 3.1 pro): Diseño de la arquitectura y prompt engineering avanzado (usando el framework oficial de Vercel).
    • 💻 v0 (Vercel): Generación y refinamiento de código (Next.js, Tailwind, React).
    • 🎨 Gemini Nano Banana: Creación del collage visual para presentar el proyecto.

    👉 Vívelo en vivo aquí:

    🔥Si te gustó ¡deja tu voto/like! ⭐

    Pablo Junior Sierra Montaño

    Pablo Junior Sierra Montaño

    Estudiante
    Hace 5 meses

    PIXEL FEST 2026: PRESS START TO FESTIVAL 🍄🎮⭐

    Es una landing page que es un videojuego: mueves a Mario, saltas sobre bloques, recolectas monedas y desbloqueas el festival mientras juegas.

    • ¿Qué es? Un mundo 8-bit jugable donde cada sección del festival — lineup, horarios, tickets, ubicación — vive escondida detrás de una bandera que solo aparece si te mueves a explorarla, con física real, parallax de 3 capas y sprites dibujados píxel a píxel en Canvas.
    • ¿Por qué? Para demostrar que una landing page no tiene que ser leída, tiene que ser jugada; convirtiendo información de un festival en una experiencia de arcade que el usuario quiere terminar, no cerrar.
    • ¿Lo único? Cero scroll. Cero carruseles. Hay modo día y modo noche que cambian la atmósfera al instante, 3 personajes jugables, bloques ? con mensajes secretos del festival que explotan al golpearlos, una cuenta regresiva real al evento y frases gamers que rotan en el cielo cada 10 segundos. Todo funciona con teclado, mouse y pantalla táctil.

    PRESIONA START Y ÚNETE AL JUEGO 🕹️

    PDTA: Fue realizado con Claude Sonnet 4.6, los animo a revisar el código en mi repositorio y realizar sus mejoras, todo feedback y comentario es bienvenido :)

      Byron Agila

      Byron Agila

      Estudiante
      Hace 5 meses

      Me encanto se ve muy divertida!!

      Byron Agila

      Byron Agila

      Estudiante
      Hace 4 meses

      Este fue uno de los proyectos que mas me encantaron de todos!!!! tal ves por que conectan con mi nostalgia retro de los 90s pero estuvo muy chevere espero puedas seguir creando igual publicamente fuera y lo puedas utilizar como portafolio , lo unico que le falto es que sea compatible con movil tal ves por eso no cumplio bien con las regras del reto pero a mi encanto!!!

    Nora Azua

    Nora Azua

    Estudiante
    Hace 5 meses•editado

    Ruta del Sabor Manabita - Festival de comida típica

    Quise recrear un festival que se suele hacer en mi provincia en el que se celebra lo mejor de la gastronomía manabita: sabores auténticos, recetas ancestrales y la tradición de una de las cocinas más reconocidas del Ecuador. Un espacio donde la cultura, la identidad y el sabor se unen para mostrar al mundo la riqueza de Manabí.

    Si amas la buena comida, este festival es para ti.

    ¡ Te esperamos!

      Edwin Fabricio Guajala Cajiao

      Edwin Fabricio Guajala Cajiao

      Estudiante
      Hace 5 meses

      Rica comida en la provincia de Manabi, saludos desde Ambato.

      Maikel Andres Vinces Mendoza

      Maikel Andres Vinces Mendoza

      Estudiante
      Hace 5 meses

      Epa! Tambien esta muy cool! Saludos desde Manta!

    Cesar Andres Urrea Gutierrez

    Cesar Andres Urrea Gutierrez

    Estudiante
    Hace 5 meses

    ¡Les presento! Therian Summit by Platzi 🫨

    Un evento único en donde podrás ser lo que quieras ser con los mejores speakers del momento.

    No te lo pierdas (guiño guiño)

      Javier ivan Patiño Castrillon

      Javier ivan Patiño Castrillon

      Estudiante
      Hace 5 meses

      brutal ! felicitaciones buen landing

      Cesar Andres Urrea Gutierrez

      Cesar Andres Urrea Gutierrez

      Estudiante
      Hace 5 meses

      ¡Muchas gracias!

    Julián Andrés Ramírez Giraldo

    Julián Andrés Ramírez Giraldo

    Estudiante
    Hace 5 meses

    Back to the Woodstock- Tu Viaje en el Tiempo

    ¿Qué hice?

    Construí una landing page para un festival de "viaje en el tiempo" donde los usuarios pueden viajar a Woodstock 1969. Incluye una sección hero con pixel art animado del festival, un carrusel infinito de las leyendas que tocaron allí (con efecto glitch retro), la ubicación exacta de Max Yasgur's Farm con countdown, y un flujo de compra de tickets que simula enviar al usuario "a través del portal temporal" con animaciones de teletransporte.

    ¿Por qué?

    Woodstock fue más que un concierto, fue un momento que cambió la historia. La idea es hacer sentir a los usuarios que realmente están viajando en el tiempo, como si pudieran estar allí. La estética retro 16-bit con efectos CRT (glitch, scanlines) es el "código temporal" visual que mantiene viva esa atmósfera de 1969, pero con la fluidez y la experiencia que esperas de una web moderna.

    ¿Qué lo hace único?

    • Concepto de viaje temporal: No es solo un sitio sobre Woodstock, es la puerta para *estar* allí
    • Efectos glitch y CRT inmersivos: Cada interacción se siente como si estuvieras "buffeando" a través del tiempo
    • Animación de confirmación épica: Cuando compras un ticket, ves un portal giratorio y mensajes progresivos que confirman tu teletransportación
    • Pixel art cohesivo: Todo el diseño visual mantiene la estética retro sin sacrificar la modernidad
    • Responsivo y accesible: Funciona perfecto en cualquier dispositivo, como si el viaje temporal funcionara desde cualquier lado.
      Alexandra Salcedo

      Alexandra Salcedo

      Estudiante
      Hace 5 meses

      Muy interesante el concepto…

    Miguel Angel Otero Otero

    Miguel Angel Otero Otero

    Estudiante
    Hace 5 meses•editado

    Bienvenido a Gastrolab: Donde la Ciencia se Convierte en Arte

    es una plataforma digital de vanguardia diseñada para el Festival Internacional de Cocina Molecular, un evento de élite que reúne a los visionarios más influyentes del sector gastronómico.

    Gastrolab

    Esta página no es solo un punto de registro; es una inmersión sensorial. A través de una estética sofisticada en tonos vinotinto, negro y plata, la interfaz comunica la exclusividad y la precisión técnica que definen a la alta cocina moderna.

    ¿Qué ofrece esta página?

    • Acceso a los Maestros: Una presentación humana y profesional de las personalidades internacionales que liderarán las ponencias.
    • Experiencia Visual: El uso de fotografía de alta definición que captura la textura, el humo y la alquimia de los platos, eliminando la frialdad de la ciencia para resaltar la pasión del chef.
    • Conversión Fluida: Una estructura optimizada que guía al visitante desde el asombro inicial hasta la reserva de su plaza, garantizando una experiencia de usuario impecable.

    En Gastrolab, el futuro del sabor tiene rostro, técnica y, sobre todo, un diseño a la altura de los paladares más exigentes del mundo.

      Zaida Otero

      Zaida Otero

      Estudiante
      Hace 5 meses

      Muy interessante 👍

      Tiendashys

      Tiendashys

      Estudiante
      Hace 5 meses

      Muy buen diseño en la pagina.

    Diego Martinez

    Diego Martinez

    Estudiante
    Hace 5 meses•editado

    ANISON SOUNDWAVE 2026!!

    Demo:

    ¿Qué hice?

    Desarrollé Anison Soundwave, una landing page de venta de entradas diseñada específicamente para un festival de música de anime (Anison). El proyecto es de alto rendimiento, construida con un stack moderno que prioriza una interfaz inmersiva, un sistema de selección de tickets fluido y pensado como base de una arquitectura escalable lista para picos de tráfico de usuarios reales.

    ¿Por qué lo hice?

    Me gustan las canciones de anime, son inspiradores, pero no pude poner animes reales por temas de copyright. Quise crear un puente entre la funcionalidad transaccional y la experiencia de un evento temático, demostrando cómo el diseño centrado en el usuario y la optimización de procesos pueden convertir una simple compra en el primer paso de una experiencia memorable para los fans del género.

    ¿Qué lo hace único?

    • Diseño Temático Coherente: Una interfaz que respira la energía del J-Pop y los openings de anime, utilizando componentes visuales dinámicos.
    • Flujo de Usuario Optimizado: Un proceso de compra de "fricción cero", diseñado para ser intuitivo incluso en dispositivos móviles.
    • Considero escenario real donde hay más de un usuario comprando en línea, colocando en una cola de espera para no saturar las entradas.
    • Genera un còdigo QR ue muestra información registrada del evento.
    • Selección de asientos y reserva. (No lo asocié a una base de datos por temas de costos)
    • Visualización fluida en dispositivos móviles.
    Jennifer Lisandra García Orellana

    Jennifer Lisandra García Orellana

    Estudiante
    Hace 5 meses

    Hola comunidad de Platzi 👋

    Para este reto decidí crear algo diferente: una landing page para un evento futurista de tecnología llamado Quantum Nexus 2026.

    La idea fue simular cómo se vería la página de registro para una conferencia de innovación, inteligencia artificial y creadores del futuro.

    Todo el proyecto fue construido usando Vibe Coding con v0, generando la interfaz mediante prompts y luego refinando el diseño para lograr una experiencia moderna y funcional.

    💡 Qué incluye el proyecto

    Mi landing incluye:

    • Hero section con diseño futurista
    • Agenda del evento
    • Speakers invitados
    • Información del venue
    • Sistema de tickets con diferentes planes
    • Modal de registro para reservar lugar
    • Confirmación visual de registro
    • Diseño responsive (funciona en móvil y desktop)

    ✨ Qué intenté lograr

    Quise crear una experiencia que se sintiera como una landing real de una startup tecnológica, con una estructura clara que guíe al usuario desde descubrir el evento hasta reservar su lugar.

    🔗 Puedes probar el proyecto aquí

    👉 Aquí está el link para explorar la landing:

    Pega tu link aquí:

    Prueba presionar "Reserve Your Spot" para ver la experiencia completa del registro.

    🙌 Feedback

    Agradecería mucho sus comentarios o sugerencias para seguir mejorando.

    Si te gustó el proyecto ¡apóyalo con un ! ❤️🚀

    José Ángel Haro Juárez

    José Ángel Haro Juárez

    Estudiante
    Hace 5 meses•editado

    Hola, les comparto mi diseño para la landing page del World Card Tech Fest 2026 🏆⚽, un evento phygital en el Estadio Azteca que revoluciona el clásico intercambio de estampitas del Mundial.

    Prueba la experiencia y cambia de país en vivo aquí:

    La plataforma permite digitalizar tu álbum físico con una app y comprar accesos VIP (Gold, Plata, Bronce) que te garantizan cambiar cartas difíciles como Messi o Mbappé sin caos, todo mientras disfrutas en vivo de bandas como Zoé o Los Bunkers . Para darle el toque especial, armé una interfaz interactiva donde, al elegir la bandera de México, USA o Canadá 🇲🇽🇺🇸🇨🇦, toda la página cambia automáticamente de colores y temática para adaptarse al país anfitrión.

    ¿Qué hice? Armé el diseño y la experiencia (UI/UX) de la landing page para el World Card Tech Fest 2026. Básicamente, es la puerta de entrada a un festival masivo (híbrido: presencial en la explanada del Estadio Azteca y virtual) que lleva el clásico intercambio de estampitas del Mundial a otro nivel. La página no solo vende los accesos, sino que te sumerge en la temática, te presenta la App oficial para digitalizar tus cartas y te arma el plan con el lineup de bandas (Zoé, Fabulosos Cadillacs, Los Bunkers).

    ¿Por qué lo hice? Porque cambiar estampitas a veces es un caos y todos hemos sentido la frustración de buscar a ese jugador que te falta y no encontrarlo. La idea fue "gamificar" la experiencia y darle seguridad al coleccionista.

    • ¿Cómo? Con pases VIP (Gold, Plata o Bronce). Si compras el acceso Gold, tienes garantizado entrar a una zona donde todos traen cartas nivel Messi o Mbappé listas para cambiar.
    • El objetivo: Mezclar la fiebre futbolera con tecnología para asegurar que valga la pena ir, escuchar buena música y completar tu álbum.

    ¿Qué lo hace único? Principalmente dos cosas que rompen el molde:

    • La vibra cambia de país: Como es el primer Mundial en tres países, le metí una función interactiva. Tienes un selector con las banderas y, dependiendo si eliges México, USA o Canadá, toda la página cambia de colores. Es una interfaz que está viva y se adapta.
    • La magia "Phygital" (Físico + Digital): No se trata solo de vender boletos. La página te explica cómo la App usa tu cámara para escanear tus estampas y organizarlas en un álbum virtual, además de incluir un radar para ubicar a jugadores cercanos que quieran intercambio. Ese álbum en tu celular se convierte en tu llave de acceso para los intercambios en el evento físico. Es el mix perfecto entre la nostalgia de abrir un sobrecito y la tecnología de hoy.

    🔗 Link al proyecto:

    Byron Agila

    Byron Agila

    Estudiante
    Hace 5 meses

    Proyecto: DELPUCTAS.fest

    La landing page del afterparty VIP ficticio de Platzi Conf.

    ¿Qué hice?

    Diseñé y desarrollé una landing page responsive para un festival ficticio con estética cyber-hacker lounge y vibra de underground tech party. La experiencia incluye las secciones principales del evento, como agenda, ubicación y compra de tickets, además de un generador interactivo de pases VIP personalizables.

    Dentro del generador, cada usuario puede:

    • ingresar sus datos,
    • elegir su “clase” de desarrollador,
    • aplicar skins visuales temáticos,
    • y descargar su pase en alta resolución.

    ¿Por qué lo hice?

    Quise llevar la idea de una landing de evento más allá de una página informativa tradicional. En lugar de mostrar solo datos del festival, pensé en crear una experiencia más inmersiva y coleccionable, donde el usuario no solo visita la página, sino que también se lleva un objeto digital propio para compartir.

    ¿Qué lo hace único?

    Lo que hace único a Delpuctas Fest es la combinación entre diseño visual, interacción y personalización:

    • Un pase VIP con interacción reactiva al cursor, que busca transmitir una sensación premium y táctil.
    • Un sistema de skins inspirados en diferentes estéticas tech, como retro 80s, cyberpunk y matrix.
    • Exportación del pase como imagen en alta resolución, lista para compartir en redes.

    Además, toda la experiencia fue diseñada con una identidad visual muy marcada: oscura, tecnológica y pensada para una audiencia creativa y curiosa.

    Nota: Proyecto ficticio, no afiliado oficialmente a Platzi.

    Delpuctas_fest
    Delpuctas_fest
      Byron Agila

      Byron Agila

      Estudiante
      Hace 5 meses

      Sería delpuctas si me comparten su ID CArd favorita 🚀⚛️

      delpuctasfest_id
      Byron Agila

      Byron Agila

      Estudiante
      Hace 5 meses
      delpuctas_fest