> ## Documentation Index
> Fetch the complete documentation index at: https://constanza101-borrissol-28.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Press page: media coverage grid and articles

> The /press page displays Borrissol media coverage including La Vanguardia and MataróTV, served in all 4 languages with localized copy.

The press page documents media coverage of Borrissol Espai Creatiu, presenting each piece of coverage as a structured card with the outlet's logo, a date label, a pull quote or embedded video, a caption, and a direct link to the original source. It gives visitors and potential partners a quick, credible signal of the studio's public profile. The page header uses an eyebrow + H1 pattern (`press.eyebrow` / `press.headline`) consistent with the design system used across all interior pages.

## Routes

The press page is served at four URLs, one per locale:

| Locale            | URL         |
| ----------------- | ----------- |
| Catalan (default) | `/press`    |
| Spanish           | `/es/press` |
| English           | `/en/press` |
| French            | `/fr/press` |

All four are statically pre-rendered. The page layout is identical across locales; only the surrounding copy (eyebrow, headline, card labels, CTA link text) is localised. The Catalan default route (`press.astro`) hardcodes `useTranslations('ca')`; the three non-default locale routes (`[lang]/press.astro`) call `useTranslations(lang)` with the locale from `getStaticPaths`.

## SEO metadata

In English (`en` locale):

| Key                      | Value                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| `page.press.title`       | `Press`                                                                                                                           |
| `page.press.description` | `Borrissol in the media: La Vanguardia, MataróTV and more recognition for the tufting and textile techniques workshop in Mataró.` |
| `press.eyebrow`          | `In the press`                                                                                                                    |
| `press.headline`         | `Borrissol in the media`                                                                                                          |

## Components

<CardGroup cols={2}>
  <Card title="PressGrid.astro" icon="layout-grid">
    Full two-column press card grid, rendered on the `/press` page. Each card contains the outlet logo, date label, quote or video embed, a caption paragraph, and a styled CTA link to the original coverage.
  </Card>

  <Card title="PressStrip.astro" icon="layout-panel-left">
    A condensed strip version of the press coverage used in the `PressStrip` section on the home page. It links through to `/press` for the full grid.
  </Card>
</CardGroup>

The press page imports `PressGrid.astro` directly. The home page imports `PressStrip.astro` separately — the two components are maintained independently.

## Press entries

Both components source their content from `src/i18n/ui.ts` translation keys. Below are the two live press entries.

### La Vanguardia

<Card title="La Vanguardia · 28 May 2026" icon="newspaper">
  **Label key:** `press.lavanguardia.label`

  **Pull quote (`press.lavanguardia.quote`):**

  > "En Innoemprèn me ayudaron muchísimo a enfocar el negocio desde la sostenibilidad. Localicé un proveedor de proximidad que fabrica lanas a base de toldos reciclados."
  > — Belén Vilanova

  *(English: "Innoemprèn helped me a lot to focus the business around sustainability. I found a local supplier that makes yarn from recycled awnings.")*

  **Caption (`press.lavanguardia.caption`):** On the TecnoCampus Innoemprèn programme and the selected projects, including Borrissol Espai Creatiu.

  **Link:** `https://www.lavanguardia.com/economia/innovacion/20260528/11549809/innoempren-impulso-transforma-ideas-empresas-sostenibles-brl.html`

  **CTA key:** `press.read-article` → "Read article →"
</Card>

### MataróTV — Art i Part

<Card title="MataróTV · Art i Part" icon="video">
  **Label key:** `press.matarotv.label`

  **Format:** Embedded YouTube video (16:9 aspect ratio iframe, `loading="lazy"`)

  **Video ID:** `2BAK8-bmz0s`

  **Embed URL:** `https://www.youtube.com/embed/2BAK8-bmz0s?si=Ol5yViPuthl0ly98`

  **Caption (`press.matarotv.caption`):** Interview with Belén Vilanova on the Art i Part program. Borrissol Espai Creatiu, textile techniques and the creative space in Mataró.

  **Link:** `https://www.youtube.com/watch?v=2BAK8-bmz0s`

  **CTA key:** `press.watch-interview` → "Watch interview →"
</Card>

## Card structure

Each press card in `PressGrid.astro` follows this layout:

```html theme={null}
<li class="card press-card">
  <!-- Header: logo + date label -->
  <div class="press-card-header">
    <img src="/images/press/[outlet].svg" alt="Outlet name" />
    <span class="press-card-label">{t('press.[outlet].label')}</span>
  </div>

  <!-- Body: quote (La Vanguardia) or video embed (MataróTV) -->
  <blockquote class="press-card-quote"> ... </blockquote>
  <!-- OR -->
  <div class="press-card-video-wrap"> <iframe ...> </div>

  <!-- Caption -->
  <p class="press-card-caption">{t('press.[outlet].caption')}</p>

  <!-- CTA -->
  <a href="[original-url]" class="press-card-cta">
    {t('press.read-article')} →
  </a>
</li>
```

Outlet logos are stored as SVGs in `public/images/press/`:

| Outlet        | File                | Dimensions                                                                                                  |
| ------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
| La Vanguardia | `la-vanguardia.svg` | `260 × 28`                                                                                                  |
| MataróTV      | `matarotv.svg`      | `208 × 42` (`.press-card-logo--lowercase` modifier adds extra height to visually match uppercase wordmarks) |

## Responsive layout

`PressGrid.astro` uses a two-column CSS Grid at desktop width:

```css theme={null}
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 840px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
}
```

At ≤840px the grid collapses to a single column, stacking the La Vanguardia card above the MataróTV card.

## Adding new press entries

<Note>
  The press cards are currently hardcoded in `PressGrid.astro` and `PressStrip.astro` — they are not driven by a CMS collection. To add a new coverage item:

  1. Add the outlet logo SVG to `public/images/press/`.
  2. Add translation keys (`press.[outlet].label`, `press.[outlet].quote` or video details, `press.[outlet].caption`) for all four locales in `src/i18n/ui.ts`.
  3. Add a new `<li class="card press-card">` block inside both `PressGrid.astro` and `PressStrip.astro`.
</Note>