Car Rental Static Website — Luxury & Economy Vehicle Showcase (Next.js)
A fast, SEO-optimized static marketing website for a car rental service. Built by expert frontend developer Hamza Miloud Amar with Next.js, focusing on Core Web Vitals and local search ranking.
Overview
This Car Rental Static Website is a fast, SEO-optimized marketing site I built as an expert frontend developer for a car rental service in Morocco. Unlike the fullstack Taouafi Rent Car platform, this project focused on delivering maximum performance and search visibility for a client who needed a compelling online presence without complex booking functionality.
The Problem
The client needed:
- Digital presence — No website meant missing customers searching online
- Budget constraints — Full booking platform was too expensive for initial phase
- Fast turnaround — Needed live site within 3 weeks for tourist season
- SEO foundation — Wanted to start ranking before investing in full platform
- Lead generation — Contact form and phone calls as primary conversion methods
My Role
As the expert frontend developer, I:
- Designed and built the entire site from scratch
- Optimized for Core Web Vitals and search engine ranking
- Created vehicle showcase pages with filtering and comparison
- Implemented semantic HTML for maximum SEO benefit
- Configured local SEO for Moroccan car rental searches
Technical Stack
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 14 (Pages Router) | Static generation, image optimization |
| Rendering | Static Site Generation (SSG) | Pre-rendered HTML for instant load |
| UI Library | Pillar UI | Consistent component system |
| Styling | CSS Modules | Scoped, maintainable styles |
| Images | Next.js Image | Automatic WebP/AVIF, responsive sizing |
| Forms | React Hook Form | Contact and inquiry forms |
| SEO | next-seo | Meta tags, Open Graph, structured data |
| Analytics | Google Analytics 4 | Traffic and conversion tracking |
| Deployment | Vercel | Global CDN, edge caching |
Site Structure
Homepage
- Hero section — Value proposition with search/filter CTA
- Vehicle categories — Luxury, Economy, SUVs, Vans
- Why choose us — Key differentiators (price, service, fleet)
- Locations — Service areas across Morocco
- Testimonials — Customer reviews and ratings
- FAQ accordion — Common questions about rental process
Vehicle Pages
- Fleet overview — Grid of all available vehicles
- Category filtering — By type, price range, transmission, passengers
- Vehicle detail — HD gallery, specs, pricing, availability note
- Comparison tool — Side-by-side vehicle comparison
Service Pages
- Airport Transfer — Marrakech, Casablanca, Agadir airports
- Long-Term Rental — Monthly and weekly rates
- Chauffeur Service — Professional driver options
- Corporate Rental — Business account programs
Location Pages
- Marrakech — Local attractions, pickup points, tips
- Casablanca — Business district focus, airport proximity
- Agadir — Beach tourism, resort partnerships
- Fez — Cultural tourism, medina access
SEO Optimization
On-Page SEO
- Semantic HTML — Proper heading hierarchy, landmarks, article tags
- Meta descriptions — Unique, keyword-rich for every page
- Alt text — Descriptive image descriptions for all vehicle photos
- Internal linking — Related vehicles, services, and locations
- Breadcrumb navigation — Structured data for rich snippets
Local SEO
- Google Business Profile — Complete listing with photos, hours, services
- NAP consistency — Name, Address, Phone uniform across web
- Local citations — Directory listings on Moroccan business sites
- Schema markup — LocalBusiness, Vehicle, and Offer structured data
Performance SEO
- Largest Contentful Paint (LCP) — < 2.5s via image optimization
- Cumulative Layout Shift (CLS) — < 0.1 via reserved image dimensions
- First Input Delay (FID) — < 100ms via minimal JavaScript
- Mobile-friendly — Responsive design, touch-friendly elements
Key Features
- Lightning-Fast Load — Static HTML served from edge CDN
- Vehicle Filtering — JavaScript-enhanced category and price filters
- Image Gallery — Optimized vehicle photos with zoom and swipe
- Contact Forms — Multi-step inquiry with vehicle pre-selection
- WhatsApp Integration — Direct chat button for instant communication
- Multi-language — Arabic and French toggle for local market
Comparison: Static vs. Fullstack
| Aspect | This Static Site | Taouafi Rent Car (Fullstack) |
|---|---|---|
| Booking | Contact form / phone | Real-time online booking |
| Availability | Static info | Live calendar |
| Payment | Offline | Online Stripe integration |
| Admin | None | Full admin dashboard |
| Cost | Lower | Higher |
| Time to Launch | 3 weeks | 4 months |
| SEO Speed | Excellent | Good (more JS) |
This static site served as the client's MVP web presence — proving ROI before investing in the full Taouafi platform.
Results & Impact
- Launched in 3 weeks — Met tight deadline for tourist season
- Core Web Vitals — All metrics in "Good" range
- SEO ranking — Page 1 for "car rental Morocco" within 4 months
- Lead generation — 30+ inquiries per month via contact form
- Foundation for growth — Client later upgraded to Taouafi fullstack platform
Lessons Learned
This project reinforced that static sites are powerful tools for businesses at every stage. For budget-conscious clients, a well-optimized static site can deliver 80% of the value of a fullstack platform at 20% of the cost and time.
Need a fast, SEO-optimized marketing website? Contact me to discuss your project.
Your support helps me create more helpful content. If you enjoyed this, please consider buying me a coffee.
