Merge branch 'main' of https://github.com/TEDx-SJEC/website into perf…

…ormers

src/app/page.tsx

@@ -6,39 +6,38 @@ import StackedCards from "@/components/stacking-cards/stacked";
 import { PreviousEdition } from "@/components/common/Container-Scroll";
 import About from "@/components/common/About";
 import Team from "@/components/common/Team-Section";
-import Performers from "@/components/widget/performers"
-
+import Performers from "@/components/widget/performers";
 
 export default function Home() {
-  return (
-    <>
-      <div className="z-20 relative bg-blackTheme overflow-x-clip">
-        <div
-          className="flex flex-col items-center justify-center h-screen w-full p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
-          id="hero"
-        ></div>
-        <div className="h-screen" id="about">
-          <About />
-        </div>
+    return (
+        <>
+            <div className="z-20 relative bg-blackTheme overflow-x-clip">
+                <div
+                    className="flex flex-col items-center justify-center h-screen w-full p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
+                    id="hero"
+                ></div>
+                <div className="h-screen" id="about">
+                    <About />
+                </div>
 
-        <div>
-          {/* <StackedCards /> */}
-          <h1 className="md:text-8xl mb-[40px] text-4xl text-center font-black text-whiteTheme px-10">
-            The Performers
-          </h1>
-          <Performers/>
-        </div>
-        <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-blackTheme to-95%">
-          <PreviousEdition />
-        </div>
-        <div className="bg-blackTheme mb-[100vh] h-fit ">
-          <h1 className="md:text-8xl text-4xl text-center font-black text-whiteTheme px-10">
-            The Team
-          </h1>
-          <Team />
-        </div>
-      </div>
-      <ParallaxFooter />
-    </>
-  );
+                <div>
+                    {/* <StackedCards /> */}
+                    <h1 className="md:text-8xl mb-[40px] text-4xl text-center font-black text-whiteTheme px-10">
+                        The Performers
+                    </h1>
+                    <Performers />
+                </div>
+                <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-blackTheme to-95%">
+                    <PreviousEdition />
+                </div>
+                <div className="bg-blackTheme mb-[100vh] h-fit mt-14">
+                    <h1 className="md:text-8xl text-4xl text-center font-black text-whiteTheme px-10">
+                        The Team
+                    </h1>
+                    <Team />
+                </div>
+            </div>
+            <ParallaxFooter />
+        </>
+    );
 }

src/components/common/Team-Section.tsx

@@ -1,4 +1,3 @@
-import CardHoverEffect from "@/components/edil-ozi/card-hover-effect";
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
 import TeamCard from "./TeamCard";
 
@@ -63,8 +62,6 @@ const team = [
 const Team = () => {
   return (
     <div className="z-10 md:px-10 py-20 h-full  flex items-center justify-center">
-      {/* <CardHoverEffect members={team} /> */}
-
       <TeamCard members={team} />
     </div>
   );

src/components/common/TeamCard.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 
 type Member = {
   title: string;
@@ -14,22 +15,27 @@ type Props = {
 const TeamCard: React.FC<Props> = ({ members }) => {
   return (
     <>
-      <div className="grid lg:grid-cols-2 xl:grid-cols-3  gap-x-14 gap-y-8 items-center justify-items-center md:px-8 md:pl-16 w-full">
+      <div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-x-14 gap-y-8 items-center justify-items-center md:px-8 md:pl-16 w-full">
         {members.map(({ name, title, url }) => (
           <div
             key={url}
-            className="relative rounded-2xl md:h-[230px] md:w-[350px] h-[250px] w-[250px] my-4 bg-cover text-center flex content-center items-end bg-center bg-no-repeat text-white saturate-0 hover:saturate-100 group transition-all ease-in-out duration-500 hover:bg-scale-105"
-            style={{ backgroundImage: `url(${url})`, backgroundSize: "100%" }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundSize = "105%")
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundSize = "100%")
-            }
+            className="relative rounded-2xl md:h-[230px] md:w-[350px] h-[250px] w-[250px] my-4 bg-cover text-center flex content-center items-end bg-center text-white sm:saturate-0 hover:saturate-100 saturate-100 group transition-all ease-in-out duration-500 overflow-hidden"
           >
+            {/* Image as background */}
+            <div className="absolute inset-0 rounded-xl">
+              <Image
+                src={url}
+                alt={name}
+                fill
+                className="object-cover rounded-2xl transition-transform duration-500 group-hover:scale-105"
+              />
+            </div>
+
+            {/* Gradient overlay */}
             <div className="absolute inset-0 bg-gradient-to-tl from-redTheme from-15% via-transparent opacity-0 group-hover:opacity-70 transition-opacity duration-300 rounded-2xl"></div>
 
-            <div className="relative w-full py-6 bg-gradient-to-t from-blackTheme group-hover:from rounded-2xl transition duration-500">
+            {/* Text content */}
+            <div className="relative w-full py-6 bg-gradient-to-t from-blackTheme group-hover:from-blackTheme rounded-2xl transition duration-500">
               <h1 className="md:text-2xl text-lg font-black">{name}</h1>
               <h2 className="font-bold">{title}</h2>
             </div>