Back to Portfolio
E-Commerce / Cultural Platform

NAYA

A bilingual marketplace connecting the world to Syrian artisan heritage — where every purchase preserves a tradition.

The Vision

Syria holds millennia of artisan tradition — from the cobalt-blue ceramics of Damascus to the 4,000-year-old soap-making methods of Aleppo. Yet many of these crafts remain invisible to the global market. Naya was conceived as a bridge: a digital collective that gives seven artisans across five Syrian regions a storefront as refined as their craft.

The challenge was twofold. First, build a fully bilingual Arabic/English e-commerce experience with flawless RTL support — not an afterthought, but a first-class citizen. Second, move beyond transactional shopping into cultural storytelling, where every product page reveals the maker, the method, and the meaning behind each piece.

The result is 65 statically generated pages across two locales, featuring 18 handcrafted products spanning ceramics, textiles, metalwork, jewelry, mosaic, soap, food, and woodwork — all searchable via fuzzy matching, filterable by category and region, and purchasable through a persistent cart experience.

65
Static Pages
2
Languages
18
Products
7
Artisans

Live Screenshots

Naya - Homepage hero with artisan marketplace
Homepage
Naya - Product grid with artisan crafts
Product Grid

Features

عربي
Bilingual RTL
Full Arabic and English support with automatic RTL layout switching, Tailwind logical properties, and ICU plural syntax for counted strings.
E-Commerce UX
Complete shopping experience with product grid, category filters, fuzzy search via Fuse.js, cart with localStorage persistence, and quantity management.
Cultural Storytelling
Every product carries its maker's story. Artisan profiles, craft narratives, and regional heritage woven into the browsing experience.
Editorial Design
Warm terracotta and olive palette, Tajawal Arabic typography, generous whitespace, and scroll-triggered Framer Motion animations.
Artisan Profiles
Seven artisan profiles across five Syrian regions, each with biography, craft specialization, personal quote, and linked product collections.
SEO Infrastructure
Dynamic sitemap with hreflang alternates, Open Graph metadata, security headers, robots.txt, and metadataBase for canonical URLs.

Design Language

Color Palette
Terracotta
#C67C4E
Primary warmth
Olive
#6B7F4A
Natural accent
Cream
#FAF7F2
Background canvas
Brown
#8B7355
Text body
Charcoal
#2D2D2D
Headings
Typography
Arabic — Tajawal
نَايا — صناعات سورية أصيلة
English — DM Sans
Naya Collective — Authentic Syrian Craftsmanship
Design Philosophy

Warm, artisanal, premium but approachable. The palette draws from Syrian earth and vegetation — terracotta clay, olive groves, cream-washed stone. Typography balances Arabic calligraphic rhythm (Tajawal) with clean Latin geometry (DM Sans), ensuring both scripts feel native rather than translated.

“Every product carries a story older than the marketplace itself. The design must honor the weight of that history while feeling effortlessly modern.”

Technical Architecture

Next.js 16next-intl v4Fuse.jsFramer MotionTailwind CSSZod v4React Hook FormRadix UILenis Smooth ScrollLucide Icons
65 static pages generated at build time (2 locales × all routes)
Fuse.js fuzzy search with lazy dynamic import
ICU plural syntax for counted strings (item counts, product totals)
Tailwind logical properties (border-s-4, ps-4) for seamless RTL
Cart state with localStorage persistence and useCallback/useMemo optimization
LazyMotionProvider for code-split Framer Motion animations
Lenis smooth scroll with direction-aware configuration
Zod v4 contact form validation with React Hook Form integration

Pages

Home
Hero with stagger entrance, featured products carousel, artisan spotlights, impact stats with animated counters, mission section, and newsletter signup.
Shop
Full product grid with category filters (ceramics, textiles, soap, metalwork, jewelry, mosaic, food, woodwork), fuzzy search, and add-to-cart functionality.
Product Detail
Product gallery, pricing, quantity selector, artisan attribution, product story section, and related products grid.
Artisan Profiles
Directory of seven artisans with card layout. Individual profile pages with biography, craft description, personal quote, and product collection.
About
Origin story, how-it-works process flow, and impact/vision section explaining the collective's mission.
Contact
Zod-validated form with React Hook Form, contact information panel, and expandable FAQ accordion via Radix UI.
Cart
Slide-out drawer with line items, quantity adjustment, running total, empty state illustration, and checkout flow.