15 · Web design
Souss Droguerie
Bâtissez avec les meilleurs matériaux.
Art direction · Design system · Web design & development · E-commerce build · Motion design · Responsive engineering
The intent
Indigo, ink and crimson on white, a builder's merchant that means business.
Souss Droguerie is a twenty-year-old building-materials house in Agadir: carrelage, marbre, peinture, ciment, plâtre, électricité, plomberie and quincaillerie, delivered fast across the Souss. The brief was a shop that feels like a builder's merchant — competent, quick, and honest about stock.
The palette answers the trade: deep indigo for the brand and CTAs, near-black ink for hero and footer, white and cool lavender surfaces for the shop, and a single crimson reserved for every action. Fraunces sets the headings in uppercase like painted signage, Inter carries the catalogue, and IBM Plex Mono handles prices and specs.
A hero running real footage of the yard leads into eight category cards, best-sellers, and a partner marquee of LAFARGE, Holcim, Schneider, Legrand, Grohe and KNAUF. A devis banner and a floating WhatsApp button complete a funnel aimed at one outcome: a phone call within 24 hours.
- Client
- Souss Droguerie
- Year
- 2026
- Discipline
- Web design
- Stack
- React 19 · TanStack Start · Vite · Tailwind v4 · Lucide · Supabase · Vercel
Live build
Desktop & mobile
Both frames below are the real deployed site, running live. Scroll inside them.
- 01
Desktop runs the full-width hero video, a four-up category grid and the 10-second partner marquee.
- 02
Tablet drops the categories to two-up and collapses the utility bar into the header.
- 03
Mobile swaps nav for a hamburger, speeds the marquee to 4s, and pins the WhatsApp FAB into the bottom safe area.
Design system
Palette & type
Paper
#FFFFFF
Page ground
Ink
#30313D
Type / hero / footer
Brand
#2F378D
Primary / CTAs
Brand secondary
#202560
Deep brand shade
Cream
#F3F3F8
Alt section ground
Mint
#DDDFEC
Secondary surfaces
Sky
#8E93C3
Eyebrows on dark
Accent red
#B8001F
Action only
WhatsApp
#25D366
Contact FAB
- DisplayFrauncesUppercase serif headings with tight leading, like painted merchant signage over the yard.
- BodyInterThe catalogue workhorse for categories, products and nav, bold and wide-tracked on buttons.
- DataIBM Plex MonoMono accents for prices, references and specifications — the parts of the page a buyer reads like an invoice.
Motion
How it moves
- 01
Preloader stamp
A paper preloader with the logo scales in from 0.6 under a pinging red frame, so the store declares itself before a single tile renders.
- 02
Ken Burns hero
Real footage of the yard drifts from scale 1.08 down to rest under a left-to-right ink gradient, keeping the headline legible over the video.
- 03
Partner marquee
An infinite LAFARGE-to-KNAUF logo strip runs at 4s on mobile and 10s on desktop, grayscale until hover, paused under the cursor.
- 04
Hide-on-scroll header
The sticky header slides up 80px on scroll and returns on scroll-up, so the catalogue gets the full viewport while the cart stays one tap away.
- 05
WhatsApp FAB
A green chat button with a pinging halo and an expanding Discuter sur WhatsApp label pins to the bottom-right safe area on every page.
Page architecture
- 01Utility bar — Livraison rapide dans tout le Souss · Devis gratuit sous 24h
- 02Sticky header — logo, nav, phone, cart
- 03Hero — video, Bâtissez avec les meilleurs matériaux, two CTAs
- 04Nos rayons — Toutes les catégories, eight trade cards
- 05Best-sellers — Nos produits populaires
- 06Nos fournisseurs partenaires — infinite partner marquee
- 07Notre catalogue — Découvrez nos produits
- 08CTA banner — Recevez votre devis gratuit en 24h
- 09Footer + WhatsApp FAB
Next projects
All projects →
