Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/constanza101/borrissol/llms.txt

Use this file to discover all available pages before exploring further.

The home page is the primary conversion surface for Borrissol Espai Creatiu — a single-page landing assembled from ten sequential sections, each handled by its own Astro component. It is served in four languages at / (Catalan, the default locale), /es, /en, and /fr. Every language variant is a statically pre-rendered HTML file; no client-side routing is involved. All visible copy is resolved at build time through useTranslations(lang) — there are zero hardcoded strings in the component templates.

​
Section inventory

Each section lives in src/components/sections/ and receives translated strings via the shared t() helper. The ordering below matches the DOM order in index.astro.
SectionComponentPurpose
HeroHeroSection.astroH1 headline, SEO subtitle, full-bleed image with logo overlay and CTA
OfferOfferSection.astroWorkshop technique cards (Tufting, Needle Felting, Punch Needle, Weaving)
WorkshopsWorkshopsSection.astroTufting format pricing accordion + other workshop cards
ProcessProcessSection.astro5-step “zero to piece” visual flow
TestimonialsTestimonialsSection.astroGoogle Maps review carousel with arrow navigation
Press StripPressStrip.astroCondensed media coverage teaser linking to /press
AboutAboutSection.astroStudio founding story, founder video, recycled-yarn materials section
FAQFAQSection.astroNative <details>/<summary> accordion — zero JavaScript
CTACTASection.astroFinal WhatsApp booking call-to-action
FooterFooter.astroNavigation links, legal copy, social links
The DOM render order in index.astro places Workshops before Process — WorkshopsSection renders immediately after OfferSection, followed by ProcessSection. The table above reflects the actual render order.

​
H1 copy by language

The hero headline (hero.headline key in src/i18n/ui.ts) is the page H1. It is the same phrase translated into each locale:
LocaleURL prefixH1
Catalan (default)/Art que connecta
Spanish/esArte que conecta
English/enArt that connects
French/frL’art qui connecte
The hero also renders an SEO subtitle (hero.seo) — visible text beneath the H1 — and an image overlay (hero.overlay) positioned over the bottom-left of the full-bleed hero photograph.

​
Language routing

Catalan default

src/pages/index.astro — served at /. No URL prefix. getLangFromUrl() returns 'ca' for this root route.

ES / EN / FR

src/pages/[lang]/index.astro — a single dynamic route file that handles all three non-default locales via getStaticPaths, generating /es, /en, and /fr at build time.
The same pattern applies to /gallery and /press. The blog is Catalan-only and has no [lang] variant.

​
Anchor navigation

The top navbar links scroll to in-page sections using hash anchors. All section IDs are in English regardless of the active language, so the anchors are stable across locale switches: 
#offer        → OfferSection
#workshops    → WorkshopsSection
#process      → ProcessSection
#testimonials → TestimonialsSection
#about        → AboutSection
#faq          → FAQSection
#contact      → CTASection
The language switcher in the navbar preserves the current hash via client-side JS, so switching locale mid-page keeps the user at the same section.

​
Additional UX features

WhatsApp FAB

WhatsAppFab.astro — a fixed floating action button stacked with the scroll-to-top button. Pre-filled WhatsApp messages are localised per language via wa.general / wa.cta keys in ui.ts.

Cookie banner

CookieBanner.astro + PrivacySection.astro — implements Google Consent Mode v2 Advanced. GA4 loads cookieless by default; cookies are only granted after explicit accept. Consent state is persisted in localStorage.

Scroll-to-top

Fixed button stacked below the WhatsApp FAB. Appears after the user scrolls past the hero, implemented in vanilla JS with no framework dependency.

Scroll reveal

Layout.astro sets up an IntersectionObserver that adds a .is-visible class to elements with reveal or load-anim classes as they enter the viewport. Respects prefers-reduced-motion.

​
Structured data (JSON-LD)

Two JSON-LD schemas are injected by Seo.astro on the home page: 
// LocalBusiness schema (abridged)
{
  "@type": "LocalBusiness",
  "name": "Borrissol Espai Creatiu",
  "address": { "@type": "PostalAddress", "addressLocality": "Mataró" },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "5.0", "reviewCount": "27" },
  "openingHours": "...",
  "sameAs": ["https://instagram.com/...", "https://tiktok.com/..."]
}

// FAQPage schema — mirrors the FAQSection content
{
  "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "Do I need previous experience?", "acceptedAnswer": { ... } },
    ...
  ]
}
The FAQPage schema is kept in sync with the faq.q* / faq.a* translation keys. If you add a new FAQ item, update both ui.ts and the JSON-LD block in Seo.astro.

​
Component import order in index.astro

---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/layout/Navbar.astro';
import HeroSection from '../components/sections/HeroSection.astro';
import OfferSection from '../components/sections/OfferSection.astro';
import ProcessSection from '../components/sections/ProcessSection.astro';
import WorkshopsSection from '../components/sections/WorkshopsSection.astro';
import TestimonialsSection from '../components/sections/TestimonialsSection.astro';
import PressStrip from '../components/sections/PressStrip.astro';
import AboutSection from '../components/sections/AboutSection.astro';
import FAQSection from '../components/sections/FAQSection.astro';
import CTASection from '../components/sections/CTASection.astro';
import Footer from '../components/layout/Footer.astro';
import PrivacySection from '../components/sections/PrivacySection.astro';
---
PrivacySection is rendered outside <main> — it is a visually hidden accordion that surfaces inline privacy/cookie policy text for compliance, without a dedicated /privacy page.

​
Page-level background

The home page sets a global background override so the hero blends into the page chrome while inner sections revert to --color-white via their own component styles: 
<style is:global>
  body {
    background: var(--color-mid);
  }
</style>

Build docs developers (and LLMs) love

Get started for freeTalk to us