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}

+
+
+
+ SSS members +
+
+
+ ); +} 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