Skip to main content

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.

Every visible section of the Pikanté landing page is a self-contained component file inside src/components/. Eleven of the twelve components are static Astro components; one — PrepVideo.jsx — is a React island that ships interactive JavaScript only when the user scrolls it into view.

​
Astro components vs. React islands

Astro components (.astro) are zero-JavaScript by default. Their script fence (---) runs at build time only; the output is pure, pre-rendered HTML. Any styling or micro-interactions in these components rely on vanilla <script> tags (inlined inline or hoisted by Astro) and CSS transitions rather than a JavaScript framework. PrepVideo.jsx is the exception. It is a React island — a small, self-contained React component that Astro drops into the otherwise static HTML. The client:visible directive tells Astro to defer hydration of this island until the element enters the viewport: 
<!-- Inside Hero.astro -->
<PrepVideo client:visible />
This means React itself is not downloaded or executed until the user scrolls to the Hero section. The rest of the page never loads React at all.
React 19 is used here purely as a hydration vehicle for the video player controls. If the video player were refactored to a plain <video> element with a vanilla <script>, the React and React-DOM dependencies could be dropped entirely.

​
Component reference

Nav.astro

Fixed top navigation bar. Renders the Pikanté logo, anchor links to the #sabores, #preparar, #vida, and #faq sections, and social icon links. Hides the link list on viewports narrower than 760 px. A scroll-spy IntersectionObserver (in index.astro) adds the .active class to the matching anchor as sections scroll into view.

Hero.astro

Above-the-fold section. Full-viewport height with a radial fire gradient background. Contains the main <h1>, a tagline, two CTA buttons, a three-stat metadata row, and the <PrepVideo client:visible /> island. The hero headline uses the .h-display and .stroke classes for the outlined letter treatment.

Marquee.astro

Animated brand-attribute ticker rendered as a full-bleed --fire-colored strip. A duplicated set of <span> elements scrolls horizontally via a CSS @keyframes scroll animation at a constant 20-second loop. No JavaScript involved.

Products.astro

Product catalog section (anchor #sabores). Displays a two-column grid of product cards, each with a product photo, name, price, spice-level chile indicators, and a variant-pill selector. The variant pills use a lightweight inline <script> to toggle the .active class on click.

HowTo.astro

Three-step preparation guide (anchor #preparar). Each step is a card with a full-bleed step photo, large outlined step number, a .mono-labeled category tag, heading, and descriptive paragraph. Cards hover-lift with a CSS transform.

WhatIs.astro

Four-feature brand explainer. Renders a bordered list of feature rows, each containing an outlined large numeral, an icon tile with a fire-gradient background, and a heading + body paragraph. Rows reveal a radial accent glow on hover via a CSS ::before pseudo-element.

Stores.astro

Retail locator section. Shows a city-grid of three city cards (Tegucigalpa, Gracias, Lepaera), each with its own gradient skin and a list of named retail locations. Below the city grid, a chip cloud lists smaller independent stores (tienditas). Ends with a partner-recruitment CTA strip.

Lifestyle.astro

Full-screen lifestyle image section (anchor #vida). Uses a fixed 84vh height with a background image, heavy vignette overlay gradients, a centered headline, and a tag cloud of lifestyle keywords. Zero JavaScript.

Faq.astro

Accordion FAQ. Each question is a <button> that toggles data-open="true" on the parent .faq-item via an inline <script>. The answer panel expands via a CSS max-height transition — no layout shift, no JavaScript animation library.

Footer.astro

Brand footer with a four-column grid: brand logo + tagline + social icons, two link columns (Product and Contact), and an email newsletter input. Below the grid, a massive outlined wordmark stretches the full footer width as a decorative typographic element.

PrepVideo.jsx

React island. Renders a 9:16 aspect-ratio video player card (/assets/prep-video.mp4) with custom play/pause and mute/unmute buttons. Hydrates only when the component enters the viewport (client:visible), keeping the initial page load React-free.

SocialProof.astro / Offer.astro

Both components are fully implemented but currently commented out in index.astro. SocialProof renders a stats bar and a three-column review grid. Offer renders a time-limited promotional card with a countdown. Re-enable either by uncommenting its import and element tag in index.astro.

​
Scroll-reveal system

Elements that should animate in as the user scrolls down carry the CSS class reveal. On page load, a small IntersectionObserver script in index.astro watches every .reveal element and adds the class in the moment it crosses a 12 % visibility threshold. The in class triggers a CSS transition that fades the element up from a 28 px downward offset. 
// Scroll reveal — src/pages/index.astro <script> block
const revealEls = document.querySelectorAll('.reveal');
const revealIO = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('in');
      revealIO.unobserve(e.target);
    }
  });
}, { threshold: 0.12 });
revealEls.forEach(el => revealIO.observe(el));
Once an element has been revealed, revealIO.unobserve(el) removes it from the observer so it is never re-triggered. The corresponding CSS lives in global.css: 
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
Users who have prefers-reduced-motion: reduce set in their OS will never see the translate animation — global.css includes a media query that resets both .reveal and .reveal.in to immediate, no-transition visibility.

​
Nav scroll-spy

A second IntersectionObserver in index.astro watches the four anchored sections and toggles the .active class on the matching nav link as each section crosses the middle of the viewport: 
// Nav scroll-spy — src/pages/index.astro <script> block
const sections  = ['sabores', 'preparar', 'vida', 'faq'];
const navLinks  = document.querySelectorAll('.nav-links a');
const sectionIO = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const id = e.target.id;
      navLinks.forEach(a => {
        a.classList.toggle('active', a.getAttribute('href') === `#${id}`);
      });
    }
  });
}, { rootMargin: '-40% 0px -55% 0px' });
sections.forEach(id => {
  const el = document.getElementById(id);
  if (el) sectionIO.observe(el);
});
The tight rootMargin (-40% 0px -55% 0px) means a section is only considered “active” when its top edge is within the middle 5 % band of the viewport, preventing flickering between adjacent sections.

Build docs developers (and LLMs) love

Get started for freeTalk to us