Skip to content
This repository has been archived by the owner on May 12, 2024. It is now read-only.

Commit

Permalink
Merge pull request #19 from Abh1noob/master
Browse files Browse the repository at this point in the history
feat: updated footer elements
  • Loading branch information
aditansh authored Feb 25, 2024
2 parents ae9a51d + 6f58af7 commit 2a42757
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 49 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed devsoc24-landing/src/assets/images/new1.jpeg
Binary file not shown.
Binary file added devsoc24-landing/src/assets/images/new1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
91 changes: 49 additions & 42 deletions devsoc24-landing/src/components/about.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};

Expand Down
39 changes: 38 additions & 1 deletion devsoc24-landing/src/components/footer.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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>
</>
);
};
Expand Down
1 change: 0 additions & 1 deletion devsoc24-landing/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export default function Home() {
<Main />
<Timeline />
<About />
<Footer />
</SmoothScrolling>
</>
);
Expand Down
7 changes: 2 additions & 5 deletions devsoc24-landing/src/styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@
font-family: vcr;
}

.font-wreckside {
font-family: wreckside;
}

.overlay {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -279,6 +275,7 @@ b {
#liner.password::before {
content: "Password:";
}

@keyframes show {
from {
opacity: 0;
Expand Down

0 comments on commit 2a42757

Please sign in to comment.