A premium luxury car rental landing page with magical animations and glassmorphism design
This is a state-of-the-art luxury car rental landing page featuring premium animations, glassmorphism effects, and a magical user experience. Built with Angular 17+ and Tailwind CSS, it showcases luxury vehicles with stunning visual effects and smooth interactions.
- Magical Header Effects: Floating car animations with particle systems
- Glassmorphism UI: Modern frosted glass effects throughout
- Scroll-Triggered Animations: Elements animate as they enter viewport
- Magnetic Button Effects: Interactive hover effects with ripple animations
- 3D Card Transformations: Fleet cards with perspective transforms
- Smooth Scrolling Navigation: Seamless section transitions
- Mobile-First Design: Optimized for all device sizes
- Dynamic Testimonials: Auto-carousel with manual navigation
- Floating WhatsApp Integration: Direct booking functionality
- Loading Animation: Premium speedometer loading sequence
- Scroll Progress Indicator: Visual scroll progress at top
- Angular 17+ Standalone Components: Modern architecture
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling
- Intersection Observer: Efficient scroll animations
- Lazy Loading Ready: Optimized for performance
| Technology | Version | Purpose |
|---|---|---|
| Angular | 17+ | Frontend Framework |
| TypeScript | 5.0+ | Programming Language |
| Tailwind CSS | 3.0+ | Styling Framework |
| Angular CLI | Latest | Build Tool |
| RxJS | Latest | Reactive Programming |
Ensure you have the following installed:
- Node.js (18.0 or higher)
- npm or yarn
- Angular CLI (
npm install -g @angular/cli)
-
Clone the repository
git clone https://github.com/reachvivek/luxury-car-rental-landing.git cd luxury-car-rental-landing -
Install dependencies
npm install
-
Start development server
ng serve
-
Open your browser Navigate to
http://localhost:4200
# Build for production
ng build --configuration production
# Serve production build locally (optional)
npm install -g http-server
http-server dist/luxury-car-rental-landing/src/
├── app/
│ ├── app.ts # Main component with premium effects
│ ├── app.html # Complete landing page template
│ ├── app.css # Custom animations & magical effects
│ ├── app.config.ts # Application configuration
│ ├── app.routes.ts # Routing configuration
│ └── app.spec.ts # Unit tests
├── assets/ # Static assets (images, icons)
├── environments/ # Environment configurations
├── styles.css # Global Tailwind imports
├── main.ts # Application bootstrap
└── index.html # Main HTML template
- Magical Header: "Luxury Automotive by SEHEJ" with premium spacing
- Floating Car Animation: 3D animated Porsche Taycan
- Particle System: Floating particles with elegant animations
- Performance Stats: Real-time animated statistics
- Scroll Indicator: Animated down arrow for navigation
- Dynamic Grid: Responsive vehicle showcase
- 3D Card Effects: Hover animations with perspective
- Vehicle Details: Pricing, specifications, and features
- Staggered Animations: Left/right entrance effects
- 3-Step Process: Contact, Book, Drive
- Interactive Cards: Glassmorphism design with hover effects
- Visual Indicators: Numbered progress steps
- Floating Car Image: Animated vehicle illustration
- Glassmorphism Cards: Premium service highlights
- Icon Animations: Smooth scale effects
- Dark Theme Section: Elegant contrast design
- Gradient Overlays: Subtle background effects
- Auto Carousel: 6-second rotation with manual controls
- Responsive Navigation: Touch-friendly arrow controls
- Star Ratings: Dynamic rating display
- Customer Photos: Professional portrait integration
- WhatsApp Integration: Direct booking links
- Comprehensive Links: All page sections
- Social Integration: Contact information
- Brand Consistency: Matching design theme
scroll-animate-left: Slide in from leftscroll-animate-right: Slide in from rightscroll-animate-scale: Scale up entrancescroll-animate-bottom: Slide up from bottom
hero-car-float: Floating car animationmagnetic-btn: Magnetic hover effectsfleet-card-enhanced: 3D card transformstestimonial-enhanced: Premium testimonial cards
- Speedometer Animation: 3-second loading with smooth needle movement
- Particle Generation: Dynamic particle system creation
- Progressive Enhancement: Animations initialize after loading
Configure in src/environments/:
environment.ts(development)environment.prod.ts(production)
- Brand Colors: Modify Tailwind configuration
- Animation Timings: Adjust in component TypeScript
- Content: Update fleet data and testimonials
- Contact Info: Modify WhatsApp and phone numbers
| Browser | Version | Status |
|---|---|---|
| Chrome | 90+ | ✅ Fully Supported |
| Firefox | 88+ | ✅ Fully Supported |
| Safari | 14+ | ✅ Fully Supported |
| Edge | 90+ | ✅ Fully Supported |
- Update environment variables
- Optimize images and assets
- Test responsive design
- Verify animation performance
- Check WhatsApp integration
- Validate contact information
- Vercel (Recommended)
- Netlify
- Firebase Hosting
- AWS S3 + CloudFront
- No External Analytics: Privacy-focused design
- Secure Contact Forms: Protected communication
- Image Optimization: Fast loading without quality loss
- XSS Protection: Angular's built-in security features
- Dependency security patches
- Angular framework updates
- Performance optimizations
- Browser compatibility checks
- Core Web Vitals tracking
- Animation performance metrics
- Mobile responsiveness testing
- Cross-browser validation
This is a private commercial project. Access and modifications are strictly limited to:
- Vivek Kumar Singh (Developer)
- Sehej (Client)
- Authorized personnel with explicit written permission
- Follow Angular style guidelines
- Maintain animation performance
- Test across all supported browsers
- Document any new features
- Preserve brand consistency
PROPRIETARY SOFTWARE LICENSE
Copyright (c) 2025 Vivek Kumar Singh. All Rights Reserved.
NOTICE: This software and its associated documentation are proprietary
and confidential to Vivek Kumar Singh and the client "Sehej".
AUTHORIZED USERS:
- Vivek Kumar Singh (Developer & Owner)
- Sehej (Client)
RESTRICTIONS:
1. NO PUBLIC DISTRIBUTION: This software shall not be distributed,
shared, or made available to any third parties without explicit
written consent from the copyright holder.
2. NO COMMERCIAL USE: Commercial use by unauthorized parties is
strictly prohibited. Any commercial utilization requires a
separate licensing agreement.
3. NO DERIVATIVE WORKS: Creating derivative works or modifications
by unauthorized parties is strictly forbidden.
4. NO REVERSE ENGINEERING: Reverse engineering, decompilation, or
disassembly is prohibited except where expressly permitted by law.
5. CONFIDENTIALITY: All source code, designs, and implementation
details are confidential and proprietary information.
LICENSE GRANT:
Limited license is granted only to authorized users for:
- Internal business operations
- Maintenance and updates
- Client-specific customizations
- Performance optimizations
TERMINATION:
This license terminates automatically upon breach of any terms.
DISCLAIMER:
THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND.
THE COPYRIGHT HOLDER SHALL NOT BE LIABLE FOR ANY DAMAGES ARISING
FROM THE USE OF THIS SOFTWARE.
For licensing inquiries or permission requests, contact:
Vivek Kumar Singh - Developer & Copyright Holder
Vivek Kumar Singh
- Role: Lead Developer & Project Owner
- Specialization: Premium Frontend Development
- Technologies: Angular, TypeScript, Modern CSS
- Focus: Luxury UI/UX & Performance Optimization
Project Timeline: January 2025
Status: Active Development
Version: 1.0.0
- Premium Animation System: Custom scroll-triggered animations
- Performance Optimized: Fast loading with smooth 60fps animations
- Mobile Excellence: Responsive design with touch-friendly interactions
- Brand Consistency: Cohesive luxury automotive theme
- Technical Excellence: Modern Angular architecture with TypeScript
Built with precision for luxury automotive experiences