From 155bbbcf591b2f5105fa785e6323081ea99d8db5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Feb 2026 12:37:15 +0000
Subject: [PATCH] Update src/app/page.tsx

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

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a93eb3..f770b20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,22 +6,12 @@ import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboard
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
-import { useState } from 'react';
+import { Award, BookOpen, Briefcase, Code, GitBranch, Mail, MessageSquare, Quote, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';
 
 export default function LandingPage() {
-  const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({});
-
-  const toggleFlip = (id: string) => {
-    setFlippedCards(prev => ({
-      ...prev,
-      [id]: !prev[id]
-    }));
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -136,109 +126,42 @@ export default function LandingPage() {
       </div>
       
       <div id="testimonials" data-section="testimonials">
-        <div className="py-16 md:py-24">
-          <div className="w-content-width mx-auto px-6">
-            <div className="mb-12">
-              <h2 className="text-4xl md:text-5xl font-bold mb-4">What Our Members Say</h2>
-              <p className="text-lg text-foreground/75">Real stories from computer club members about their learning journey and growth.</p>
-            </div>
-            
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {[
-                {
-                  id: "1",                  name: "Alex Chen",                  handle: "@AlexDev",                  shortText: "Landed dream job at top tech company",                  fullText: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1"
-                },
-                {
-                  id: "2",                  name: "Sarah Mitchell",                  handle: "@SarahCodes",                  shortText: "Built impressive portfolio through projects",                  fullText: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2"
-                },
-                {
-                  id: "3",                  name: "Jordan Lee",                  handle: "@JordanDev",                  shortText: "Full-stack development in just months",                  fullText: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3"
-                },
-                {
-                  id: "4",                  name: "Maya Patel",                  handle: "@MayaCode",                  shortText: "Won first place in hackathon",                  fullText: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4"
-                },
-                {
-                  id: "5",                  name: "David Brown",                  handle: "@DavidDeveloper",                  shortText: "Built a supportive tech network",                  fullText: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5"
-                },
-                {
-                  id: "6",                  name: "Lisa Wong",                  handle: "@LisaTech",                  shortText: "Discovered career possibilities",                  fullText: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.",                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6"
-                }
-              ].map((testimonial) => (
-                <div
-                  key={testimonial.id}
-                  className="h-64 cursor-pointer perspective"
-                  onClick={() => toggleFlip(testimonial.id)}
-                  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 side */}
-                    <div
-                      className="absolute w-full h-full bg-card rounded-lg p-6 flex flex-col justify-between border border-accent/20"
-                      style={{
-                        backfaceVisibility: 'hidden',
-                        WebkitBackfaceVisibility: 'hidden'
-                      }}
-                    >
-                      <div>
-                        <div className="flex items-center gap-3 mb-4">
-                          {testimonial.imageSrc && (
-                            <img
-                              src={testimonial.imageSrc}
-                              alt={testimonial.name}
-                              className="w-12 h-12 rounded-full object-cover"
-                            />
-                          )}
-                          <div>
-                            <p className="font-semibold text-foreground">{testimonial.name}</p>
-                            <p className="text-sm text-foreground/60">{testimonial.handle}</p>
-                          </div>
-                        </div>
-                        <p className="text-sm text-foreground/80 line-clamp-4">{testimonial.shortText}</p>
-                      </div>
-                      <p className="text-xs text-accent text-center mt-4">Click to read full testimonial</p>
-                    </div>
-
-                    {/* Back side */}
-                    <div
-                      className="absolute w-full h-full bg-primary-cta rounded-lg p-6 flex flex-col justify-between border border-accent/20"
-                      style={{
-                        backfaceVisibility: 'hidden',
-                        WebkitBackfaceVisibility: 'hidden',
-                        transform: 'rotateY(180deg)'
-                      }}
-                    >
-                      <div>
-                        <p className="text-primary-cta-text text-sm leading-relaxed">{testimonial.fullText}</p>
-                      </div>
-                      <div className="flex items-center gap-2 mt-4">
-                        {testimonial.imageSrc && (
-                          <img
-                            src={testimonial.imageSrc}
-                            alt={testimonial.name}
-                            className="w-10 h-10 rounded-full object-cover"
-                          />
-                        )}
-                        <div>
-                          <p className="text-sm font-semibold text-primary-cta-text">{testimonial.name}</p>
-                          <p className="text-xs text-primary-cta-text/70">{testimonial.handle}</p>
-                        </div>
-                      </div>
-                      <p className="text-xs text-primary-cta-text/50 text-center mt-2">Click to go back</p>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
+        <TestimonialCardThirteen
+          title="What Our Members Say"
+          description="Real stories from computer club members about their learning journey and growth."
+          tag="Community"
+          tagIcon={MessageSquare}
+          testimonials={[
+            {
+              id: "1",              name: "Alex Chen",              handle: "@AlexDev",              testimonial: "CompClub transformed my coding skills. The workshops and mentorship helped me land my dream job at a top tech company. Grateful for this amazing community!",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1"
+            },
+            {
+              id: "2",              name: "Sarah Mitchell",              handle: "@SarahCodes",              testimonial: "The collaborative projects here are incredible. I've built friendships and a portfolio that actually impresses recruiters. Best decision ever!",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2"
+            },
+            {
+              id: "3",              name: "Jordan Lee",              handle: "@JordanDev",              testimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is unmatched. Highly recommend CompClub!",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3"
+            },
+            {
+              id: "4",              name: "Maya Patel",              handle: "@MayaCode",              testimonial: "The hackathons taught me so much about teamwork and problem-solving. Plus, winning first place was the cherry on top!",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4"
+            },
+            {
+              id: "5",              name: "David Brown",              handle: "@DavidDeveloper",              testimonial: "CompClub isn't just about coding. It's about building a network of passionate people who genuinely want to help each other succeed.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5"
+            },
+            {
+              id: "6",              name: "Lisa Wong",              handle: "@LisaTech",              testimonial: "The industry expert talks opened my eyes to so many career possibilities. This community has given me the confidence to pursue my tech dreams.",              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6"
+            }
+          ]}
+          showRating={true}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
       </div>
       
       <div id="contact" data-section="contact">
@@ -290,4 +213,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file