added id url to about page

Components/Layout/ContactFormSection.jsx

@@ -7,7 +7,7 @@ const ContactFormSection = ({
 }) => {
   return (
     <>
-    <div className="relative z-10 h-screen w-screen">
+    <div id="contact" className="relative z-10 h-screen w-screen">
       <div className="absolute inset-0 z-0">
         <ContactThreeJsComponent />
         

Components/Layout/section.jsx

@@ -60,7 +60,11 @@ const Section = ({
         </div>
         <div className="flex justify-start space-x-4">
           <VideoButton videoId={videoId} buttonOneText={buttonOneText} />
-          <Link href={buttonLink} className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">
+          <Link
+            href={buttonLink}
+            passHref
+            className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
+          >
             {buttonTwoText}
           </Link>
         </div>

package-lock.json

@@ -22,6 +22,7 @@
         "react-intersection-observer": "^9.4.3",
         "react-modal-video": "^2.0.0",
         "react-player": "^2.12.0",
+        "react-scroll": "^1.8.9",
         "tailwindcss": "3.3.1",
         "three": "^0.151.3"
       }
@@ -6469,6 +6470,11 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/lodash.zip": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz",
@@ -9062,6 +9068,19 @@
         "react": ">=16.6.0"
       }
     },
+    "node_modules/react-scroll": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz",
+      "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -23,6 +23,7 @@
     "react-intersection-observer": "^9.4.3",
     "react-modal-video": "^2.0.0",
     "react-player": "^2.12.0",
+    "react-scroll": "^1.8.9",
     "tailwindcss": "3.3.1",
     "three": "^0.151.3"
   }

pages/about.js

@@ -1,20 +1,22 @@
 import React from "react";
 import Navbar from "../Components/Layout/navbar.jsx";
 import Section from "../Components/Layout/section.jsx";
-import SubSection from "../Components/Layout/sub-section.jsx";
 import ContactFormSection from "@/Components/Layout/ContactFormSection.jsx";
 export default function Home() {
   return (
     <>
       <Navbar />
+
 <Section
   key="aboutSection0"
   videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
   text="about"
   buttonTwoText="reach out"
+  buttonLink="#contact"
   buttonOneText="watch"
   videoId="uu01xBw_BVE"
-      />
+>
+</Section>
       <Section
         key="aboutSection1"
         videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
@@ -33,7 +35,7 @@ export default function Home() {
       <ContactFormSection
       text="say hello"
 
-      buttonOneText="contact us"
+      buttonText="contact us"
       />
     </>
   );

tailwind.config.js

@@ -57,6 +57,8 @@ module.exports = {
     "text-5xl",
     "mx-4",
     "px-2",
+    "overflow-auto",
+    "overflow-hidden"
     
   ],
   theme: {