Merge pull request #45 from TEDx-SJEC/team-section

Team section mobile

src/app/page.tsx

@@ -24,7 +24,7 @@ export default function Home() {
         {/* <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 ">
+        <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>

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>