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.
HowTo.astro is the Cómo se prepara section (id="preparar"), the second navigation anchor on the page. It presents three full-bleed photo cards arranged in a 3-column grid, each card walking the user through one step of the 15-second PIKANTÉ michelada preparation ritual. Cards animate in with staggered .reveal delays and lift on hover with an accent glow shadow.
Section anchor
<section class="how" id="preparar">
id="preparar" attribute is targeted by the “Preparar” nav link in the site’s top navigation bar.
Preparation steps at a glance
Escarcha el vaso
Chamoy al borde, escarchado con tajín.
Image: pikante_escarcha.webp
Hielo + PIKANTÉ + Cerveza
Hielo al tope, 100 ml del michemix PIKANTÉ, completa con tu cerveza favorita.
Image: pikante_hielo.webp
¡Disfruta de un elixirrr!
¡Y brinda por la buena vida!
Image: hero-fire.webp
Full component source
---
import { Image } from 'astro:assets';
import ProductLimes from '../images/pikante_escarcha.webp';
import PrepOverhead from '../images/pikante_hielo.webp';
import HeroFire from '../images/hero-fire.webp';
---
<section class="how" id="preparar">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">02 / Cómo se prepara</span>
<h2>Tres pasos.<br/><em>Cero pretexto.</em></h2>
</div>
<p>15 segundos son suficientes para que te prepares la mejor michelada Pikanté.</p>
</div>
<div class="steps">
<article class="step reveal">
<div class="step-photo">
<span class="num">01</span>
<Image src={ProductLimes} alt="Escarchar el vaso con limon y chile"
width={1024} height={1536} loading="lazy" />
</div>
<div class="step-body">
<span class="mono">Paso 01</span>
<h3>Escarcha el vaso</h3>
<p>Chamoy al borde, escarchado con tajín.</p>
</div>
</article>
<article class="step reveal" style="transition-delay:.08s">
<div class="step-photo">
<span class="num">02</span>
<Image src={PrepOverhead} alt="Agregar cerveza y PIKANTÉ"
width={1536} height={1024} loading="lazy" />
</div>
<div class="step-body">
<span class="mono">Paso 02</span>
<h3>Hielo + PIKANTÉ + Cerveza</h3>
<p>Hielo al tope, 100 ml del michemix PIKANTÉ y completa con tu cerveza favorita.</p>
</div>
</article>
<article class="step reveal" style="transition-delay:.16s">
<div class="step-photo">
<span class="num">03</span>
<Image src={HeroFire} alt="Disfrutar la michelada PIKANTÉ"
width={1024} height={1536} loading="lazy" />
</div>
<div class="step-body">
<span class="mono">Paso 03</span>
<h3>¡Disfruta de un elixirrr!</h3>
<p>¡Y brinda por la buena vida!</p>
</div>
</article>
</div>
</div>
</section>
Step card anatomy
Each <article class="step"> is composed of two child blocks:
.step-photo
A fixed-height (320px) cropped image container. It holds:
.num — an absolutely positioned large outlined number (01, 02, 03) in Anton font at 88px, rendered with transparent fill and a 1.5px white text-stroke. Lives in z-index: 2 above the gradient overlay.<Image /> — the Astro image component, sized to fill the container with object-fit: cover and an object-position: center 30% crop. Scales to 1.05× on hover via a CSS transition.::after pseudo-element — a linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65)) overlay that darkens only the bottom of the photo, providing contrast for the step body below.
.step-body
Contains:
.mono label — monospace eyebrow (“Paso 01”, “Paso 02”, “Paso 03”) in var(--lime).<h3> — step title in Anton, 32px, uppercase.<p> — description text in var(--text-2), 16px, justified.
CSS
/* Section background */
.how {
background:
linear-gradient(180deg, var(--carbon) 0%, var(--bg) 50%, var(--carbon) 100%);
}
/* 3-column grid, collapses to 1 column below 880px */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
/* Card */
.step {
background: linear-gradient(180deg, var(--char), var(--carbon));
border: 1px solid var(--line);
border-radius: var(--rad);
overflow: hidden;
transition: transform var(--t), border-color var(--t), box-shadow var(--t);
box-shadow: 0 20px 40px -30px rgba(0,0,0,.8);
}
.step:hover {
transform: translateY(-3px);
border-color: var(--line-2);
box-shadow: 0 30px 60px -25px rgba(0,0,0,.9),
0 0 50px -25px var(--accent-soft);
}
/* Photo container */
.step-photo {
height: 320px;
overflow: hidden;
position: relative;
background: var(--char);
}
.step-photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 30%;
transition: transform 1s ease;
}
.step:hover .step-photo img { transform: scale(1.05); }
/* Bottom gradient overlay */
.step-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65));
}
/* Large outlined step number */
.step-photo .num {
position: absolute; left: 26px; top: 22px; z-index: 2;
font-family: 'Anton', sans-serif; font-size: 88px; line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px var(--white);
text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
/* Body */
.step-body { padding: 28px 30px 34px; }
.step-body .mono { color: var(--lime); }
.step-body h3 {
font-family: 'Anton', sans-serif; font-size: 32px;
text-transform: uppercase; margin: 12px 0 12px;
letter-spacing: .005em; color: var(--paper);
}
.step-body p {
margin: 0; color: var(--text-2);
font-size: 16px; line-height: 1.6; text-align: justify;
}
Staggered reveal timing
Each card gets a progressively longer transition-delay so they animate in one after another as the section scrolls into view:
| Card | transition-delay |
|---|
| Step 01 | 0s (default) |
| Step 02 | 0.08s |
| Step 03 | 0.16s |
Changing step images
To swap a step photo, update the import at the top of the frontmatter fence and change the src prop on the corresponding <Image> component. For example, to replace the Paso 01 image:---
// Before
import ProductLimes from '../images/pikante_escarcha.webp';
// After
import MiNuevaFoto from '../images/nueva_escarcha.webp';
---
<!-- In the template: -->
<Image src={MiNuevaFoto} alt="Descripción accesible" width={1024} height={1536} loading="lazy" />
alt text for accessibility. The width and height props should match the actual pixel dimensions of your source file to avoid layout shift. 