Editing page content: text, products, FAQ, and stores

The Pikanté landing page is built with Astro 6 as a collection of single-responsibility components — each section of the page lives in its own .astro file under src/components/. As a content editor you can update virtually every piece of visible text, pricing, FAQ, and store data by editing those files directly; no framework knowledge is required beyond knowing which file controls which section. This guide walks through every editable area in the order it appears on the page.

Run npm run dev from the project root before editing to preview changes live at http://localhost:4321. Save any file to see the browser refresh instantly.

1. Page title and meta description

Location: src/pages/index.astro — inside the <head> block. These are the values that appear in browser tabs and search-engine results.

<title>PIKANTÉ — La michelada que prende todo</title>
<meta name="description" content="Mix premium de michelada. Sirve, mezcla y disfruta. Hecho en Honduras."/>

Edit the text inside the <title> tag and the content attribute of the <meta name="description"> tag to update them. Keep the description under 160 characters.

2. Hero headline and stats

Location: src/components/Hero.astro The Hero is the first full-viewport section visitors see. It contains the main <h1> headline and three supporting stats.

Main headline

<h1 class="h-display">
  El  Mejor<em class="flame-letter">Mix</em><br/>
  para tus <span class="stroke">Micheladas</span>.
</h1>

The <em class="flame-letter"> wrapper renders text in the fire-orange accent color. Apply it to any word that should glow.
The <span class="stroke"> wrapper renders hollow outlined text. Use it for a single high-impact word per headline.

Hero stats

The three stats sit in .hero-meta below the CTA button:

<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>

Each <div> is one stat. The <b> holds the large display value (Anton font, 30 px) and the <span> holds the small mono label beneath it. Keep <b> values short — one to three characters work best.

3. Product names, descriptions, and prices

Location: src/components/Products.astro Each flavor is an <article class="prod"> card. There are currently two live cards: Versión picante and Versión suave.

Price data attributes

Prices are stored as data-* attributes on the .price span so that the size-selector pills can swap them via JavaScript without a page reload:

<span class="price"
  data-v250="L 70 · 250ml"
  data-v570="L 150 · 570ml"
  data-v1l="L 260 · 1L">
  L 150 <span style="color:var(--text-4)">&middot; 570ml</span>
</span>

The format for each attribute value is L [amount] · [size], for example data-v570="L 150 · 570ml". Update all three attributes whenever pricing changes so every size pill shows the correct price.

Full card structure

<article class="prod reveal">
  <div class="prod-img">
    <span class="prod-tag hot">Más vendido</span>
    <Image src={ProductLimes} alt="PIKANTÉ Original" width={1024} height={1536} loading="lazy" />
  </div>
  <div class="prod-body">
    <span class="price" data-v250="L 70 · 250ml" data-v570="L 150 · 570ml" data-v1l="L 260 · 1L">
      L 150 <span style="color:var(--text-4)">&middot; 570ml</span>
    </span>
    <h3>Versión picante</h3>
    <p>La mas pedida por todos a base de clamato, picor intenso, limon y salsas especiales.</p>
    <div class="prod-variants">
      <button class="variant-pill" data-variant="v250">250ml</button>
      <button class="variant-pill active" data-variant="v570">570ml</button>
      <button class="variant-pill" data-variant="v1l">1 Litro</button>
    </div>
  </div>
</article>

To add a new flavor, copy the entire <article class="prod reveal"> block, paste it after the last </article>, and update the src, alt, <h3>, <p>, and data-v* attributes. Import the new image at the top of the frontmatter section first.

4. Preparation steps

Location: src/components/HowTo.astro The three preparation steps sit inside .steps. Each step is an <article class="step reveal">:

<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>

The three current steps are:

Step	`<h3>`	`<p>`
01	Escarcha el vaso	Chamoy al borde, escarchado con tajín.
02	Hielo + PIKANTÉ + Cerveza	Hielo al tope, 100 ml del michemix PIKANTÉ y completa con tu cerveza favorita.
03	¡Disfruta de un elixirrr!	¡Y brinda por la buena vida!

Edit the <h3> and <p> text inside each .step-body to update the step copy. To change the step photo, swap the src import at the top of the frontmatter and update the alt text accordingly.

5. WhatIs features

