Merge pull request #29 from TEDx-SJEC/footer

add: footer and video highlight

src/app/page.tsx

@@ -1,21 +1,39 @@
 "use client";
 
-import { useState } from "react";
 import React from "react";
 import HorizontalScroll from "@/components/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
+import HeroVideoDialog from "@/components/ui/hero-video-dialog";
+import ParallaxFooter from "@/components/Footer";
 
 export default function Home() {
   return (
     <>
-      <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="z-20 relative bg-black ">
+        <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>
+        <div className="relative p-32 backdrop-invert flex flex-col items-center">
+          <h1 className="text-black text-center text-5xl font-bold leading-tight">
+            Check out the <br /> Previous Editions
+          </h1>
+          <div className="mt-24 w-2/3">
+            <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>
+        <div className="backdrop-invert mb-[100vh]">
+          <HorizontalScroll />
+        </div>
       </div>
-      <div>
-        <HorizontalScroll />
-      </div>
-      <div className="h-screen"></div>
+
+      <ParallaxFooter />
     </>
   );
 }

src/components/Footer.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import React from "react";
+
+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>
+                </div>
+              </div>
+              <div className="flex flex-col mt-8">
+                <div className="flex flex-col mx-8">
+                  <h1 className="text-2xl font-bold my-4">Contact</h1>
+                  <p>
+                    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="underline hover:decoration-4 transition-all  decoration-red-600 my-2"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    Instagram
+                  </Link>
+                  <Link
+                    href={"https://www.linkedin.com/company/tedxsjec"}
+                    className="underline hover:decoration-4 transition-all decoration-red-600"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    LinkedIn
+                  </Link>
+                </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>
+        </section>
+      </footer>
+    </>
+  );
+};
+
+export default Footer;

src/components/ui/hero-video-dialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Play, XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type AnimationStyle =
+  | "from-bottom"
+  | "from-center"
+  | "from-top"
+  | "from-left"
+  | "from-right"
+  | "fade"
+  | "top-in-bottom-out"
+  | "left-in-right-out";
+
+interface HeroVideoProps {
+  animationStyle?: AnimationStyle;
+  videoSrc: string;
+  thumbnailSrc: string;
+  thumbnailAlt?: string;
+  className?: string;
+}
+
+const animationVariants = {
+  "from-bottom": {
+    initial: { y: "100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 },
+  },
+  "from-center": {
+    initial: { scale: 0.5, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0.5, opacity: 0 },
+  },
+  "from-top": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "-100%", opacity: 0 },
+  },
+  "from-left": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "-100%", opacity: 0 },
+  },
+  "from-right": {
+    initial: { x: "100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  "top-in-bottom-out": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 },
+  },
+  "left-in-right-out": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 },
+  },
+};
+
+export default function HeroVideoDialog({
+  animationStyle = "from-center",
+  videoSrc,
+  thumbnailSrc,
+  thumbnailAlt = "Video thumbnail",
+  className,
+}: HeroVideoProps) {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const selectedAnimation = animationVariants[animationStyle];
+
+  return (
+    <div className={cn("relative", className)}>
+      <div
+        className="relative cursor-pointer group"
+        onClick={() => setIsVideoOpen(true)}
+      >
+        <img
+          src={thumbnailSrc}
+          alt={thumbnailAlt}
+          width={1920}
+          height={1080}
+          className="w-full transition-all duration-200 group-hover:brightness-[0.8] ease-out rounded-md shadow-lg border"
+        />
+        <div className="absolute inset-0 flex items-center justify-center group-hover:scale-100 scale-[0.9] transition-all duration-200 ease-out rounded-2xl">
+          <div className="bg-primary/10 flex items-center justify-center rounded-full backdrop-blur-md size-28">
+            <div
+              className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}
+            >
+              <Play
+                className="size-8 text-white fill-white group-hover:scale-105 scale-100 transition-transform duration-200 ease-out"
+                style={{
+                  filter:
+                    "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <AnimatePresence>
+        {isVideoOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            onClick={() => setIsVideoOpen(false)}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
+          >
+            <motion.div
+              {...selectedAnimation}
+              transition={{ type: "spring", damping: 30, stiffness: 300 }}
+              className="relative w-full max-w-4xl aspect-video mx-4 md:mx-0"
+            >
+              <motion.button className="absolute -top-16 right-0 text-white text-xl bg-neutral-900/50 ring-1 backdrop-blur-md rounded-full p-2 dark:bg-neutral-100/50 dark:text-black">
+                <XIcon className="size-5" />
+              </motion.button>
+              <div className="size-full border-2 border-white rounded-2xl overflow-hidden isolate z-[1] relative">
+                <iframe
+                  src={videoSrc}
+                  className="size-full rounded-2xl"
+                  allowFullScreen
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                ></iframe>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}