Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e38a1726e | |||
| 8eb7d8eb4b | |||
| f0272a2a60 | |||
| 4e6d1dd1f2 | |||
| 7c9031935c | |||
| a394787fcc | |||
| e7a22dbbbf | |||
| 33ac93ef0e | |||
| b12cb18280 |
162
src/app/page.tsx
162
src/app/page.tsx
@@ -12,8 +12,45 @@ 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"
|
||||
@@ -199,45 +236,75 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
@@ -249,24 +316,19 @@ export default function LandingPage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "BMW M Series", name: "M440i xDrive Sedan", price: "Owner: Marcus T.", rating: 5,
|
||||
reviewCount: "High Performance", imageSrc: "http://img.b2bpic.net/free-photo/closeup-tail-light-red-vintage-car-parked-outdoors-rain_181624-11787.jpg?_wi=2", imageAlt: "luxury BMW M series performance vehicle professional"
|
||||
id: "1", brand: "BMW M Series", name: "M440i xDrive Sedan", price: "Owner: Marcus T.", rating: 5, reviewCount: "High Performance", imageSrc: "http://img.b2bpic.net/free-photo/closeup-tail-light-red-vintage-car-parked-outdoors-rain_181624-11787.jpg?_wi=2", imageAlt: "luxury BMW M series performance vehicle professional"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "BMW M Series", name: "M440i xDrive Coupe", price: "Owner: David N.", rating: 5,
|
||||
reviewCount: "Speed Enthusiast", imageSrc: "http://img.b2bpic.net/free-photo/sunset-coast-drive_23-2151948125.jpg?_wi=2", imageAlt: "BMW sports car motion racing speed photo"
|
||||
id: "2", brand: "BMW M Series", name: "M440i xDrive Coupe", price: "Owner: David N.", rating: 5, reviewCount: "Speed Enthusiast", imageSrc: "http://img.b2bpic.net/free-photo/sunset-coast-drive_23-2151948125.jpg?_wi=2", imageAlt: "BMW sports car motion racing speed photo"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "BMW Z Series", name: "M440i Roadster", price: "Owner: Ryan P.", rating: 5,
|
||||
reviewCount: "Open Air Joy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-man-getting-out-car_23-2148332969.jpg?_wi=2", imageAlt: "pristine BMW detail luxury car aesthetic"
|
||||
id: "3", brand: "BMW Z Series", name: "M440i Roadster", price: "Owner: Ryan P.", rating: 5, reviewCount: "Open Air Joy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-man-getting-out-car_23-2148332969.jpg?_wi=2", imageAlt: "pristine BMW detail luxury car aesthetic"
|
||||
},
|
||||
{
|
||||
id: "4", brand: "BMW 7 Series", name: "M760i Luxury Sedan", price: "Owner: Jamie S.", rating: 5,
|
||||
reviewCount: "Luxury Driving", imageSrc: "http://img.b2bpic.net/free-photo/closeup-tail-light-red-vintage-car-parked-outdoors-rain_181624-11787.jpg?_wi=3", imageAlt: "luxury BMW M series performance vehicle professional"
|
||||
id: "4", brand: "BMW 7 Series", name: "M760i Luxury Sedan", price: "Owner: Jamie S.", rating: 5, reviewCount: "Luxury Driving", imageSrc: "http://img.b2bpic.net/free-photo/closeup-tail-light-red-vintage-car-parked-outdoors-rain_181624-11787.jpg?_wi=3", imageAlt: "luxury BMW M series performance vehicle professional"
|
||||
},
|
||||
{
|
||||
id: "5", brand: "BMW X Series", name: "M440i Performance SUV", price: "Owner: Alex K.", rating: 5,
|
||||
reviewCount: "Adventure Ready", imageSrc: "http://img.b2bpic.net/free-photo/sunset-coast-drive_23-2151948125.jpg?_wi=3", imageAlt: "BMW sports car motion racing speed photo"
|
||||
id: "5", brand: "BMW X Series", name: "M440i Performance SUV", price: "Owner: Alex K.", rating: 5, reviewCount: "Adventure Ready", imageSrc: "http://img.b2bpic.net/free-photo/sunset-coast-drive_23-2151948125.jpg?_wi=3", imageAlt: "BMW sports car motion racing speed photo"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
@@ -335,4 +397,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #6139e6;
|
||||
--background: #ffffff;
|
||||
--card: #f0f0f0;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #ff1493;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #6139e6;
|
||||
--background-accent: #b3a8e8;
|
||||
--accent: #00bfff;
|
||||
--background-accent: #ffd700;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user