From 094088c9e76fd2ac2e209a72be7c5b1853881260 Mon Sep 17 00:00:00 2001
From: pranavvraja <pranavvraja@gmail.com>
Date: Sun, 13 Oct 2024 01:04:54 +0530
Subject: [PATCH 1/3] update: about section

---
 src/components/common/About.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/common/About.tsx b/src/components/common/About.tsx
index 75e7a64..c91dd29 100644
--- a/src/components/common/About.tsx
+++ b/src/components/common/About.tsx
@@ -6,19 +6,19 @@ const AboutSection: React.FC = () => {
       {/* Background decorative layers */}
       <div className="absolute inset-0">
         <motion.div
-          className="absolute w-full h-full bg-gradient-to-br from-red-600 via-black to-black opacity-70"
+          className="absolute w-full h-full bg-gradient-to-br from-redTheme via-blackTheme to-blackTheme opacity-70"
           initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
+          animate={{ opacity: 1 }}
           transition={{ duration: 1 }}
         />
         <motion.div
-          className="absolute -top-20 -left-20 w-64 h-64 md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
+          className="absolute -top-20 -left-20 w-64 h-64 animate-pulse md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ duration: 1.5, ease: "easeOut" }}
         />
         <motion.div
-          className="absolute -bottom-20 -right-20 w-64 h-64 md:w-96 md:h-96 bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
+          className="absolute -bottom-20 -right-20 w-64 h-64 md:w-96 md:h-96 animate-pulse bg-gradient-to-r from-red-600 to-black opacity-30 rounded-full"
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ duration: 1.5, ease: "easeOut", delay: 0.3 }}
@@ -32,19 +32,15 @@ const AboutSection: React.FC = () => {
         whileInView={{ y: 0, opacity: 1 }}
         transition={{ duration: 1, ease: "easeOut" }}
       >
-        <h2 className="text-4xl md:text-7xl font-bold text-red-600 mb-4 md:mb-6 leading-tight">
+        <h2 className="text-4xl md:text-8xl font-black text-red-600 mb-4 md:mb-6 leading-tight">
           About TEDxSJEC
         </h2>
-        <p className="text-base md:text-lg leading-relaxed mb-4 md:mb-6 text-gray-300">
+        <p className="text-base md:text-3xl leading-relaxed mb-4 md:mb-6 text-gray-300">
           TEDxSJEC is an independently organized event bringing together
           innovators, thinkers, and visionaries from around the world. Our goal
           is to inspire change, provoke deep discussions, and foster creativity
-          through groundbreaking ideas.
-        </p>
-        <p className="text-base md:text-lg leading-relaxed text-gray-300">
-          Join us for a day of inspiring talks, immersive experiences, and
-          powerful conversations. Together, we will explore the future and share
-          ideas that are truly worth spreading.
+          through groundbreaking ideas. Our goal is to inspire change, provoke
+          deep discussions, and foster creativity through groundbreaking ideas.
         </p>
 
         {/* Decorative line */}

From e46858e277313aa4a907f2038386b3a096ca7015 Mon Sep 17 00:00:00 2001
From: pranavvraja <pranavvraja@gmail.com>
Date: Sun, 13 Oct 2024 01:06:05 +0530
Subject: [PATCH 2/3] update: new team section

---
 src/app/page.tsx                              | 16 ++--
 src/components/common/Container-Scroll.tsx    |  2 +-
 src/components/common/Team-Section.tsx        | 44 +++++++++++
 src/components/edil-ozi/card-hover-effect.tsx | 79 +++++++++++++++++++
 4 files changed, 133 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/Team-Section.tsx
 create mode 100644 src/components/edil-ozi/card-hover-effect.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d1a7e1d..de2ddbf 100644
--- a/src/app/page.tsx
+++ b/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 />
diff --git a/src/components/common/Container-Scroll.tsx b/src/components/common/Container-Scroll.tsx
index d62ce43..95217e6 100644
--- a/src/components/common/Container-Scroll.tsx
+++ b/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>
           </>
diff --git a/src/components/common/Team-Section.tsx b/src/components/common/Team-Section.tsx
new file mode 100644
index 0000000..352317f
--- /dev/null
+++ b/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;
diff --git a/src/components/edil-ozi/card-hover-effect.tsx b/src/components/edil-ozi/card-hover-effect.tsx
new file mode 100644
index 0000000..290f896
--- /dev/null
+++ b/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;

From 23bcda88d6817229f0d08409c0a26e097f4dce6d Mon Sep 17 00:00:00 2001
From: pranavvraja <pranavvraja@gmail.com>
Date: Sun, 13 Oct 2024 01:07:39 +0530
Subject: [PATCH 3/3] rm: old teams & about section

---
 .../common/HorizontalScrollCarousel.tsx       | 113 ------------------
 src/components/ui/text-reveal.tsx             |  92 --------------
 2 files changed, 205 deletions(-)
 delete mode 100644 src/components/common/HorizontalScrollCarousel.tsx
 delete mode 100644 src/components/ui/text-reveal.tsx

diff --git a/src/components/common/HorizontalScrollCarousel.tsx b/src/components/common/HorizontalScrollCarousel.tsx
deleted file mode 100644
index cc6cd25..0000000
--- a/src/components/common/HorizontalScrollCarousel.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { tedxsjecAssetsPrefix } from "@/lib/utils";
-import { motion, useTransform, useScroll } from "framer-motion";
-import { useRef } from "react";
-
-const HorizontalScroll = () => {
-  return (
-    <div className="bg-transparent">
-      <HorizontalScrollCarousel />
-    </div>
-  );
-};
-
-const HorizontalScrollCarousel = () => {
-  const targetRef = useRef<HTMLDivElement | null>(null);
-  const { scrollYProgress } = useScroll({
-    target: targetRef,
-  });
-
-  const x = useTransform(scrollYProgress, [0, 1], ["5%", "-50%"]);
-
-  return (
-    <section ref={targetRef} className="relative h-[300vh] ">
-      <div className="sticky top-0 flex h-screen items-center overflow-hidden">
-        <motion.div style={{ x }} className="flex gap-4">
-          <h1 className="text-7xl ml-5 uppercase text-[#ff0000] font-extrabold mb-0">
-            The Team
-          </h1>
-          {cards.map((card) => {
-            return <Card card={card} key={card.id} />;
-          })}
-        </motion.div>
-      </div>
-    </section>
-  );
-};
-
-const Card = ({ card }: { card: CardType }) => {
-  return (
-    <div
-      key={card.id}
-      className="group relative md:h-[450px] md:w-[450px] h-[300px] w-[400px] rounded-3xl mr-4 overflow-hidden bg-neutral-200 "
-    >
-      <div
-        style={{
-          backgroundImage: `url(${card.url})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-        className="absolute inset-0 z-0 duration-300 group-hover:scale-110 transition saturate-0 hover:saturate-100"
-      ></div>
-      <div className="absolute bottom-0 w-full z-10 grid place-content-left">
-        <div className="bg-gradient-to-b w-full  from-black/0 to-black/30 p-8 py-4 text-5xl font-black uppercase text-white ">
-          <p className=" text-3xl f">{card.name}</p>
-          <p className="b text-xl ">{card.title}</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HorizontalScroll;
-
-type CardType = {
-  url: string;
-  title: string;
-  id: number;
-  name: string;
-};
-
-const cards: CardType[] = [
-  // {
-  //   url: "https://tedx-sjec.github.io/website-assets/team/dr-binu-k-g.avif",
-  //   title: "Faculty Co-Ordinator",
-  //   name: "Binu K G",
-  //   id: 1,
-  // },
-  {
-    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
-    title: "Licensee & Organizer",
-    id: 2,
-    name: "Sharon Tyana Menezes",
-  },
-  {
-    url: "/imgs/abstract/3.jpg",
-    title: "Co-Organizer",
-    id: 3,
-    name: "Sasha Sajith",
-  },
-  {
-    url: "/imgs/abstract/4.jpg",
-    title: "Curation Head",
-    id: 4,
-    name: "Vyasa M Nayak",
-  },
-  {
-    url: "/imgs/abstract/5.jpg",
-    title: "Technical Head",
-    id: 5,
-    name: "Hanniel Andrede",
-  },
-  {
-    url: "/imgs/abstract/6.jpg",
-    title: "Design Head",
-    id: 6,
-    name: "Lawrence Robert D'Souza",
-  },
-  // {
-  //   url: "/imgs/abstract/7.jpg",
-  //   title: "Title 7",
-  //   id: 7,
-  //   name: "Binu K G",
-  // },
-];
diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx
deleted file mode 100644
index 15b723f..0000000
--- a/src/components/ui/text-reveal.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { FC, ReactNode, useRef } from "react";
-import { motion, useScroll, useTransform, useInView } from "framer-motion";
-
-import { cn } from "@/lib/utils";
-
-interface TextRevealByWordProps {
-  text: string;
-  className?: string;
-}
-
-export const TextRevealByWord: FC<TextRevealByWordProps> = ({
-  text,
-  className,
-}) => {
-  const targetRef = useRef<HTMLDivElement | null>(null);
-
-  const { scrollYProgress } = useScroll({
-    target: targetRef,
-  });
-  const words = text.split(" ");
-
-  // const ref = useRef(null); // Create a reference for the element
-  // const isInView = useInView(ref, { once: true }); // Trigger animation once when in view
-
-  // Adjust the transform to make it exit only as it reaches the top of the viewport
-  const y = useTransform(scrollYProgress, [0, 0.25], [0, -350]); // Exit moves the heading further up (150px)
-  const opacity = useTransform(scrollYProgress, [0.1, 0.25], [2, 0]); // Fade out starts later and ends as it scrolls up
-
-  return (
-    <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
-      <div
-        className={
-          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent px-[7rem] md:py-[1rem]"
-        }
-      >
-        <motion.h1
-          className="md:text-8xl text-5xl md:text-start text-center px-12 font-extrabold uppercase text-[#ff0000]"
-          // ref={ref}
-          initial={{ opacity: 1, y: -30 }}
-          // animate={isInView ? { opacity: 1, y: 0 } : {}}
-          style={{ y, opacity }} // Bind scroll progress to y and opacity
-          // exit={{ opacity: 0, y: 20 }}
-          transition={{ duration: 1 }}
-        >
-          About
-        </motion.h1>
-
-        <p
-          ref={targetRef}
-          className={
-            "flex flex-wrap p-1 w-full text-2xl md:my-32 font-bold text-black/20 dark:text-white/20 md:p-8 md:text- xl lg:p-10 lg:text-4xl xl:text-6xl "
-          }
-        >
-          {words.map((word, i) => {
-            const start = i / words.length;
-            const end = start + 1 / words.length;
-            return (
-              <Word key={i} progress={scrollYProgress} range={[start, end]}>
-                {word}
-              </Word>
-            );
-          })}
-        </p>
-      </div>
-    </div>
-  );
-};
-
-interface WordProps {
-  children: ReactNode;
-  progress: any;
-  range: [number, number];
-}
-
-const Word: FC<WordProps> = ({ children, progress, range }) => {
-  const opacity = useTransform(progress, range, [0, 1]);
-  return (
-    <span className="xl:lg-3 relative mx-1 lg:mx-2.5">
-      <span className={"absolute opacity-30"}>{children}</span>
-      <motion.span
-        style={{ opacity: opacity }}
-        className={"text-black dark:text-white"}
-      >
-        {children}
-      </motion.span>
-    </span>
-  );
-};
-
-export default TextRevealByWord;