Skip to content
FiveX
SoftwareDesign

Nechma — online boutique for a Souk Ahras clothing store

A storefront for a shop that already had customers walking in. Arabic is the default and the page is laid out right to left for it; French is a toggle away and re-lays the same pages rather than translating a fixed frame. Browsing, filtering, a cart and cash on delivery, with nationwide shipping.

Visit the site
Platform
Web
Sector
Clothing retail
Year
[YYYY]
Duration
[N] weeks
The Nechma home page in Arabic, laid out right to left: a photograph of the shop interior with clothing rails and shelves, a language toggle offering Français and عربية, a search field and a cart in the header.

Screens

the live storefront

  • The home page in Arabic, right to left: a photograph of the shop interior, a language toggle offering Français and عربية, a search field and a cart in the header.
  • The new-arrivals row on the home page, above a strip of photographic category thumbnails.
  • A split section pairing a photograph of a craftsman at work with a line about going from the heart of the city to your wardrobe, above a bestsellers row of four garments.
  • The foot of the home page: a three-part strip on authentic goods, cash on delivery and nationwide shipping, an Instagram row of six photographs, and the dark footer with quick links, contact details and opening hours.
  • The products index with the filter panel open: category checkboxes, a price range slider, size buttons and colour swatches beside a grid of garments priced in dinars.
  • A product page for a linen shirt: a discount badge beside the price, size and colour choices, a quantity stepper, an add-to-cart button, and a model photograph with a thumbnail rail.
  • The categories page: large photographic tiles for men, women, accessories, shoes and children, each captioned in Arabic.
  • The about page: the wordmark over an opening paragraph, a heading about starting from a single shop with two columns of body copy, three value cards, and a photographic strip beneath.
  • The contact page: a heading and an invitation to write, above a form for name, email, phone, subject and message.
  • The same contact page scrolled to its footer, showing the shop address, its telephone and email, the opening hours day by day, and a map panel.
  • The home page switched to French, the navigation reading Accueil, Produits, Catégories, À propos and Contact, with a delivery banner running across the top.

design system

  • The desktop home artboard: a right-to-left header carrying the NECHMA wordmark, a full-width hero over a photograph, a row of six category tiles, new-arrival and bestseller product rows with prices in dinars, a delivery and payment strip, and an Instagram grid.
  • The mobile home artboard: a header with a cart badge and a menu button, a full-bleed hero marked as a lifestyle photograph, category tiles annotated as a six-tile snap scroll, and a new-arrivals pair of product cards at a 4:5 crop.
  • The product page artboard: a breadcrumb, the garment name and a discounted price, size and colour choices, a quantity stepper, a primary add-to-cart button with a secondary action beneath, collapsible detail sections, a large image with a thumbnail rail, and a related-products row.
  • The design system artboard: the colour roles as swatches with their hex values, a type scale pairing Poppins for Latin and numerals with the Arabic face and specimen text at each size, the button matrix across its variants and states, input fields, badges, and the product card in five states.
  • The about page artboard: the wordmark over a heading about starting from a single shop, a paragraph of body copy, three value cards, a wide image band, and a row of three figures with their captions.

Technologies

  • Next.js
  • Turbopack
  • next/image

Next case study

Tell us where the system breaks.

One senior team, five disciplines, no hand-off in the middle. Send us the constraint and we will tell you what we would build.

Start a projectBook a technical call