Miguel why join sss

app/(pages)/(home)/page.jsx

@@ -3,7 +3,6 @@ import styles from "./page.module.scss"
 export default function Home() {
   return (
     <main>
-      <h1 className={styles.test}>Home</h1>
     </main>
   );
 }

app/(pages)/_components/why-join-sss/why-join-sss.jsx

@@ -0,0 +1,40 @@
+import styles from "./why-join-sss.module.scss";
+import Image from "next/image";
+
+export default function WhyJoinSSS({ heading, paragraph1, paragraph2 }) {
+  return (
+    <section className={styles.section}>
+      <Image
+        src="/assets/images/why-join-sss-bg.png"
+        alt=""
+        fill
+        className={styles.bgImage}
+        aria-hidden
+      />
+      <Image
+        src="/assets/images/dbdaab0906d99cb4e21fb4054cc087831e785112.png"
+        alt=""
+        fill
+        className={styles.starLayer}
+        aria-hidden
+      />
+      <div className={styles.content}>
+        <div className={styles.textGroup}>
+          <h2 className={styles.heading}>{heading}</h2>
+          <div className={styles.paragraphs}>
+            <p className={styles.paragraph}>{paragraph1}</p>
+            <p className={styles.paragraph2}>{paragraph2}</p>
+          </div>
+        </div>
+        <div className={styles.imageContainer}>
+          <Image
+            src="/assets/images/why-join-sss-photo.png"
+            alt="SSS members"
+            fill
+            className={styles.image}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

app/(pages)/_components/why-join-sss/why-join-sss.module.scss

@@ -0,0 +1,90 @@
+.section {
+  position: relative;
+  display: flex;
+  padding: 6.25rem;
+  align-items: flex-start;
+  overflow: hidden;
+}
+
+.bgImage {
+  object-fit: cover;
+  object-position: center;
+  z-index: 0;
+}
+
+.starLayer {
+  object-fit: cover;
+  object-position: center;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4.6875rem;
+  flex: 1;
+}
+
+.textGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+  flex: 1;
+}
+
+.heading {
+  align-self: stretch;
+  color: var(--off-white);
+  font-family: Oxanium;
+  font-size: 3rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.paragraphs {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  align-self: stretch;
+}
+
+.paragraph {
+  align-self: stretch;
+  color: var(--off-white);
+  font-family: "Space Grotesk";
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.paragraph2 {
+  align-self: stretch;
+  color: var(--off-white);
+  font-family: "Space Grotesk";
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.imageContainer {
+  position: relative;
+  width: 31rem;
+  height: 23.1875rem;
+  border-radius: 0.9375rem;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
+}

app/(pages)/test/page.jsx

@@ -0,0 +1,13 @@
+import WhyJoinSSS from "../_components/why-join-sss/why-join-sss"
+
+export default function TestPage() {
+  return (
+    <main>
+      <WhyJoinSSS
+        heading="Why join SSS?"
+        paragraph1="Join a community and network who truly enjoy engineering and making things!"
+        paragraph2="We make it a priority to make sure all members have the opportunity to have meaningful contributions to the project and learn industry relevant skills. We always have plenty to do!"
+      />
+    </main>
+  );
+}