Elsama Luxury Marble

A multilingual, editorial-grade marble and architectural surfaces platform designed to turn premium browsing into qualified commercial inquiries.

Elsama Luxury Marble is a portfolio-led Laravel application built for a high-end materials business that needs more than a brochure site. It presents projects, materials, blog content, testimonials, and service positioning in a way that supports brand credibility and sales conversion at the same time. The platform is optimized for international audiences, with locale-aware routing, RTL support, and translated content stored directly in the domain model. On the operations side, the same codebase powers a public Inertia React experience and a Filament CMS/admin layer for content, inquiry, and analytics management.

Core Value Proposition

Performance & Scalability: The public experience is served through Inertia v2 with SSR support, eager-loaded relationships, lean JSON resources, cached settings, database-backed queues, and image conversion to WebP for faster page delivery.
UX/UI Excellence: The frontend uses a luxury editorial visual language with large-format typography, image-led layouts, responsive cards, load-more blog interactions, sticky WhatsApp conversion, and locale-aware layout direction switching.
Security & Reliability: Inquiry submissions are validated server-side, rate-limited per IP, queued for delivery, and mirrored to both the internal team and the prospect. The admin surface is isolated behind Filament authentication, while content soft deletes and session-based locale persistence reduce operational risk.

Technical Architecture & Stack

Frontend

Framework: React 18 with Inertia.js v2 and SSR entry points in resources/js/app.tsx and resources/js/ssr.tsx.
State & Navigation: Inertia router, useForm, route helpers via Ziggy, and client-side pagination/filtering for catalog and blog views.
Styling & Motion: Tailwind CSS, Headless UI, Framer Motion, and a deliberately dark editorial palette tailored to a premium materials brand.
UI Patterns: Public layout shell, reusable cards and CTAs, multilingual content rendering, and responsive hero/section composition.
Rich Content: TipTap is available for long-form CMS content authoring in the admin panel.

Backend / API

Framework: Laravel 13 with classic MVC routing and Inertia responses for the public site.
Domain Modeling: JSON-translated fields for names, descriptions, SEO copy, and blog content; slug-based route model binding; soft deletes on core catalog entities.
Data Access: Dedicated API resources normalize media URLs, translated content, and relational payloads before they reach the frontend.
Business Services: A translation helper resolves locale fallbacks, a settings model caches global configuration, analytics are persisted through a service layer, and images are converted to WebP before storage.

DevOps & Infrastructure

Local Runtime: The project is designed for a standard PHP + Node toolchain and Laravel Herd. No Docker stack is committed in the repository.
Queues & Mail: Database queueing is the default path, with queued inquiry notifications and log-based mail configured for local development.
Storage: Public media is written to the public disk and served from storage/app/public.
Build Pipeline: Vite compiles the client bundle and SSR bundle, while the repository scripts also spin up the app server, queue listener, and log tailer together during development.
Caching: Laravel cache is used for global settings, and the configuration can be swapped to other supported drivers when the environment requires it.

Architecture Flow

flowchart LR
	Browser[Public Browser] --> Inertia[Inertia React Pages]
	Inertia --> Controllers[Laravel Controllers]
	Controllers --> Resources[API Resources + Locale Manager]
	Controllers --> Models[Eloquent Models + Services]
	Models --> DB[(MySQL / SQLite)]
	Models --> Cache[(Laravel Cache)]
	Controllers --> Queue[(Database Queue)]
	Queue --> Mail[Inquiry Emails]
	Controllers --> Storage[(Public Storage / WebP Media)]
	Admin[Filament Admin] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(Analytics Logs)]

Key Engineering Deep Dives

1. Locale-Aware Content Delivery

The challenge is not simply translating strings; it is keeping URLs, layout direction, and content payloads consistent across six locales while preserving SEO-friendly slugs and business-readable copy. The solution uses a {locale} route prefix, session-backed locale persistence, and a LocaleManager that resolves translated values from JSON columns with sensible fallbacks. Arabic is treated as RTL at the layout layer, so the public shell updates the document direction dynamically instead of relying on duplicated templates.

2. Conversion-Focused Inquiry Pipeline

A high-value inquiry form has to be fast, trustworthy, and resistant to abuse. The contact controller validates the payload server-side, stores it as an inquiry record, and queues two emails: one to the internal team and one as an automatic reply to the prospect. A dedicated rate-limiting middleware caps submissions per IP, which protects deliverability and keeps the sales inbox clean without adding friction for legitimate leads.

3. Media-Rich Catalog and Editorial CMS

The site presents materials, projects, and articles as a visual catalog, not as flat database records. Controllers eager-load image and relationship data, resources normalize media URLs and translated content, and the frontend renders category filters, progressive blog loading, and large visual cards with minimal client-side complexity. On the admin side, Filament provides a structured CMS and analytics dashboard so non-developers can update content, manage inquiries, and monitor traffic patterns without touching application code.

ELSAMA