feat: updated footer elements

CodeChefVIT · Feb 25, 2024 · 6f58af7 · 6f58af7
1 parent ae9a51d
commit 6f58af7
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 49 deletions.
diff --git a/devsoc24-landing/src/assets/images/footer_glitch.gif b/devsoc24-landing/src/assets/images/footer_glitch.gif
diff --git a/devsoc24-landing/src/assets/images/new1.jpeg b/devsoc24-landing/src/assets/images/new1.jpeg
diff --git a/devsoc24-landing/src/assets/images/new1.png b/devsoc24-landing/src/assets/images/new1.png
diff --git a/devsoc24-landing/src/components/about.tsx b/devsoc24-landing/src/components/about.tsx
@@ -1,56 +1,63 @@
 import React from "react";
 import Image from "next/image";
-import picture1 from "../assets/images/new1.jpeg";
+import picture1 from "../assets/images/new1.png";
 import picture2 from "../assets/images/new2.png";
 import picture3 from "../assets/images/new3.png";
 import { useTransform, motion, useScroll } from "framer-motion";
+import Footer from "./footer";
 
 const About = () => {
   const { scrollYProgress } = useScroll();
   const y = useTransform(scrollYProgress, [0, 1], [0, -1250]);
 
   return (
-    <div className="overlay_about font-disket min-w-screen relative h-fit overflow-hidden bg-[#020202] px-2 text-center text-[35px] font-black text-[#9CE79ACC] md:px-10 md:text-[72px]">
-      <span className="relative block">DEVSOC’24</span>
-      &nbsp; ignites the tech scene with a blaze of innovation, where yesterday
-      <motion.span style={{ y: y }} className="relative block">
-        <Image
-          src={picture1}
-          alt="Image 2"
-          height={400}
-          width={400}
-          className="absolute -right-[-55px] bottom-[-400px] h-[400px] w-[400px] md:h-min md:w-min"
-        />
-      </motion.span>{" "}
-      hurdles are today playground.
-      <motion.span style={{ y: y }} className="relative block">
-        <Image
-          src={picture2}
-          alt="Image 3"
-          height={400}
-          width={400}
-          className="absolute -left-[-35px] bottom-[-1000px] h-[400px] w-[400px] md:h-min md:w-min"
-        />
-      </motion.span>{" "}
-      In its fourth edition, this boundary-pushing hackathon transcends limits,
-      merging AI and the <span>metaverse</span>
-      <motion.span style={{ y: y }} className="relative block">
-        <Image
-          src={picture3}
-          alt="Image 4"
-          height={400}
-          width={400}
-          className="absolute right-[50px] top-[950px] h-[400px] w-[200px] md:h-min md:w-min"
-        />
-      </motion.span>{" "}
-      to confront real-world chaos head-on. With diverse minds colliding,
-      we&apos;re not just coding; we&apos;re crafting solutions that
-      scream&nbsp;
-      <span className="relative">
-        <span>revolution.</span>
-      </span>
-      Join the fray as we smash barriers and redefine what&apos;s possible.
-    </div>
+    <>
+      <div className="overlay_about overflow-hidden">
+        <div className=" font-disket min-w-screen relative h-fit overflow-hidden bg-[#020202] px-2 text-center text-[35px] font-black text-[#9CE79ACC] md:px-10 md:text-[100px]">
+          <span className="relative block">DEVSOC’24</span>
+          &nbsp; ignites the tech scene with a blaze of innovation, where
+          yesterday
+          <motion.span style={{ y: y }} className="relative block">
+            <Image
+              src={picture1}
+              alt="Image 2"
+              height={400}
+              width={400}
+              className="absolute -right-[-55px] bottom-[-400px] h-[400px] w-[400px] md:h-min md:w-min"
+            />
+          </motion.span>{" "}
+          hurdles are today playground.
+          <motion.span style={{ y: y }} className="relative block">
+            <Image
+              src={picture2}
+              alt="Image 3"
+              height={400}
+              width={400}
+              className="absolute -left-[-35px] bottom-[-1000px] h-[400px] w-[400px] md:h-min md:w-min"
+            />
+          </motion.span>{" "}
+          In its fourth edition, this boundary-pushing hackathon transcends
+          limits, merging AI and the <span>metaverse</span>
+          <motion.span style={{ y: y }} className="relative block">
+            <Image
+              src={picture3}
+              alt="Image 4"
+              height={400}
+              width={400}
+              className="absolute right-[50px] top-[950px] h-[400px] w-[200px] md:h-min md:w-min"
+            />
+          </motion.span>{" "}
+          to confront real-world chaos head-on. With diverse minds colliding,
+          we&apos;re not just coding; we&apos;re crafting solutions that
+          scream&nbsp;
+          <span className="relative">
+            <span>revolution.</span>
+          </span>
+          Join the fray as we smash barriers and redefine what&apos;s possible.
+        </div>
+        <Footer />
+      </div>
+    </>
   );
 };
 

