245 lines
13 KiB
TypeScript
245 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Zap, Car, CheckCircle, Calendar, Shield, Plus, Award, Heart } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Fleet", id: "/vehicles" },
|
|
{ name: "Booking", id: "#booking-process" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#footer" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Our Fleet", href: "/vehicles" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Service", items: [
|
|
{ label: "Book a Car", href: "#booking-process" },
|
|
{ label: "Pricing", href: "/vehicles" },
|
|
{ label: "Insurance Info", href: "#" },
|
|
{ label: "Support", href: "#footer" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Rental Agreement", href: "#" },
|
|
{ label: "Contact", href: "#footer" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Fleet", id: "/vehicles" },
|
|
{ name: "Booking", id: "booking-process" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "footer" },
|
|
]}
|
|
brandName="Meulders RENT"
|
|
bottomLeftText="Reliable Car Rentals"
|
|
bottomRightText="hello@meulders-rent.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Rent Your Perfect Car Today"
|
|
description="Browse our fleet of well-maintained vehicles, compare prices instantly, and book with confidence. Flexible insurance options and add-ons tailored to your needs."
|
|
tag="Premium Fleet"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
imagePosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-vector/car-dealer-template-design_23-2150712654.jpg"
|
|
imageAlt="Meulders RENT car rental hero"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Start Booking", href: "#booking-process" },
|
|
{ text: "Browse Fleet", href: "/vehicles" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Michael Johnson", handle: "CEO, Business Travel Plus", testimonial: "Meulders RENT transformed how we handle company car rentals. Fast, reliable, and transparent pricing.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-white-shirt-looking-happy_176474-17469.jpg"},
|
|
{
|
|
name: "Sarah Martinez", handle: "Travel Manager, Adventure Co", testimonial: "Best car rental experience I've had. Easy booking process and excellent customer service.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-business-lady-showing-thumb-up_1262-2980.jpg"},
|
|
{
|
|
name: "David Thompson", handle: "Frequent Traveler", testimonial: "Competitive rates, well-maintained vehicles, and hassle-free rental experience every time.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3826.jpg"},
|
|
{
|
|
name: "Emma Wilson", handle: "Travel Consultant, Global Tours", testimonial: "Our clients love Meulders RENT. Professional service with flexible booking options.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="fleet" data-section="fleet">
|
|
<ProductCardOne
|
|
title="Our Fleet"
|
|
description="Choose from our carefully curated selection of well-maintained vehicles. From budget-friendly options to luxury rides, we have the perfect car for your needs."
|
|
tag="Premium Selection"
|
|
tagIcon={Car}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "economy", name: "Economy Class", price: "$29/day", imageSrc: "http://img.b2bpic.net/free-photo/young-family-choosing-car-car-showroom_1303-17380.jpg", imageAlt: "Economy rental car"},
|
|
{
|
|
id: "sedan", name: "Comfort Sedan", price: "$49/day", imageSrc: "http://img.b2bpic.net/free-photo/vertical-photo-modern-stylish-bearded-businessman-automobile-saloon_146671-16004.jpg", imageAlt: "Comfort sedan rental"},
|
|
{
|
|
id: "suv", name: "Premium SUV", price: "$79/day", imageSrc: "http://img.b2bpic.net/free-photo/girl-car_1157-6520.jpg", imageAlt: "Premium SUV rental"},
|
|
{
|
|
id: "luxury", name: "Luxury Executive", price: "$129/day", imageSrc: "http://img.b2bpic.net/free-photo/side-view-valet-receiving-key_23-2149901459.jpg", imageAlt: "Luxury car rental"},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "View All Vehicles", href: "/vehicles" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Why Choose Meulders RENT"
|
|
description="Experience the difference with our customer-centric rental service designed for simplicity and transparency."
|
|
tag="Our Advantage"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Simple Online Booking", description: "Multi-step booking process that takes just minutes. Select car, set dates, choose insurance and add-ons, then confirm.", imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app-screens_23-2148632313.jpg", imageAlt: "Simple booking process"},
|
|
{
|
|
id: 2,
|
|
title: "Transparent Pricing", description: "No hidden fees. All costs clearly displayed upfront including insurance options, extra driver fees, and add-on services.", imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-get-driver-license_23-2150167554.jpg", imageAlt: "Insurance options"},
|
|
{
|
|
id: 3,
|
|
title: "24/7 Customer Support", description: "Our dedicated support team is available around the clock to assist with any questions or issues during your rental.", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-businessman_1163-5413.jpg", imageAlt: "Customer support"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="booking-process" data-section="booking-process">
|
|
<MetricCardOne
|
|
title="Our Booking System"
|
|
description="A streamlined rental experience with complete customization options for your perfect trip."
|
|
tag="Easy Process"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "1", title: "Select Car", description: "Choose from our diverse fleet based on your needs and budget", icon: Car,
|
|
},
|
|
{
|
|
id: "2", value: "2", title: "Pick Dates", description: "Set your rental period with flexible start and end times", icon: Calendar,
|
|
},
|
|
{
|
|
id: "3", value: "3", title: "Insurance", description: "Select your coverage level from basic to comprehensive", icon: Shield,
|
|
},
|
|
{
|
|
id: "4", value: "4", title: "Add-ons", description: "Choose extras like GPS, child seats, and additional drivers", icon: Plus,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Start Booking Now", href: "#booking-process" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Quality Service"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Quality and Reliability You Can Trust"
|
|
description="Meulders RENT Team"
|
|
subdescription="Professional Car Rental Services Since 2015"
|
|
icon={Heart}
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-blurred-parking-car_1339-8019.jpg"
|
|
imageAlt="Meulders RENT fleet overview"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our rental process, insurance options, and policies."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What insurance options are available?", content: "We offer three insurance tiers: Basic Coverage (minimum required), Standard Protection (recommended for most), and Comprehensive Plus (full coverage including collision and theft). All options are clearly priced upfront with no hidden fees."},
|
|
{
|
|
id: "2", title: "Can I add an additional driver?", content: "Yes, you can add additional drivers during the booking process. Each additional driver incurs a small daily fee and must meet our age and license requirements (minimum 21 years old with valid international driving license)."},
|
|
{
|
|
id: "3", title: "What add-ons are available?", content: "We offer GPS navigation systems, child car seats (multiple sizes), additional mirrors for large vehicles, and parking assistance packages. All add-ons can be reserved during booking."},
|
|
{
|
|
id: "4", title: "What is your cancellation policy?", content: "Free cancellation up to 48 hours before rental start time. Cancellations within 48 hours incur a 25% fee. No-shows are charged the full rental amount. Travel insurance may provide additional protection."},
|
|
{
|
|
id: "5", title: "Do you offer long-term rental discounts?", content: "Yes! Weekly rentals receive 10% discount, monthly rentals receive 20% discount. Contact our support team for special corporate rates and bulk booking inquiries."},
|
|
{
|
|
id: "6", title: "How do I book a vehicle?", content: "Simply visit our booking page, select your vehicle, set your dates, choose your insurance level and any add-ons, and confirm. You'll receive instant confirmation with all details and pickup instructions."},
|
|
]}
|
|
useInvertedBackground={true}
|
|
animationType="blur-reveal"
|
|
textPosition="left"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Meulders RENT"
|
|
copyrightText="© 2025 Meulders RENT. All rights reserved."
|
|
columns={footerColumns}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |