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

---
 src/app/page.tsx | 150 ++++++++++++++++++++++-------------------------
 1 file changed, 70 insertions(+), 80 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 59754f3..0a86059 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,51 +5,51 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Zap, Users, Award, Handshake, Github, Linkedin, Twitter } from "lucide-react";
+import { Zap, Users, Award, Handshake } from "lucide-react";
 import { useState } from 'react';
 
 export default function LandingPage() {
-  const [flippedCards, setFlippedCards] = useState<{[key: string]: boolean}>({});
+  const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
 
   const toggleFlip = (memberId: string) => {
-    setFlippedCards(prev => ({
+    setFlipped(prev => ({
       ...prev,
       [memberId]: !prev[memberId]
     }));
   };
 
-  // Team members with social links
   const teamMembers = [
     {
       id: "1",      name: "Alex Johnson",      role: "Club President",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1",      imageAlt: "Alex Johnson, Club President",      socials: [
-        { icon: Github, href: "https://github.com/alexjohnson", label: "GitHub" },
-        { icon: Linkedin, href: "https://linkedin.com/in/alexjohnson", label: "LinkedIn" },
-        { icon: Twitter, href: "https://twitter.com/alexjohnson", label: "Twitter" }
+        { icon: "linkedin", url: "https://linkedin.com/in/alexjohnson" },
+        { icon: "github", url: "https://github.com/alexjohnson" },
+        { icon: "twitter", url: "https://twitter.com/alexjohnson" }
       ]
     },
     {
       id: "2",      name: "Sarah Chen",      role: "VP of Projects",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2",      imageAlt: "Sarah Chen, VP of Projects",      socials: [
-        { icon: Github, href: "https://github.com/sarahchen", label: "GitHub" },
-        { icon: Linkedin, href: "https://linkedin.com/in/sarahchen", label: "LinkedIn" },
-        { icon: Twitter, href: "https://twitter.com/sarahchen", label: "Twitter" }
+        { icon: "linkedin", url: "https://linkedin.com/in/sarahchen" },
+        { icon: "github", url: "https://github.com/sarahchen" },
+        { icon: "twitter", url: "https://twitter.com/sarahchen" }
       ]
     },
     {
       id: "3",      name: "Marcus Williams",      role: "Tech Lead",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=3",      imageAlt: "Marcus Williams, Tech Lead",      socials: [
-        { icon: Github, href: "https://github.com/marcuswilliams", label: "GitHub" },
-        { icon: Linkedin, href: "https://linkedin.com/in/marcuswilliams", label: "LinkedIn" },
-        { icon: Twitter, href: "https://twitter.com/marcuswilliams", label: "Twitter" }
+        { icon: "linkedin", url: "https://linkedin.com/in/marcuswilliams" },
+        { icon: "github", url: "https://github.com/marcuswilliams" },
+        { icon: "twitter", url: "https://twitter.com/marcuswilliams" }
       ]
     },
     {
       id: "4",      name: "Emily Rodriguez",      role: "Community Manager",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=4",      imageAlt: "Emily Rodriguez, Community Manager",      socials: [
-        { icon: Github, href: "https://github.com/emilyrodriguez", label: "GitHub" },
-        { icon: Linkedin, href: "https://linkedin.com/in/emilyrodriguez", label: "LinkedIn" },
-        { icon: Twitter, href: "https://twitter.com/emilyrodriguez", label: "Twitter" }
+        { icon: "linkedin", url: "https://linkedin.com/in/emilyrodriguez" },
+        { icon: "github", url: "https://github.com/emilyrodriguez" },
+        { icon: "twitter", url: "https://twitter.com/emilyrodriguez" }
       ]
     }
   ];
