Merge pull request #34 from Abh1noob/master

feat: added scrollto action

Author: aditansh

devsoc24-landing/src/components/about.tsx

@@ -48,7 +48,6 @@ const About = () => {
   return (
     <>
       {showOriginal && (
-        <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
@@ -92,15 +91,14 @@ const About = () => {
             Join the fray as we smash barriers and redefine what&apos;s
             possible.
           </div>
-        </div>
       )}
       {showGlitchImage && (
         <Image
           src={glitch}
           alt="glitch"
           height={0}
           width={0}
-          className="absolute -z-10 min-h-screen w-screen"
+          className="absolute z-50 min-h-screen w-screen"
         />
       )}
       {showGlitch && (

devsoc24-landing/src/components/actionButton.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { motion } from "framer-motion";
+import styles from "@/styles/btnToPortal.module.css";
+import Image from "next/image";
+import type { StaticImport } from "next/dist/shared/lib/get-img-props";
+import DSLogo from "@/assets/images/DSLogo.svg";
+
+const ActionButton = (props: { link: string; body: string }) => {
+  return (
+    <>
+      <motion.a
+        href={props.link}
+        className={`${styles.btn} font-disket px-3 py-1 text-xl tracking-tighter`}
+        whileHover={{ backgroundPosition: "-100%,100%" }}
+      >
+        {props.body}
+      </motion.a>
+    </>
+  );
+};
+
+export default ActionButton;

devsoc24-landing/src/components/footer.tsx

@@ -3,8 +3,13 @@ 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";
+import { useLenis } from "@studio-freight/react-lenis";
 
 const Footer = () => {
+  const lenis = useLenis(({ scroll }) => {
+    // console.log(scroll);
+  });
+  
   return (
     <>
       <Image
@@ -33,7 +38,12 @@ const Footer = () => {
                 width={0}
                 className="w-[100%]"
               />
-              <div className="font-vcr absolute right-0 flex h-[100%] w-fit items-center justify-center border-l-2 border-black bg-[#7F32DA] p-1 hover:cursor-pointer hover:bg-black hover:text-white">
+              <div
+                className="font-vcr absolute right-0 flex h-[100%] w-fit items-center justify-center border-l-2 border-black bg-[#7F32DA] p-1 hover:cursor-pointer hover:bg-black hover:text-white"
+                onClick={() =>
+                  lenis?.scrollTo("#Main", { lerp: 0.1, duration: 1 })
+                }
+              >
                 X
               </div>
             </div>

devsoc24-landing/src/components/main.tsx

@@ -68,7 +68,7 @@ function Main() {
   }, []);
   return (
     <>
-      <motion.div style={{ y: -y }}>
+      <motion.div style={{ y: -y }} className="">
         <div style={{ opacity: scrollOpacity }}>
           <div className={className}>
             <Image src={glitch as StaticImageData} alt="glitch" fill />
@@ -177,7 +177,7 @@ function Main() {
           </div>
         </div>
       </motion.div>
-      <motion.div style={{ y: y }} className="relative z-50">
+      <motion.div style={{ y: y }} className="relative z-30">
         <div className="flex h-[1000px] items-center justify-center overflow-hidden bg-[#020202]">
           <div className="bg-logo font-disket overflow-hidden bg-[#020202]">
             <motion.span style={{ y: y }} className="relative block">

devsoc24-landing/src/pages/index.tsx

@@ -1,15 +1,21 @@
 import Timeline from "@/components/Timeline";
 import About from "@/components/about";
+import ActionButton from "@/components/actionButton";
 import Main from "@/components/main";
 import SmoothScrolling from "@/components/smoothscrolling";
 
 export default function Home() {
   return (
     <>
       <SmoothScrolling>
-        <Main />
+        <section id="Main">
+          <Main />
+        </section>
 
         <About />
+        <div className="fixed bottom-0 z-40 mb-10 flex w-full justify-center">
+          <ActionButton body="Kuch toh" link="/" />
+        </div>
       </SmoothScrolling>
     </>
   );