Elsama Luxury Marble

Eine Plattform für Marmor und architektonische Oberflächen auf redaktionellem Niveau, die darauf ausgelegt ist, Premium-Browsing in qualifizierte kommerzielle Anfragen zu verwandeln.

Elsama Luxury Marble ist eine Portfolio-orientierte Laravel-Anwendung, die für ein Unternehmen im Bereich hochwertiger Materialien entwickelt wurde, das mehr als nur eine Broschüren-Website benötigt. Sie präsentiert Projekte, Materialien, Blog-Inhalte, Referenzen und die Positionierung von Dienstleistungen auf eine Weise, die gleichzeitig die Markenglaubwürdigkeit und die Verkaufs-Conversion unterstützt. Die Plattform ist für ein internationales Publikum optimiert, mit lokalisierungsbewusstem Routing, RTL-Unterstützung und übersetzten Inhalten, die direkt im Domänenmodell gespeichert sind. Auf operativer Ebene steuert dieselbe Codebasis ein öffentliches Inertia-React-Erlebnis sowie eine Filament-CMS-/Admin-Ebene für die Verwaltung von Inhalten, Anfragen und Analysen.

Kernwertversprechen

Performance & Skalierbarkeit: Das öffentliche Erlebnis wird über Inertia v2 mit SSR-Unterstützung, Eager-Loaded Relationships, schlanken JSON-Ressourcen, zwischengespeicherten Einstellungen, datenbankgestützten Queues und Bildkonvertierung in WebP für eine schnellere Seitenauslieferung bereitgestellt.
UX/UI-Exzellenz: Das Frontend verwendet eine luxuriöse, redaktionelle visuelle Sprache mit grossformatiger Typografie, bildbasierten Layouts, responsiven Karten, „Load-more“-Interaktionen für Blogs, sticky WhatsApp-Conversion und lokalisierungsbewusstem Layout-Richtungswechsel.
Sicherheit & Zuverlässigkeit: Anfrageformulare werden serverseitig validiert, pro IP ratenbegrenzt, für die Zustellung in die Warteschlange gestellt und sowohl an das interne Team als auch an den Interessenten gespiegelt. Die Admin-Oberfläche ist hinter der Filament-Authentifizierung isoliert, während Soft-Deletes für Inhalte und sitzungsbasierte Gebietsschema-Persistenz das operative Risiko reduzieren.

Technische Architektur & Stack

Frontend

Framework: React 18 mit Inertia.js v2 und SSR-Einstiegspunkten in resources/js/app.tsx und resources/js/ssr.tsx.
State & Navigation: Inertia-Router, useForm, Routen-Helfer via Ziggy und clientseitige Paginierung/Filterung für Katalog- und Blog-Ansichten.
Styling & Motion: Tailwind CSS, Headless UI, Framer Motion und eine bewusst dunkle, redaktionelle Palette, die auf eine Premium-Materialmarke zugeschnitten ist.
UI-Muster: Öffentliche Layout-Shell, wiederverwendbare Karten und CTAs, mehrsprachiges Rendering von Inhalten und responsive Hero-/Sektionskomposition.
Rich Content: TipTap steht für das Verfassen von langformatigen CMS-Inhalten im Admin-Panel zur Verfügung.

Backend / API

Framework: Laravel 13 mit klassischem MVC-Routing und Inertia-Antworten für die öffentliche Seite.
Domänenmodellierung: JSON-übersetzte Felder für Namen, Beschreibungen, SEO-Texte und Blog-Inhalte; Slug-basiertes Route-Model-Binding; Soft-Deletes für Kernkatalog-Entitäten.
Datenzugriff: Dedizierte API-Ressourcen normalisieren Medien-URLs, übersetzte Inhalte und relationale Payloads, bevor sie das Frontend erreichen.
Business-Services: Ein Übersetzungs-Helfer löst Gebietsschema-Fallbacks auf, ein Einstellungsmodell speichert globale Konfigurationen zwischen, Analysen werden über eine Service-Ebene persistiert und Bilder werden vor der Speicherung in WebP konvertiert.

