All work

Plant nursery shop

A redesign concept for a plant nursery and garden studio: a shop for its plants, its four trades from design to upkeep, and nothing on the page that research couldn’t verify.

Role
Research, design and front-end development
Status
Concept
Category
E-commerce redesign concept
Place and year
Morocco, 2026
Stack
React, TypeScript, Vite, Tailwind CSS, GSAP, Framer Motion, React Router
Links
A local prototype, not the nursery’s live site. The nursery’s name, logo, address and phone numbers are left out, and the source code isn’t public.
Plant nursery home page: “Nous plantons ce que nous cultivons.” over the canopy.
The anthurium product page on a phone.
every claim traced to its source

The story

  1. The challenge

    The nursery grows its own plants and designs, plants and maintains gardens. Its old website is offline, so the redesign had to start with research: what the business really says about itself, and how a site could sell its plants and explain its garden work.

  2. The approach

    Research first: every claim traces back to the business’s own words, and anything unverified stays off the page. Then an editorial shop in French, with arched photography, Zodiak and Switzer, and motion directed with GSAP: catalogue, product pages, a botanical index and a simulated checkout.

  3. The result

    A complete prototype to put in front of the owner, with every business detail in one file and the stock photography and empty project list clearly marked as placeholders.

The shop

  • A catalogue by category, with filters, search and sorting.
  • Product pages with care details: pot size, height, light and watering.
  • A cart drawer, a cart page and a simulated checkout that says plainly nothing is sent and no payment is taken.
  • A botanical index of every plant, grouped by use.
  • Favourites, and an account page that explains it isn’t built yet instead of pretending.

The studio

  • Four trades on the home page: design, build, upkeep and the nursery itself.
  • A services page for gardens, from villas and hotels to offices and shops.
  • Advice articles, a contact page with an OpenStreetMap map, and legal pages for terms, delivery and privacy.
  • Every business detail, from address to opening hours and payment, in a single data file.

Under the hood

real excerpts from the codebase

Every claim has a source

The business data records where each claim comes from, so the owner can see what was verified, what needs confirming and what is still unknown. The business’s names are redacted in this excerpt.

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',

An arch that opens without stuttering

The garden opens through an arch as you scroll. Animating a clip-path keeps it on the compositor, and giving both ends the same shape lets GSAP morph it instead of swapping it.

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)

Decisions

Research before design

The site may only say what the business says about itself. Sources and their reliability are written down, and anything unverified stays off the page.

Honest placeholders

The projects list is empty on purpose until real, client-approved work exists, so the home page shows the kinds of gardens instead of invented ones.

The owner’s mark, untouched

The prototype uses the owner’s own logo, with the drawing and colours unchanged. In these screenshots it’s replaced with a neutral wordmark.

Home page with the greenhouse hero.
Home
Introduction: “Du semis au jardin fini.”
From seedling to finished garden
Home page on a phone.
Home on a phone
Four trades, one team, in arched photographs.
Four trades, one team
Client typologies on a forest green band.
Who the gardens are for
The shop: trees, indoor and outdoor plants, cacti, flowers and pots.
The shop
Product grid with Latin names and prices.
Catalogue with filters, search and sorting
The shop on a phone.
The shop on a phone
Anthurium product page with care details.
Product page with care details
Cart drawer after adding a plant.
Added to the cart
A product page on a phone.
A product on a phone
Checkout marked as demo mode: nothing is sent and no payment is taken.
A checkout that says it’s a demo
Botanical index of the plants, grouped by use.
Botanical index
Garden services: “Dessiner, planter, faire durer.”
Garden design and upkeep
Contact page with a form; the phone numbers are masked.
Contact

Status

A redesign concept made to present to the owner. It isn’t the nursery’s live site and hasn’t been commissioned or approved. The nursery’s name, logo, address and phone numbers are left out of this case study. Photography and video are licensed stock from Unsplash and Pexels, chosen species by species to match the catalogue.