From c85b0da2f358113be8d1a7c80678afa634a112df Mon Sep 17 00:00:00 2001 From: Cedric Amram Date: Sun, 24 May 2026 00:27:48 -0400 Subject: [PATCH 1/2] feat(partenaires): nouvelle page /partenaires avec 5 partenaires MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Beauregard, Carrément Tarte, Madeleine, Lufa, Grenouille Rouge. Hero DIN animé + grille de cards liquid-glass, cohérente avec le design system existant. Co-Authored-By: Claude Sonnet 4.6 --- src/app/(frontend)/partenaires/page.tsx | 13 ++ src/frontend/pages/Partenaires.jsx | 271 ++++++++++++++++++++++++ 2 files changed, 284 insertions(+) create mode 100644 src/app/(frontend)/partenaires/page.tsx create mode 100644 src/frontend/pages/Partenaires.jsx diff --git a/src/app/(frontend)/partenaires/page.tsx b/src/app/(frontend)/partenaires/page.tsx new file mode 100644 index 00000000..94518377 --- /dev/null +++ b/src/app/(frontend)/partenaires/page.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import Partenaires from '@/frontend/pages/Partenaires' + +export const revalidate = 3600 + +export const metadata = { + title: 'Nos partenaires — La Brassée', + description: 'Les partenaires qui font de La Brassée un endroit unique à Rosemont.', +} + +export default function PartenairesPage() { + return +} diff --git a/src/frontend/pages/Partenaires.jsx b/src/frontend/pages/Partenaires.jsx new file mode 100644 index 00000000..3b03341a --- /dev/null +++ b/src/frontend/pages/Partenaires.jsx @@ -0,0 +1,271 @@ +'use client' + +import React from 'react' +import styled from 'styled-components' +import { motion } from 'framer-motion' + +const partenaires = [ + { + slug: 'beauregard', + nom: 'Microbrasserie Beauregard', + role: 'Bières artisanales', + description: + 'Brasserie indépendante de Rosemont qui élabore des bières de caractère en petites séries. On les retrouve à la pression à La Brassée.', + url: 'https://beauregard.beer', + logo: '/images/partenaires/beauregard.png', + }, + { + slug: 'carrement-tarte', + nom: 'Carrément Tarte', + role: 'Tartes artisanales', + description: + 'Tartes sucrées et salées faites à la main avec des ingrédients locaux. Elles trônent chaque semaine dans notre vitrine.', + url: 'https://carrement-tarte.com', + logo: '/images/partenaires/carrement-tarte.png', + }, + { + slug: 'madeleine', + nom: 'Pâtisserie Madeleine', + role: 'Pâtisseries & viennoiseries', + description: + 'Pâtisserie française de quartier dont les viennoiseries fraîches composent notre offre du matin.', + url: 'https://patisseriemadeleine.ca', + logo: '/images/partenaires/madeleine.png', + }, + { + slug: 'lufa', + nom: 'Fermes Lufa', + role: 'Agriculture urbaine', + description: + "Pionnières de l'agriculture sur toits à Montréal. Leurs légumes frais cueillis le jour même arrivent directement dans notre cuisine.", + url: 'https://lufa.com', + logo: '/images/partenaires/lufa.png', + }, + { + slug: 'grenouille-rouge', + nom: 'La Grenouille Rouge', + role: 'Partenaire culturel', + description: + 'Un espace culturel ancré dans Rosemont qui partage notre vision : des arts vivants accessibles, portés par la communauté.', + url: 'https://lagrenouillerouge.com', + logo: '/images/partenaires/grenouille-rouge.png', + }, +] + +/* ── Styled components ── */ + +const Page = styled.div` + width: 100%; + background: var(--color-dark); + min-height: 100vh; +` + +const Hero = styled.section` + width: 100%; + padding: 160px 5vw 80px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + position: relative; + overflow: hidden; +` + +const HeroLabel = styled(motion.span)` + font-family: var(--font-din-condensed); + font-size: 12px; + font-weight: 400; + letter-spacing: 4px; + text-transform: uppercase; + color: var(--color-brand); +` + +const HeroTitle = styled(motion.h1)` + font-family: var(--font-din); + font-size: clamp(56px, 10vw, 140px); + font-weight: 400; + line-height: 0.9; + color: var(--color-white); + text-transform: uppercase; + -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); + margin: 0; +` + +const HeroAccent = styled.span` + -webkit-text-stroke: 2px var(--color-brand); + color: transparent; +` + +const HeroDivider = styled(motion.div)` + width: 60px; + height: 3px; + background: var(--color-brand); + margin-top: 8px; +` + +const HeroLead = styled(motion.p)` + font-family: var(--font-acumin); + font-size: 18px; + font-weight: 300; + line-height: 1.7; + color: rgba(255, 255, 255, 0.6); + max-width: 520px; + margin: 0; +` + +const Grid = styled.section` + width: 100%; + padding: 0 5vw 120px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 2px; + + @media (max-width: 680px) { + grid-template-columns: 1fr; + } +` + +const Card = styled(motion.article)` + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(24px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.08); + padding: 44px 40px; + display: flex; + flex-direction: column; + gap: 20px; + transition: background 0.3s; + + &:hover { + background: rgba(255, 255, 255, 0.06); + } +` + +const CardRole = styled.span` + font-family: var(--font-din-condensed); + font-size: 11px; + font-weight: 400; + letter-spacing: 3px; + text-transform: uppercase; + color: var(--color-brand); +` + +const CardName = styled.h2` + font-family: var(--font-din); + font-size: clamp(22px, 3vw, 30px); + font-weight: 400; + text-transform: uppercase; + color: var(--color-white); + line-height: 1.1; + margin: 0; +` + +const CardDesc = styled.p` + font-family: var(--font-acumin); + font-size: 15px; + font-weight: 300; + line-height: 1.7; + color: rgba(255, 255, 255, 0.55); + margin: 0; + flex: 1; +` + +const CardLink = styled.a` + font-family: var(--font-din-condensed); + font-size: 11px; + font-weight: 400; + letter-spacing: 2.5px; + text-transform: uppercase; + color: var(--color-brand); + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: auto; + opacity: 0.7; + transition: opacity 0.2s; + + &:hover { + opacity: 1; + } + + &::after { + content: '→'; + font-size: 13px; + } +` + +/* ── Animation variants ── */ + +const fadeUp = { + hidden: { opacity: 0, y: 32 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: 'easeOut' } }, +} + +const stagger = { + hidden: {}, + visible: { transition: { staggerChildren: 0.1 } }, +} + +/* ── Component ── */ + +const Partenaires = () => { + return ( + + + + La Brassée · Rosemont + + + + NOS
+ PARTENAIRES + + + + + + Des gens du quartier, des producteurs locaux, des lieux qui partagent + nos valeurs. Ensemble on fait de La Brassée un endroit qui compte + vraiment à Rosemont. + + + + + {partenaires.map((p) => ( + + {p.role} + {p.nom} + {p.description} + + {p.url.replace(/^https?:\/\//, '')} + + + ))} + + + ) +} + +export default Partenaires From b598520d969447390fd9cc4c39427d91170193f7 Mon Sep 17 00:00:00 2001 From: Cedric Amram Date: Sun, 24 May 2026 00:30:54 -0400 Subject: [PATCH 2/2] feat(partenaires): ajouter JG Rive-Sud et Fermes Valens Co-Authored-By: Claude Sonnet 4.6 --- src/frontend/pages/Partenaires.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/frontend/pages/Partenaires.jsx b/src/frontend/pages/Partenaires.jsx index 3b03341a..0e2bfc3a 100644 --- a/src/frontend/pages/Partenaires.jsx +++ b/src/frontend/pages/Partenaires.jsx @@ -50,6 +50,24 @@ const partenaires = [ url: 'https://lagrenouillerouge.com', logo: '/images/partenaires/grenouille-rouge.png', }, + { + slug: 'jg-rive-sud', + nom: 'JG Rive-Sud', + role: 'Distribution alimentaire', + description: + 'Distributeur régional qui approvisionne La Brassée en produits frais et épicerie fine, avec une approche axée sur les producteurs d\'ici.', + url: 'https://jgrivesud.com', + logo: '/images/partenaires/jg-rive-sud.png', + }, + { + slug: 'fermes-valens', + nom: 'Fermes Valens', + role: 'Maraîchage local', + description: + 'Ferme maraîchère qui cultive des légumes de saison avec soin. Leurs récoltes composent une bonne partie de notre cuisine.', + url: 'https://fermesvalens.com', + logo: '/images/partenaires/fermes-valens.png', + }, ] /* ── Styled components ── */