A premium, bilingual law firm website built with Next.js 15 & React 19
مكتب الأستاذ محمد صادق للمحاماة — خدمات قانونية متخصصة في القانون المغربي
Diraya (دراية) is a professional, fully responsive law firm website designed for a Moroccan legal practice based in Rabat. The site features a modern, elegant UI with full Arabic (RTL) and English language support, dark/light theme toggling, consultation booking, a legal blog, and more.
| Feature | Description |
|---|---|
| 🌐 Bilingual (AR / EN) | Full Arabic RTL & English LTR support with client-side language switching |
| 🌙 Dark / Light Mode | Theme toggling powered by next-themes |
| 📱 Fully Responsive | Optimized layouts for desktop, tablet, and mobile |
| 📅 Consultation Booking | Interactive modal for scheduling legal consultations |
| 📝 Legal Blog | Dynamic articles on Moroccan law with slug-based routing |
| ⚖️ Service Pages | Dedicated pages for each legal service with dynamic routing |
| 📨 Contact Form | Validated with React Hook Form + Zod schema validation |
| 💬 WhatsApp Integration | Floating button for instant client communication |
| 🎨 Premium Animations | Smooth transitions & micro-interactions via Framer Motion |
| 📊 Analytics | Vercel Analytics integration for performance tracking |
| 🔍 SEO Optimized | Open Graph, Twitter cards, and structured metadata |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.2 | React framework with App Router |
| React | 19 | UI library |
| TypeScript | 5 | Type-safe development |
| Tailwind CSS | 4.1 | Utility-first CSS framework |
- Radix UI — Accessible primitives (Dialog, Accordion, Tabs, Tooltip, etc.)
- shadcn/ui — Styled component layer built on Radix
- Lucide React — Icon library
- React Hook Form — Performant form handling
- Zod — Schema-based validation
- Framer Motion — Declarative animations
- Embla Carousel — Testimonial carousel
- Sonner — Toast notifications
- Geist — Sans & Mono (Vercel)
- Playfair Display — Elegant serif headings
- Cairo — Arabic body text
- Aref Ruqaa — Arabic calligraphic logo
- Amiri — Classic Arabic serif
diraya-law-website/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout (RTL, fonts, metadata)
│ ├── page.tsx # Home page
│ ├── globals.css # Global styles & theme tokens
│ ├── about/ # About the firm
│ ├── blog/ # Blog listing & [slug] articles
│ ├── contact/ # Contact page with form
│ ├── services/ # Services listing & [slug] details
│ ├── privacy/ # Privacy policy
│ └── terms/ # Terms of service
├── components/ # Reusable React components
│ ├── ui/ # shadcn/ui primitives
│ ├── navbar.tsx # Responsive navigation
│ ├── footer.tsx # Multi-layout footer
│ ├── hero-section.tsx # Animated hero
│ ├── booking-modal.tsx # Consultation booking
│ ├── consultation-modal.tsx # Contact consultation
│ ├── service-consultation-modal.tsx
│ ├── services-preview.tsx # Homepage services grid
│ ├── testimonial-carousel.tsx # Client reviews carousel
│ ├── whatsapp-button.tsx # Floating WhatsApp CTA
│ ├── language-switcher.tsx # AR / EN locale toggle
│ ├── theme-toggle.tsx # Dark / light mode toggle
│ └── ...
├── hooks/ # Custom React hooks
│ ├── use-locale-context.tsx # Locale state management
│ └── use-consultation-modal.ts # Modal state hook
├── lib/ # Data & utilities
│ ├── articles.tsx # Blog article data
│ ├── services.ts # Legal services data
│ ├── i18n.ts # Translations dictionary
│ └── utils.ts # Shared helpers
├── public/ # Static assets & images
└── styles/ # Additional stylesheets
- Node.js ≥ 18.x
- pnpm (recommended) or npm / yarn
# Clone the repository
git clone https://github.com/your-username/diraya-law-website.git
cd diraya-law-website
# Install dependencies
pnpm install
# Start the dev server
pnpm devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Create production build |
pnpm start |
Serve production build |
pnpm lint |
Run ESLint checks |
The project is optimized for Vercel:
- Push your repository to GitHub
- Import the project on vercel.com/new
- Deploy — zero config required
For other platforms, run pnpm build and serve the .next output directory.
This project is private and proprietary.
Built with ❤️ in Morocco
Next.js · React · TypeScript · Tailwind CSS