CronoTerrario Landing Page
Innovative landing page designed to promote a unique static micro-ecosystem created by transforming obsolete clocks into decorative terrariums, combining sustainability with modern design.
The CronoTerrario Landing Page project is a landing page developed during a SENA course, with the primary goal of driving sales for an innovative, fictional product: a static micro-ecosystem created from an obsolete clock. This concept turns an otherwise discarded object into a one-of-a-kind decorative piece, capturing the user’s attention at first glance.
Context and Objective
During a hands-on module at SENA, the challenge was to quickly and effectively build a landing page capable of selling a reinvented product made from an obsolete item. The key objectives were:
- Creative Upcycling: Transform a broken clock into an aesthetically pleasing and conceptually functional element.
- User Engagement: Spark interest and curiosity through animations and clear calls to action.
- Concept Validation: Demonstrate technical and design skills in a learning environment.
Technologies and Tools
| Component | Technology / Tool | Purpose |
|---|---|---|
| Framework | Astro | Page structure and performance |
| Styling | Tailwind CSS | Responsive design and smooth animations |
| Code Editor | Windsurf (formerly Codeium) | AI-powered coding assistance |
| Deployment | Vercel | Hosting, availability, and performance testing |
Astro is a modern framework for building highly optimized static sites—ideal for conversion-focused landing pages. Tailwind CSS enables rapid creation of responsive, attractive designs via utility classes. Windsurf, previously known as Codeium, is an AI-enhanced code editor that boosts developer productivity. Vercel offers a fast, efficient deployment environment for modern web apps.
Key Features
- Dynamic Static Views: Even without backend functionality, animations and internal links enhance the user experience.
- Product Showcase: Displays the product in small, medium, and large sizes, with prices listed in Colombian pesos.
- Lead Capture Form: A clear call to action with fields for name and email, primed for future email marketing campaigns.
- Tips & Recommendations: Informational blocks offering guidance on product use, care, and potential applications.
- Animations & Microinteractions: Hover effects, smooth transitions, and scroll-triggered movements guide navigation.
Structure & Navigation Flow
- Hero Section: Visual presentation of the clock-turned-terrarium with particle animations.
- Product Section: Gallery of size options with price tags and brief descriptions.
- Usage Tips: Three informational blocks featuring icons and concise text.
- Signup Form: Fields for name and email, plus a prominent submit button.
- Footer: Contact information, social media links, and Windsurf credits.
Added Value & Applicability
- Versatility: The landing page template can be adapted for any e-commerce product or brand looking to elevate its online presence.
- Speed of Deployment: Astro and Tailwind enable rapid iterations, perfect for MVP validation.
- Conversion-Focused Design: Every section is crafted to guide users toward signup or purchase.
The CronoTerrario Landing Page demonstrates how combining modern technologies with user-centered design can transform an obsolete object into a compelling value proposition. This project not only showcases technical and creative skills but also lays the groundwork for scaling into a full-fledged online store, meeting market needs and delivering a unique shopping experience.