BlueGrid - Morion Car Coating Website

A modern, multilingual (English/Arabic) website for Morion, a premium car ceramic coating product. Built with Next.js 16, this platform bridges the gap between a high-end consumer storefront and a robust B2B management system, featuring an advanced admin dashboard for managing dealers and warranties.

Core Features & Architecture

• Multilingual Support: Full English and Arabic locales with native RTL (Right-to-Left) support for Arabic users.
• Dealer & Admin Dashboards: Comprehensive portals to manage dealer applications (approval/rejection), secure login, and warranty tracking.
• Automated Communications: Integrated email notifications via Nodemailer for automated warranty updates and status changes, plus direct WhatsApp integration.
• High-End UI/UX: Smooth scroll effects, scroll reveals, and complex animations powered by Framer Motion and GSAP.
• Dynamic Pages: Includes interactive Home Page (Before/After Slider, Coverage Diagram, Marquees), Technology Showcase, Product Displays, and a secure Warranty Claim system.
• SEO & Analytics: Highly optimized metadata for all public pages in both languages, fully integrated with Google Analytics 4 (GA4) and Google Tag Manager (GTM) for advanced marketing tracking.

The Technology Stack

• Framework: Next.js 16 (App Router)
• Styling & Fonts: Tailwind CSS v4 with Next.js optimized Geist fonts
• Database & Auth: Supabase (for secure data storage and User Authentication)
• Animations: Framer Motion & GSAP
• Icons: Heroicons, Lucide React, and React Icons
• Infrastructure: Custom API routes handling authentication, dealer management, and warranty databases.