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.

Stores.astro renders the Dónde encontrarlo section — a data-driven retail locator that maps the cities array defined in the component frontmatter into styled city cards, then closes with a WhatsApp partner CTA. The section is anchored at id="proveedores" for in-page navigation.

​
Data model

All store data lives in the component’s frontmatter as a plain JavaScript array. Each entry in cities follows this shape: 
{
  city:     string,   // display city name
  dept:     string,   // Honduran department
  code:     string,   // 3-letter IATA-style code shown in card header
  featured: boolean,  // true → "Mayor distribución" badge, full-width at <1080px
  class:    string,   // CSS skin class (city-card--tegus | --gracias | --lepaera)
  places: [
    { name: string, type: string },
    ...
  ]
}
totalPlaces is derived at build time from the array: 
const totalPlaces = cities.reduce((n, c) => n + c.places.length, 0);
updatedDate is also computed at build time via new Date().toLocaleDateString('es-HN', { month: 'short', year: 'numeric' }). This means it reflects the date of the last Astro build, not today’s date at runtime. Remember to rebuild the site whenever you update store data so the timestamp stays current.

​
Current store locations

The three active cities and all of their locations as defined in the source: 
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',
    dept: 'Lempira',
    code: 'GRA',
    featured: true,
    class: 'city-card--gracias',
    places: [
      { name: 'Texaco Las Torres',        type: 'Estación' },
      { name: 'Supermercado Denisse',     type: 'Supermercado' },
      { name: 'Minisuper Yaqui',          type: 'Minisuper' },
      { name: 'Supermercado Sarahí',      type: 'Supermercado' },
      { name: 'Supermercado Mi Súper',    type: 'Supermercado' },
      { name: 'Market Punto Básico',      type: 'Market' },
      { name: 'Inversiones DAYSA',        type: 'Distribuidora' },
      { name: 'Restaurante Villa Alicia', type: 'Restaurante' },
    ],
  },
  {
    city: 'Lepaera',
    dept: 'Lempira',
    code: 'LPA',
    featured: false,
    class: 'city-card--lepaera',
    places: [
      { name: "Elena's Bakery", type: 'Repostería' },
    ],
  },
];
CityDeptCodeFeaturedLocations
TegucigalpaFrancisco MorazánTGUNo1
GraciasLempiraGRAYes8
LepaeraLempiraLPANo1

​
Per-city CSS skins

Each city card has a unique gradient skin applied through its class property:
ClassPalettePrimary Hue
.city-card--tegusDark redoklch(48% 0.20 15deg)
.city-card--graciasChile / deep crimsonoklch(56% 0.23 22deg) — var(--chile)
.city-card--lepaeraLime / acid greenoklch(76% 0.17 130deg) — var(--lime)
Each skin is defined as a pair of rules in global.css: one for the resting gradient + border, and one for the :hover glow. For example, Gracias: 
.city-card--gracias {
  background:
    radial-gradient(90% 110% at 100% 0%, oklch(56% 0.23 22deg / .16), transparent 55%),
    radial-gradient(50% 60% at 0% 100%, oklch(38% 0.14 22deg / .09), transparent 70%),
    linear-gradient(160deg, oklch(6% 0.028 22deg) 0%, oklch(4% 0.010 260deg) 100%);
  border-color: color-mix(in oklab, var(--chile) 28%, var(--line));
}
.city-card--gracias:hover {
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,.9),
    0 0 50px -20px color-mix(in oklab, var(--chile) 35%, transparent);
}

​
Featured card

Setting featured: true on a city object does two things:
  1. Appends the is-featured class to the <article>, which renders a “Mayor distribución” badge via a CSS ::before pseudo-element.
  2. At viewport widths below 1080 px, the featured card spans the full grid width (grid-column: 1 / -1).
The badge is pure CSS — no extra markup needed: 
.city-card.is-featured::before {
  content: "Mayor distribución";
  position: absolute;
  top: -1px;
  right: 24px;
  padding: 6px 12px 7px;
  background: var(--accent);
  color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}

​
Partner CTA

Below the city grid, a .stores-cta strip links directly to WhatsApp for prospective retail partners: 
<a
  class="btn btn-primary"
  href="https://wa.me/+50497864648"
  target="_blank"
  rel="noopener noreferrer"
>
  Contáctanos
</a>
The phone number +504 9786-4648 is the Pikanté business contact. Update it here if the number changes.

​
How to add a new city

1

Create a CSS skin

Add a new .city-card--yourcity rule in global.css following the same radial-gradient + linear-gradient + :hover box-shadow pattern used by the existing three skins.
2

Add the city object

Append a new entry to the cities array in Stores.astro:
{
  city: 'San Pedro Sula',
  dept: 'Cortés',
  code: 'SAP',
  featured: false,
  class: 'city-card--sap',
  places: [
    { name: 'Supermercado Ejemplo', type: 'Supermercado' },
  ],
},
3

Rebuild the site

Run astro build (or astro dev for preview). totalPlaces and updatedDate are recomputed automatically.

​
How to add a place to an existing city

Open Stores.astro, find the target city in the cities array, and push a { name, type } object into its places array: 
// Example: adding a new location to Tegucigalpa
places: [
  { name: 'Carnicería El Corte',  type: 'Carnicería' },
  { name: 'Supermercado Central', type: 'Supermercado' }, // ← new
],
The card header’s place count (city-count) and the global totalPlaces figure in the block header update automatically on next build.

Build docs developers (and LLMs) love

Get started for freeTalk to us