CronoTerrario Landing Page
Landing page innovadora diseñada para promocionar un microecosistema estático único, creado a partir de la transformación de relojes obsoletos en terrarios decorativos, combinando sostenibilidad con diseño moderno.
El proyecto CronoTerrario Landing Page es una página de aterrizaje desarrollada durante un curso del SENA, cuyo objetivo principal es fomentar la compra de un producto ficticio e innovador: un microecosistema estático creado a partir de un reloj obsoleto. Este concepto transforma un objeto sin uso en una pieza decorativa única, capturando la atención del usuario desde el primer vistazo.
Contexto y Objetivo
Durante el desarrollo de un módulo práctico en el SENA, se planteó el reto de crear, de forma rápida y efectiva, una landing page capaz de vender un producto reinventado a partir de un artículo obsoleto. Los objetivos clave fueron:
- Reutilización Creativa: Transformar un reloj dañado en un elemento estético y funcional a nivel conceptual.
- Atracción del Usuario: Generar interés y curiosidad mediante animaciones y llamados a la acción claros.
- Validación de Concepto: Demostrar habilidad técnica y de diseño en un entorno de aprendizaje.
Tecnologías y Herramientas
| Componente | Tecnología / Herramienta | Propósito |
|---|---|---|
| Framework | Astro | Estructura y rendimiento de la página |
| Estilos | Tailwind CSS | Diseño visual y animaciones fluidas |
| Editor de Código | Windsurf (anteriormente Codeium) | Asistencia con inteligencia artificial |
| Despliegue | Vercel | Disponibilidad y pruebas de rendimiento |
Astro es un framework moderno que permite construir sitios web estáticos altamente optimizados, ideal para landing pages enfocadas en la conversión. Tailwind CSS facilita la creación de diseños responsivos y atractivos mediante clases de utilidad. Windsurf, anteriormente conocido como Codeium, es un editor de código potenciado por inteligencia artificial que mejora la productividad del desarrollador. Vercel proporciona un entorno de despliegue rápido y eficiente para aplicaciones web modernas.
Características Principales
- Vistas Estáticas Dinámicas: Aunque la página no cuenta con funcionalidades de backend, se han implementado animaciones y enlaces internos que mejoran la experiencia del usuario.
- Presentación del Producto: Sección que muestra el producto en diferentes tamaños (pequeño, mediano, grande) con precios en pesos colombianos.
- Formulario de Captura: Llamado a la acción mediante un formulario para registrar nombre y correo, encaminado a futuras campañas de email marketing.
- Tips y Recomendaciones: Bloques con sugerencias de uso, cuidado del producto y potenciales aplicaciones.
- Animaciones y Microinteracciones: Botones con efectos hover, transiciones suaves y desplazamientos que guían la navegación.
Estructura y Flujo de Navegación
- Hero Section: Presentación visual del microecosistema dentro del reloj con animación de partículas.
- Sección de Productos: Galería de tamaños con etiquetas de precio y descripción breve.
- Tips de Uso: Tres bloques informativos con iconografía y texto conciso.
- Formulario de Registro: Campos para nombre y correo, con botón destacado de envío.
- Footer: Información de contacto, enlaces a redes sociales y créditos de la herramienta Windsurf.
Valor Agregado y Aplicabilidad
- Versatilidad: La estructura de la landing page sirve como guía para cualquier producto o marca de e-commerce que desee elevar su presencia en línea.
- Rapidez de Despliegue: El uso de Astro y Tailwind permite iteraciones rápidas, ideal para validar MVPs.
- Diseño Enfocado en Conversión: Cada sección está pensada para guiar al usuario hacia el registro o la compra.
La CronoTerrario Landing Page ejemplifica cómo, mediante la combinación de tecnologías modernas y un diseño centrado en el usuario, es posible transformar un objeto obsoleto en una propuesta de valor atractiva. Este proyecto no solo demuestra habilidades técnicas y creativas, sino que también sienta las bases para escalar hacia una tienda en línea completa, adaptándose a las necesidades del mercado y ofreciendo una experiencia de compra única.