Merge pull request #56 from TEDx-SJEC/speakers

Favicon, Speakers& Performers List update, hero & footer minor updates
TEDx-SJEC · Oct 30, 2024 · 0e68c8e · 0e68c8e
2 parents 4100b23 + 018f50a
commit 0e68c8e
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 140 deletions.
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "TEDxSJEC",
+  "short_name": "TEDxSJEC",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png
diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,8 +8,9 @@ import Navbar from "@/components/navbar";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "TEDxSJEC",
+  description:
+    "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. Our goal is to inspire change, provoke deep discussions, and foster creativity through groundbreaking ideas.",
 };
 
 export default function RootLayout({
@@ -19,8 +20,24 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark font-satoshi">
+      <head>
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-96x96.png"
+          sizes="96x96"
+        />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+      </head>
       <body className={(inter.className = "overflow-x-hidden")}>
-      <div className="fixed top-0 w-full h-24 z-50 backdrop-blur-md head-5 bg-black/5" /> 
+        <div className="fixed top-0 w-full h-24 z-50 backdrop-blur-md head-5 bg-black/5" />
         <Navbar />
         <StarsCanvas />
         <Providers>{children} </Providers>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -13,7 +13,7 @@ import HeroHighlight from "@/components/widget/hero";
 export default function Home() {
   return (
     <>
-      <div className="z-20 relative bg-blackTheme overflow-x-clip">
+      <div className="z-20 relative bg-blackTheme pt-20 overflow-x-clip">
         <HeroHighlight />
         <div className="h-full mt-20 mb-52" id="about">
           <About />

diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -53,7 +53,7 @@ const Footer = (props: Props) => {
                     <h1 className="md:text-2xl text-lg text-center sm:text-left font-bold mt-4 md:mt-8 no-underline">
                       Socials
                     </h1>
-                    <section className="flex sm:flex-col justify-evenly">
+                    <section className="flex sm:flex-col justify-evenly pt-2">
                       <Link
                         href={"https://instagram.com/tedxsjec"}
                         className=" text-sm "

diff --git a/src/components/common/speakers.tsx b/src/components/common/speakers.tsx
@@ -20,63 +20,15 @@ const performers = [
     profession: "Advocate and Animal Welfare Activist",
     description:
       "Meet Mrs Suma R Nayak, an advocate by profession and animal & environment welfare activist by choice, who believes every creation of God has a right to live a life devoid of pain, suffering and live in dignity. She is the recipient of several awards for her services in the field of environment protection and animal welfare. She is the Trustee of Animal Care Trust, an NGO which runs a charitable hospital cum rescue center for sick and injured community animals and birds at Shakthinagar, Mangalore that rescues and helps over 150 animals every single month.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Kshiti2.avif`,
+    img: `${tedxsjecAssetsPrefix}/speakers/Suma.avif`,
   },
   {
     id: 3,
     name: "Badekkila Pradeep",
-    profession: "Voice Artist and Actor",
+    profession: "Actor | Voice Artist | Anchor",
     description:
-      "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 films and a writer with over 20 years in Kannada publications.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Kshiti3.avif`,
-  },
-  {
-    id: 4,
-    name: "Namitha Marimuthu",
-    profession: "Transgender Rights Activist and Actress",
-    description:
-      "Namitha Marimuthu is a passionate transgender rights activist and actress who rose to fame with her performances in Tamil cinema. She advocates for the inclusion and recognition of transgender people in the entertainment industry and society. Namitha has also represented the transgender community in various international forums and is committed to creating awareness and understanding through her work.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M1.avif`,
-  },
-  {
-    id: 5,
-    name: "Ashwin Shetty",
-    profession: "Entrepreneur and Innovator",
-    description:
-      "Ashwin Shetty is an inspiring entrepreneur and innovator known for his pioneering contributions to sustainable technology. With a background in environmental science, Ashwin has launched several successful green startups that focus on renewable energy and sustainable living solutions. He is a sought-after speaker at eco-friendly and tech events worldwide.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M2.avif`,
-  },
-  {
-    id: 6,
-    name: "Shriya Shetty",
-    profession: "Culinary Expert and Chef",
-    description:
-      "Shriya Shetty is a renowned culinary expert and chef who has brought traditional Karnataka cuisine to a global audience. She is celebrated for her innovative fusion of local flavors with international techniques, creating a unique culinary experience. Shriya has been featured in multiple food festivals and has authored cookbooks that highlight the diversity of Indian cuisine.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M3.avif`,
-  },
-  {
-    id: 7,
-    name: "Munita Veigas Rao",
-    profession: "Philanthropist and Social Worker",
-    description:
-      "Munita Veigas Rao is a dedicated philanthropist and social worker known for her unwavering support for education and healthcare in underprivileged communities. She runs several non-profit initiatives that focus on women’s empowerment, child welfare, and access to basic health services. Munita is committed to making a tangible difference in society through her charitable activities.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Namitha_M4.avif`,
-  },
-  {
-    id: 8,
-    name: "Yukthi",
-    profession: "Classical Dancer and Cultural Ambassador",
-    description:
-      "Yukthi is a classical dancer and cultural ambassador specializing in Bharatanatyam and Odissi. With years of rigorous training and international performances, she promotes Indian classical dance and culture on a global stage. Yukthi is involved in mentoring young dancers and actively participates in cultural exchange programs to foster understanding and appreciation of Indian traditions.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Kshiti1.avif`,
-  },
-  {
-    id: 9,
-    name: "Agasthyam Kalaripayattu",
-    profession: "Martial Arts Instructor",
-    description:
-      "Agasthyam Kalaripayattu is a respected martial arts instructor specializing in Kalaripayattu, an ancient Indian martial art. He has dedicated his life to preserving and promoting this traditional art form, teaching students around the world about the physical and mental discipline required. Agasthyam has also organized international workshops and demonstrations to showcase Kalaripayattu.",
-    img: `${tedxsjecAssetsPrefix}/speakers/Kshiti2.avif`,
+      "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`,
   },
 ];
 

diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx
@@ -17,7 +17,7 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
       )}
     >
       <span className="invisible whitespace-nowrap">{textOne}</span>
-      <span className="absolute left-0 top-0 text-black 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">

diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx
@@ -1,89 +1,99 @@
-'use client'
+"use client";
 
-import { tedxsjecAssetsPrefix } from "@/lib/utils"
-import { useState, useEffect, useRef } from "react"
-import Image from "next/image"
-import { Button } from "@/components/ui/button"
-import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion"
-import { ArrowRight, Calendar, MapPin } from "lucide-react"
+import { tedxsjecAssetsPrefix } from "@/lib/utils";
+import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import {
+  motion,
+  useScroll,
+  useTransform,
+  AnimatePresence,
+} from "framer-motion";
+import { ArrowRight, Calendar, MapPin } from "lucide-react";
 
 type TimeLeft = {
-  days: number
-  hours: number
-  minutes: number
-  seconds: number
-}
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+};
 
 const StaticShadow = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div 
+    <div
       className="relative w-72 h-72 md:w-[500px] md:h-[500px]"
       style={{
-        filter: 'drop-shadow(0 0 15px rgba(255, 255, 255, 0.4))'
+        filter: "drop-shadow(0 0 15px rgba(255, 255, 255, 0.4))",
       }}
     >
       {children}
     </div>
-  )
-}
+  );
+};
 
 const FlipCard = ({ value, label }: { value: number; label: string }) => {
   return (
-    <div 
-      className="flex flex-col items-center justify-center bg-gradient-to-b from-red-900 to-red-950 rounded-lg shadow-lg p-2 w-full aspect-square overflow-hidden border border-red-500/30"
-    >
+    <div className="flex flex-col items-center justify-center bg-gradient-to-b from-red-900 to-red-950 rounded-lg shadow-lg p-2 w-full aspect-square overflow-hidden border border-red-500/30">
       <div className="relative w-full h-2/3 bg-black/30 rounded-md flex items-center justify-center">
         <AnimatePresence mode="popLayout">
           <motion.div
             key={value}
-            initial={{ y: '100%', opacity: 0 }}
+            initial={{ y: "100%", opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
-            exit={{ y: '-100%', opacity: 0 }}
-            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+            exit={{ y: "-100%", opacity: 0 }}
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
             className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white"
           >
-            {value.toString().padStart(2, '0')}
+            {value.toString().padStart(2, "0")}
           </motion.div>
         </AnimatePresence>
       </div>
-      <span className="text-xs sm:text-sm md:text-base capitalize text-white mt-2 font-semibold">{label}</span>
+      <span className="text-xs sm:text-sm md:text-base capitalize text-white mt-2 font-semibold">
+        {label}
+      </span>
     </div>
-  )
-}
+  );
+};
 
 export default function HeroHighlight() {
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
-  const svgRef = useRef<SVGSVGElement>(null)
-  const targetDate = new Date('2024-12-14')
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+  const svgRef = useRef<SVGSVGElement>(null);
+  const targetDate = new Date("2024-12-14");
 
-  const { scrollYProgress } = useScroll()
-  const pathLength = useTransform(scrollYProgress, [0, 0.8], [0, 1])
+  const { scrollYProgress } = useScroll();
+  const pathLength = useTransform(scrollYProgress, [0, 0.8], [0, 1]);
 
   useEffect(() => {
-    setIsLoaded(true)
+    setIsLoaded(true);
 
     const intervalId = setInterval(() => {
-      const now = new Date()
-      const difference = targetDate.getTime() - now.getTime()
+      const now = new Date();
+      const difference = targetDate.getTime() - now.getTime();
 
       if (difference > 0) {
         setTimeLeft({
           days: Math.floor(difference / (1000 * 60 * 60 * 24)),
           hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
           minutes: Math.floor((difference / 1000 / 60) % 60),
-          seconds: Math.floor((difference / 1000) % 60)
-        })
+          seconds: Math.floor((difference / 1000) % 60),
+        });
       } else {
-        clearInterval(intervalId)
-        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+        clearInterval(intervalId);
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
       }
-    }, 1000)
+    }, 1000);
 
