Merge version_4 into main #5
278
src/app/page.tsx
278
src/app/page.tsx
@@ -1,265 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Zap, Star, Sparkles, Mail, Heart, Calendar } from 'lucide-react';
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmall"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Events", id: "events" },
|
||||
{ name: "Members", id: "members" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Audi Club"
|
||||
bottomLeftText="Passionate Audi Enthusiasts"
|
||||
bottomRightText="hello@audiclub.com"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
tag="Automotive Excellence"
|
||||
tagIcon={Zap}
|
||||
title="Experience the Audi Club Community"
|
||||
description="Join a passionate community of Audi enthusiasts. Connect with fellow owners, participate in exclusive events, and celebrate the engineering excellence that defines the Audi brand."
|
||||
buttons={[
|
||||
{ text: "Join Today", href: "#members" },
|
||||
{ text: "Learn More", href: "#about" }
|
||||
]}
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-choosing-car-car-showroom_1303-15152.jpg", imageAlt: "Audi performance vehicles showcase" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/male-female-mechanics-working-shop-car_23-2150169930.jpg?_wi=1", imageAlt: "Audi club community gathering" }
|
||||
]}
|
||||
rating={5}
|
||||
ratingText="Loved by 500+ Audi enthusiasts"
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
tag="About Us"
|
||||
title="Driven by Passion for Audi"
|
||||
description="The Audi Club is more than just a membership organization—it's a global community dedicated to celebrating automotive excellence, engineering innovation, and the shared passion of Audi enthusiasts. Since our founding, we've connected thousands of owners and admirers who appreciate the precision, performance, and design that make Audi vehicles extraordinary."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-female-mechanics-working-shop-car_23-2150169930.jpg?_wi=2"
|
||||
imageAlt="Audi club community members"
|
||||
buttons={[{ text: "Discover Our Mission", href: "#contact" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
title="What We Offer"
|
||||
description="Discover the exclusive benefits and features that come with membership."
|
||||
tag="Member Benefits"
|
||||
tagIcon={Star}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Exclusive Events", description: "Access track days, car shows, and meet-ups tailored for Audi owners. Network with fellow enthusiasts and experience your vehicle in controlled racing environments.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139289.jpg?_wi=1", imageAlt: "Audi club track day event"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Performance Resources", description: "Expert guidance on vehicle maintenance, upgrades, and performance tuning. Connect with certified Audi technicians and access our comprehensive technical library.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-working-service_23-2150171272.jpg?_wi=1", imageAlt: "Performance tuning workshop"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Community Support", description: "Join our online forums, local chapters, and global network. Share experiences, get advice, and build lasting friendships with passionate Audi enthusiasts.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-laptop_1170-1611.jpg?_wi=1", imageAlt: "Professional maintenance service"
|
||||
}
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="members" data-section="members">
|
||||
<PricingCardNine
|
||||
title="Membership Plans"
|
||||
description="Choose the membership level that best fits your Audi passion and lifestyle."
|
||||
tag="Join Now"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "basic", title: "Bronze Member", price: "$49", period: "/year", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-car-car-showroom_1303-14558.jpg", imageAlt: "Bronze membership benefits", button: { text: "Get Started", href: "#contact" },
|
||||
features: [
|
||||
"Access to member forums", "Monthly newsletter", "Exclusive merchandise", "10% parts discount", "Community event invitations"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "pro", title: "Silver Member", price: "$99", period: "/year", imageSrc: "http://img.b2bpic.net/free-photo/effect-city-lights-night_23-2149338569.jpg", imageAlt: "Silver membership benefits", button: { text: "Upgrade Now", href: "#contact" },
|
||||
features: [
|
||||
"All Bronze benefits", "Track day access (4x/year)", "Priority event registration", "15% parts discount", "Technical mentorship program", "Exclusive merchandise"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "elite", title: "Gold Member", price: "$199", period: "/year", imageSrc: "http://img.b2bpic.net/free-vector/elegant-visiting-card-with-vip-style_23-2147661678.jpg", imageAlt: "Gold membership benefits", button: { text: "Premium Access", href: "#contact" },
|
||||
features: [
|
||||
"All Silver benefits", "Unlimited track day access", "VIP event invitations", "20% parts discount", "Concierge service", "Annual Audi Club jacket", "Recognition in annual report"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="events" data-section="events">
|
||||
<BlogCardOne
|
||||
title="Upcoming Events"
|
||||
description="Stay tuned for our next gathering of Audi enthusiasts."
|
||||
tag="Calendar"
|
||||
tagIcon={Calendar}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Track Day", title: "Spring Track Experience at Laguna Seca", excerpt: "Join us for an exhilarating day of controlled driving on the famous Laguna Seca circuit. Perfect for both experienced track enthusiasts and first-timers.", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139289.jpg?_wi=2", imageAlt: "Track day event at Laguna Seca", authorName: "Audi Club Events", authorAvatar: "http://img.b2bpic.net/free-photo/serious-confident-red-haired-business-lady-wearing-jacket-standing-with-arms-folded_74855-10381.jpg", date: "March 15, 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Car Show", title: "Annual Audi Car Show & Concours", excerpt: "Showcase your pride and joy alongside some of the finest Audi vehicles. Categories for stock, modified, and classic models. Judging and awards available.", imageSrc: "http://img.b2bpic.net/free-photo/male-female-mechanics-working-shop-car_23-2150169930.jpg?_wi=3", imageAlt: "Annual car show lineup", authorName: "Audi Club Events", authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-woman-doing-yoga_23-2149247860.jpg", date: "April 20, 2025"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Social", title: "Monthly Cruise Night - Downtown District", excerpt: "Casual meetup for cruising through scenic routes and enjoying dinner together. All Audi owners welcome. Meet at Central Plaza at 6 PM.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-working-service_23-2150171272.jpg?_wi=2", imageAlt: "Group cruise night meetup", authorName: "Audi Club Events", authorAvatar: "http://img.b2bpic.net/free-photo/closeup-happy-good-looking-young-man_1262-3489.jpg", date: "Every third Saturday"
|
||||
},
|
||||
{
|
||||
id: "4", category: "Workshop", title: "Maintenance Workshop: DIY Basics", excerpt: "Learn essential maintenance tips and tricks from our certified technicians. Covering oil changes, filter replacements, and fluid checks for optimal performance.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-laptop_1170-1611.jpg?_wi=2", imageAlt: "Maintenance workshop session", authorName: "Audi Club Technical", authorAvatar: "http://img.b2bpic.net/free-photo/smiling-woman-with-book_23-2147767502.jpg", date: "April 5, 2025"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Member Stories"
|
||||
description="Hear from Audi enthusiasts who've embraced the community."
|
||||
tag="Testimonials"
|
||||
tagIcon={Heart}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="depth-3d"
|
||||
showRating={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marcus J.", handle: "@audiRS7Lover", testimonial: "The Audi Club transformed my ownership experience. I've made lifelong friends and learned so much about my RS7. The track days are unforgettable!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-confident-red-haired-business-lady-wearing-jacket-standing-with-arms-folded_74855-10381.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Chen", handle: "@Q4Enthusiast", testimonial: "Being part of this community feels like family. Everyone is so passionate and welcoming. The events are top-notch, and the technical resources are invaluable.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-doing-yoga_23-2149247860.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", name: "David Roberts", handle: "@AudiA6Owner", testimonial: "From track days to casual cruises, every event is perfectly organized. The camaraderie among members is genuine, and I've improved my driving skills significantly.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-good-looking-young-man_1262-3489.jpg"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Lisa K.", handle: "@AudiTTQueen", testimonial: "The best investment I made for my Audi ownership. The technical mentorship has saved me thousands on maintenance, and the social aspect is just as rewarding.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-with-book_23-2147767502.jpg"
|
||||
},
|
||||
{
|
||||
id: "5", name: "James Mitchell", handle: "@RS4Passion", testimonial: "Exceptional community with world-class events. The track days are professionally run, and I've connected with genuine car enthusiasts from around the globe.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/angry-handsome-blonde-man-looks-front-isolated-purple-wall_141793-66190.jpg"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Amanda Torres", handle: "@AudiE-TronClub", testimonial: "Great platform to connect with other Audi owners. The forums are active, the events are always exciting, and the community spirit is truly special.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-dark-jacket-pink-background_179666-14390.jpg"
|
||||
}
|
||||
]}
|
||||
cardClassName="bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 shadow-lg hover:shadow-xl transition-shadow duration-300 rounded-xl"
|
||||
imageWrapperClassName="rounded-t-lg overflow-hidden"
|
||||
nameClassName="text-lg font-semibold text-slate-900"
|
||||
handleClassName="text-sm text-slate-600 font-medium"
|
||||
testimonialClassName="text-slate-700 italic leading-relaxed"
|
||||
ratingClassName="flex gap-1 justify-center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Ready to Join the Audi Club?"
|
||||
description="Connect with our community today. Whether you have questions about membership, upcoming events, or want to get more involved, we'd love to hear from you."
|
||||
title="Welcome to Audi Club"
|
||||
description="Join the community of Audi enthusiasts. Experience exclusive events, connect with fellow owners, and celebrate automotive excellence."
|
||||
tag="Community"
|
||||
tagIcon={ChevronDown}
|
||||
imageSrc="/placeholder.jpg"
|
||||
imageAlt="Audi Club Community"
|
||||
buttons={[
|
||||
{ text: "Email Us", href: "mailto:hello@audiclub.com" },
|
||||
{ text: "Join Discord", href: "#" }
|
||||
{ text: "Join Now", href: "#contact" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
contentClassName="bg-gradient-to-r from-slate-800 to-slate-900 border border-slate-700 shadow-2xl rounded-2xl p-12"
|
||||
titleClassName="text-white text-4xl font-bold"
|
||||
descriptionClassName="text-slate-200 text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Audi Club"
|
||||
copyrightText="© 2025 Audi Club. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Community", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Membership", href: "#members" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Forums", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Technical Guides", href: "#" },
|
||||
{ label: "Maintenance Tips", href: "#" },
|
||||
{ label: "Performance", href: "#" },
|
||||
{ label: "FAQ", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Discord", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
containerClassName="bg-gradient-to-b from-slate-900 to-slate-950 border-t border-slate-800 shadow-2xl"
|
||||
logoTextClassName="text-2xl font-bold text-white"
|
||||
columnTitleClassName="text-white font-semibold text-lg mb-4"
|
||||
columnItemClassName="text-slate-300 hover:text-white transition-colors duration-200"
|
||||
copyrightTextClassName="text-slate-400"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user