diff --git a/app/(pages)/(home)/page.jsx b/app/(pages)/(home)/page.jsx
index 9e18d16..4c7e39a 100644
--- a/app/(pages)/(home)/page.jsx
+++ b/app/(pages)/(home)/page.jsx
@@ -3,7 +3,6 @@ import styles from "./page.module.scss"
export default function Home() {
return (
- Home
);
}
diff --git a/app/(pages)/_components/why-join-sss/why-join-sss.jsx b/app/(pages)/_components/why-join-sss/why-join-sss.jsx
new file mode 100644
index 0000000..dfa6e36
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
{heading}
+
+
{paragraph1}
+
{paragraph2}
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/(pages)/_components/why-join-sss/why-join-sss.module.scss b/app/(pages)/_components/why-join-sss/why-join-sss.module.scss
new file mode 100644
index 0000000..5159476
--- /dev/null
+++ b/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;
+}
diff --git a/app/(pages)/test/page.jsx b/app/(pages)/test/page.jsx
new file mode 100644
index 0000000..8d761a4
--- /dev/null
+++ b/app/(pages)/test/page.jsx
@@ -0,0 +1,13 @@
+import WhyJoinSSS from "../_components/why-join-sss/why-join-sss"
+
+export default function TestPage() {
+ return (
+
+
+
+ );
+}
diff --git a/public/assets/images/dbdaab0906d99cb4e21fb4054cc087831e785112.png b/public/assets/images/dbdaab0906d99cb4e21fb4054cc087831e785112.png
new file mode 100644
index 0000000..d680d41
Binary files /dev/null and b/public/assets/images/dbdaab0906d99cb4e21fb4054cc087831e785112.png differ
diff --git a/public/assets/images/why-join-sss-bg.png b/public/assets/images/why-join-sss-bg.png
new file mode 100644
index 0000000..73e58fd
Binary files /dev/null and b/public/assets/images/why-join-sss-bg.png differ
diff --git a/public/assets/images/why-join-sss-photo.png b/public/assets/images/why-join-sss-photo.png
new file mode 100644
index 0000000..dc16567
Binary files /dev/null and b/public/assets/images/why-join-sss-photo.png differ