409 lines
13 KiB
TypeScript
409 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Vehicles",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Ste H24 Rent Car"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Ste H24 RENT CAR - Quality Mobility"
|
|
description="Premium car rental services available 24/7. Experience seamless travel with our modern fleet and professional service."
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-automotive-car-parking_181624-43862.jpg?_wi=1",
|
|
imageAlt: "Luxury vehicle fleet",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-adults-travelling-winter-time_23-2149211169.jpg?_wi=1",
|
|
imageAlt: "Car on the road",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-woman-receiving-car-key_23-2148266150.jpg?_wi=1",
|
|
imageAlt: "Customer service handover",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/transport-concept-with-cars-aerial-view_23-2148959733.jpg?_wi=1",
|
|
imageAlt: "Modern fleet display",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-talking-sales-person-car-showroom_1303-20443.jpg",
|
|
imageAlt: "Professional service desk",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/simple-nice-interior-positive-manager-showing-features-new-car-female-customer_146671-16543.jpg",
|
|
imageAlt: "Luxury car interior",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "Your Trusted Partner in ",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/man-using-smart-watch-express-pay_1170-2342.jpg",
|
|
alt: "Rental Service",
|
|
},
|
|
{
|
|
type: "text",
|
|
content: " Car Rental",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Compact City Car",
|
|
price: "From $30/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-traveling-by-electric-car_23-2149362852.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Luxury SUV",
|
|
price: "From $80/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-baby-girl-choosing-car_1303-27397.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Sport Convertible",
|
|
price: "From $120/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-keys-from-her-new-car_1303-28785.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Economy Hatchback",
|
|
price: "From $25/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-mother-with-child-charging-electro-car-electric-gas-station-speak-mobile-phone_627829-6669.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Business Executive",
|
|
price: "From $90/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-male-sunglasses-dressed-black-suit-sitting-luxury-car-against-skyscraper_613910-19325.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Hybrid Efficient",
|
|
price: "From $45/day",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-valet-standing-by-car_23-2149901396.jpg",
|
|
},
|
|
]}
|
|
title="Explore Our Fleet"
|
|
description="Find the perfect vehicle for your needs, from compact city cars to premium executive sedans."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "24/7 Availability",
|
|
descriptions: [
|
|
"Access vehicles anytime, anywhere.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/rush-hour-traffic-jam-multiple-lane-highway-generative-ai_188544-46274.jpg",
|
|
imageAlt: "Rush hour traffic jam on multiple lane highway generative AI",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Flexible Pricing",
|
|
descriptions: [
|
|
"Transparent rates with no hidden fees.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-automotive-car-parking_181624-43862.jpg?_wi=2",
|
|
imageAlt: "Rush hour traffic jam on multiple lane highway generative AI",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Full Insurance",
|
|
descriptions: [
|
|
"Drive with confidence with total coverage.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-adults-travelling-winter-time_23-2149211169.jpg?_wi=2",
|
|
imageAlt: "Rush hour traffic jam on multiple lane highway generative AI",
|
|
},
|
|
]}
|
|
title="Why Choose Ste H24?"
|
|
description="Experience excellence in car rental with services designed for your comfort."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "500+",
|
|
title: "Vehicles Available",
|
|
items: [
|
|
"Diverse fleet selection",
|
|
],
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "10k+",
|
|
title: "Happy Clients",
|
|
items: [
|
|
"Trusted by travelers",
|
|
],
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "24/7",
|
|
title: "Service Hours",
|
|
items: [
|
|
"Always at your service",
|
|
],
|
|
},
|
|
]}
|
|
title="Our Success Metrics"
|
|
description="Serving thousands of happy travelers every year."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "John Doe",
|
|
role: "Frequent Traveler",
|
|
company: "Global Corp",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-salesperson-car-showroom-standing-by-car_1303-22386.jpg",
|
|
imageAlt: "Female salesperson at a car showroom standing by the car",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Jane Smith",
|
|
role: "Business Owner",
|
|
company: "Design Co",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-automotive-car-parking_181624-43862.jpg?_wi=3",
|
|
imageAlt: "Female salesperson at a car showroom standing by the car",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Mike Johnson",
|
|
role: "Developer",
|
|
company: "Tech Lab",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-adults-travelling-winter-time_23-2149211169.jpg?_wi=3",
|
|
imageAlt: "Female salesperson at a car showroom standing by the car",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Sarah Lee",
|
|
role: "Manager",
|
|
company: "Growth Inc",
|
|
rating: 4,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-woman-receiving-car-key_23-2148266150.jpg?_wi=2",
|
|
imageAlt: "Female salesperson at a car showroom standing by the car",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Alex Brown",
|
|
role: "Designer",
|
|
company: "Studio",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/transport-concept-with-cars-aerial-view_23-2148959733.jpg?_wi=2",
|
|
imageAlt: "Female salesperson at a car showroom standing by the car",
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "4.9",
|
|
label: "Google Rating",
|
|
},
|
|
{
|
|
value: "10k+",
|
|
label: "Total Rentals",
|
|
},
|
|
{
|
|
value: "100%",
|
|
label: "Client Satisfaction",
|
|
},
|
|
]}
|
|
title="Client Feedback"
|
|
description="See what our customers have to say about their experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1",
|
|
title: "What do I need to rent?",
|
|
content: "A valid driver's license and credit card.",
|
|
},
|
|
{
|
|
id: "faq2",
|
|
title: "Is insurance included?",
|
|
content: "Yes, we offer comprehensive coverage plans.",
|
|
},
|
|
{
|
|
id: "faq3",
|
|
title: "Can I return late?",
|
|
content: "Yes, please contact our support desk.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-international-student-collaboarate-together-making-project_273609-44858.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Frequently Asked Questions"
|
|
description="Answers to common queries about our rental process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Contact Us"
|
|
title="Book Your Vehicle Today"
|
|
description="Get in touch for bookings, inquiries, and custom rental solutions."
|
|
imageSrc="http://img.b2bpic.net/free-photo/empty-helpdesk-office-with-telephony-equipment-reception-give-assistance-no-people-telemarketing-space-customer-service-client-support-remote-helpline-headphones_482257-46319.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Ste H24 RENT CAR"
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Vehicle Fleet",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Business Rentals",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Airport Pickups",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|