Merge pull request #62 from TEDx-SJEC/minor-edits

Minor edits

Author: Vyshnav001

src/components/common/Container-Scroll.tsx

@@ -21,7 +21,7 @@ export function PreviousEdition() {
         <iframe
           width="100%"
           height="450"
-          src="http://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
+          src="https://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
         ></iframe>
       </ContainerScroll>
     </div>

src/components/common/Footer.tsx

@@ -63,7 +63,7 @@ const Footer = (props: Props) => {
                         <TextGlitch
                           textOne="INSTAGRAM"
                           textTwo="tedxsjec"
-                          className="font-bold text-black  text-[15px] lg:text-[20px] leading-tight"
+                          className="font-bold text-[15px] lg:text-[20px] leading-tight"
                         />
                       </Link>
                       <Link
@@ -75,7 +75,7 @@ const Footer = (props: Props) => {
                         <TextGlitch
                           textOne="LINKEDIN"
                           textTwo="tedxsjec"
-                          className="font-bold text-black  text-[15 px] lg:text-[20px] leading-tight"
+                          className="font-bold  text-[15 px] lg:text-[20px] leading-tight"
                         />
                       </Link>
                     </section>

src/components/common/cta-section.tsx

@@ -14,17 +14,20 @@ export function CtaSection() {
             "radial-gradient(ellipse 100% 80% at 50% 100%, black, transparent)",
         }}
       ></div>
-      <div className="relative z-10 max-w-3xl mx-auto text-center px-6">
+      <div className="relative z-10 max-w-4xl mx-auto text-center px-6">
         <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 text-white">
-          Live What&apos;s Worth Living
+          Explore What&apos;s Worth Living
         </h1>
         <p className="text-lg sm:text-xl md:text-2xl mb-8 text-white/80">
-          Celebrate the joy of accomplishment with an app designed to track your
-          progress and motivate your efforts.
+          Join us as we explore the core of what gives life purpose through
+          thought-provoking concepts, novel viewpoints, and inspirational tales.
+          This journey is sure to be amazing, filled with revelations that
+          inspire us to think, connect, and uncover the real meaning of our
+          life.
         </p>
-        <Button className="bg-orange-600 hover:bg-orange-700 text-white font-semibold py-3 px-8 text-lg rounded-md">
-          Register Now
-        </Button>
+        {/* <Button className="bg-orange-600 hover:bg-orange-700 text-white font-semibold py-3 px-8 text-lg rounded-md">
+          Registrations Open Soon
+        </Button> */}
       </div>
     </div>
   );

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 md: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/hero.tsx

@@ -129,13 +129,14 @@ export default function HeroHighlight() {
               size="lg"
               className="bg-red-600 hover:bg-red-700 text-white py-2 transition-all duration-300 transform hover:scale-105"
             >
-              Register Now <ArrowRight className="ml-2" />
+              Registrations Open Soon
+              {/* <ArrowRight className="ml-2" /> */}
             </Button>
           </div>
-          <div className="text-sm text-white space-y-2">
+          <div className="text-md text-white space-y-2">
             <div className="flex items-center">
-              <Calendar className="mr-2" size={16} />
-              <p>Date: September 15, 2023</p>
+              <Calendar className="mr-2" size={20} />
+              <p>Date: December 14, 2024</p>
             </div>
             {/* <div className="flex items-center">
               <MapPin className="mr-2" size={16} />

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() {