Merge pull request #83 from TEDx-SJEC/contact

Prev Edition Images
TEDx-SJEC · Nov 29, 2024 · eab9b4c · eab9b4c
2 parents 10e1c80 + d12059b
commit eab9b4c
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 77 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import TEDxStarsCanvas from "@/components/ui/stars";
-import Nav from "@/components/widget/header";
 import Script from "next/script";
 import { ScrollProgressBar } from "@/components/common/scroll-progress";
 import Footer from "@/components/common/footer";
@@ -43,9 +42,7 @@ export default function RootLayout({
         <link rel="manifest" href="/site.webmanifest" />
       </head>
       <body className={(inter.className = "overflow-x-hidden")}>
-        <div className="fixed top-0 w-full h-[80px] z-50 overflow-x-hidden  backdrop-blur-md head-5 bg-black/5" />
         <ScrollProgressBar />
-        <Nav />
         <TEDxStarsCanvas />
         <Providers>{children} </Providers>
         <Footer />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,6 +9,7 @@ import Performers from "@/components/widget/performers";
 import HeroHighlight from "@/components/widget/hero";
 import Footer from "@/components/common/contact-page";
 import CTA from "@/components/common/cta-section-2";
+import Nav from "@/components/widget/header";
 export default function Home() {
   // const [loading, setLoading] = useState(true);
 
@@ -19,6 +20,9 @@ export default function Home() {
 
   return (
     <>
+      <div className="fixed top-0 w-full h-[80px] z-40 overflow-x-hidden  backdrop-blur-md head-5 bg-black/5" />
+
+      <Nav />
       <div className="z-20 relative pt-20 overflow-x-clip 1">
         <HeroHighlight />
         <div className="h-full  mt-20 mb-20 lg:mb-40" id="about">
@@ -38,9 +42,9 @@ export default function Home() {
 
           <Performers />
         </div>
-        {/* <div className="">
+        <div className="">
           <PreviousEdition />
-        </div> */}
+        </div>
         <div id="team" className="bg-transparent h-fit mt-14">
           <h1 className="md:text-8xl text-4xl text-center font-black text-redTheme px-10">
             The Team

diff --git a/src/app/previous-editions/page.tsx b/src/app/previous-editions/page.tsx
@@ -8,32 +8,62 @@ type Props = {};
 const Previous = (props: Props) => {
   const router = useRouter();
   return (
-    <div className="my-24 mx-auto w-fit px-4">
-      <div className="flex items-center justify-start w-min lg:px-20 px-4 mb-4">
-        <button
-          className="text-red-600 hover:text-red-800 flex items-center space-x-2"
-          onClick={() => router.back()}
-        >
-          <svg
-            className="w-5 h-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
+    <div className="mx-auto w-full ">
+      <div
+        className="h-[60vh] flex flex-col text-center bg-gradient-to-b from-redTheme/60 py-8"
+        // style={{
+        //   borderBottomLeftRadius: "100% 60%",
+        //   borderBottomRightRadius: "100% 60%",
+        // }}
+      >
+        <div className="flex items-center justify-start w-min lg:px-20 px-4 mb-4">
+          <button
+            className="text-white font-semibold hover:text-slate-300 transition-all flex items-center space-x-2"
+            onClick={() => router.back()}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          <span>Back</span>
-        </button>
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span>Back</span>
+          </button>
+        </div>
+        <div className="my-auto">
+          {/* <h1 className="text-center xl:text-7xl text-3xl font-black py-5 text-redTheme">
+            Looking back at TEDxSJEC
+          </h1>
+          <p className="xl:w-1/3 xl:text-2xl font-semibold text-neutral-300 mx-auto ">
+            Revisit TEDxSJEC 2020 and 2022, where inspiring stories and
+            transformative ideas left a lasting impact.
+          </p> */}
+          <h2 className="sm:text-6xl text-3xl md:text-[80px] font-black text-whiteTheme mb-4 md:mb-6 leading-tight">
+            Looking back at TED<sup>x</sup>
+            <span className="pl-1 font-semibold">SJEC</span>
+          </h2>
+          <p className="text-base xl:w-1/2 mx-auto md:text-3xl leading-relaxed mb-4 md:mb-6 text-gray-300">
+            Revisit TED<sup>x</sup>
+            <span className="pl-1">SJEC</span> 2020 and 2022, where inspiring
+            stories and transformative ideas left a lasting impact.
+          </p>
+        </div>
       </div>
-      <h1 className="text-center text-6xl font-black">2022 Edition</h1>
+      <h1 className="text-center xl:text-6xl text-2xl my-5 font-black">
+        2022 Edition
+      </h1>
       <UnsplashGrid year={2022} />
-      <h1 className="text-center text-6xl font-black">2020 Edition</h1>
+      <h1 className="text-center xl:text-6xl text-2xl my-5 mt-40 font-black">
+        2020 Edition
+      </h1>
       <UnsplashGrid year={2020} />
     </div>
   );

diff --git a/src/components/common/container-scroll.tsx b/src/components/common/container-scroll.tsx
@@ -21,7 +21,7 @@ export function PreviousEdition() {
           width="100%"
           height="450"
           src="https://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
-          className="md:h-[450px] h-[200px]"
+          className="md:h-[450px] h-[250px]"
         ></iframe>
       </ContainerScroll>
     </div>

diff --git a/src/components/common/gridsplash.tsx b/src/components/common/gridsplash.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { Suspense, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useInView } from "framer-motion";
 import Image from "next/image";
 import { X } from "lucide-react";
@@ -21,14 +21,16 @@ function UnsplashGrid(props: UnsplashGridProps) {
           <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
             <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
               <>
-                {prevEdition22.map((img, index) => (
-                  <ImageItem
-                    key={img.id}
-                    item={img}
-                    index={index}
-                    setSelected={setSelected}
-                  />
-                ))}
+                <Suspense fallback={<ImagePlaceholder />}>
+                  {prevEdition22.map((img, index) => (
+                    <ImageItem
+                      key={img.id}
+                      item={img}
+                      index={index}
+                      setSelected={setSelected}
+                    />
+                  ))}
+                </Suspense>
               </>
             </div>
           </div>
@@ -37,15 +39,17 @@ function UnsplashGrid(props: UnsplashGridProps) {
         <div className="flex justify-center">
           <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
             <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
-            <>
-                {prevEdition20.map((img, index) => (
-                  <ImageItem
-                    key={img.id}
-                    item={img}
-                    index={index}
-                    setSelected={setSelected}
-                  />
-                ))}
+              <>
+                <Suspense fallback={<ImagePlaceholder />}>
+                  {prevEdition20.map((img, index) => (
+                    <ImageItem
+                      key={img.id}
+                      item={img}
+                      index={index}
+                      setSelected={setSelected}
+                    />
+                  ))}
+                </Suspense>
               </>
             </div>
           </div>
@@ -66,10 +70,41 @@ interface ImageItemProps {
   setSelected: any;
 }
 
+const ImagePlaceholder: React.FC = () => (
+  <div
+    role="status"
+    className="animate-pulse flex items-center justify-center w-full h-full bg-gray-300 rounded-2xl dark:bg-gray-700"
+  >
+    <svg
+      className="w-10 h-10 text-gray-200 dark:text-gray-600"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
+
 function ImageItem({ item, index, setSelected }: ImageItemProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
 
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }); // 2-second delay
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isLoaded) {
+    return <ImagePlaceholder />;
+  }
+
   return (
     <motion.figure
       initial="hidden"
@@ -78,11 +113,17 @@ function ImageItem({ item, index, setSelected }: ImageItemProps) {
       className="inline-block group w-full rounded-md relative dark:bg-black bg-white cursor-pointer"
       onClick={() => setSelected(item)}
     >
-      <motion.img
-        layoutId={`card-${item.id}`}
-        whileHover={{ scale: 1.025 }}
+      <Image
+        // layoutId={`card-${item.id}`}
+        // whileHover={{ scale: 1.025 }}
         src={item.img}
-        className="w-full bg-base-100 rounded-md shadow-xl image-full cursor-pointer"
+        className="w-full bg-base-100 rounded-md shadow-xl image-full cursor-pointer hover:scale-105 transition-transform"
+        alt={""}
+        height={300}
+        width={400}
+        priority
+        loading="eager"
+        // quality={90}
       />
     </motion.figure>
   );

diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx
@@ -38,7 +38,7 @@ export const ContainerScroll = ({
 
   return (
     <div
-      className="h-[45rem] md:h-[80rem] flex items-center justify-center relative p-2 md:px-20"
+      className="h-[50rem] md:h-[80rem] flex items-center justify-center relative md:px-20 -mb-52 -mt-28 xl:mb-4 "
       ref={containerRef}
     >
       <div
@@ -95,7 +95,7 @@ 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-14 lg:mb-10 mb-5 lg:mt-0 mx-auto md:h-fit h-[200px] w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl"
+      className="max-w-5xl -mt-14 lg:mb-10 mb-5 lg:mt-0 mx-auto md:h-fit h-[250px] 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-[16px] md:p-4 ">
         {children}

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -71,6 +71,14 @@ export const speakers: Speaker[] = [
       "Dr. Lavina Noronha, Director of Ave Maria Palliative Care, exemplifies humility and dedication. With an MPhil from NIMHANS and a Doctorate from the University of Illinois, she has served as an associate professor and director at Our Lady of the Lake University, USA, with extensive clinical experience in mental health, hospice, and crisis care. Her life changed when she returned to India realizing the lack of support for terminally ill patients. She founded Ave Maria Palliative Care, providing free, compassionate care to patients, regardless of their background, with a dedicated team and community support.",
     img: `${tedxsjecAssetsPrefix}/speakers/dr-lavina-1.avif`,
   },
+  {
+    id: 9,
+    name: "Munita Veigas Rao",
+    profession: "Singer | Songwriter | Performer | Vocal Trainer",
+    description:
+      'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.',
+    img: `${tedxsjecAssetsPrefix}/performers/Munita3.avif`,
+  },
 ];
 
 export const performers: PerformerSection[] = [
@@ -95,16 +103,6 @@ export const performers: PerformerSection[] = [
       `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`,
     ],
   },
-  {
-    name: "Munita Veigas Rao",
-    profession: "Singer | Songwriter | Performer | Vocal Trainer",
-    description:
-      'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.',
-    images: [
-      `${tedxsjecAssetsPrefix}/performers/Munita1.avif`,
-      `${tedxsjecAssetsPrefix}/performers/cropped-Munita2.avif`,
-    ],
-  },
   {
     name: "Harman Preet Singh",
     profession: "Comedian",
@@ -119,61 +117,61 @@ export const performers: PerformerSection[] = [
 export const prevEdition22: PreviousEdition[] = [
   {
     id: 1,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image1.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image1.jpg`,
   },
   {
     id: 2,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image2.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image2.jpg`,
   },
   {
     id: 3,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image3.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image3.jpg`,
   },
   {
     id: 4,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image4.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image4.jpg`,
   },
   {
     id: 5,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image5.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image5.jpg`,
   },
   {
     id: 6,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image6.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image6.jpg`,
   },
   {
     id: 7,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image7.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image7.jpg`,
   },
 ];
 
 export const prevEdition20: PreviousEdition[] = [
   {
     id: 1,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image1.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image1.jpg`,
   },
   {
     id: 2,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image2.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image2.jpg`,
   },
   {
     id: 3,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image3.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image3.jpg`,
   },
   {
     id: 4,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image4.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image4.jpg`,
   },
   {
     id: 5,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image5.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image5.jpg`,
   },
   {
     id: 6,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image6.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image6.jpg`,
   },
   {
     id: 7,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image7.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image7.jpg`,
   },
 ];