Pikanté is a premium artisanal michelada mix brand made in Honduras. This documentation covers the complete source for the official landing page: a fast, cinematic static site built with Astro 6 and React 19, styled with custom OKLCH CSS variables and Tailwind CSS v4. Whether you’re setting up a local dev environment, understanding the component architecture, or customizing the brand content, you’ll find everything here.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Understand the project, its tech stack, and how everything fits together.
Quickstart
Clone the repo, install dependencies, and run the dev server in minutes.
Project Structure
Explore the directory layout, page entry point, and how sections are composed.
Components
Deep-dive into every Astro and React component powering the landing page.
What’s inside
The landing page is composed of independently-maintainable Astro components, each covering one section of the page. These include the full-viewport hero, product catalog, brand story blocks, preparation guide, lifestyle imagery, retail locator, FAQ accordion, and layout shells. A single React island (PrepVideo) handles the interactive video player, while the rest of the site is rendered at build time as static HTML.
Hero
Full-viewport header with autoplay video and brand stats.
Products
Interactive product catalog with size variant pills.
How To
Three-step preparation guide with animated step cards.
What Is Pikanté
Brand story section explaining the product and its origins.
Lifestyle
Full-bleed lifestyle photography grid showcasing the brand aesthetic.
Stores
Data-driven retail locator across Honduras cities.
FAQ
Accordion-style frequently asked questions section.
Prep Video
React island with an interactive video player for the preparation tutorial.
Nav & Footer
Sticky navigation bar and site footer layout components.
Guides
These guides walk you through the full development lifecycle — from first clone to production deployment — and cover how to tailor the site’s brand identity and content.Local Development
Set up your local environment and run the Astro dev server.
Deployment
Deploy to Vercel, Netlify, or Cloudflare Pages.
Customization
Adjust layout, colors, and site-wide configuration options.
Brand
Update logos, color tokens, and typography to match your brand.
Content
Edit copy, product data, store listings, and FAQ entries.
Quick orientation
Explore components
All page sections live in
src/components/. The entry point is src/pages/index.astro.