Dana Doors

At a glance

• Project type: Bilingual marketing site, product catalogue, and enquiry platform
• Languages: Arabic and English, with RTL and LTR layouts
• Catalogue: Doors, windows, handrails, kitchens, dressing rooms, and woodwork
• Main journeys: Product discovery, product detail, gallery, projects, quote, consultation, contact, and recruitment
• Media: Cloudinary-backed catalogue and gallery imagery

The brief

Dana Doors needed a public-facing site for a broad, image-led product range. Visitors often need to understand a product, inspect its details, and discuss a project before they are ready to buy. That called for a catalogue and enquiry experience rather than a checkout-first store.

The site also had to work naturally in Arabic and English. Locale-aware routing, right-to-left layout, localised content, metadata, and typography are part of the implementation, not a translation layer added after the interface was designed.

The product experience

The path follows how a considered architectural-product enquiry develops: browse a category, inspect a product and its specifications, review imagery, projects, and ordering information, then request a quote or consultation. Arabic is the default locale, and the same core journeys are served through /ar and /en route trees.

The application is server-routed with focused client-side interaction for menus, themes, forms, carousels, and gallery controls. It is not a single-page application.

What we delivered

• A bilingual Arabic and English site with locale-aware routing, RTL layout, localised content and metadata, and locally hosted typefaces for both scripts
• A full product catalog covering doors, windows, handrails, kitchens, dressing rooms, and related ranges, with category and detail pages
• Product specifications, usage information, maintenance guidance, installation notes, and image galleries
• Cloudinary-backed product and project media with a filterable photo gallery
• Quote, consultation, contact, and job-application forms with localised confirmations and team email flows
• Responsive navigation, light and dark themes, keyboard-accessible gallery interactions, and reduced-motion handling
• Project, about, ordering, privacy, terms, and company-information pages
• Search foundations: metadata, canonical and alternate locale links, robots rules, multilingual sitemap entries, structured data, and social images

System details

Product and translation data stay in the repository while Cloudinary supplies visual media. Shared catalogue and media helpers keep route generation, product lookup, image resolution, and gallery normalisation aligned.

Form submissions are validated with Zod, protected with honeypot and rate-limit checks, and delivered through Resend. Upstash Redis supports rate limiting and the visit counter when its server configuration is available; local development includes a file-based visit-counter fallback.

Outcome

Dana Doors has a platform that follows the way visitors make a considered decision: browse the range, inspect the details, review completed work, and contact the team. The bilingual catalogue supports protected quote, consultation, contact, and recruitment requests, while the public pages carry the search and accessibility foundations needed by the experience.

Technology

Next.js 16 App Router, React 19, and TypeScript power the application. Tailwind CSS 4, Radix UI, shadcn/ui patterns, and Phosphor icons shape the interface. Framer Motion, Embla Carousel, React Hook Form, Sonner, and Zod handle interaction and validation. Cloudinary and next-cloudinary manage media; Resend delivers localised HTML email. Upstash Redis supports protection and persistence, with Vercel as the hosting target.