update: new team section

src/app/page.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import React from "react";
-import HorizontalScroll from "@/components/common/HorizontalScrollCarousel";
-import TextReveal from "@/components/ui/text-reveal";
 import ParallaxFooter from "@/components/common/Footer";
 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";
 
 export default function Home() {
   return (
     <>
-      <div className="z-20 relative bg-black overflow-x-clip">
+      <div className="z-20 relative bg-blackTheme overflow-x-clip">
         <div
-          className="flex flex-col items-center justify-center h-screen p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
+          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">
@@ -22,11 +21,14 @@ export default function Home() {
         <div>
           <StackedCards />
         </div>
-        <div className=" bg-gradient-to-b bg-black from-black via-red-600  to-white to-95%">
+        <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-whiteTheme to-95%">
           <PreviousEdition />
         </div>
-        <div className="backdrop-invert mb-[100vh]">
-          <HorizontalScroll />
+        <div className="bg-whiteTheme mb-[100vh] min-h-screen h-fit">
+          <h1 className="md:text-8xl text-4xl text-center font-black text-blackTheme px-10">
+            The Team
+          </h1>
+          <Team />
         </div>
       </div>
       <ParallaxFooter />

src/components/common/Container-Scroll.tsx

@@ -8,7 +8,7 @@ export function PreviousEdition() {
       <ContainerScroll
         titleComponent={
           <>
-            <h1 className="md:text-7xl text-3xl font-semibold text-black dark:text-white">
+            <h1 className="md:text-8xl text-3xl font-semibold text-black dark:text-white">
               Check out the Previous Edition
             </h1>
           </>

src/components/common/Team-Section.tsx

@@ -0,0 +1,44 @@
+import CardHoverEffect from "@/components/edil-ozi/card-hover-effect";
+import { tedxsjecAssetsPrefix } from "@/lib/utils";
+
+const team = [
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Licensee & Organizer",
+    id: 2,
+    name: "Sharon Tyana Menezes",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Co-Organizer",
+    id: 3,
+    name: "Sasha Sajith",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Curation Head",
+    id: 4,
+    name: "Vyasa M Nayak",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Technical Head",
+    id: 5,
+    name: "Hanniel Andrede",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Design Head",
+    id: 6,
+    name: "Lawrence Robert D'Souza",
+  },
+];
+
+const Team = () => {
+  return (
+    <div className="z-10 px-10 py-8 h-full bg-whiteTheme">
+      <CardHoverEffect members={team} />
+    </div>
+  );
+};
+export default Team;

src/components/edil-ozi/card-hover-effect.tsx

@@ -0,0 +1,79 @@
+import { FC, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+
+interface Props {
+  members: { title: string; name: string; id: number; url: string }[];
+  wrapperClasses?: string;
+  itemClasses?: string;
+}
+
+const Index: FC<Props> = ({ members, itemClasses, wrapperClasses }) => {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+
+  return (
+    <div
+      className={cn(
+        "grid lg:grid-cols-4 sm:grid-cols-2 space-x-4 min-h-fit",
+        itemClasses
+      )}
+    >
+      {members.map(({ name, title, url }, idx) => (
+        <div
+          key={idx}
+          className={cn(
+            "relative flex flex-col h-fit max-h-min items-center gap-3 p-4",
+            itemClasses
+          )}
+          onMouseEnter={() => setHoveredIdx(idx)}
+          onMouseLeave={() => setHoveredIdx(null)}
+        >
+          <AnimatePresence>
+            {hoveredIdx === idx && (
+              <motion.span
+                className={cn(
+                  "absolute inset-0 z-0 block h-full w-full  bg-redTheme bg-opacity-80",
+                  wrapperClasses
+                )}
+                layoutId="cardHoverEffect"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 0.8,
+                  transition: { duration: 0.1 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.1, delay: 0.2 },
+                }}
+              >
+                {/* <Image
+                  src={
+                    "https://tedx-sjec.github.io/website-assets/logo/ActualLogo.PNG"
+                  }
+                  alt="logo"
+                  height={70}
+                  width={70}
+                  className="fixed px-4 right-0 items-center"
+                /> */}
+              </motion.span>
+            )}
+          </AnimatePresence>
+          <div className="z-[1] w-fit h-min space-y-2 flex flex-col md:items-start items-center">
+            <Image
+              src={url}
+              alt={name}
+              height={250}
+              width={250}
+              className="object-cover w-fit md:h-fit h-1/2"
+            />
+            <h1 className="font-black text-xl text-blackTheme">{name}</h1>
+            <p className="text-blackTheme ">{title}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default Index;