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

# Tufting landing page: formats, pricing & CourseSchema

> Documents the /tufting landing: four formats (Pelusa 78€, Floc 108€, Vellut 158€, Pelut 181€), group options, and JSON-LD implementation.

The tufting page is the flagship workshop landing for Borrissol Espai Creatiu. It introduces the technique — shooting yarn through a stretched fabric with a tufting gun to create plush rugs and tapestries — lists four individual booking formats at different sizes and price points, and routes group interest to the dedicated Pelussetes (social events) and Team Building (corporate) landing pages. It is the most SEO-critical page on the site, targeting the "taller tufting Barcelona / Mataró" intent across all four supported languages.

## Routes

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

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

The default-locale route lives at `src/pages/tufting.astro`; the other three variants are generated via the `src/pages/[lang]/tufting.astro` dynamic route using `getStaticPaths`.

## Page component

**`src/components/landings/TuftingLanding.astro`**

The component is composed from shared landing primitives:

* **`LandingHero`** — eyebrow, headline, lead copy, primary CTA button, hero image
* **`LandingSection`** — reusable titled content section (used for "What is tufting?" and the group formats band)
* **`Faq`** — native `<details>`/`<summary>` accordion, no JS, keyboard accessible
* **`CourseSchema`** — emits the `Course` + `AggregateOffer` JSON-LD block
* **`FinalCta`** — bottom-of-page WhatsApp booking CTA

The individual-formats band is **bespoke** (not wrapped in `LandingSection`) because it deliberately widens to `calc(var(--layout-max-width) * 1.3)` so the four price cards sit less cramped on a single row on desktop.

## SEO metadata

Resolved from `src/i18n/ui.ts` via the `LandingPage` layout:

| Key                    | English value                                                                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `page.tuf.title`       | `Tufting Workshop in Barcelona & Mataró · Individual & Group`                                                                                           |
| `page.tuf.description` | `Tufting workshop at Borrissol, Mataró: make your own rug with a tufting gun. Individual (from €78) or in a group for birthdays, events and companies.` |

## Individual formats

Four formats are defined as an inline array in `TuftingLanding.astro` — real values from the `i18n/ui.ts` catalog. All formats include materials and the instructor's guidance.

| Name       | Level        | Canvas size | Duration | Price |
| ---------- | ------------ | ----------- | -------- | ----- |
| **Pelusa** | Express      | 50×50 cm    | 4 hours  | 78€   |
| **Floc**   | Introductory | 50×50 cm    | 6 hours  | 108€  |
| **Vellut** | Intermediate | 70×70 cm    | 8 hours  | 158€  |
| **Pelut**  | Pro          | 80×80 cm    | 10 hours | 181€  |

Each format card renders a `<dl>` of specs (size, duration, price) and a WhatsApp CTA button with a pre-filled message. The i18n keys for those messages are:

```
wa.tufting.pelusa  →  "Hola! Me interesa el taller Pelusa (Tufting 50×50 cm, 78€)…"
wa.tufting.floc    →  "Hola! Me interesa el taller Floc (Tufting 50×50 cm, 108€)…"
wa.tufting.vellut  →  "Hola! Me interesa el taller Vellut (Tufting 70×70 cm, 158€)…"
wa.tufting.pelut   →  "Hola! Me interesa el taller Pelut (Tufting 80×80 cm, 181€)…"
```

<Note>
  The Pelusa and Floc formats share the same 50×50 cm canvas; the difference is time on the frame (4 h vs 6 h), which allows for a more refined design and finishing in Floc.
</Note>

## Group formats section

Below the individual formats the page renders a two-column grid linking to the two group-session products:

<CardGroup cols={2}>
  <Card title="Pelussetes" icon="party-popper" href="workshops/group-formats">
    Express group tufting for birthdays, hen parties, celebrations and events. Each person creates their own 50×50 cm tapestry. 2 hours · from 68€/person · min. 5 people.
  </Card>

  <Card title="Team Building" icon="building" href="workshops/team-building">
    The corporate version — a creative team activity where participants make a tufted wrist rest together. 2 hours · 68€/person · min. 5 people · materials included.
  </Card>
</CardGroup>

The CTA links are generated via `localizedPath(lang, '/pelussetes')` and `localizedPath(lang, '/team-building')` so they resolve to the correct locale prefix at build time.

## WhatsApp CTA

The primary hero CTA and the final-CTA section both use `waHref(t('wa.tuf.landing'))`, which encodes the landing's generic pre-filled message:

| Locale | Message                                                                                    |
| ------ | ------------------------------------------------------------------------------------------ |
| ES     | `¡Hola! Me interesa el taller de tufting. ¿Me podéis dar más información para reservar?`   |
| EN     | `Hi! I am interested in the tufting workshop. Could you give me more information to book?` |

## JSON-LD: CourseSchema

`<CourseSchema>` is rendered **outside** the `<article>` element at the bottom of the file. It emits a `Course` schema with an `AggregateOffer` covering the full individual price range:

```astro theme={null}
<CourseSchema
  name={t('tuf.headline')}
  description={t('page.tuf.description')}
  priceRange={{ low: '78', high: '181' }}
/>
```

This produces structured data with `lowPrice: 78`, `highPrice: 181`, `priceCurrency: EUR`, enabling Google's course rich results.

## FAQ

Three questions from the `tuf.faq.*` keys, rendered via the shared `<Faq>` component:

1. **Do I need prior experience?** — None; the instructor guides the whole process from handling the gun to the finishing.
2. **Do I take the piece home the same day?** — In individual format, yes during the session; drying time is confirmed at booking.
3. **What does the price include?** — All materials (fabric, yarn, use of the tufting gun) and instructor guidance.

## Responsive layout

| Breakpoint       | Formats grid | Group grid |
| ---------------- | ------------ | ---------- |
| > 1024 px        | 4 columns    | 2 columns  |
| 540 px – 1024 px | 2 columns    | 2 columns  |
| \< 900 px        | 2 columns    | 1 column   |
| \< 540 px        | 1 column     | 1 column   |