-    return () => clearInterval(intervalId)
-  }, [targetDate])
+    return () => clearInterval(intervalId);
+  }, [targetDate]);
 
-  const timeUnits: (keyof TimeLeft)[] = ['days', 'hours', 'minutes', 'seconds']
+  const timeUnits: (keyof TimeLeft)[] = ["days", "hours", "minutes", "seconds"];
 
   return (
     <section className="w-full lg:px-10 px-5 h-full bg-gradient-to-b from-blackTheme via-red-800 to-blackTheme text-white overflow-hidden relative">
@@ -111,10 +121,14 @@ export default function HeroHighlight() {
             Ideas Worth Spreading
           </h1>
           <p className="text-xl md:text-2xl font-satoshi text-white max-w-2xl leading-relaxed">
-            Join us for an inspiring TEDx event featuring thought-provoking talks, innovative ideas, and transformative experiences.
+            Join us for an inspiring TEDx event featuring thought-provoking
+            talks, innovative ideas, and transformative experiences.
           </p>
           <div className="space-y-4 sm:space-y-0 sm:space-x-4 flex flex-col sm:flex-row">
-            <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white py-2 transition-all duration-300 transform hover:scale-105">
+            <Button
+              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" />
             </Button>
           </div>
@@ -123,10 +137,10 @@ export default function HeroHighlight() {
               <Calendar className="mr-2" size={16} />
               <p>Date: September 15, 2023</p>
             </div>
-            <div className="flex items-center">
+            {/* <div className="flex items-center">
               <MapPin className="mr-2" size={16} />
               <p>Venue: Grand Convention Center</p>
-            </div>
+            </div> */}
           </div>
         </div>
         <div className="lg:w-[50%] lg:mt-0 flex flex-col mb-10 items-center lg:items-end">
@@ -144,13 +158,15 @@ export default function HeroHighlight() {
         </div>
       </div>
       <div className="container mx-auto px-4 py-2 relative z-10">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 font-satoshi text-white">Event Starts In</h2>
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 font-satoshi text-white">
+          Event Starts In
+        </h2>
         <div className="grid grid-cols-4 font-satoshi gap-2 sm:gap-4 md:gap-6 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto">
           {timeUnits.map((unit) => (
             <FlipCard key={unit} value={timeLeft[unit]} label={unit} />
           ))}
         </div>
       </div>
     </section>
-  )
-}
+  );
+}