Location: src/components/WhatIs.astro The “Qué es” section lists four brand pillars as .what-item rows. Each row follows this structure:

<div class="what-item reveal">
  <span class="what-n">01</span>
  <div class="what-icon"><!-- SVG icon --></div>
  <div class="what-content">
    <h3>Ingredientes de calidad.</h3>
    <p>Seleccionados para que disfrutes la mejor experiencia.</p>
  </div>
</div>

The four current items are:

#	`<h3>`	`<p>`
01	Ingredientes de calidad.	Seleccionados para que disfrutes la mejor experiencia.
02	Picante perfecto.	Calibrado para que pique rico, no para que sufras. Dos niveles según tu temperatura.
03	Fácil de preparar.	Escarcha el vaso, hielo para que refresque, agrega michemix PIKANTÉ y acompáñala con tu cerveza favorita. Listo.
04	Ideal para compartir entre amigos.	Que no te falten las micheladas PIKANTÉ en cada fiesta con tus amigos. Para que disfrutes la mejor experiencia.

Edit the <h3> and <p> inside .what-content for each item. The number (<span class="what-n">) and icon (<div class="what-icon">) are decorative and rarely need updating.

6. FAQ questions and answers

Location: src/components/Faq.astro Each FAQ entry is a .faq-item containing a toggle button (.faq-q) and a collapsible answer panel (.faq-a-inner).

Current Q&As

Question	Answer
¿Con qué cerveza se sirve?	PIKANTÉ está diseñada para que la disfrutes con tu cerveza favorita. Si la cerveza está fría, la michelada está lista.
¿Qué tan picante es?	La versión Suave no pica mucho (1/5); la versión Picante pica rico (3/5). Todas están calibradas para que las disfrutes, no para que sufras.
¿Tiene alcohol?	No. PIKANTÉ es el mix — tú le pones la cerveza. La botella sola es 0% alcohol. Así que también funciona para que disfrutes tus chamoyadas o cualquier cóctel de tu preferencia.
¿Cuánto dura?	Refrigerada hasta 4 meses. Abierta 30 días bajo refrigeración.
¿Hacen envíos?	A los 18 departamentos de Honduras. Entregas a domicilio en 24-48 horas posteriores a tu pedido.

Editing an existing answer

Find the .faq-a-inner div of the relevant item and update the text directly:

<div class="faq-a-inner">
  Refrigerada hasta 4 meses. Abierta 30 días bajo refrigeración.
</div>

Adding a new FAQ item

Copy and paste the following block inside .faq-list, after the last </div>:

<div class="faq-item">
  <button class="faq-q">
    <span>¿Tu nueva pregunta aquí?</span>
    <span class="plus"></span>
  </button>
  <div class="faq-a">
    <div class="faq-a-inner">
      Tu respuesta aquí. Puede tener varias oraciones.
    </div>
  </div>
</div>

The first item in the list uses data-open="true" and aria-expanded="true" on its button to appear open by default. Only one item should carry data-open="true" at a time.

7. Store locations

Location: src/components/Stores.astro Store data lives entirely in the cities array at the top of the component’s frontmatter — no HTML editing is required to add a location.

Data structure

---
const cities = [
  {
    city: 'Tegucigalpa',
    dept: 'Francisco Morazán',
    code: 'TGU',
    featured: false,
    class: 'city-card--tegus',
    places: [
      { name: 'Carnicería El Corte', type: 'Carnicería' },
    ],
  },
  {
    city: 'Gracias',
    class: 'city-card--gracias',
    dept: 'Lempira',
    code: 'GRA',
    featured: true,
    places: [
      { name: 'Texaco Las Torres',        type: 'Estación' },
      { name: 'Supermercado Denisse',     type: 'Supermercado' },
      { name: 'Minisuper Yaqui',          type: 'Minisuper' },
      // ...more places
    ],
  },
  // ...more cities
];
---

Adding a place to an existing city

Find the city object and append a new object to its places array:

{ name: 'Nombre del local', type: 'Tipo de negocio' }

Common type values used in the codebase: Estación, Supermercado, Minisuper, Restaurante, Distribuidora, Market, Repostería, Carnicería.

Adding a new city

