RENOBAT
A complete digital platform for a French renovation company — full-stack website & custom CMS.
The Challenge
RENOBAT is a general construction company based in Boulogne-Billancourt, Île-de-France. They specialize in interior and exterior renovation of apartments, homes, offices, and commercial spaces across 8 French departments.
They needed a professional, SEO-optimized, French-language website to showcase their 500+ completed projects and 7 service categories — with a focus on converting visitors into leads.
Key requirements:
- Contact form with email notifications and WhatsApp integration
- Full admin panel for content management without developer help
- Mobile-responsive design with fast performance
- French-language SEO with structured data for local search
- Serve multiple audiences: homeowners, investors, agencies, professionals
The Solution
High-Performance Next.js 16
Built with App Router and React Server Components for blazing-fast SSR, SEO, and optimal Core Web Vitals scores.
Premium Design System
Dark navy (#0c1f3f) + gold (#c8992e) color scheme reflecting professionalism — with Tailwind CSS v4, 15+ custom animations, and Geist typography.
Full Admin CMS
Empowered the client to manage SEO settings, homepage content, contact submissions, gallery images, and slider photos — all without touching code.
7 SEO-Targeted Service Pages
Dedicated pages for each renovation category — peinture, plâtrerie, sol, électricité, salle de bain, cuisine, rénovation complète — for maximum French-language SEO coverage.
Custom Interactive Components
Before/after image comparison slider, animated stat counters, auto-playing image carousel, scroll-triggered animations — all built from scratch.
MongoDB + Resend Integration
Dynamic content powered by MongoDB with Mongoose ODM, and beautiful branded transactional emails via Resend API for contact notifications and admin replies.
Pages Built(11+ pages)
Key Features
Interactive Before/After Comparisons
Touch-friendly image comparison slider with pointer-event handling for both mouse and touch. ARIA slider role for accessibility, smooth clip-path transitions, and keyboard navigation support.
Full Admin Dashboard
Complete CMS with contact submissions management, per-page SEO editor, homepage stat controls, gallery image manager with drag-and-drop reorder, and email reply capability.
Advanced SEO System
JSON-LD structured data (LocalBusiness, FAQPage, BreadcrumbList, Service schemas), dynamic sitemap.xml, per-page meta overrides editable from admin panel, canonical URLs with hreflang for fr-FR.
Transactional Email System
Custom-branded HTML email templates via Resend API for contact notifications to admin with CC support, and admin reply emails sent directly to customers from the dashboard.
67-Photo Filterable Gallery
Category-based filtering across 4 project types (apartments, houses, offices, shops) with lightbox viewer, responsive layout, and admin-editable gallery statistics.
WhatsApp Integration
Floating WhatsApp widget with bounce-in animation, tooltip on hover, and pulse ring notification — enabling instant customer communication.
Technical Deep Dive
Frontend
- Server-side rendering with React Server Components for SEO and performance
- TypeScript throughout the entire codebase for type safety
- Tailwind CSS v4 with custom theme tokens and 15+ custom CSS animations
- Custom before/after comparison slider with ARIA accessibility
- Scroll-triggered animations via Intersection Observer (4 animation types)
- Auto-playing image carousel, animated stat counters, glass morphism UI
- Custom SVG preloader with house icon drawing animation
- Responsive mobile menu with staggered entrance animations
- Custom scrollbar matching brand colors
Backend & Infrastructure
- React 19 server actions for form submissions, admin CRUD, settings updates
- MongoDB with Mongoose ODM for contacts, SEO settings, and site settings
- Resend API with custom HTML email templates (notification + reply)
- Custom admin authentication protecting all dashboard routes
- Dynamic SEO system — per-page settings stored in DB, merged with defaults
- Auto-generated sitemap.xml pulling lastModified dates from database
- Security headers: X-Content-Type-Options, X-Frame-Options, XSS-Protection, Referrer-Policy, Permissions-Policy
- Image optimization with WebP/AVIF, responsive sizes, priority loading
- Non-www → www redirect configured in Next.js middleware
Results & Impact
Tech Stack
Design & Branding
Color Palette
Design Principles
Ready to Build Something Like This?
Let's discuss your project. We build high-performance websites, custom admin dashboards, and SEO-optimized platforms — tailored to your business.