Boutique de pépinière
Un concept de refonte pour une pépinière et un atelier de jardins : une boutique pour ses plantes, ses quatre métiers de la conception à l’entretien, et rien sur la page que la recherche n’ait pu vérifier.
- Rôle
- Recherche, design et développement front-end
- Statut
- Concept
- Catégorie
- Concept de refonte e-commerce
- Lieu et année
- Maroc, 2026
- Technologies
- React, TypeScript, Vite, Tailwind CSS, GSAP, Framer Motion, React Router
- Liens
- Un prototype local, pas le site en ligne de la pépinière. Le nom, le logo, l’adresse et les numéros de téléphone de la pépinière sont masqués, et le code source n’est pas public.
L’histoire
Le défi
La pépinière cultive ses propres plantes, et conçoit, plante et entretient des jardins. Son ancien site est hors ligne : la refonte devait donc commencer par de la recherche, sur ce que l’entreprise dit vraiment d’elle-même et sur la façon dont un site pourrait vendre ses plantes et expliquer son travail au jardin.
L’approche
D’abord la recherche : chaque affirmation remonte aux propres mots de l’entreprise, et tout ce qui n’est pas vérifié reste hors de la page. Ensuite une boutique éditoriale en français, avec des photos en arche, Zodiak et Switzer, et des animations dirigées avec GSAP : catalogue, fiches produits, index botanique et paiement simulé.
Le résultat
Un prototype complet à présenter au propriétaire, avec toutes les informations de l’entreprise dans un seul fichier, et les photos libres comme la liste de réalisations vide clairement signalées comme provisoires.
La boutique
- Un catalogue par catégorie, avec filtres, recherche et tri.
- Des fiches produits avec conseils d’entretien : taille du pot, hauteur, lumière et arrosage.
- Un panneau panier, une page panier et un paiement simulé qui dit clairement que rien n’est envoyé et qu’aucun paiement n’est pris.
- Un index botanique de toutes les plantes, regroupées par usage.
- Des favoris, et une page compte qui explique qu’elle n’est pas encore construite au lieu de faire semblant.
L’atelier
- Quatre métiers sur la page d’accueil : conception, réalisation, entretien et la pépinière elle-même.
- Une page services pour les jardins, des villas et hôtels aux bureaux et commerces.
- Des articles de conseils, une page contact avec une carte OpenStreetMap, et des pages légales : conditions, livraison et confidentialité.
- Toutes les informations de l’entreprise, de l’adresse aux horaires et aux moyens de paiement, dans un seul fichier de données.
Sous le capot
de vrais extraits du codeChaque affirmation a sa source
Les données de l’entreprise indiquent d’où vient chaque affirmation, pour que le propriétaire voie ce qui est vérifié, ce qui reste à confirmer et ce qui est encore inconnu. Les noms de l’entreprise sont masqués dans cet extrait.
src/data/business.ts
/**
* Single source of truth for everything the owner may want to change.
*
* Provenance of every claim is documented in RESEARCH.md. In short:
* - VERIFIED = the company's own wording, recovered from indexed pages of
* the business's old website (no longer online).
* - PROVISIONAL = third-party directory data, to reconfirm.
* - PLACEHOLDER = unknown; the site says so rather than inventing it.
*/
export const business = {
name: '[business name]',
// VERIFIED — the nursery trades under this name in directories
nursery: '[nursery name]',
tagline: 'Conception, réalisation et entretien de jardins',Une arche qui s’ouvre sans à-coups
Le jardin s’ouvre à travers une arche au défilement. Animer un clip-path garde le travail côté compositeur, et donner la même forme aux deux extrémités permet à GSAP de la transformer au lieu de la remplacer.
src/components/ui/GardenReveal.tsx
/*
* The aperture is a clip-path, not animated insets. Insets move the
* layout on every frame; `inset(... round ...)` is composited, which
* is the difference between an arch that opens and an arch that
* stutters. Both ends carry four lengths and four radii so GSAP can
* interpolate the shape rather than swap it.
*/
tl.fromTo(
q('[data-frame]'),
{ clipPath: 'inset(13% 33% 13% 33% round 220px 220px 6px 6px)' },
{ clipPath: 'inset(0% 0% 0% 0% round 0px 0px 0px 0px)', duration: 1 },
0,
)
.fromTo(q('[data-media]'), { scale: 1.35 }, { scale: 1, duration: 1 }, 0)
.fromTo(q('[data-veil]'), { opacity: 0.1 }, { opacity: 0.46, duration: 1 }, 0)Choix
La recherche avant le design
Le site ne peut dire que ce que l’entreprise dit d’elle-même. Les sources et leur fiabilité sont notées, et tout ce qui n’est pas vérifié reste hors de la page.
Des contenus provisoires honnêtes
La liste de réalisations est vide exprès, jusqu’à ce que de vrais projets approuvés par les clients existent : la page d’accueil montre donc les types de jardins plutôt que des jardins inventés.
Le logo du propriétaire, intact
Le prototype utilise le logo du propriétaire, dessin et couleurs inchangés. Sur ces captures, il est remplacé par un logo neutre.
Statut
Un concept de refonte réalisé pour être présenté au propriétaire. Ce n’est pas le site en ligne de la pépinière, et il n’a été ni commandé ni approuvé. Le nom, le logo, l’adresse et les numéros de téléphone de la pépinière sont absents de cette étude de cas. Les photos et la vidéo sont des images libres d’Unsplash et Pexels, choisies espèce par espèce pour correspondre au catalogue.