Pikanté is a premium artisanal michelada mix made in Honduras from four types of chile, real lime juice, tamarind, and natural spices — bottled in a 320 ml format and available in three heat levels: Suave, Medio, and Fuego. This repository is the brand’s official marketing landing page: a fully static site built to present the product, showcase available flavors, walk visitors through preparation, and drive conversions. It is not a web application — there are no API routes, user sessions, or server-rendered pages.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.
Tech stack
The project is built on Astro 6 with TypeScript (strict mode viaastro/tsconfigs/strict). React 19 is included exclusively as an Astro island integration (@astrojs/react) for components that require client-side interactivity — the rest of the page is zero-JS .astro components.
Styling uses Tailwind CSS v4 loaded as a Vite plugin (@tailwindcss/vite) rather than a PostCSS plugin, which means there is no tailwind.config.* file; configuration lives entirely in src/styles/global.css via @import "tailwindcss". All design tokens are expressed as OKLCH CSS custom properties — a perceptually uniform color space that keeps the fire/chile palette mathematically consistent across the entire palette.
Icons are served through @lucide/astro, keeping the bundle lean by importing only the SVG shapes actually used.
| Layer | Technology |
|---|---|
| Framework | Astro 6 with TypeScript (strict) |
| Interactive islands | React 19 via @astrojs/react |
| Styles | Tailwind CSS v4 (Vite plugin) + OKLCH design tokens |
| Icons | @lucide/astro |
| Fonts | Anton, Inter, JetBrains Mono via Google Fonts |
| Images | .webp assets, optimized at source |
| Minimum Node.js | 22.12.0 |
Page sections
The single-page layout (src/pages/index.astro) is composed of eight purpose-built .astro components plus navigation and footer:
| Component file | Section name | Purpose |
|---|---|---|
Hero.astro | Hero | Primary above-the-fold presentation with CTA and key product stats |
Marquee.astro | Marquee | Animated scrolling band of brand attribute tags |
Products.astro | Sabores | Product catalog — Original, Mango Habanero, and other variants |
HowTo.astro | Cómo preparar | Step-by-step visual guide to preparing the perfect michelada |
WhatIs.astro | Qué es | Ingredient breakdown, heat levels, and ease-of-preparation callouts |
Stores.astro | Dónde encontrarlo | Retail and online store locator |
Lifestyle.astro | Vida Pikanté | Lifestyle photo gallery showing the product in social context |
Faq.astro | FAQ | Frequently asked questions on the product, shipping, and storage |
Footer.astro | Footer | Social links, contact info, and legal notice |
Design philosophy
The visual identity follows a dark cinematic aesthetic — deep charcoal backgrounds expressed in OKLCH (hue 260 °, near-zero chroma) create a cool thermal opposition against the warm fire/chile accent palette (hue 22–35 °, high chroma). A persistent SVG film-grain overlay rendered viabody::after adds analog texture without any image asset overhead.
Typography is a three-family system: Anton (display, all-caps, tight leading) for headlines, Inter for body copy with ss01/cv11 feature flags enabled, and JetBrains Mono for tabular or code-like details. All families are loaded from Google Fonts.
The result is a site that reads as editorial and premium — closer to a film poster than a typical e-commerce page.
Where to go next
Quickstart
Clone the repo, install dependencies, and have the dev server running in under two minutes.
Project structure
Understand how components, pages, styles, and assets are organized inside
src/.