Merge version_1 into main #1
477
src/app/page.tsx
477
src/app/page.tsx
@@ -17,354 +17,157 @@ import { Award, Car, MapPin } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Fleet",
|
||||
id: "fleet",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Al Zahra"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Fleet", id: "fleet" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Al Zahra"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="AL ZAHRA"
|
||||
description="Experience Laghouat with unparalleled sophistication. Premium car rental services tailored to your exact needs."
|
||||
buttons={[
|
||||
{
|
||||
text: "Reserve Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Fleet",
|
||||
href: "#fleet",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg",
|
||||
imageAlt: "Luxury Sedan",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-taxi-driver-paying-attention-road_23-2149236667.jpg",
|
||||
imageAlt: "Executive Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-fancy-car-available-selling_23-2148332887.jpg",
|
||||
imageAlt: "Luxury SUV",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-white-car_181624-22603.jpg",
|
||||
imageAlt: "Showroom Display",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-opens-door_1359-1302.jpg",
|
||||
imageAlt: "Elegant Exterior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/security-woman-providing-safety-service_23-2148404128.jpg",
|
||||
imageAlt: "Car Detail",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="AL ZAHRA"
|
||||
description="Experience Laghouat with unparalleled sophistication. Premium car rental services tailored to your exact needs."
|
||||
buttons={[
|
||||
{ text: "Reserve Now", href: "#contact" },
|
||||
{ text: "View Fleet", href: "#fleet" }
|
||||
]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg", imageAlt: "Luxury Sedan" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/female-taxi-driver-paying-attention-road_23-2149236667.jpg", imageAlt: "Executive Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-fancy-car-available-selling_23-2148332887.jpg", imageAlt: "Luxury SUV" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-white-car_181624-22603.jpg", imageAlt: "Showroom Display" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/business-man-opens-door_1359-1302.jpg", imageAlt: "Elegant Exterior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/security-woman-providing-safety-service_23-2148404128.jpg", imageAlt: "Car Detail" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why" data-section="why">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No hidden service fees",
|
||||
"No complex insurance processes",
|
||||
"Zero mileage restrictions",
|
||||
"Never long waits",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Premium late-model fleet",
|
||||
"Tailored booking packages",
|
||||
"Transparent pricing models",
|
||||
"Round-the-clock support",
|
||||
],
|
||||
}}
|
||||
title="Why Choose Al Zahra"
|
||||
description="We blend luxury, convenience, and local reliability to provide the ultimate rental experience in Laghouat."
|
||||
/>
|
||||
</div>
|
||||
<div id="why" data-section="why">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["No hidden service fees", "No complex insurance processes", "Zero mileage restrictions", "Never long waits"] }}
|
||||
positiveCard={{ items: ["Premium late-model fleet", "Tailored booking packages", "Transparent pricing models", "Round-the-clock support"] }}
|
||||
title="Why Choose Al Zahra"
|
||||
description="We blend luxury, convenience, and local reliability to provide the ultimate rental experience in Laghouat."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="fleet" data-section="fleet">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mercedes S-Class",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-by-car-street_1303-22203.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Range Rover Sport",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-mobile-phone-communication-online-application-standing-near-car-city-street-parking-outdoors-car-sharing-rental-service_158595-6723.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "BMW 7 Series",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-grey-car-standing-bridge_114579-4084.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Audi Q8",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-near-her-white-modern-car-carwash-station_651396-2392.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Toyota Land Cruiser",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-with-luxury-car_231208-6916.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Lexus LS 500",
|
||||
price: "Contact for rate",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434345.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Premium Fleet"
|
||||
description="Select from our curated range of world-class vehicles."
|
||||
/>
|
||||
</div>
|
||||
<div id="fleet" data-section="fleet">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Mercedes S-Class", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-by-car-street_1303-22203.jpg" },
|
||||
{ id: "2", name: "Range Rover Sport", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-mobile-phone-communication-online-application-standing-near-car-city-street-parking-outdoors-car-sharing-rental-service_158595-6723.jpg" },
|
||||
{ id: "3", name: "BMW 7 Series", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/back-view-grey-car-standing-bridge_114579-4084.jpg" },
|
||||
{ id: "4", name: "Audi Q8", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-near-her-white-modern-car-carwash-station_651396-2392.jpg" },
|
||||
{ id: "5", name: "Toyota Land Cruiser", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-with-luxury-car_231208-6916.jpg" },
|
||||
{ id: "6", name: "Lexus LS 500", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434345.jpg" }
|
||||
]}
|
||||
title="Our Premium Fleet"
|
||||
description="Select from our curated range of world-class vehicles."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Award,
|
||||
title: "Happy Clients",
|
||||
value: "1500+",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: Car,
|
||||
title: "Premium Fleet",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: MapPin,
|
||||
title: "Laghouat Coverage",
|
||||
value: "100%",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Numbers"
|
||||
description="Our commitment to excellence speaks through our operational results."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", icon: Award, title: "Happy Clients", value: "1500+" },
|
||||
{ id: "2", icon: Car, title: "Premium Fleet", value: "50+" },
|
||||
{ id: "3", icon: MapPin, title: "Laghouat Coverage", value: "100%" }
|
||||
]}
|
||||
title="Trusted by Numbers"
|
||||
description="Our commitment to excellence speaks through our operational results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Omar B.",
|
||||
handle: "@omar_laghouat",
|
||||
testimonial: "Truly the gold standard in Laghouat. Impeccable service and amazing cars.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah L.",
|
||||
handle: "@sarah_travels",
|
||||
testimonial: "Everything was seamless. The booking process was simple and fast.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Ahmed K.",
|
||||
handle: "@ahmed_business",
|
||||
testimonial: "Professional, reliable, and premium vehicles. Will definitely return.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Fatima Y.",
|
||||
handle: "@fatima_luxury",
|
||||
testimonial: "Elegant experience from start to finish. Highly recommend Al Zahra.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2148899711.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Karim M.",
|
||||
handle: "@karim_rental",
|
||||
testimonial: "Great fleet options and very accommodating service. Top notch.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1671.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Leila R.",
|
||||
handle: "@leila_life",
|
||||
testimonial: "The best way to travel around Laghouat. Very satisfied.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586564.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Experiences"
|
||||
description="Hear what our discerning guests have to say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Omar B.", handle: "@omar_laghouat", testimonial: "Truly the gold standard in Laghouat. Impeccable service and amazing cars.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg" },
|
||||
{ id: "2", name: "Sarah L.", handle: "@sarah_travels", testimonial: "Everything was seamless. The booking process was simple and fast.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg" },
|
||||
{ id: "3", name: "Ahmed K.", handle: "@ahmed_business", testimonial: "Professional, reliable, and premium vehicles. Will definitely return.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg" },
|
||||
{ id: "4", name: "Fatima Y.", handle: "@fatima_luxury", testimonial: "Elegant experience from start to finish. Highly recommend Al Zahra.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2148899711.jpg" },
|
||||
{ id: "5", name: "Karim M.", handle: "@karim_rental", testimonial: "Great fleet options and very accommodating service. Top notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1671.jpg" },
|
||||
{ id: "6", name: "Leila R.", handle: "@leila_life", testimonial: "The best way to travel around Laghouat. Very satisfied.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586564.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Experiences"
|
||||
description="Hear what our discerning guests have to say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I book a car?",
|
||||
content: "You can easily book through our WhatsApp link on this site or give us a direct call.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What documents are required?",
|
||||
content: "We require a valid driver's license and national identity documents.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you deliver vehicles?",
|
||||
content: "Yes, we offer complimentary delivery across the city of Laghouat.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I book a car?", content: "You can easily book through our WhatsApp link on this site or give us a direct call." },
|
||||
{ id: "2", title: "What documents are required?", content: "We require a valid driver's license and national identity documents." },
|
||||
{ id: "3", title: "Do you deliver vehicles?", content: "Yes, we offer complimentary delivery across the city of Laghouat." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Luxe Automotives",
|
||||
"Laghouat VIP Club",
|
||||
"Executive Transit Corp",
|
||||
"Grand Hotel Laghouat",
|
||||
"Global Travel Solutions",
|
||||
"Elite Car Group",
|
||||
"Premium Mobility Services",
|
||||
]}
|
||||
title="Our Trusted Partners"
|
||||
description="Proudly working with top-tier brands and local enterprises."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Luxe Automotives", "Laghouat VIP Club", "Executive Transit Corp", "Grand Hotel Laghouat", "Global Travel Solutions", "Elite Car Group", "Premium Mobility Services"]}
|
||||
title="Our Trusted Partners"
|
||||
description="Proudly working with top-tier brands and local enterprises."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to experience premium driving? Connect with us today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact on WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to experience premium driving? Connect with us today."
|
||||
buttons={[{ text: "Contact on WhatsApp", href: "https://wa.me/yournumber" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="AL ZAHRA"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
{
|
||||
label: "Fleet",
|
||||
href: "#fleet",
|
||||
},
|
||||
{
|
||||
label: "Why Us",
|
||||
href: "#why",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="AL ZAHRA"
|
||||
columns={[
|
||||
{ title: "Explore", items: [{ label: "Fleet", href: "#fleet" }, { label: "Why Us", href: "#why" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
{ title: "Connect", items: [{ label: "WhatsApp", href: "#" }, { label: "Facebook", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user