Merge pull request #38 from TEDx-SJEC/footer-about

Footer about

package.json

@@ -65,7 +65,7 @@
     "react-icons": "^5.3.0",
     "resend": "^4.0.0",
     "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "three": "^0.169.0",
     "uploadthing": "^7.0.2",

src/app/page.tsx

@@ -3,46 +3,32 @@
 import React from "react";
 import HorizontalScroll from "@/components/common/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
-import HeroVideoDialog from "@/components/ui/hero-video-dialog";
 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";
 
 export default function Home() {
   return (
     <>
       <div className="z-20 relative bg-black overflow-x-clip">
-        <div className="flex flex-col items-center justify-center h-screen p-4"></div>
-
-        <div className="z-10 flex min-h-64 items-center justify-center rounded-lg "> 
-          <TextReveal text="TEDxSJEC is a platform that brings together curious, creative, and progressive thinkers from St. Joseph Engineering College." />
+        <div
+          className="flex flex-col items-center justify-center h-screen p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
+          id="hero"
+        ></div>
+        <div className="h-screen" id="about">
+          <About />
         </div>
-
         <div>
           <StackedCards />
         </div>
-
-        <div className="relative h-screen md:p-32 p-8 py-24 backdrop-invert flex flex-col justify-center items-center">
-          <h1 className="text-black text-center md:text-5xl text-2xl w-full font-bold leading-tight mt-10">
-            Check out the <br /> Previous Editions
-          </h1>
-          <div className="mt-24 md:w-2/3 w-full">
-            <HeroVideoDialog
-              className="block"
-              animationStyle="from-center"
-              videoSrc="https://www.youtube.com/embed/qh3NGpYRG3I?si=4rb-zSdDkVK9qxxb"
-              thumbnailSrc="https://startup-template-sage.vercel.app/hero-dark.png"
-              thumbnailAlt="Hero Video"
-            />
-          </div>
+        <div className=" bg-gradient-to-b bg-black from-black via-red-600  to-white to-95%">
+          <PreviousEdition />
         </div>
-
         <div className="backdrop-invert mb-[100vh]">
           <HorizontalScroll />
         </div>
-
       </div>
-
-
       <ParallaxFooter />
     </>
   );

src/components/common/About.tsx

@@ -0,0 +1,62 @@
+import { motion } from "framer-motion";
+
+const AboutSection: React.FC = () => {
+  return (
+    <section className="relative flex items-center justify-center min-h-screen bg-black text-white">
+      {/* 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"
+          initial={{ opacity: 0 }}
+          whileInView={{ 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"
+          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"
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut", delay: 0.3 }}
+        />
+      </div>
+
+      {/* About content */}
+      <motion.div
+        className="relative z-10 max-w-4xl p-4 md:p-8 text-center"
+        initial={{ y: 50, opacity: 0 }}
+        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">
+          About TEDxSJEC
+        </h2>
+        <p className="text-base md:text-lg 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.
+        </p>
+
+        {/* Decorative line */}
+        <motion.div
+          className="mt-8 md:mt-12 mx-auto w-20 md:w-24 h-1 bg-red-600 rounded-full"
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{ duration: 1.2, ease: "easeOut", delay: 0.5 }}
+        />
+      </motion.div>
+    </section>
+  );
+};
+
+export default AboutSection;

src/components/common/Container-Scroll.tsx

@@ -0,0 +1,24 @@
+"use client";
+import React from "react";
+import { ContainerScroll } from "../ui/container-scroll-animation";
+
+export function PreviousEdition() {
+  return (
+    <div className="flex flex-col overflow-hidden">
+      <ContainerScroll
+        titleComponent={
+          <>
+            <h1 className="md:text-7xl text-3xl font-semibold text-black dark:text-white">
+              Check out the Previous Edition
+            </h1>
+          </>
+        }
+      >
+        <video width="100%" height="100%" controls preload="none" poster="">
+          <source src="/path/to/video.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </ContainerScroll>
+    </div>
+  );
+}

src/components/common/Footer.tsx

@@ -1,88 +1,127 @@
 import Link from "next/link";
 import React from "react";
 import TextGlitch from "../edil-ozi/text-glitch";
