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.

Lifestyle.astro renders the Vida Pikanté section — a fullscreen cinematic image panel that uses a dark overlay, radial vignette, and floating pill-shaped tag chips to communicate the brand’s social lifestyle. It is mapped to the #vida anchor for in-page navigation.

​
Section anatomy

The component is built from three stacked layers inside a single <section id="vida">:
LayerElementPurpose
Background.life-bg + <Image>Full-bleed lifestyle photo
Gradient overlay.life-bg::afterDark top & bottom fades + radial vignette
Content.life-contentEyebrow label, headline, tag chips

​
Outer shell dimensions

.life {
  padding: 0;
  height: 84vh;
  min-height: 560px;
  position: relative;
  overflow: hidden;
}

​
Background image

.life-bg is position: absolute; inset: 0. The <Image> inside it fills the full area with a subtle saturation and brightness pass: 
.life-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05) brightness(0.5);
}

​
Double-layer gradient overlay

A pseudo-element on .life-bg creates the dark cinematic vignette without touching the <Image> element: 
.life-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.8)   0%,
      rgba(0,0,0,.45)  30%,
      rgba(0,0,0,.45)  60%,
      rgba(0,0,0,.95) 100%
    ),
    radial-gradient(
      50% 60% at 50% 50%,
      transparent 0%,
      rgba(0,0,0,.65) 100%
    );
}
The linear gradient darkens the very top (nav contrast) and the bottom (content legibility). The radial gradient adds an edge vignette that draws the eye to the center.

​
Content overlay

.life-content is centered absolutely over both the image and the gradient: 
.life-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
}
It contains, in order:
  1. Eyebrow label — <span class="eyebrow">05 / Vida PIKANTÉ</span>
  2. Headline — Anton-font <h2> with an italic <em> accent for the second line
  3. Tag chips — a .tags flex-wrap container of monospace <span> pills

​
Tag chips

The six lifestyle tags are plain <span> elements inside .tags: 
<div class="tags">
  <span>Rooftop</span>
  <span>Asados</span>
  <span>Elixir</span>
  <span>Amigos</span>
  <span>Después de la potra</span>
  <span>Party</span>
</div>
Each chip is styled as a frosted-glass pill: 
.life-content .tags span {
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.35);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
To add more tag chips, append additional <span> elements inside the .tags div. The flex-wrap layout accommodates any number of chips automatically — long phrases like “Después de la potra” already demonstrate graceful wrapping on narrow viewports.

​
Changing the background image

The image is imported at the top of the component frontmatter and passed as the src prop to Astro’s <Image>: 
---
import { Image } from 'astro:assets';
import LifestylePool from '../images/lifestyle-pool.webp';
---
To swap the photo:
1

Add your image

Place the new .webp (or .jpg/.avif) file in src/images/.
2

Update the import

Replace lifestyle-pool.webp with your filename:
import LifestylePool from '../images/your-new-photo.webp';
3

Update width and height

Set the width and height props on <Image> to match your file’s intrinsic dimensions so Astro can generate the correct srcset:
<Image src={LifestylePool} alt="PIKANTÉ en la fiesta" width={2813} height={1876} loading="lazy" />

​
Full component source

---
import { Image } from 'astro:assets';
import LifestylePool from '../images/lifestyle-pool.webp';
---

<section class="life reveal" id="vida">
  <div class="life-bg">
    <Image
      src={LifestylePool}
      alt="PIKANTÉ en la fiesta"
      width={2813}
      height={1876}
      loading="lazy"
    />
  </div>
  <div class="life-content">
    <span class="eyebrow">05 / Vida PIKANTÉ</span>
    <h2>PIKANTÉ no se toma.<br/><em>Se disfruta.</em></h2>
    <div class="tags">
      <span>Rooftop</span>
      <span>Asados</span>
      <span>Elixir</span>
      <span>Amigos</span>
      <span>Después de la potra</span>
      <span>Party</span>
    </div>
  </div>
</section>

Build docs developers (and LLMs) love

Get started for freeTalk to us