From 3e38a1726ebe0010aaa6d3fbf4c5497ea6e13698 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 19:36:23 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 145 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 106 insertions(+), 39 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b632fb0..bc10aab 100644
--- a/src/app/page.tsx
+++ b/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">
-- 
2.49.1