+import Image from "next/image";
+import { tedxsjecAssetsPrefix } from "@/lib/utils";
 
 type Props = {};
 
 const Footer = (props: Props) => {
   return (
     <>
-      <footer className="h-screen md:py-20 md:px-12 py-8 px-4 w-screen fixed bottom-0 z-10">
-        <h1 className="text-5xl font-bold">Contact</h1>
-        <section className="flex md:flex-row flex-col w-full h-full mt-10">
-          <div className="flex flex-col md:w-2/5 w-full">
-            <div>
-              <div className="flex  h-min w-full items-center">
-                <div className="inline-block h-[150px] min-h-[1em] w-1 self-stretch bg-red-600 "></div>
-                <div className="mx-8">
-                  <h1 className="text-2xl font-bold mb-4">
-                    St Joseph Engineering College
-                  </h1>
-                  <p className="font-light">
-                    St Joseph Engineering College,
-                    <br /> Vamanjoor,Mangalore - 575028
-                    <br /> Karnataka, India
-                  </p>
+      <footer className="h-screen md:pt-32 pt-24 flex flex-col justify-between overflow-scroll lg:px-12 md:px-7  py-8 px-4 w-screen fixed bottom-0 z-10">
+        <div>
+          <h1 className="md:text-5xl text-3xl font-bold mb-4 text-center sm:text-left">
+            Contact
+          </h1>
+          <h1 className="lg:text-xl text-sm">
+            To get in touch with us regarding sponsorships and other queries,
+            drop an email to:{" "}
+            <a href="mailto:[email protected]" className="text-red-600 pt-4">
+              [email protected]
+            </a>
+          </h1>
+          <section className="flex md:flex-row flex-col w-full h-full md:mt-10 mt-4">
+            <div className="flex flex-col md:w-2/5 w-full">
+              <div>
+                <div className="flex  h-min w-full items-center">
+                  <div className="inline-block h-[150px] min-h-[1em] w-1 self-stretch bg-red-600 "></div>
+                  <div className="mx-8">
+                    <h1 className="md:text-2xl text-lg font-bold mb-4">
+                      St Joseph Engineering College
+                    </h1>
+                    <p className="font-light md:text-base text-sm">
+                      St Joseph Engineering College,
+                      <br /> Vamanjoor,Mangalore - 575028
+                      <br /> Karnataka, India
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <div className="flex flex-col mt-8">
-                <div className="flex flex-col mx-8">
-                  <h1 className="text-xl font-bold my-4">Contact</h1>
-                  <p className="text-lg">
-                    Dr. Binu K G :{" "}
-                    <a href="tel:+91-9739866947" className="text-red-600">
-                      +91-9739866947
-                    </a>
-                  </p>
-                </div>
-                <div className="flex flex-col mx-8 font-semibold ">
-                  <h1 className="text-2xl font-bold my-4 no-underline">
-                    Socials
-                  </h1>
-                  <Link
-                    href={"https://instagram.com/tedxsjec"}
-                    className=" my-8 py-8 text-xl"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <TextGlitch
-                      textOne="PERFORMERS"
-                      textTwo="PERFORMERS"
-                      className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
-                    />
-                  </Link>
-                  <Link
-                    href={"https://www.linkedin.com/company/tedxsjec"}
-                    className="text-xl"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <TextGlitch
-                      textOne="PERFORMERS"
-                      textTwo="PERFORMERS"
-                      className="font-bold text-black  text-[40px] md:text-[50px] leading-tight"
-                    />
-                  </Link>
+                <div className="flex flex-col md:mt-8 my-2">
+                  <div className="flex flex-col mx-8 text-center sm:text-left">
+                    <h1 className="md:text-2xl text-lg font-bold lg:my-4">
+                      Contact
+                    </h1>
+                    <p className="md:text-lg text-md ">
+                      Dr. Binu K G :{" "}
+                      <a href="tel:+91-9739866947" className="text-red-600">
+                        +91-9739866947
+                      </a>
+                    </p>
+                  </div>
+                  <div className="flex flex-col mx-8 font-semibold text-white ">
+                    <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">
+                      <Link
+                        href={"https://instagram.com/tedxsjec"}
+                        className=" text-sm "
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <TextGlitch
+                          textOne="INSTAGRAM"
+                          textTwo="tedxsjec"
+                          className="font-bold text-black  text-[15px] lg:text-[20px] leading-tight"
+                        />
+                      </Link>
+                      <Link
+                        href={"https://www.linkedin.com/company/tedxsjec"}
+                        className="text-sm "
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <TextGlitch
+                          textOne="LINKEDIN"
+                          textTwo="tedxsjec"
+                          className="font-bold text-black  text-[15 px] lg:text-[20px] leading-tight"
+                        />
+                      </Link>
+                    </section>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div className="w-full flex justify-center mt-8">
-            <iframe
-              className=" md:block hidden"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
-              width="80%"
-              height="60%"
-              loading="lazy"
-            ></iframe>
-            <iframe
-              className=" md:hidden block"
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
-              width="100%"
-              height="100%"
-              loading="lazy"
-            ></iframe>
+            <div className="xl:w-full md:w-1/2 w-full md:h-[500px] lg:h-full h-[150px] px-8 md:px-0 flex justify-end">
+              <iframe
+                className=" md:block hidden"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
+                width="70%"
+                height="90%"
+                loading="lazy"
+              ></iframe>
+              <iframe
+                className=" md:hidden block"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.9520361386985!2d74.89609701022555!3d12.910804316156533!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba359dfac132663%3A0xa7bf228838232d32!2sSt%20Joseph%20Engineering%20College!5e0!3m2!1sen!2sin!4v1713257369845!5m2!1sen!2sin"
+                width="100%"
+                height="100%"
+                loading="lazy"
+              ></iframe>
+            </div>
+          </section>
+        </div>
+
+        <section className="text-center w-full flex md:flex-row flex-col justify-between mt-4 items-center">
+          <div className="flex flex-row items-center md:divide-x divide-white">
+            <Image
+              src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
+              height={150}
+              width={150}
+              alt="logo"
+              layout="fixed"
+              priority={true}
+              className="hidden md:block"
+            />
+            <h1 className="text-white text-xs lg:text-base pl-2 h-full">
+              © 2024 All Rights Reserved
+            </h1>
+          </div>
+          <div>
+            <h1 className="text-white text-xs lg:text-base pl-2 h-full items-center capitalize">
+              This Independent TEDx Event is Operated under license from TED
+            </h1>
           </div>
         </section>
       </footer>