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.

Hero.astro is the first thing every visitor sees: a full-viewport header that combines the brand headline, an animated eyebrow row, a primary CTA, three product-stat callouts, and the PrepVideo React island that loads a demo video only when the component enters the viewport.

​
Section structure

The component renders a <header class="hero"> that contains a single .container > .hero-inner grid. Inside the .reveal content div you’ll find, in order:
  1. Eyebrow row — a flex strip with an animated accent dot, the label “Mix para michelada”, a muted separator /, and “Producto 100% Hondureño”.
  2. <h1> display headline — “El Mejor Mix para tus Micheladas” with styled sub-spans (see Typography below).
  3. CTA button — an anchor styled as .btn.btn-primary pointing to #sabores with the label “Ver sabores” and an inline arrow SVG.
  4. Hero meta stats — three labelled statistics below a rule.
  5. PrepVideo React island — rendered immediately after the .reveal div with client:visible.
---
import PrepVideo from './PrepVideo';
---

<header class="hero">
  <div class="container hero-inner">
    <div class="reveal">
      <div class="hero-eyebrow-row">
        <span class="dot"></span>
        <span>Mix para michelada</span>
        <span style="color:var(--text-4)">/</span>
        <span>Producto 100% Hondureño</span>
      </div>
      <h1 class="h-display">
        El  Mejor<em class="flame-letter">Mix</em><br/>
        para tus <span class="stroke">Micheladas</span>.
      </h1>
      <div class="hero-ctas">
        <a class="btn btn-primary" href="#sabores">
          Ver sabores
          <span class="arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </span>
        </a>
      </div>
      <div class="hero-meta">
        <div><b>$</b><span>La más accesible del mercado</span></div>
        <div><b>15s</b><span>Prepárala en tiempo record</span></div>
        <div><b>HN</b><span>Hecho en Honduras</span></div>
      </div>
    </div>
    <PrepVideo client:visible />
  </div>
</header>

​
Hero meta stats

The .hero-meta div uses a 3-column auto grid separated from the content above by a 1px top border and 24px of padding. Each stat is a <div> with a bold Anton-font figure and a JetBrains Mono label below it.
FigureLabel
$La más accesible del mercado
15sPrepárala en tiempo record
HNHecho en Honduras

​
PrepVideo React island

PrepVideo is the only interactive island on this page. It is imported as a React component and mounted with Astro’s client:visible directive, which means the JavaScript bundle is fetched and the component hydrates only after the element scrolls into the viewport. This keeps the initial page weight low on above-the-fold paint. 
<PrepVideo client:visible />
Changing client:visible to client:load will hydrate PrepVideo immediately on page load — useful during development but adds JS to the critical path in production.

​
Typography

The .h-display class is defined globally and uses the Anton font with a fluid clamp size: 
.h-display {
  font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .86;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(64px, 11.5vw, 196px);
  margin: 0 0 24px;
}
Two decorative sub-spans live inside the <h1>:
  • .flame-letter — applied to the italic <em>Mix</em>. Sets color: var(--accent) (the fire orange) and font-style: italic. An optional text-shadow glow is present but commented out in source.
  • .stroke — applied to “Micheladas”. Produces hollow outlined text via -webkit-text-stroke: 1.5px var(--paper) with color: transparent.
.hero h1 .flame-letter {
  color: var(--accent);
  font-style: italic;
}

.hero h1 .stroke {
  -webkit-text-stroke: 1.5px var(--paper);
  color: transparent;
}

​
CSS: .hero layout

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 80px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 60%, var(--accent-soft), transparent 60%),
    radial-gradient(40% 40% at 15% 30%, rgba(255,30,30,.10), transparent 70%),
    var(--bg);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* initial declaration … */
  gap: 60px;
  align-items: end;
  min-height: calc(100vh - 200px);
  grid-template-columns: 1fr;          /* … overridden on the same rule */
  text-align: center;
  justify-items: center;
}
min-height: 100vh guarantees the section always fills the browser window. The radial gradient background layers a warm var(--accent-soft) glow at the lower-right and a subtle red at the upper-left over the base var(--bg) dark charcoal.

​
.reveal scroll animation

The .reveal class is placed on the content wrapper div. Elements start invisible and translated down; a scroll-observer script adds .in once they enter the viewport: 
.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);
}
For users who prefer reduced motion, the global stylesheet disables all .reveal transitions via @media (prefers-reduced-motion: reduce), setting opacity to 1 and transform to none immediately.

​
Responsive behaviour

Below 980 px the grid collapses to a single column and the optional hero photo (currently commented out) would reorder to appear above the text: 
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
  }
  .hero-photo { order: -1; }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us