@@ -137,85 +137,75 @@ export default function LandingPage() {
       </div>
 
       <div id="team" data-section="team">
-        <div className="w-full">
-          <div className="mx-auto w-content-width px-vw-1_5">
-            <div className="flex flex-col gap-vw-2 mb-vw-3">
-              <div>
-                <div className="inline-flex items-center gap-2 rounded-full bg-accent/10 px-4 py-2 mb-4">
-                  <Users className="w-4 h-4" />
-                  <span className="text-sm font-medium text-foreground/70">Leadership</span>
-                </div>
-                <h2 className="text-5xl font-medium text-foreground mb-4">Meet Our Team</h2>
-                <p className="text-foreground/70">The passionate individuals driving innovation and mentorship within CodeClub.</p>
+        <div className="w-full py-20">
+          <div className="w-full max-w-screen-2xl mx-auto px-4 md:px-8">
+            <div className="mb-12">
+              <div className="inline-flex items-center gap-2 mb-4">
+                <Users className="w-5 h-5" />
+                <span className="text-sm font-medium">Leadership</span>
               </div>
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Meet Our Team</h2>
+              <p className="text-lg text-foreground/80">The passionate individuals driving innovation and mentorship within CodeClub.</p>
             </div>
             
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {teamMembers.map((member) => {
-                const isFlipped = flippedCards[member.id];
-                return (
-                  <div key={member.id} className="h-96">
+              {teamMembers.map((member) => (
+                <div
+                  key={member.id}
+                  className="h-96 cursor-pointer perspective"
+                  onClick={() => toggleFlip(member.id)}
+                >
+                  <div
+                    className="relative w-full h-full transition-transform duration-500 transform-gpu"
+                    style={{
+                      transformStyle: 'preserve-3d',
+                      transform: flipped[member.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
+                    }}
+                  >
+                    {/* Front side - Image */}
                     <div
-                      className="relative w-full h-full cursor-pointer transition-transform duration-500 transform-gpu"
-                      style={{
-                        transformStyle: 'preserve-3d',
-                        transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
-                      }}
-                      onClick={() => toggleFlip(member.id)}
+                      className="absolute w-full h-full bg-white rounded-lg shadow-lg p-4 flex flex-col items-center justify-center"
+                      style={{ backfaceVisibility: 'hidden' }}
                     >
-                      {/* Front side - Profile */}
-                      <div
-                        className="absolute w-full h-full rounded-lg overflow-hidden bg-card border border-accent/20 flex flex-col items-end justify-end p-6 shadow-lg"
-                        style={{
-                          backfaceVisibility: 'hidden'
-                        }}
-                      >
+                      <div className="w-full h-64 mb-4 rounded-lg overflow-hidden">
                         <img
                           src={member.imageSrc}
                           alt={member.imageAlt}
-                          className="absolute inset-0 w-full h-full object-cover"
+                          className="w-full h-full object-cover"
                         />
-                        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent" />
-                        <div className="relative z-10">
-                          <h3 className="text-xl font-semibold text-white">{member.name}</h3>
-                          <p className="text-sm text-white/80">{member.role}</p>
-                        </div>
                       </div>
+                      <h3 className="text-xl font-bold text-center">{member.name}</h3>
+                      <p className="text-sm text-foreground/60 text-center mt-2">{member.role}</p>
+                      <p className="text-xs text-foreground/50 text-center mt-4">Click to view social links</p>
+                    </div>
 
-                      {/* Back side - Social Links */}
-                      <div
-                        className="absolute w-full h-full rounded-lg overflow-hidden bg-primary-cta border border-accent/20 flex flex-col items-center justify-center p-6 shadow-lg"
-                        style={{
-                          backfaceVisibility: 'hidden',
-                          transform: 'rotateY(180deg)'
-                        }}
-                      >
-                        <div className="text-center mb-6">
-                          <p className="text-white font-medium text-lg">Connect</p>
-                        </div>
-                        <div className="flex flex-col gap-4 w-full">
-                          {member.socials.map((social) => {
-                            const Icon = social.icon;
-                            return (
-                              <a
-                                key={social.label}
-                                href={social.href}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-white/20 hover:bg-white/30 text-white transition-colors"
-                                title={social.label}
-                              >
-                                <Icon className="w-5 h-5" />
-                                <span className="text-sm font-medium">{social.label}</span>
-                              </a>
-                            );
-                          })}
-                        </div>
+                    {/* Back side - Social Links */}
+                    <div
+                      className="absolute w-full h-full bg-gradient-to-br from-primary-cta to-primary-cta/80 rounded-lg shadow-lg p-4 flex flex-col items-center justify-center"
+                      style={{
+                        backfaceVisibility: 'hidden',
+                        transform: 'rotateY(180deg)'
+                      }}
+                    >
+                      <h3 className="text-xl font-bold text-white mb-6 text-center">{member.name}</h3>
+                      <div className="flex flex-col gap-4 w-full">
+                        {member.socials.map((social, idx) => (
+                          <a
+                            key={idx}
+                            href={social.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="w-full py-3 px-4 bg-white/20 hover:bg-white/30 text-white rounded-lg text-center font-medium transition-colors capitalize"
+                          >
+                            {social.icon}
+                          </a>
+                        ))}
                       </div>
+                      <p className="text-xs text-white/70 text-center mt-6">Click to flip back</p>
                     </div>
                   </div>
-                );
-              })}
+                </div>
+              ))}
             </div>
           </div>
         </div>