Merge version_5 into main #6
1423
src/app/layout.tsx
1423
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
151
src/app/page.tsx
151
src/app/page.tsx
@@ -12,45 +12,8 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Calendar, Camera, Heart, MapPin, Send, Sparkles, Star, Users, Zap, Home, CircleDollarSign, ArrowLeftRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [flippedCards, setFlippedCards] = useState<{[key: string]: boolean}>({});
|
||||
|
||||
const toggleFlip = (id: string) => {
|
||||
setFlippedCards(prev => ({
|
||||
...prev,
|
||||
[id]: !prev[id]
|
||||
}));
|
||||
};
|
||||
|
||||
const testimonialStories = [
|
||||
{
|
||||
id: "1", name: "Marcus Thompson", role: "Software Engineer", company: "Tech Industry", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg?_wi=2", imageAlt: "happy BMW owner car pride portrait smiling", story: "Joining this club changed my life. I found not just a community of BMW enthusiasts, but a family that celebrates who I am. The track day experiences are incredible!"
|
||||
},
|
||||
{
|
||||
id: "2", name: "David Nguyen", role: "Designer", company: "Creative Studios", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=2", imageAlt: "smiling automotive enthusiast community member photo", story: "The Pride Cruise was the most meaningful event I've ever attended. Cruising with hundreds of like-minded individuals, celebrating our identity and our passion for BMWs was unforgettable."
|
||||
},
|
||||
{
|
||||
id: "3", name: "Ryan Patterson", role: "Business Owner", company: "Automotive Sales", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-enjoying-views-car-trip_23-2149401821.jpg?_wi=2", imageAlt: "enthusiastic car lover community connection portrait", story: "As someone in the automotive industry, this club brought together my two passions in a way I never expected. The networking and friendships here are genuine and lasting."
|
||||
},
|
||||
{
|
||||
id: "4", name: "Jamie Sullivan", role: "Financial Analyst", company: "Finance Sector", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-buyer-liking-new-vehicle-interior-vehicle-dealership_342744-733.jpg", imageAlt: "smiling community member automotive passion lifestyle", story: "The community and support I've found here is unmatched. From technical advice to personal support, everyone here truly cares about each other. It's more than a club—it's home."
|
||||
},
|
||||
{
|
||||
id: "5", name: "Alex Kim", role: "Marketing Manager", company: "Digital Agency", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg?_wi=3", imageAlt: "happy BMW owner car pride portrait smiling", story: "What started as a casual interest in BMWs became a transformative journey. The inclusive environment allowed me to express myself freely while surrounded by people who get it."
|
||||
},
|
||||
{
|
||||
id: "6", name: "Sam López", role: "Mechanical Engineer", company: "Motorsports", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=3", imageAlt: "smiling automotive enthusiast community member photo", story: "The technical knowledge shared here is phenomenal. But what really impressed me is the welcoming spirit. Everyone from beginners to experts is celebrated and supported equally."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
@@ -75,7 +38,7 @@ export default function LandingPage() {
|
||||
{ name: "Gallery", id: "gallery" }
|
||||
]}
|
||||
button={{
|
||||
text: "Become a Member", href: "join"
|
||||
text: "Join Free Today", href: "join"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -89,7 +52,7 @@ export default function LandingPage() {
|
||||
title="Horsepower Meets Pride"
|
||||
description="Drive Together. The ultimate community for LGBTQ BMW enthusiasts. Join exclusive events, connect with fellow drivers, and celebrate automotive passion without limits."
|
||||
buttons={[
|
||||
{ text: "Become a Member", href: "join" },
|
||||
{ text: "Join Free Today", href: "join" },
|
||||
{ text: "Explore Events", href: "events" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -236,75 +199,45 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div className="py-20 px-4 md:px-6">
|
||||
<div className="w-full max-w-7xl mx-auto">
|
||||
<div className="mb-16">
|
||||
<div className="inline-block mb-4 px-4 py-2 bg-accent/10 rounded-full">
|
||||
<span className="text-sm font-semibold text-accent">Testimonials</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Member Stories</h2>
|
||||
<p className="text-lg text-foreground/70">Hear from our community members about their experience with Gay Club BMW. Click any card to read their story.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{testimonialStories.map((testimonial) => (
|
||||
<div
|
||||
key={testimonial.id}
|
||||
onClick={() => toggleFlip(testimonial.id)}
|
||||
className="h-96 cursor-pointer perspective"
|
||||
style={{
|
||||
perspective: '1000px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: flippedCards[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
>
|
||||
{/* Front of card - Member photo */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-card rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={testimonial.imageSrc}
|
||||
alt={testimonial.imageAlt}
|
||||
className="w-32 h-32 rounded-full object-cover mb-4"
|
||||
/>
|
||||
<h3 className="text-xl font-bold text-center">{testimonial.name}</h3>
|
||||
<p className="text-sm text-foreground/60 text-center mb-2">{testimonial.role}</p>
|
||||
<p className="text-sm text-foreground/50 text-center">{testimonial.company}</p>
|
||||
<div className="flex gap-1 mt-4">
|
||||
{Array.from({ length: testimonial.rating }).map((_, i) => (
|
||||
<Star key={i} size={16} className="fill-accent text-accent" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-foreground/40 mt-6 text-center">Click to read story</p>
|
||||
</div>
|
||||
|
||||
{/* Back of card - Story */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-primary-cta rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)'
|
||||
}}
|
||||
>
|
||||
<p className="text-sm text-center text-white leading-relaxed">
|
||||
{testimonial.story}
|
||||
</p>
|
||||
<p className="text-xs text-white/70 mt-6 text-center">Click to close</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TestimonialCardOne
|
||||
title="Member Stories"
|
||||
description="Hear from our community members about their experience with Gay Club BMW."
|
||||
tag="Testimonials"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marcus Thompson", role: "Software Engineer", company: "Tech Industry", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg?_wi=2", imageAlt: "happy BMW owner car pride portrait smiling"
|
||||
},
|
||||
{
|
||||
id: "2", name: "David Nguyen", role: "Designer", company: "Creative Studios", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=2", imageAlt: "smiling automotive enthusiast community member photo"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Ryan Patterson", role: "Business Owner", company: "Automotive Sales", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-enjoying-views-car-trip_23-2149401821.jpg?_wi=2", imageAlt: "enthusiastic car lover community connection portrait"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Jamie Sullivan", role: "Financial Analyst", company: "Finance Sector", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-buyer-liking-new-vehicle-interior-vehicle-dealership_342744-733.jpg", imageAlt: "smiling community member automotive passion lifestyle"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Alex Kim", role: "Marketing Manager", company: "Digital Agency", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-coffee-break-city_23-2148289249.jpg?_wi=3", imageAlt: "happy BMW owner car pride portrait smiling"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Sam López", role: "Mechanical Engineer", company: "Motorsports", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=3", imageAlt: "smiling automotive enthusiast community member photo"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
carouselMode="buttons"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Member testimonials section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
@@ -397,4 +330,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user