DevOps & Infrastruktur

Lokale Laufzeit: Das Projekt ist für eine Standard-PHP + Node-Toolchain und Laravel Herd ausgelegt. Im Repository ist kein Docker-Stack hinterlegt.
Queues & Mail: Datenbank-Queueing ist der Standardpfad, mit in die Warteschlange gestellten Anfragebenachrichtigungen und protokollbasierter E-Mail-Konfiguration für die lokale Entwicklung.
Speicher: Öffentliche Medien werden auf den public-Datenträger geschrieben und von storage/app/public bereitgestellt.
Build-Pipeline: Vite kompiliert das Client-Bundle und SSR-Bundle, während die Repository-Skripte während der Entwicklung auch den App-Server, den Queue-Listener und den Log-Tailer zusammen starten.
Caching: Der Laravel-Cache wird für globale Einstellungen verwendet und die Konfiguration kann bei Bedarf auf andere unterstützte Treiber umgestellt werden.

Architekturfluss

flowchart LR
	Browser[Öffentlicher Browser] --> Inertia[Inertia React Seiten]
	Inertia --> Controllers[Laravel Controller]
	Controllers --> Resources[API Ressourcen + Locale Manager]
	Controllers --> Models[Eloquent Modelle + Services]
	Models --> DB[(MySQL / SQLite)]
	Models --> Cache[(Laravel Cache)]
	Controllers --> Queue[(Datenbank Queue)]
	Queue --> Mail[Anfrage E-Mails]
	Controllers --> Storage[(Öffentlicher Speicher / WebP Medien)]
	Admin[Filament Admin] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(Analytics Logs)]

Wichtige technische Deep Dives

1. Lokalisierungsbewusste Inhaltsbereitstellung

Die Herausforderung besteht nicht nur darin, Zeichenfolgen zu übersetzen; es geht darum, URLs, Layoutrichtung und Inhaltspayloads über sechs Gebietsschemata hinweg konsistent zu halten und dabei SEO-freundliche Slugs und geschäftlich lesbare Kopien zu bewahren. Die Lösung verwendet ein {locale}-Routenpräfix, sitzungsbasierte Gebietsschema-Persistenz und einen LocaleManager, der übersetzte Werte aus JSON-Spalten mit sinnvollen Fallbacks auflöst. Arabisch wird auf Layout-Ebene als RTL behandelt, sodass die öffentliche Shell die Dokumentrichtung dynamisch aktualisiert, anstatt sich auf duplizierte Vorlagen zu verlassen.

2. Konversionsfokussierte Anfrage-Pipeline

Ein hochwertiges Anfrageformular muss schnell, vertrauenswürdig und missbrauchssicher sein. Der Kontakt-Controller validiert das Payload serverseitig, speichert es als Anfragedatensatz und stellt zwei E-Mails in die Warteschlange: eine an das interne Team und eine als automatische Antwort an den Interessenten. Eine dedizierte Ratenbegrenzungs-Middleware begrenzt die Einreichungen pro IP, was die Zustellbarkeit schützt und den Posteingang des Vertriebs sauber hält, ohne Reibungsverluste für legitime Leads zu erzeugen.

3. Medienreicher Katalog und redaktionelles CMS

Die Seite präsentiert Materialien, Projekte und Artikel als visuellen Katalog, nicht als flache Datenbankeinträge. Controller laden Bild- und Beziehungsdaten vorab (Eager-Loading), Ressourcen normalisieren Medien-URLs und übersetzte Inhalte, und das Frontend rendert Kategoriefilter, progressives Blog-Laden und grosse visuelle Karten mit minimaler clientseitiger Komplexität. Auf der Admin-Seite bietet Filament ein strukturiertes CMS und ein Analytics-Dashboard, sodass Nicht-Entwickler Inhalte aktualisieren, Anfragen verwalten und Verkehrsmuster überwachen können, ohne den Anwendungscode anzufassen.

ELSAMA