ELSAMA
Elsama Luxury Marble: En flerspråkig plattform av redaktionell kvalitet för marmor och arkitektoniska ytor, designad för att omvandla premium-surfning till kvalificerade kommersiella förfrågningar.
Elsama Luxury Marble
En flerspråkig plattform av redaktionell kvalitet för marmor och arkitektoniska ytor, designad för att omvandla premium-surfning till kvalificerade kommersiella förfrågningar.
Elsama Luxury Marble är en portföljdriven Laravel-applikation byggd för ett företag inom high-end-material som behöver mer än bara en broschyrwebbplats. Den presenterar projekt, material, blogginnehåll, kundreferenser och tjänstepositionering på ett sätt som samtidigt stärker varumärkets trovärdighet och främjar försäljningskonvertering. Plattformen är optimerad för internationella målgrupper, med lokalanpassad routing, stöd för RTL (höger-till-vänster-skrift) och översatt innehåll lagrat direkt i domänmodellen. På den operativa sidan driver samma kodbas både en publik Inertia React-upplevelse och ett Filament CMS/admin-lager för hantering av innehåll, förfrågningar och analys.
Kärnvärdeserbjudande
- Prestanda & Skalbarhet: Den publika upplevelsen levereras via Inertia v2 med SSR-stöd (Server-Side Rendering), eager-loaded relationer, slimmade JSON-resurser, cachelagrade inställningar, databasbackade köer och bildkonvertering till WebP för snabbare sidinläsning.
- UX/UI-excellens: Webbplatsen använder ett lyxigt, redaktionellt visuellt språk med storformaterad typografi, bilddrivna layouter, responsiva kort, blogginteraktioner med "ladda mer", klistriga WhatsApp-konverteringsknappar och lokalanpassad layoutriktningsväxling.
- Säkerhet & Tillförlitlighet: Förfrågningar valideras på serversidan, hastighetsbegränsas per IP, köas för leverans och speglas till både det interna teamet och den potentiella kunden. Admin-ytan är isolerad bakom Filament-autentisering, medan "mjuka raderingar" (soft deletes) av innehåll och sessionsbaserad lokalhantering minskar den operativa risken.
Teknisk arkitektur & stack
Frontend
- Ramverk: React 18 med Inertia.js v2 och SSR-entrypoints i
resources/js/app.tsxochresources/js/ssr.tsx. - Tillstånd & Navigering: Inertia-router,
useForm, rutt-hjälpare via Ziggy och klient-sidig paginering/filtrering för katalog- och bloggvyer. - Styling & Rörelse: Tailwind CSS, Headless UI, Framer Motion och en medvetet mörk, redaktionell färgpalett anpassad för ett premiumvarumärke inom material.
- UI-mönster: Publikt layoutskal, återanvändbara kort och CTA-knappar, rendering av flerspråkigt innehåll och responsiv hero/sektionskomposition.
- Rikt innehåll: TipTap är tillgängligt för avancerad CMS-innehållsredigering i adminpanelen.
Backend / API
- Ramverk: Laravel 13 med klassisk MVC-routing och Inertia-svar för den publika webbplatsen.
- Domänmodellering: JSON-översatta fält för namn, beskrivningar, SEO-texter och blogginnehåll; slug-baserad route model binding; mjuka raderingar på centrala katalogentiteter.
- Dataåtkomst: Dedikerade API-resurser normaliserar medie-URL:er, översatt innehåll och relationella laster innan de når frontenden.
- Affärstjänster: En översättningshjälpare hanterar lokal-fallbacks, en inställningsmodell cachelagrar global konfiguration, analysdata sparas via ett tjänstelager och bilder konverteras till WebP innan lagring.
DevOps & Infrastruktur
- Lokal körtid: Projektet är designat för en standard PHP + Node-verktygskedja och Laravel Herd. Ingen Docker-stack finns incheckad i repositoryt.
- Köer & E-post: Databasköer är standardvalet, med köade förfrågningsaviseringar och loggbaserad e-post konfigurerad för lokal utveckling.
- Lagring: Publik media skrivs till
public-disken och serveras frånstorage/app/public. - Byggpipeline: Vite kompilerar klient-bundle och SSR-bundle, medan repository-scripts även startar app-servern, kölyssnaren och logg-tailern samtidigt under utveckling.
- Cachelagring: Laravel-cache används för globala inställningar, och konfigurationen kan bytas till andra stödda drivrutiner när miljön kräver det.
Arkitekturflöde
flowchart LR
Browser[Publik webbläsare] --> Inertia[Inertia React-sidor]
Inertia --> Controllers[Laravel-controllers]
Controllers --> Resources[API-resurser + Lokalhanterare]
Controllers --> Models[Eloquent-modeller + tjänster]
Models --> DB[(MySQL / SQLite)]
Models --> Cache[(Laravel-cache)]
Controllers --> Queue[(Databaskö)]
Queue --> Mail[Förfrågningsmejl]
Controllers --> Storage[(Publik lagring / WebP-media)]
Admin[Filament Admin] --> Controllers
Admin --> Models
Controllers --> Analytics[(Analysloggar)]
Djupdykning i nyckelteknik
1. Lokalanpassad innehållsleverans
Utmaningen är inte bara att översätta strängar; det handlar om att hålla URL:er, layoutriktning och innehållslaster konsekventa över sex lokaler samtidigt som SEO-vänliga slugs och affärsläsbara texter bevaras. Lösningen använder ett {locale}-ruttprefix, sessionsstödd lokalbeständighet och en LocaleManager som löser översatta värden från JSON-kolumner med rimliga fallbacks. Arabiska behandlas som RTL i layoutlagret, så det publika skalet uppdaterar dokumentriktningen dynamiskt istället för att förlita sig på duplicerade mallar.
2. Konverteringsfokuserad förfrågningspipeline
Ett förfrågningsformulär med högt värde måste vara snabbt, förtroendeingivande och motståndskraftigt mot missbruk. Kontakt-controllern validerar laster på serversidan, sparar dem som förfrågningsposter och köar två mejl: ett till det interna teamet och ett som automatiskt svar till den potentiella kunden. En dedikerad middleware för hastighetsbegränsning begränsar inskick per IP, vilket skyddar leveransbarheten och håller säljkorgen ren utan att skapa hinder för legitima leads.
3. Medierik katalog och redaktionellt CMS
Webbplatsen presenterar material, projekt och artiklar som en visuell katalog, inte som statiska databasposter. Controllers eager-loadar bild- och relationsdata, resurser normaliserar medie-URL:er och översatt innehåll, och frontenden renderar kategorifilter, progressiv blogginläsning och stora visuella kort med minimal komplexitet på klientsidan. På adminsidan tillhandahåller Filament ett strukturerat CMS och analysdashboard så att icke-utvecklare kan uppdatera innehåll, hantera förfrågningar och övervaka trafikmönster utan att röra applikationskoden.