Add a new object to the cities array. Use one of the three pre-defined CSS skin classes (city-card--tegus, city-card--gracias, city-card--lepaera) or leave the class field as an empty string to get the default card style:

{
  city: 'San Pedro Sula',
  dept: 'Cortés',
  code: 'SPS',
  featured: false,
  class: 'city-card--tegus',   // reuse an existing skin
  places: [
    { name: 'Tu primer local', type: 'Supermercado' },
  ],
},

Set featured: true on a city to badge it with “Mayor distribución” and apply the highlight gradient border. Only one city should be featured at a time.

The total point count displayed in the section header ({totalPlaces} puntos activos) is computed automatically from the cities array — you never need to update it manually.

Social links appear in two separate components and must be updated in both places to stay in sync.

<div class="nav-socials">
  <a href="https://www.instagram.com/pikantehn?igsh=bnczZDhkMzZnNWxm&utm_source=qr"
     aria-label="Instagram" target="_blank" rel="noopener noreferrer">
    <!-- Instagram SVG -->
  </a>
  <a href="https://www.tiktok.com/@pikantehn?_r=1&_t=ZS-96VGsdTFTAz"
     aria-label="TikTok" target="_blank" rel="noopener noreferrer">
    <!-- TikTok SVG -->
  </a>
  <a href="https://wa.me/+50497864648"
     aria-label="WhatsApp" target="_blank" rel="noopener noreferrer">
    <!-- WhatsApp SVG -->
  </a>
</div>

The same three links appear inside .foot-brand .socials with identical href values.

Current canonical links

Platform	URL
Instagram	`https://www.instagram.com/pikantehn?igsh=bnczZDhkMzZnNWxm&utm_source=qr`
TikTok	`https://www.tiktok.com/@pikantehn?_r=1&_t=ZS-96VGsdTFTAz`
WhatsApp	`https://wa.me/+50497864648`

To update a link, change the href attribute on the <a> tag in both Nav.astro and Footer.astro.

Do not remove target="_blank" rel="noopener noreferrer" from social links — these attributes are required for safe external link behavior.

9. Footer copyright and distributor text

Location: src/components/Footer.astro — the .foot-bot div at the bottom of the footer.

<div class="foot-bot">
  <span>&#169; 2026 PIKANTÉ HN · Todos los derechos reservados</span>
  <span>Elaborado y distribuido por Grupo Futura · Hecho en Honduras</span>
</div>

There are two <span> elements:

Left span — copyright line. Update the year (2026) when the calendar rolls over.
Right span — legal distributor attribution. Update if the manufacturing or distribution partner changes.

Development

Brand

Editing page content: text, products, FAQ, and stores

1. Page title and meta description

2. Hero headline and stats

Main headline

Hero stats

3. Product names, descriptions, and prices

Price data attributes

Full card structure

4. Preparation steps

5. WhatIs features

6. FAQ questions and answers

Current Q&As

Editing an existing answer

Adding a new FAQ item

7. Store locations

Data structure

Adding a place to an existing city

Adding a new city

Current canonical links

9. Footer copyright and distributor text

Build docs developers (and LLMs) love

Development

Brand

Documentation Index

​1. Page title and meta description

​2. Hero headline and stats

​Main headline

​Hero stats

​3. Product names, descriptions, and prices

​Price data attributes

​Full card structure

​4. Preparation steps

​5. WhatIs features

​6. FAQ questions and answers

​Current Q&As

​Editing an existing answer

​Adding a new FAQ item

​7. Store locations

​Data structure

​Adding a place to an existing city

​Adding a new city

​8. Social links

​Nav social links — src/components/Nav.astro

​Footer social links — src/components/Footer.astro

​Current canonical links

​9. Footer copyright and distributor text

Build docs developers (and LLMs) love

1. Page title and meta description

2. Hero headline and stats

Main headline

Hero stats

3. Product names, descriptions, and prices

Price data attributes

Full card structure

4. Preparation steps

5. WhatIs features

6. FAQ questions and answers

Current Q&As

Editing an existing answer

Adding a new FAQ item

7. Store locations

Data structure

Adding a place to an existing city

Adding a new city

8. Social links

Nav social links — `src/components/Nav.astro`

Footer social links — `src/components/Footer.astro`

Current canonical links

9. Footer copyright and distributor text