components/layouts/SectionTwo.jsx

@@ -0,0 +1,32 @@
+import Button from "../buttons/Button.jsx";
+import ContactThreeJsComponent from "../elements/ContactThreeJsComponent.jsx";
+
+const SectionTwo = ({
+  buttonText,
+  buttonLink,
+  text,
+}) => {
+  return (
+    <>
+    <div id="contact" className="relative z-10 h-screen w-screen">
+      <div className="absolute inset-0 z-0">
+        
+        
+      </div>
+      <div className="relative z-10 flex flex-col items-center justify-center h-full">
+        <div className="relative flex justify-center items-end w-full mb-20">
+          <h1 className="text-6xl font-normal text-white">{text}</h1>
+        </div>
+        <div className="flex justify-start space-x-4">
+        <Button
+        buttonText={buttonText}
+        buttonLink={buttonLink}
+        />
+        </div>
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default SectionTwo;

pages/getinvolved.js

@@ -2,6 +2,7 @@ import React from "react";
 import Navbar from "../components/layouts/navbar.jsx";
 import SubSection from "../components/layouts/sub-section.jsx"
 import dynamic from "next/dynamic";
+import SectionTwo from "@/components/layouts/SectionTwo.jsx";
 
 const Section = dynamic(() => import("../components/layouts/section.jsx"));
 const ContactFormSection = dynamic(() =>
@@ -21,6 +22,23 @@ export default function Home() {
         buttonTwoText="say hello"
         buttonOneText="watch" videoId="j16NyCutsOo"
       />
+      <SectionTwo 
+      text ="githaven"
+      buttonText="Explore"
+      buttonLink="https://githaven.org"
+      >
+      </SectionTwo>
+      <SectionTwo 
+      text ="remnant.chat"
+      buttonText="Explore"
+      buttonLink="https://remnant.chat"
+      ></SectionTwo>
+      <SectionTwo 
+      text ="agilegrace"
+      buttonText="Explore"
+      buttonLink="https://agilegrace.org"
+      ></SectionTwo>
+      
 <ContactFormSection
 text="say hello"
 buttonText="contact us"