Update src/app/page.tsx

Merge version_3 into main

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
+        <div className="py-20 px-4 md:px-6">
-          title="Member Stories"
+          <div className="w-full max-w-7xl mx-auto">
-          description="Hear from our community members about their experience with Gay Club BMW."
+            <div className="mb-16">
-          tag="Testimonials"
+              <div className="inline-block mb-4 px-4 py-2 bg-accent/10 rounded-full">
-          tagIcon={Star}
+                <span className="text-sm font-semibold text-accent">Testimonials</span>
-          tagAnimation="slide-up"
+              </div>
-          testimonials={[
+              <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>
-              id: "1",              name: "Marcus Thompson",              role: "Software Engineer",              company: "Tech Industry",              rating: 5,
+            </div>
-              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"
+
-            },
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {
+              {testimonialStories.map((testimonial) => (
-              id: "2",              name: "David Nguyen",              role: "Designer",              company: "Creative Studios",              rating: 5,
+                <div
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=2",              imageAlt: "smiling automotive enthusiast community member photo"
+                  key={testimonial.id}
-            },
+                  onClick={() => toggleFlip(testimonial.id)}
-            {
+                  className="h-96 cursor-pointer perspective"
-              id: "3",              name: "Ryan Patterson",              role: "Business Owner",              company: "Automotive Sales",              rating: 5,
+                  style={{
-              imageSrc: "http://img.b2bpic.net/free-photo/family-enjoying-views-car-trip_23-2149401821.jpg?_wi=2",              imageAlt: "enthusiastic car lover community connection portrait"
+                    perspective: '1000px'
-            },
+                  }}
-            {
+                >
-              id: "4",              name: "Jamie Sullivan",              role: "Financial Analyst",              company: "Finance Sector",              rating: 5,
+                  <div
-              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"
+                    className="relative w-full h-full transition-transform duration-500"
-            },
+                    style={{
-            {
+                      transformStyle: 'preserve-3d',
-              id: "5",              name: "Alex Kim",              role: "Marketing Manager",              company: "Digital Agency",              rating: 5,
+                      transform: flippedCards[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
-              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"
+                    }}
-            },
+                  >
-            {
+                    {/* Front of card - Member photo */}
-              id: "6",              name: "Sam López",              role: "Mechanical Engineer",              company: "Motorsports",              rating: 5,
+                    <div
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-repairmen-car-workshop_23-2147897995.jpg?_wi=3",              imageAlt: "smiling automotive enthusiast community member photo"
+                      className="absolute w-full h-full bg-card rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
-            }
+                      style={{
-          ]}
+                        backfaceVisibility: 'hidden'
-          gridVariant="three-columns-all-equal-width"
+                      }}
-          carouselMode="buttons"
+                    >
-          animationType="slide-up"
+                      <img
-          textboxLayout="default"
+                        src={testimonial.imageSrc}
-          useInvertedBackground={false}
+                        alt={testimonial.imageAlt}
-          ariaLabel="Member testimonials section"
+                        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,
+              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"
-              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,
+              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"
-              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,
+              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"
-              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,
+              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"
-              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,
+              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"
-              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"