Elsama Luxury Marble

Een meertalig, redactioneel platform voor marmer en architecturale oppervlakken, ontworpen om premium bezoekers om te zetten in gekwalificeerde commerciële aanvragen.

Elsama Luxury Marble is een Laravel-applicatie gericht op portfolio's, gebouwd voor een high-end materialenbedrijf dat meer nodig heeft dan alleen een brochure-website. Het presenteert projecten, materialen, bloginhoud, getuigenissen en positionering van diensten op een manier die zowel de geloofwaardigheid van het merk als de verkoopconversie ondersteunt. Het platform is geoptimaliseerd voor een internationaal publiek, met locatiebewuste routing, RTL-ondersteuning en vertaalde inhoud die direct in het domeinmodel is opgeslagen. Aan de operationele kant drijft dezelfde codebase zowel een publieke Inertia React-ervaring aan als een Filament CMS/admin-laag voor het beheer van inhoud, aanvragen en analyses.

Kernwaarde

Prestaties & Schaalbaarheid: De publieke ervaring wordt aangeboden via Inertia v2 met SSR-ondersteuning, eager-loaded relaties, compacte JSON-bronnen, gecachte instellingen, database-gestuurde wachtrijen en beeldconversie naar WebP voor snellere paginalading.
UX/UI Excellentie: De frontend gebruikt een luxe redactionele visuele taal met typografie van groot formaat, beeldgerichte lay-outs, responsieve kaarten, 'load-more' bloginteracties, zwevende WhatsApp-conversie en locatiebewuste schakeling van de lay-outrichting.
Beveiliging & Betrouwbaarheid: Aanvraagformulieren worden aan de serverzijde gevalideerd, per IP beperkt in frequentie, in de wachtrij geplaatst voor verzending en gespiegeld naar zowel het interne team als de potentiële klant. Het admin-oppervlak is geïsoleerd achter Filament-authenticatie, terwijl 'soft deletes' voor inhoud en sessiegebaseerde locatiepersistentie het operationele risico verminderen.

Technische Architectuur & Stack

Frontend

Framework: React 18 met Inertia.js v2 en SSR-entrypoints in resources/js/app.tsx en resources/js/ssr.tsx.
State & Navigatie: Inertia-router, useForm, route-helpers via Ziggy en client-side paginering/filtering voor catalogus- en blogweergaven.
Styling & Beweging: Tailwind CSS, Headless UI, Framer Motion en een bewust donker redactioneel palet op maat gemaakt voor een premium materialenmerk.
UI Patronen: Publieke lay-outshell, herbruikbare kaarten en CTA's, weergave van meertalige inhoud en responsieve compositie van secties en hero-elementen.
Rijke Inhoud: TipTap is beschikbaar voor het bewerken van lange CMS-inhoud in het admin-paneel.

Backend / API

Framework: Laravel 13 met klassieke MVC-routing en Inertia-responses voor de publieke site.
Domeinmodellering: JSON-vertaalde velden voor namen, beschrijvingen, SEO-teksten en bloginhoud; slug-gebaseerde route-modelbinding; 'soft deletes' op kerncatalogusentiteiten.
Data-toegang: Toegewezen API-bronnen normaliseren media-URL's, vertaalde inhoud en relationele payloads voordat ze de frontend bereiken.
Zakelijke Diensten: Een vertaalhulp lost lokale fallbacks op, een instellingenmodel cachet globale configuratie, analyses worden vastgelegd via een servicelaag en afbeeldingen worden naar WebP geconverteerd vóór opslag.

DevOps & Infrastructuur

Lokale Runtime: Het project is ontworpen voor een standaard PHP + Node toolchain en Laravel Herd. Er is geen Docker-stack vastgelegd in de repository.
Wachtrijen & Mail: Database-queueing is de standaardinstelling, met geplande aanvraagmeldingen en log-gebaseerde mail geconfigureerd voor lokale ontwikkeling.
Opslag: Publieke media wordt naar de public disk geschreven en geserveerd vanuit storage/app/public.
Build Pipeline: Vite compileert de client-bundle en SSR-bundle, terwijl repository-scripts tijdens ontwikkeling ook de app-server, queue-listener en log-tailer samen opstarten.
Caching: Laravel-cache wordt gebruikt voor globale instellingen en de configuratie kan worden gewisseld naar andere ondersteunde drivers wanneer de omgeving dit vereist.

Architectuurstroom

flowchart LR
	Browser[Publieke Browser] --> Inertia[Inertia React Pagina's]
	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[Aanvraag-e-mails]
	Controllers --> Storage[(Publieke Opslag / WebP Media)]
	Admin[Filament Admin] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(Analytics Logs)]

Belangrijke Engineering-diepgang

1. Locatiebewuste Inhoudslevering

De uitdaging is niet simpelweg het vertalen van strings; het gaat erom URL's, lay-outrichting en inhoudspayloads consistent te houden over zes locaties, terwijl SEO-vriendelijke slugs en zakelijke teksten behouden blijven. De oplossing maakt gebruik van een {locale} route-prefix, sessiegebaseerde locatiepersistentie en een LocaleManager die vertaalde waarden uit JSON-kolommen haalt met logische fallbacks. Arabisch wordt op de lay-outlaag behandeld als RTL, dus de publieke shell werkt de documentrichting dynamisch bij in plaats van te vertrouwen op dubbele sjablonen.

2. Conversiegerichte Aanvraagpijplijn

Een aanvraagformulier voor high-value leads moet snel, betrouwbaar en bestand tegen misbruik zijn. De contactcontroller valideert de payload aan de serverzijde, slaat deze op als een aanvraagrecord en zet twee e-mails in de wachtrij: één naar het interne team en één als automatisch antwoord naar de potentiële klant. Een toegewezen rate-limiting middleware beperkt het aantal inzendingen per IP, wat de afleverbaarheid beschermt en de verkoopmailbox schoon houdt zonder frictie toe te voegen voor legitieme leads.

3. Media-rijke Catalogus en Redactioneel CMS

De site presents materialen, projecten en artikelen als een visuele catalogus, niet als platte databaserecords. Controllers laden afbeelding- en relatiegegevens ('eager-load'), resources normaliseren media-URL's en vertaalde inhoud, en de frontend rendert categorie-filters, progressief laden van blogs en grote visuele kaarten met minimale client-side complexiteit. Aan de beheerkant biedt Filament een gestructureerd CMS en analyse-dashboard, zodat niet-ontwikkelaars inhoud kunnen bijwerken, aanvragen kunnen beheren en verkeerspatronen kunnen monitoren zonder de applicatiecode aan te passen.

ELSAMA