Feat/design system setup

[jduigoudev]

Objectif

Mettre en place le socle du design system du site BreizhCamp et poser les
premiers composants réutilisables (layout + UI de base).

Cette PR :

• crée une page /design-system pour documenter / prévisualiser les composants
• introduit les premiers composants du design system (boutons, badges, cartes, etc.)
• met en place le nouveau header/footer utilisables sur les futures pages

---

Détails des changements

Layout

• Header

  • Nouveau composant Header.svelte
  • Logo cliquable vers la home
  • Navigation non encore liée à des ancres/sections (texte simple pour l’instant)
  • Styles responsive (stack en colonne sur petits écrans)

• Footer

  • Nouveau composant Footer.svelte
  • Tagline + liens vers les réseaux sociaux
  • Navigation “texte uniquement” pour l’instant (pas encore de vraies pages/ancres)
  • Liste des éditions précédentes affichée en texte (sans liens)
  • Badge “EcoIndex A”

Composants UI

• Button (src/lib/components/ui/Button.svelte)

  • Variants : primary, secondary, tertiary, icon-primary, icon-secondary, link
  • Supporte fullWidth
  • API typée : type: 'button' | 'reset' | 'submit', href?: string
  • Rend un <a> si href est fourni, sinon un <button>

• Badge (src/lib/components/ui/Badge.svelte)

  • Différentes couleurs (yellow/grey/orange/pink…) pour illustrer les statuts
  • Taille normale + variante small

• Card (src/lib/components/ui/Card.svelte)

  • Conteneur générique avec prop d’alignement (align="left" | "center")
  • Utilisé dans la page design system pour :
    • une carte “speaker”
    • une carte “session” (titre, durée, speaker…)

• Logo (src/lib/components/ui/Logo.svelte)

  • Composant Svelte pour le logo
  • Props : width, color
  • Nettoyage du code et suppression des props inutilisées

Page /design-system

• Nouvelle route src/routes/design-system/+page.svelte
• Contenu de démo pour le design system :
  • Palette de couleurs
    • Couleurs de marque (violet, jaune-vert, orange, noir)
    • Palette neutre neutral-50 → neutral-900
  • Typographie
    • Exemples de styles pour titres (H1–H3)
    • Exemples de texte de corps (text-large, text-base)
  • Boutons
    • Aperçu de tous les variants (primaires, secondaires, tertiaires, icônes, liens)
  • Cartes
    • Carte speaker
    • Carte session
  • Formulaire
    • Stack de formulaire avec champs email, etc.
    • Styles d’inputs et focus state accessibles

Tech / qualité

• Correction des erreurs de prerender SvelteKit :
  • Suppression des liens vers des routes/ancres inexistantes (/#accueil, /2024, etc.)
  • Tous les liens internes du design system pointent soit vers des pages existantes soit sont transformés en texte
• Nettoyage des warnings Svelte / svelte-check :
  • suppression du bloc CSS clea résiduel
  • suppression des règles CSS vides
  • typage correct du bouton (prop type et variants)

Issues liées

Cette PR adresse et peut clore les issues suivantes :

• Closes Implémenter le footer #14 – Implémenter le footer
• Closes Implémenter le header #13 – Implémenter le header
• Closes Implémenter un composant Card #11 – Implémenter un composant Card
• Closes Implémenter le style des inputs #10 – Implémenter le style des inputs
• Closes implémenter un composant bouton #9 – Implémenter un composant bouton
• Closes Implémenter les styles de texte #8 – Implémenter les styles de texte
• Closes Implémenter le style des titres #7 – Implémenter le style des titres