From 3553bc5b85aa687ae8501d6aa3cca665c4c8f923 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 27 Feb 2026 12:56:30 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 149 ++++++++++++++++++++++++++++++----------------- 1 file changed, 95 insertions(+), 54 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index c5e8427..c02a1a3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,33 +10,36 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar 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 React, { useState } from 'react'; export default function LandingPage() { - const [flipped, setFlipped] = useState>({}); + const [flippedCards, setFlippedCards] = useState<{ [key: string]: boolean }>({}); const toggleFlip = (id: string) => { - setFlipped(prev => ({ ...prev, [id]: !prev[id] })); + setFlippedCards(prev => ({ + ...prev, + [id]: !prev[id] + })); }; - const testimonialCards = [ + const 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1", imageAlt: "Alex Chen" + 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=1", imageAlt: "Alex Chen", fullTestimonial: "CompClub transformed my coding skills in ways I never expected. The workshops and mentorship helped me land my dream job at a top tech company. I went from struggling with basic algorithms to confidently tackling system design problems. The community support was incredible throughout my entire journey. Grateful for this amazing community!" }, { - 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2", imageAlt: "Sarah Mitchell" + 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=2", imageAlt: "Sarah Mitchell", fullTestimonial: "The collaborative projects here are absolutely incredible. I've built lifelong friendships and a portfolio that actually impresses recruiters. Working on real-world applications with talented peers pushed me to learn faster and deeper than I ever could alone. Best decision ever!" }, { - 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3", imageAlt: "Jordan Lee" + 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=3", imageAlt: "Jordan Lee", fullTestimonial: "From zero experience to building full-stack applications in just a few months. The mentorship here is truly unmatched. Expert mentors were always available to guide me through challenges and celebrate my wins. The structured learning path made everything clear and achievable. Highly recommend CompClub!" }, { - 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4", imageAlt: "Maya Patel" + 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!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=4", imageAlt: "Maya Patel", fullTestimonial: "The hackathons taught me so much about teamwork, time management, and creative problem-solving under pressure. Building amazing projects in 48 hours with brilliant people was exhilarating. Plus, winning first place was the cherry on top!" }, { - 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.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5", imageAlt: "David Brown" + 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.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=5", imageAlt: "David Brown", fullTestimonial: "CompClub isn't just about coding. It's about building a genuine network of passionate people who truly want to help each other succeed. The culture of mentoring and support runs deep in this community. I've made friends who've become collaborators on side projects and potential co-founders." }, { - 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.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6", imageAlt: "Lisa Wong" + 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.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg?_wi=6", imageAlt: "Lisa Wong", fullTestimonial: "The industry expert talks opened my eyes to so many career possibilities I didn't even know existed. Hearing directly from engineers at FAANG companies was incredibly inspiring. This community has given me the confidence and skills to pursue my tech dreams with clarity and purpose." } ]; @@ -154,62 +157,97 @@ export default function LandingPage() {
-
-
+
+
+ {/* Header */}
-
- - - Community Voices - +
+ Community Voices

What Our Members Say

-

Real stories from computer club members about their learning journey and growth.

+

Real stories from computer club members about their learning journey and growth.

- + + {/* Flip Cards Grid */}
- {testimonialCards.map((card) => { - const isFlipped = flipped[card.id]; + {testimonials.map((testimonial) => { + const isFlipped = flippedCards[testimonial.id]; return (
toggleFlip(card.id)} + key={testimonial.id} + className="h-80 cursor-pointer perspective" + onClick={() => toggleFlip(testimonial.id)} > -
- {/* Front of card */} + {/* Front */}
- {card.imageSrc && ( - {card.imageAlt} - )} -

{card.name}

-

{card.handle}

-

Click to read testimonial

-
- - {/* Back of card */} -
-
-

{card.testimonial}

-

— {card.name}

+ {/* Author Info at Top */} +
+ {testimonial.imageAlt} +
+

{testimonial.name}

+

{testimonial.handle}

+
+
+ + {/* Short Testimonial */} +
+

+ "{testimonial.testimonial}" +

+
+ + {/* Flip Hint */} +
+

Click to read full testimonial →

+
+
+ + {/* Back */} +
+ {/* Author Info at Top */} +
+ {testimonial.imageAlt} +
+

{testimonial.name}

+

{testimonial.handle}

+
+
+ + {/* Full Testimonial */} +
+

+ "{testimonial.fullTestimonial}" +

+
+ + {/* Flip Hint */} +
+

← Click to see summary

@@ -217,11 +255,14 @@ export default function LandingPage() { ); })}
- + + {/* CTA Button */}