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

Team section

src/app/page.tsx

@@ -21,11 +21,11 @@ export default function Home() {
         <div>
           <StackedCards />
         </div>
-        <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-whiteTheme to-95%">
+        {/* <div className=" bg-gradient-to-b bg-blackTheme from-blackTheme via-redTheme  to-blackTheme to-95%">
           <PreviousEdition />
-        </div>
-        <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">
+        </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 />

src/components/common/About.tsx

@@ -32,7 +32,7 @@ const AboutSection: React.FC = () => {
         whileInView={{ y: 0, opacity: 1 }}
         transition={{ duration: 1, ease: "easeOut" }}
       >
-        <h2 className="text-4xl md:text-8xl font-black text-red-600 mb-4 md:mb-6 leading-tight">
+        <h2 className="text-4xl md:text-[89px] font-black text-red-600 mb-4 md:mb-6 leading-tight">
           About TEDxSJEC
         </h2>
         <p className="text-base md:text-3xl leading-relaxed mb-4 md:mb-6 text-gray-300">

src/components/common/Container-Scroll.tsx

@@ -14,10 +14,15 @@ export function PreviousEdition() {
           </>
         }
       >
-        <video width="100%" height="100%" controls preload="none" poster="">
+        {/* <video width="100%" height="100%" controls preload="none" poster="">
           <source src="/path/to/video.mp4" type="video/mp4" />
           Your browser does not support the video tag.
-        </video>
+        </video> */}
+        <iframe
+          width="100%"
+          height="450"
+          src="http://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
+        ></iframe>
       </ContainerScroll>
     </div>
   );

src/components/common/Team-Section.tsx

@@ -1,43 +1,71 @@
 import CardHoverEffect from "@/components/edil-ozi/card-hover-effect";
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
+import TeamCard from "./TeamCard";
 
 const team = [
   {
     url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
-    title: "Licensee & Organizer",
-    id: 2,
+    title: "Organizer & Licensee",
+    id: 1,
     name: "Sharon Tyana Menezes",
   },
   {
-    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    url: `${tedxsjecAssetsPrefix}/team/sasha.avif`,
     title: "Co-Organizer",
-    id: 3,
+    id: 2,
     name: "Sasha Sajith",
   },
   {
-    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    url: `${tedxsjecAssetsPrefix}/team/hanniele.avif`,
+    title: "Technical Head",
+    id: 3,
+    name: "Hanniel Andrede",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/vyasa.avif`,
     title: "Curation Head",
     id: 4,
     name: "Vyasa M Nayak",
   },
   {
-    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
-    title: "Technical Head",
+    url: `${tedxsjecAssetsPrefix}/team/kaneeksha.avif`,
+    title: "Publicity & Promotions Head",
     id: 5,
-    name: "Hanniel Andrede",
+    name: "Kaneeksha Kiran",
   },
   {
-    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    url: `${tedxsjecAssetsPrefix}/team/lawrence.avif`,
     title: "Design Head",
     id: 6,
     name: "Lawrence Robert D'Souza",
   },
+
+  {
+    url: `${tedxsjecAssetsPrefix}/team/larsen.avif`,
+    title: "Creative Head",
+    id: 8,
+    name: "Larsen Lionel Dsouza",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/ritesh.avif`,
+    title: "Creative Head",
+    id: 9,
+    name: "Ritesh",
+  },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/anupam.avif`,
+    title: "Logistics Head",
+    id: 9,
+    name: "Anupam B Shetty",
+  },
 ];
 
 const Team = () => {
   return (
-    <div className="z-10 px-10 py-8 h-full bg-whiteTheme">
-      <CardHoverEffect members={team} />
+    <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

@@ -0,0 +1,43 @@
+import React from "react";
+
+type Member = {
+  title: string;
+  name: string;
+  id: number;
+  url: string;
+};
+
+type Props = {
+  members: Member[];
+};
+
+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">
+        {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%")
+            }
+          >
+            <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">
+              <h1 className="md:text-2xl text-lg font-black">{name}</h1>
+              <h2 className="font-bold">{title}</h2>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default TeamCard;

src/components/ui/container-scroll-animation.tsx

@@ -85,9 +85,9 @@ export const Card = ({
         boxShadow:
           "2px 2px #0000004d, 4px 2px 5px #0000004a, 9px 9px 9px #00000042, 12px 21px 12px #00000026, 15px 37px 15px #0000000a, 17px 58px 17px #00000003",
       }}
-      className="max-w-5xl -mt-12 mx-auto h-fit  w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
+      className="max-w-5xl -mt-12 mx-auto h-fit  w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl"
     >
-      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-[16px] md:p-4 ">
         {children}
       </div>
     </motion.div>