Initial commit
This commit is contained in:
253
src/app/page.tsx
Normal file
253
src/app/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Search, User, Truck, Sparkles, Star, Award } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="fluid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Hero", id: "hero-section" },
|
||||
{ name: "About", id: "about-section" },
|
||||
{ name: "Feature", id: "features-section" },
|
||||
{ name: "Product", id: "product-section" },
|
||||
{ name: "Testimonial", id: "testimonial-section" },
|
||||
{ name: "Contact", id: "contact-section" }
|
||||
]}
|
||||
brandName="Luxury Auto & Truck Inspections"
|
||||
button={{
|
||||
text: "Schedule Inspection", href: "#contact-section"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero-section" data-section="hero-section">
|
||||
<HeroCarouselLogo
|
||||
logoText="PREMIUM VEHICLE INSPECTIONS"
|
||||
description="Where precision meets perfection. Our expert team delivers comprehensive evaluations tailored for discerning clients who demand the highest standards of quality and reliability."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Services", href: "#features-section"
|
||||
},
|
||||
{
|
||||
text: "Schedule Inspection", href: "#contact-section"
|
||||
}
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/dark-crossover-speeds-wet-winter-city-road-motion-dynamic-winter-traffic_169016-71251.jpg", imageAlt: "Luxury sedan being inspected with precision tools"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/opening-door-modern-stylish-bearded-businessman-automobile-saloon_146671-16006.jpg", imageAlt: "Professional team examining commercial truck"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-antique-white-car-headlight_181624-4205.jpg", imageAlt: "Modern inspection facility interior with advanced equipment"
|
||||
}
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
ariaLabel="Luxury vehicle and commercial truck inspection services showcase"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-section" data-section="about-section">
|
||||
<MediaSplitTabsAbout
|
||||
title="Premium Automotive Excellence"
|
||||
description="Discover our commitment to unparalleled quality and service in both luxury vehicles and commercial truck inspections."
|
||||
tabs={[
|
||||
{
|
||||
id: "luxury", label: "Luxury Vehicles", description: "Curated selection of premium automobiles with meticulous attention to detail and superior craftsmanship."
|
||||
},
|
||||
{
|
||||
id: "commercial", label: "Commercial Inspections", description: "Comprehensive fleet management solutions ensuring safety, compliance, and optimal performance for your business."
|
||||
}
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/dealership-salesman-answering-customers-questions-about-cars_482257-124577.jpg"
|
||||
imageAlt="Luxury vehicle and commercial truck inspection process"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="About section highlighting our luxury vehicle and commercial truck inspection services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features-section" data-section="features-section">
|
||||
<FeatureCardTwentySix
|
||||
title="Premium Inspection & Sales Services"
|
||||
description="Experience unparalleled quality assurance and personalized service tailored for discerning clients who demand excellence in every detail."
|
||||
tag="Trusted Excellence"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Comprehensive Vehicle Inspection", description: "Our meticulous inspection process ensures every aspect of your vehicle meets the highest standards of safety and performance.", imageSrc: "https://img.b2bpic.net/free-photo/young-auto-repairman-working-car-engine-while-using-digital-tablet-repair-shop_637285-4309.jpg", imageAlt: "Detailed vehicle inspection process", buttonIcon: Search,
|
||||
buttonHref: "#contact-section"
|
||||
},
|
||||
{
|
||||
title: "Luxury Car Concierge", description: "From acquisition to delivery, our dedicated concierge service handles every detail with the sophistication your vehicle deserves.", imageSrc: "https://img.b2bpic.net/free-photo/waist-up-salesman-with-female-customer_329181-20641.jpg", imageAlt: "Luxury car concierge service", buttonIcon: User,
|
||||
buttonHref: "#about-section"
|
||||
},
|
||||
{
|
||||
title: "Commercial Fleet Solutions", description: "Specialized inspection and maintenance programs designed for fleet managers seeking reliability and operational efficiency.", imageSrc: "https://img.b2bpic.net/free-photo/group-trucks-parked-line-truck-stop_342744-1296.jpg", imageAlt: "Commercial truck fleet inspection", buttonIcon: Truck,
|
||||
buttonHref: "#product-section"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Services", href: "#about-section"
|
||||
},
|
||||
{
|
||||
text: "Request Consultation", href: "#contact-section"
|
||||
}
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-section" data-section="product-section">
|
||||
<ProductCardTwo
|
||||
products={[
|
||||
{
|
||||
id: "luxury-sedan-2024", brand: "Aurelius", name: "Luxury Sedan 2024", price: "$89,900", rating: 4.9,
|
||||
reviewCount: "128 reviews", imageSrc: "https://img.b2bpic.net/free-photo/young-woman-choosing-car-car-showroom_1303-17456.jpg"
|
||||
},
|
||||
{
|
||||
id: "executive-suv-2024", brand: "NobleEdge", name: "Executive SUV 2024", price: "$74,500", rating: 4.8,
|
||||
reviewCount: "96 reviews", imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-interior-brown-black-colors_181624-31177.jpg"
|
||||
},
|
||||
{
|
||||
id: "premium-coupe-2024", brand: "Vanguard", name: "Premium Coupe 2024", price: "$67,200", rating: 4.7,
|
||||
reviewCount: "84 reviews", imageSrc: "https://img.b2bpic.net/free-photo/closeup-tail-light-red-vintage-car-parked-outdoors-rain_181624-11787.jpg"
|
||||
},
|
||||
{
|
||||
id: "luxury-hatchback-2024", brand: "Aurelius", name: "Luxury Hatchback 2024", price: "$52,800", rating: 4.6,
|
||||
reviewCount: "73 reviews", imageSrc: "https://img.b2bpic.net/free-photo/fashionable-ladies-going-out-car_132075-12211.jpg"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
title="Premium Vehicle Selection"
|
||||
description="Discover our curated collection of luxury vehicles, each meticulously crafted for discerning clients who demand excellence."
|
||||
tag="Featured Models"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Vehicles", href: "#"
|
||||
}
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial-section" data-section="testimonial-section">
|
||||
<TestimonialCardThirteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "testimonial-1", name: "Alexander Sterling", handle: "@alex_sterling", testimonial: "The attention to detail and craftsmanship in every vehicle they inspect is unparalleled. Their service transformed my fleet management approach.", rating: 5,
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-car-showroom-dealership_23-2149117172.jpg", imageAlt: "Alexander Sterling, satisfied client"
|
||||
},
|
||||
{
|
||||
id: "testimonial-2", name: "Isabella Chen", handle: "@isabella_c", testimonial: "I was impressed by their thoroughness and professionalism. They helped me find the perfect luxury sedan that exceeded all expectations.", rating: 5,
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/auto-repairman-talking-his-colleague-while-running-car-diagnostic-analyzing-data-workshop_637285-7676.jpg", imageAlt: "Isabella Chen, happy customer"
|
||||
},
|
||||
{
|
||||
id: "testimonial-3", name: "Marcus Rodriguez", handle: "@marcus_r", testimonial: "As a fleet manager, I appreciate the precision and reliability of their inspections. They've become our go-to partner for vehicle quality assurance.", rating: 5,
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/modern-stylish-bearded-businessman-automobile-saloon_146671-16002.jpg", imageAlt: "Marcus Rodriguez, commercial client"
|
||||
}
|
||||
]}
|
||||
showRating={true}
|
||||
carouselMode="buttons"
|
||||
animationType="slide-up"
|
||||
title="What Our Clients Say"
|
||||
description="Discover why discerning clients trust our premium inspection and sales services for their luxury vehicles and commercial fleets."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Trusted Excellence"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Reviews", href: "#"
|
||||
}
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-section" data-section="contact-section">
|
||||
<ContactCenter
|
||||
tag="Get In Touch"
|
||||
title="Ready to Elevate Your Fleet?"
|
||||
description="Connect with our team of experts who specialize in premium vehicle sales and comprehensive inspection services tailored for discerning clients."
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your professional email"
|
||||
buttonText="Schedule Consultation"
|
||||
termsText="By submitting, you agree to our Privacy Policy and Terms of Service."
|
||||
ariaLabel="Contact section for luxury vehicle and truck inspection services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-section" data-section="footer-section">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about-section" },
|
||||
{ label: "Our Services", href: "#features-section" },
|
||||
{ label: "Careers", href: "#contact-section" },
|
||||
{ label: "Press", href: "#testimonial-section" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Luxury Vehicles", href: "#product-section" },
|
||||
{ label: "Commercial Trucks", href: "#product-section" },
|
||||
{ label: "Inspection Services", href: "#features-section" },
|
||||
{ label: "Financing Options", href: "#contact-section" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact-section" },
|
||||
{ label: "FAQs", href: "#about-section" },
|
||||
{ label: "Service Locations", href: "#contact-section" },
|
||||
{ label: "Warranty Information", href: "#features-section" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2023 Prestige Motors. All rights reserved."
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user