RealCars
A modern luxury car rental platform serving Ondo State, Nigeria, offering chauffeur-driven services, self-drive options, inter-state travel, and contract driver services. Features an elegant dark-themed UI with sophisticated scroll animations and seamless booking integration.
Project Screenshots
01 — The Challenge
Premium Digital Experience
Creating a luxury car rental website that conveys trust, sophistication, and premium brand positioning while providing seamless booking functionality across all devices. The challenge was to balance visual elegance with practical usability for a regional transport service.
02 — The Strategy
Modern React Architecture
Built with React 19 and TypeScript for type safety, using Framer Motion for sophisticated scroll-linked animations including a velocity-based car tilting effect. Implemented a component-based architecture with Tailwind CSS 4 for rapid, consistent styling and responsive design across mobile, tablet, and desktop.
03 — The Impact
Elegant User Experience
Delivered a responsive, animated interface with smooth scrolling interactions, a premium dark theme, and WhatsApp-integrated booking that streamlines the reservation process. The modular architecture enables easy fleet updates and service additions while maintaining consistent performance.
Frontend Aechitecture
Component-Based SPA
React Components → Framer Motion Animations → Tailwind CSS Styling
State management
React useState hooks manage booking category selection, fleet type filtering, and service card activation based on scroll position. State flows from fleet selection to booking form pre-population for seamless user experience.
Animation System
Framer Motion powers scroll-linked animations including a top-down car that drives along a virtual highway with velocity-based tilting. Uses useScroll, useTransform, useVelocity, and AnimatePresence for smooth, performant transitions.
Component Architecture
Modular React components with TypeScript interfaces for type-safe props. Includes Header, Hero, Services with scroll-linked highway animation, FleetCarousel, Fleet with filtering, BookingForm with WhatsApp integration, FAQ, and Footer.
Lessons & Trade-offs
Animation Performance Balance
Balanced complex scroll-linked animations with performance by using Framer Motion's optimized transforms and avoiding layout thrusting. The velocity-based car tilt effect adds sophistication without impacting scroll performance.
TypeScript Type Saftey
TypeScript interfaces for FleetType, ServiceItem, FaqItem, and component props prevented runtime errors and significantly improved developer experience with autocomplete. The type system caught bugs early and made refactoring safer.