Files
89925de6-c90b-4cb3-b344-ff1…/src/app/page.tsx
2026-05-18 15:31:31 +00:00

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>
);
}