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.
WhatIs.astro is the Qué es section (eyebrow: 03 / Qué es), a full-width list of four brand differentiators that communicate why PIKANTÉ stands apart. The section headline reads “Sirve. Mezcla. Disfrútala.” and the body copy positions the product as the mix that transforms any beer into a brutal michelada. Each differentiator row features a large transparent outlined number, a gradient icon badge, and a title/description pair, all wired with a hover glow that reveals from the left.
Section overview
The section renders against a subtle carbon-to-bg gradient background and uses the shared .section-head two-column header pattern. The four items live in a .what-list bordered list separated by 1px horizontal rules.
Four differentiators
| # | Title | Icon source | Description |
|---|
| 01 | Ingredientes de calidad | <Flame> from @lucide/astro | Seleccionados para que disfrutes la mejor experiencia. |
| 02 | Picante perfecto | Inline bottle SVG | Calibrado para que pique rico, no para que sufras. Dos niveles según tu temperatura. |
| 03 | Fácil de preparar | Inline lightning bolt SVG | Escarcha el vaso, hielo, agrega michemix PIKANTÉ y acompáñala con tu cerveza favorita. Listo. |
| 04 | Ideal para compartir entre amigos | Inline sparkle/star SVG | Que no te falten las micheladas PIKANTÉ en cada fiesta. |
Full component source
---
import { Flame } from '@lucide/astro';
---
<section class="what">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">03 / Qué es</span>
<h2>Sirve. Mezcla.<br/><em>Disfrútala.</em></h2>
</div>
<p>PIKANTÉ es el mix que transforma cualquier cerveza en una michelada brutal.</p>
</div>
<div class="what-list">
<div class="what-item reveal">
<span class="what-n">01</span>
<div class="what-icon">
<Flame width={24} height={24} fill="currentColor" />
</div>
<div class="what-content">
<h3>Ingredientes de calidad.</h3>
<p>Seleccionados para que disfrutes la mejor experiencia.</p>
</div>
</div>
<div class="what-item reveal" style="transition-delay:.05s">
<span class="what-n">02</span>
<div class="what-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 3h8l-1 4-2 13H11L9 7z"/>
<path d="M10 9h4"/>
</svg>
</div>
<div class="what-content">
<h3>Picante perfecto.</h3>
<p>Calibrado para que pique rico, no para que sufras. Dos niveles según tu temperatura.</p>
</div>
</div>
<div class="what-item reveal" style="transition-delay:.1s">
<span class="what-n">03</span>
<div class="what-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M13 2 4 14h6l-1 8 9-12h-6z"/>
</svg>
</div>
<div class="what-content">
<h3>Fácil de preparar.</h3>
<p>Escarcha el vaso, hielo para que refresque, agrega michemix PIKANTÉ
y acompáñala con tu cerveza favorita. Listo.</p>
</div>
</div>
<div class="what-item reveal" style="transition-delay:.15s">
<span class="what-n">04</span>
<div class="what-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 22l5-14 9 9z"/>
<path d="M14 4l2 2M18 2v3M21 7l-2 .5M14 11l3-3"/>
</svg>
</div>
<div class="what-content">
<h3>Ideal para compartir entre amigos.</h3>
<p>Que no te falten las micheladas PIKANTÉ en cada fiesta con tus amigos.
Para que disfrutes la mejor experiencia.</p>
</div>
</div>
</div>
</div>
</section>
CSS layout
.what-item — three-column grid
Each row uses a three-column grid to align the number, icon, and content at the same horizontal baseline:
.what-item {
display: grid;
grid-template-columns: 110px 56px 1fr; /* number / icon / content */
gap: 40px;
align-items: center;
padding: 36px 0;
border-bottom: 1px solid var(--line);
position: relative;
transition: background var(--t);
}
/* Mobile: number column disappears, icon + content side-by-side */
@media (max-width: 760px) {
.what-item {
grid-template-columns: 56px 1fr;
gap: 20px;
padding: 28px 0;
}
.what-icon { display: none; }
.what-n { font-size: 48px; }
}
.what-n — large outlined number
The number is rendered in transparent text with an accent-coloured stroke, giving a cinematic “ghost” aesthetic at rest:
.what-n {
font-family: 'Anton', sans-serif;
font-size: clamp(52px, 6vw, 84px);
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px var(--accent);
opacity: .55;
transition: opacity var(--t);
}
.what-item:hover .what-n { opacity: 1; }
.what-icon — 48×48 gradient badge
Each icon sits inside a 48px × 48px rounded container with an accent-to-dark-red gradient fill and a glowing drop shadow:
.what-icon {
width: 48px; height: 48px;
border-radius: 12px; flex: none;
background: linear-gradient(
140deg,
var(--accent),
color-mix(in oklab, var(--accent) 50%, #c1121f)
);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 28px -10px var(--accent-glow);
}
.what-icon svg { width: 22px; height: 22px; color: var(--ink-1); }
Hover glow — ::before pseudo-element
A radial gradient sweeps in from the left edge of each row when hovered, creating a warm glow that doesn’t affect layout:
.what-item::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(
60% 100% at 0% 50%,
color-mix(in oklab, var(--accent) 8%, transparent),
transparent 70%
);
opacity: 0;
transition: opacity var(--t);
}
.what-item:hover::before { opacity: 1; }
Staggered scroll reveal timing
Items animate in one after another as the section enters the viewport. The delay is set via an inline style attribute on each .what-item:
| Item | transition-delay |
|---|
| 01 — Ingredientes | 0s (default) |
| 02 — Picante perfecto | 0.05s |
| 03 — Fácil de preparar | 0.10s |
| 04 — Ideal para compartir | 0.15s |
Adding a new differentiator
To add a fifth differentiator, copy any existing .what-item block, then make the following changes:
Update the number
Change the .what-n span content to 05.
Replace the icon SVG
Swap the SVG (or Lucide component) inside .what-icon with your new icon. Keep the same width/height or use width={24} height={24} for Lucide icons. The container is always 22px via .what-icon svg.
Update the title and description
Edit the <h3> and <p> inside .what-content.
Set a new transition delay
Add style="transition-delay:.20s" to continue the stagger pattern:<div class="what-item reveal" style="transition-delay:.20s">
<div class="what-item reveal" style="transition-delay:.20s">
<span class="what-n">05</span>
<div class="what-icon">
<!-- Replace with your icon SVG or Lucide component -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 8v4l3 3"/>
</svg>
</div>
<div class="what-content">
<h3>Tu nuevo diferenciador.</h3>
<p>Descripción breve del beneficio o característica del producto.</p>
</div>
</div>
The .what-list border-top (border-top: 1px solid var(--line)) is applied to the parent container, and each .what-item carries border-bottom. You do not need to adjust any wrappers when adding or removing items — the borders will naturally extend the list.
