Why Did I Build This?
"The natural stone and marble industry notoriously relies on sluggish, visually unappealing WordPress templates that fail to showcase high-fidelity product imagery effectively. I engineered this platform to disrupt that standard. The objective was absolute performance and aesthetic superiority. By shifting to a Next.js Static Site Generation (SSG) model, I eliminated database bottlenecks during catalog browsing. Additionally, the platform integrates a bespoke dynamic catalog generator, allowing buyers to download real-time, up-to-date product inventories without requiring administrators to manually design new PDFs."
Architecture & Decisions
Built on the Next.js 15 App Router using strict Static Site Generation (`generateStaticParams`) across four distinct locales (`tr`, `en`, `fr`, `ar`) routed via `/[lang]`. The presentation layer utilizes Tailwind CSS v4 coupled with `Framer Motion` for precise layout animations (`AnimatePresence` with `popLayout`). Product grids dynamically adapt their aspect ratios based on material topology (e.g., `aspect-square` for mosaics and sinks vs. `aspect-4/5` for slabs). The custom catalog exporter is dynamically loaded client-side (`next/dynamic` with SSR disabled) to offload PDF compilation overhead from the server and protect TTFB.
Key Features
- 01.Deep i18n integration (`tr`, `en`, `fr`, `ar`) with centralized localized SEO metadata injection
- 02.Hardware-accelerated layout transitions and staggered viewport animations via Framer Motion
- 03.On-demand, client-side dynamic catalog generator for real-time localized PDF exports
- 04.Topology-aware adaptive CSS grids for varied product dimensionalities
- 05.Suspense-wrapped lazy loading with custom CSS keyframe fallback animations
This project showcases how to execute enterprise-grade frontend engineering for a traditional B2B sector. By leveraging asynchronous React Server Components, resolving locale parameters via Promise-based routing, and rigorously enforcing component-level code splitting, the application delivers a seamless, magazine-like Lookbook experience. The custom UI transcends generic templates, utilizing advanced animation variants (`ease: [0.21, 0.47, 0.32, 0.98]`) to provide a fluid, premium shopping environment that standard CMS platforms cannot replicate.