added contact form

components/landing/Landing.js

@@ -1,38 +0,0 @@
-import { Parallax, ParallaxLayer } from "@react-spring/parallax";
-import React, { useState } from "react";
-
-export default function Landing() {
-  return (
-    <Parallax pages={2} style={{ top: "0", left: "0" }}>
-      <ParallaxLayer
-        offset={0}
-        speed={2.5}
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <p>Scroll down</p>
-      </ParallaxLayer>
-      <ParallaxLayer
-        offset={1}
-        speed={2}
-        style={{ backgroundColor: "#ff6d6d" }}
-      />
-
-      <ParallaxLayer
-        offset={1}
-        speed={0.5}
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "white",
-        }}
-      >
-        <p>Scroll up</p>
-      </ParallaxLayer>
-    </Parallax>
-  );
-}

components/landing/Landing.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+export default function Landing(props) {
+   const [opacity, setOpacity] = useState(props.opacity);
+
+  useEffect(() => {
+    // Define the function that will update the opacity on scroll
+    function handleScroll() {
+      const newOpacity = 1 - window.scrollY / window.innerHeight;
+      setOpacity(newOpacity);
+    }
+
+    // Add the event listener for the scroll event
+    window.addEventListener("scroll", handleScroll);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+
+      <img src={props.src} alt="My Image" style={{ opacity: opacity ,width:"100vw",marginTop:"0px",paddingTop:"0px",alignContent:"start",justifyContent:"center"}} />
+
+  );
+}

components/layout/navbar/Navbar.module.scss

@@ -1,3 +1,4 @@
+
 #navbar {
   width: 100%;
   height: 10vh;

components/parallax/Parallax.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+// import "./styles.css";
+
+function Parallax() {
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    function handleScroll() {
+      setOffset(window.pageYOffset);
+    }
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className="parallax" style={{ transform: `translateY(${offset * 0.5}px)` }}>
+
+    </div>
+  );
+}
+
+export default Parallax;

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@next/font": "13.1.6",
     "@react-spring/parallax": "^9.6.1",
+    "aos": "^2.3.4",
     "eslint": "8.34.0",
     "eslint-config-next": "13.1.6",
     "next": "13.1.6",

pages/_app.js

@@ -1,11 +1,19 @@
-import "@/styles/globals.css";
 import Layout from "../components/layout/Layout";
 import Landing from "../components/landing/Landing";
+import Parallax from "../components/parallax/Parallax";
+import { useState } from "react";
+
 export default function App({ Component, pageProps }) {
   return (
-    <Layout>
-      {/* <Landing /> */}
-      <Component {...pageProps} />
-    </Layout>
+    <>
+      <Landing
+        src="https://gdsc-yonsei.github.io/assets/images/GDSC-Logo.png"
+        opacity={1}
+      />
+      <Parallax />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </>
   );
 }