update: speakers and performers

src/components/common/speakers.tsx

@@ -4,8 +4,9 @@ import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Lenis from "lenis";
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
+import MoreInfo from "../ui/SpringModal";
 
-const performers = [
+const speakers = [
   {
     id: 1,
     name: "Karen Kshiti Suvarna",
@@ -30,6 +31,14 @@ const performers = [
       "Badekkila Pradeep is a versatile actor, model, writer, and distinguished voice artist from Karnataka. Beginning as a reporter in 2006, Pradeep found his passion in voice-over, transforming Kannada TV narration with his unique style. He's voiced popular shows like Bigg Boss Kannada, Bangalore metro announcements, and numerous campaigns across languages, including Kannada, Tulu, Telugu, Tamil, Hindi, and English. An established voice for major Kannada TV channels, Pradeep is also an actor in Kannada and Tamil Television shows and films and a writer with over 20 years in Kannada publications.",
     img: `${tedxsjecAssetsPrefix}/speakers/Pradeep.avif`,
   },
+  {
+    id: 4,
+    name: "Namitha Marimuthu",
+    profession: "International Model, Actress, and Social Activist",
+    description:
+      "Namitha Marimuthu is an international model, actress, and social activist who has made history as the first transgender woman to reach the finals of Miss Universe India in 2024. She is the CEO and founder of Miss Queen India and the owner of Alfeem India, both of which promote inclusivity and empowerment. Namitha’s accolades include titles like Miss Trans Star International 2019, Miss International Queen 2022, and Miss Popular of the World 2022. Her appearance on Bigg Boss Tamil Season 5 amplified her voice as a champion for LGBTQ+ rights in India. Through her achievements and advocacy, Namitha continues to inspire and pave the way for future generations.",
+    img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M1.avif`,
+  },
 ];
 
 export default function Speakers() {
@@ -80,8 +89,8 @@ export default function Speakers() {
       <h1 className="md:text-8xl text-4xl font-black text-center pt-8 text-redTheme">
         The Speakers
       </h1>
-      <div className="grid md:max-w-[1200px] mx-auto grid-rows-4 px-4 box-border">
-        {performers.map((card, index) => (
+      <div className="grid md:max-w-[1200px] mx-auto grid-rows-4 gap-y-20 px-4 box-border">
+        {speakers.map((card, index) => (
           <div
             className="sticky top-0 rounded-2xl"
             data-index={index}
@@ -90,24 +99,27 @@ export default function Speakers() {
               if (el) cardsRef.current[index] = el;
             }}
           >
-            <div className="flex overflow-hidden mt-40 bg-white will-change-transform md:h-[700px] h-[450px]  transform-origin-top-center w-full">
-              <div className="flex flex-shrink-0 w-1/2">
+            <div className="flex flex-col md:flex-row my-32  overflow-hidden bg-white will-change-transform md:h-[700px] h-[470px]  transform-origin-top-center w-full">
+              <div className="flex flex-shrink-0 md:w-1/2 md:h-full h-2/3">
                 <img
                   className="w-full h-full object-cover aspect-square"
                   src={card.img}
                   alt={`Card Image ${index + 1}`}
                 />
               </div>
-              <div className="flex flex-col w-1/2 md:p-[40px_30px] p-3">
+              <div className="flex flex-col md:w-1/2 md:p-[40px_30px] p-3">
                 <h1 className="text-2xl lg:text-5xl font-black text-blackTheme m-0 p-0 leading-tight md:py-4 py-2">
                   {card.name}
                 </h1>
                 <p className="md:text-2xl  font-semibold text-blackTheme leading-tight md:pb-4 pb-2">
                   {card.profession}
                 </p>
-                <p className="md:text-xl text-xs leading-tight  text-blackTheme ">
+                <p className="md:text-xl text-xs leading-tight hidden md:block  text-blackTheme ">
                   {card.description}
                 </p>
+                <div className="block md:hidden">
+                  <MoreInfo description={card.description} />
+                </div>
               </div>
             </div>
           </div>

src/components/edil-ozi/text-glitch.tsx

@@ -17,10 +17,10 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
       )}
     >
       <span className="invisible whitespace-nowrap">{textOne}</span>
-      <span className="absolute left-0 top-0 text-blackTheme transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
+      <span className="absolute left-0 top-0 text-whiteTheme transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
         {textOne}
       </span>
-      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
+      <span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-redTheme whitespace-nowrap">
         {textTwo}
       </span>
     </div>

src/components/ui/SpringModal.tsx

@@ -0,0 +1,72 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Dispatch, SetStateAction, useState } from "react";
+
+// Define props type for ExampleWrapper
+type ExampleWrapperProps = {
+  description: string;
+};
+
+const MoreInfo = ({ description }: ExampleWrapperProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="bg-redTheme text-white font-medium px-4 py-2 rounded hover:opacity-90 transition-opacity"
+      >
+        More Info
+      </button>
+      {/* Pass props down to SpringModal */}
+      <SpringModal
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        description={description}
+      />
+    </>
+  );
+};
+
+// Define props type for SpringModal
+type SpringModalProps = {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  description: string;
+};
+
+const SpringModal = ({ isOpen, setIsOpen, description }: SpringModalProps) => {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={() => setIsOpen(false)}
+          className=" backdrop-blur fixed inset-0 z-50 grid place-items-center  cursor-pointer h-full w-full"
+        >
+          <motion.div
+            initial={{ scale: 0, rotate: "0deg" }}
+            animate={{ scale: 1, rotate: "0deg" }}
+            exit={{ scale: 0, rotate: "0deg" }}
+            onClick={(e) => e.stopPropagation()}
+            className="bg-redTheme text-white p-2 h-full w-full max-w-lg cursor-default relative overflow-hidden py-2"
+          >
+            <div className="relative z-10 flex flex-col justify-between h-full">
+              <p className="text-center mb-6 leading-snug">{description}</p>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="bg-white hover:opacity-90 transition-opacity text-blackTheme font-semibold w-full py-2 mb-4 rounded"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default MoreInfo;

src/components/widget/performers.tsx

@@ -30,6 +30,17 @@ const performerSections: PerformerSection[] = [
       // `${tedxsjecAssetsPrefix}/performers/Yukthi2.avif`,
     ],
   },
+  {
+    name: "Agasthyam Kalaripayattu",
+    profession: "Martial Arts Institution",
+    description:
+      "Agasthyam Kalaripayattu, a premier martial arts institution, preserves and teaches the ancient art of Kalaripayattu from Kerala, India. Founded and led by Gurukkal S Mahesh, Agasthyam continues a legacy over 129 years old, deeply rooted in traditional combat techniques, self-defense, weaponry, and spiritual growth. This renowned school offers rigorous training that builds agility, strength, and resilience, merging physical discipline with profound cultural heritage. Agasthyam is a respected destination for those who seek not only to master Kalaripayattu but also to forge a deeper, spiritual connection to this timeless art form.",
+    images: [
+      `${tedxsjecAssetsPrefix}/performers/Agasthyam1.avif`,
+      // `${tedxsjecAssetsPrefix}/performers/Agasthyam2.avif`,
+      // `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`,
+    ],
+  },
 ];
 
 export default function Performers() {