Merge pull request #30 from TEDx-SJEC/footer

improve:footer and responsiveness
TEDx-SJEC · Oct 4, 2024 · f7a4785 · f7a4785
2 parents dfbf2e7 + 182072e
commit f7a4785
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -22,16 +22,16 @@ export default function Home() {
   // requestAnimationFrame(raf)
   return (
     <>
-      <div className="z-20 relative bg-black ">
+      <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>
-        <div className="relative p-32 backdrop-invert flex flex-col items-center">
-          <h1 className="text-black text-center text-5xl font-bold leading-tight">
+        <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">
             Check out the <br /> Previous Editions
           </h1>
-          <div className="mt-24 w-2/3">
+          <div className="mt-24 md:w-2/3 w-full">
             <HeroVideoDialog
               className="block"
               animationStyle="from-center"

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import React from "react";
+import TextGlitch from "./edil-ozi/text-glitch";
 
 type Props = {};
 
@@ -26,8 +27,8 @@ const Footer = (props: Props) => {
               </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>
+                  <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
@@ -40,19 +41,19 @@ const Footer = (props: Props) => {
                   </h1>
                   <Link
                     href={"https://instagram.com/tedxsjec"}
-                    className="underline hover:decoration-4 transition-all  decoration-red-600 my-2"
+                    className=" my-2 text-xl"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
-                    Instagram
+                    <TextGlitch text="Instagram" />
                   </Link>
                   <Link
                     href={"https://www.linkedin.com/company/tedxsjec"}
-                    className="underline hover:decoration-4 transition-all decoration-red-600"
+                    className="text-xl"
                     rel="noopener noreferrer"
                     target="_blank"
                   >
-                    LinkedIn
+                    <TextGlitch text="LinkedIn" />
                   </Link>
                 </div>
               </div>

diff --git a/src/components/HorizontalScrollCarousel.tsx b/src/components/HorizontalScrollCarousel.tsx
@@ -3,109 +3,111 @@ import { motion, useTransform, useScroll } from "framer-motion";
 import { useRef } from "react";
 
 const HorizontalScroll = () => {
-    return (
-        <div className="bg-transparent">
-            <HorizontalScrollCarousel />
-        </div>
-    );
+  return (
+    <div className="bg-transparent">
+      <HorizontalScrollCarousel />
+    </div>
+  );
 };
 
 const HorizontalScrollCarousel = () => {
-    const targetRef = useRef<HTMLDivElement | null>(null);
-    const { scrollYProgress } = useScroll({
-        target: targetRef,
-    });
+  const targetRef = useRef<HTMLDivElement | null>(null);
+  const { scrollYProgress } = useScroll({
+    target: targetRef,
+  });
 
-    const x = useTransform(scrollYProgress, [0, 1], ["5%", "-50%"]);
+  const x = useTransform(scrollYProgress, [0, 1], ["5%", "-50%"]);
 
-    return (
-        <section ref={targetRef} className="relative h-[300vh] ">
-            <div className="sticky top-0 flex h-screen items-center overflow-hidden">
-                <motion.div style={{ x }} className="flex gap-4">
-                    <h1 className="text-7xl ml-5 uppercase text-[#ff0000] font-extrabold mb-0">The Team</h1>
-                    {cards.map((card) => {
-                        return <Card card={card} key={card.id} />;
-                    })}
-                </motion.div>
-            </div>
-        </section>
-    );
+  return (
+    <section ref={targetRef} className="relative h-[300vh] ">
+      <div className="sticky top-0 flex h-screen items-center overflow-hidden">
+        <motion.div style={{ x }} className="flex gap-4">
+          <h1 className="text-7xl ml-5 uppercase text-[#ff0000] font-extrabold mb-0">
+            The Team
+          </h1>
+          {cards.map((card) => {
+            return <Card card={card} key={card.id} />;
+          })}
+        </motion.div>
+      </div>
+    </section>
+  );
 };
 
 const Card = ({ card }: { card: CardType }) => {
-    return (
-        <div
-            key={card.id}
-            className="group relative h-[450px] w-[450px] rounded-3xl mr-4 overflow-hidden bg-neutral-200"
-        >
-            <div
-                style={{
-                    backgroundImage: `url(${card.url})`,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                }}
-                className="absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110"
-            ></div>
-            <div className="absolute bottom-0 w-full z-10 grid place-content-left">
-                <div className="bg-gradient-to-b w-full  from-black/0 to-black/30 p-8 py-4 text-5xl font-black uppercase text-white ">
-                    <p className=" text-3xl f">{card.name}</p>
-                    <p className="b text-xl ">{card.title}</p>
-                </div>
-            </div>
+  return (
+    <div
+      key={card.id}
+      className="group relative md:h-[450px] md:w-[450px] h-[300px] w-[400px] rounded-3xl mr-4 overflow-hidden bg-neutral-200"
+    >
+      <div
+        style={{
+          backgroundImage: `url(${card.url})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+        className="absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110"
+      ></div>
+      <div className="absolute bottom-0 w-full z-10 grid place-content-left">
+        <div className="bg-gradient-to-b w-full  from-black/0 to-black/30 p-8 py-4 text-5xl font-black uppercase text-white ">
+          <p className=" text-3xl f">{card.name}</p>
+          <p className="b text-xl ">{card.title}</p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default HorizontalScroll;
 
 type CardType = {
-    url: string;
-    title: string;
-    id: number;
-    name: string;
+  url: string;
+  title: string;
+  id: number;
+  name: string;
 };
 
 const cards: CardType[] = [
-    // {
-    //   url: "https://tedx-sjec.github.io/website-assets/team/dr-binu-k-g.avif",
-    //   title: "Faculty Co-Ordinator",
-    //   name: "Binu K G",
-    //   id: 1,
-    // },
-    {
-        url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
-        title: "Licensee & Organizer",
-        id: 2,
-        name: "Sharon Tyana Menezes",
-    },
-    {
-        url: "/imgs/abstract/3.jpg",
-        title: "Co-Organizer",
-        id: 3,
-        name: "Sasha Sajith",
-    },
-    {
-        url: "/imgs/abstract/4.jpg",
-        title: "Curation Head",
-        id: 4,
-        name: "Vyasa M Nayak",
-    },
-    {
-        url: "/imgs/abstract/5.jpg",
-        title: "Technical Head",
-        id: 5,
-        name: "Hanniel Andrede",
-    },
-    {
-        url: "/imgs/abstract/6.jpg",
-        title: "Design Head",
-        id: 6,
-        name: "Lawrence Robert D'Souza",
-    },
-    // {
-    //   url: "/imgs/abstract/7.jpg",
-    //   title: "Title 7",
-    //   id: 7,
-    //   name: "Binu K G",
-    // },
+  // {
+  //   url: "https://tedx-sjec.github.io/website-assets/team/dr-binu-k-g.avif",
+  //   title: "Faculty Co-Ordinator",
+  //   name: "Binu K G",
+  //   id: 1,
+  // },
+  {
+    url: `${tedxsjecAssetsPrefix}/team/sharon.avif`,
+    title: "Licensee & Organizer",
+    id: 2,
+    name: "Sharon Tyana Menezes",
+  },
+  {
+    url: "/imgs/abstract/3.jpg",
+    title: "Co-Organizer",
+    id: 3,
+    name: "Sasha Sajith",
+  },
+  {
+    url: "/imgs/abstract/4.jpg",
+    title: "Curation Head",
+    id: 4,
+    name: "Vyasa M Nayak",
+  },
+  {
+    url: "/imgs/abstract/5.jpg",
+    title: "Technical Head",
+    id: 5,
+    name: "Hanniel Andrede",
+  },
+  {
+    url: "/imgs/abstract/6.jpg",
+    title: "Design Head",
+    id: 6,
+    name: "Lawrence Robert D'Souza",
+  },
+  // {
+  //   url: "/imgs/abstract/7.jpg",
+  //   title: "Title 7",
+  //   id: 7,
+  //   name: "Binu K G",
+  // },
 ];
diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { FC } from "react";
+
+interface Props {
+  text: string;
+}
+
+const TextGlitch: FC<Props> = ({ text }) => {
+  text;
+  return (
+    <div className="group relative inline-block overflow-hidden">
+      <span className="invisible">Text Glitch Effect</span>
+      <span className="absolute left-0 top-0 text-white transition duration-300 ease-in-out group-hover:-translate-y-full ">
+        {text}
+      </span>
+      <span className="absolute left-0 top-0 translate-y-full  transition duration-300 ease-in-out group-hover:translate-y-0 text-red-600">
+        tedxsjec
+      </span>
+    </div>
+  );
+};
+
+export default TextGlitch;
diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx
@@ -32,11 +32,11 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
     <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
       <div
         className={
-          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent py-[1rem]"
+          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent px-[7rem] md:py-[1rem]"
         }
       >
         <motion.h1
-          className="text-8xl text-start font-extrabold uppercase text-[#ff0000]"
+          className="md:text-8xl text-5xl md:text-start text-center px-12 font-extrabold uppercase text-[#ff0000]"
           // ref={ref}
           initial={{ opacity: 1, y: -30 }}
           // animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -50,7 +50,7 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
         <p
           ref={targetRef}
           className={
-            "flex flex-wrap p-5 w-full text-2xl my-32 font-bold text-black/20 dark:text-white/20 md:p-8 md:text- xl lg:p-10 lg:text-4xl xl:text-6xl "
+            "flex flex-wrap p-1 w-full text-2xl md:my-32 font-bold text-black/20 dark:text-white/20 md:p-8 md:text- xl lg:p-10 lg:text-4xl xl:text-6xl "
           }
         >
           {words.map((word, i) => {