diff --git a/devsoc24-landing/src/components/footer.tsx b/devsoc24-landing/src/components/footer.tsx
@@ -1,11 +1,19 @@
 import React from "react";
 import Image from "next/image";
 import pattern from "@/assets/images/pattern.svg";
+import glitch from "@/assets/images/footer_glitch.gif";
 import Link from "next/link";
 const Footer = () => {
   return (
     <>
-      <div className="overlay_about flex h-screen items-center  justify-center overflow-hidden">
+      <Image
+        src={glitch}
+        alt="glitch"
+        height={0}
+        width={0}
+        className="absolute -z-10 h-screen w-screen"
+      />
+      <div className="flex h-screen items-center justify-center overflow-hidden">
         <div className="h-fit w-fit border-2 border-black bg-[#7F32DA] p-[1px]">
           <div className=" h-fit w-[400px] flex-row overflow-hidden border-2 border-black bg-[#7F32DA]">
             <div className="relative flex justify-center border-b-2 border-black">
@@ -64,6 +72,35 @@ const Footer = () => {
           </div>
         </div>
       </div>
+      <div className="flex flex-row justify-between w-full absolute bottom-0">
+        <div className="font-disket mx-10 my-5 flex flex-col gap-2 self-end text-white">
+          <div className="flex flex-row gap-10">
+            <div className="bg-black px-1 uppercase hover:bg-[#CFCFCF] hover:text-black">
+              instagram
+            </div>
+            <div className="bg-black px-1 uppercase hover:bg-[#CFCFCF] hover:text-black">
+              linkedin
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <div className="bg-black px-1 uppercase">
+              © Copyright 2024 codechef-vitAll rights reserved.
+            </div>
+            <div className="bg-black px-1 uppercase">All rights reserved.</div>
+          </div>
+        </div>
+        <div className="flex flex-row font-disket mx-10 my-5  gap-2 self-end text-white">
+          <div className="bg-black px-1 uppercase hover:bg-[#CFCFCF] hover:text-black">
+            privacy policy
+          </div>
+          <div className="bg-black px-1 uppercase hover:bg-[#CFCFCF] hover:text-black">
+            cookie policy
+          </div>
+          <div className="bg-black px-1 uppercase hover:bg-[#CFCFCF] hover:text-black">
+            terms of service
+          </div>
+        </div>
+      </div>
     </>
   );
 };

diff --git a/devsoc24-landing/src/pages/index.tsx b/devsoc24-landing/src/pages/index.tsx
@@ -11,7 +11,6 @@ export default function Home() {
         <Main />
         <Timeline />
         <About />
-        <Footer />
       </SmoothScrolling>
     </>
   );

diff --git a/devsoc24-landing/src/styles/globals.css b/devsoc24-landing/src/styles/globals.css
@@ -44,10 +44,6 @@
   font-family: vcr;
 }
 
-.font-wreckside {
-  font-family: wreckside;
-}
-
 .overlay {
   width: 100%;
   height: 100%;
@@ -87,7 +83,7 @@
 /* About Section */
 .overlay_about {
   width: 100%;
-  filter: blur(0.5px) drop-shadow(0 0 0 #c9c7c7);
+  filter: blur(0.5px) drop-shadow(0 0 0 #030303f8);
   background-color: #030303f8;
 }
 
@@ -279,6 +275,7 @@ b {
 #liner.password::before {
   content: "Password:";
 }
+
 @keyframes show {
   from {
     opacity: 0;