Feature: Configure initial landing page (styling and background image) (

#11)

* Add text and styling for initial landing page

* Added background image to landing page and adjusted styling for text

* Added public folder containing the SSD background image used in styling

* Fixed PR issues 1-4 and also 6. Added small changes to styling in terms of margins.

* Fixed lint issues present in last commit. Last commit fixed issues 1-4 and also 6 and adjusted margins.

* Background Position & background size

Put background position to be center and the background size to cover

* Fixed PR issues

Fixed EOF newline, Added color to text TEMPORARY

Co-Authored-By: Nqnt41 <93019930+Nqnt41@users.noreply.github.com>

* Moved some styling to new file. modified class names and generalized some styles

* Fixed lint issues

---------

Co-authored-by: JavierM333 <11445jam@gmail.com>
Co-authored-by: Phantom0110 <mohamali9173@gmail.com>

src/Home.module.css

@@ -0,0 +1,39 @@
+.landingTitle {
+    /* TEMPORARY color till global theme is placed*/
+    color: #035496;
+    font-size: 2em;
+    margin-bottom: 1rem;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+h2 {
+    /* TEMPORARY color till global theme is placed*/
+    color: #057cde;
+    font-size: 1.5em;
+    margin-bottom: 0.5rem;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+p {
+    /* TEMPORARY color till global theme is placed*/
+    color: #59b1f9;
+    margin-bottom: 0.5rem;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.centerText {
+    text-align: center;
+}
+
+.landingBackground {
+    background-image: url("/landing-background.jpg");
+    background-position: center;
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+}
+
+

src/app/globals.css

@@ -20,3 +20,4 @@ body {
     var(--background-gradiant-light)
   )
 }
+

src/app/page.tsx

@@ -1,7 +1,19 @@
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className={`${styles.centerText} ${styles.landingBackground}`}>
       <h1>Society of Software Developers</h1>
+      <h2>Software Development & Design</h2>
+      <p>
+        We are an organization that helps students learn and apply software
+        engineering principles to real-world applications. We host weekly
+        workshops on topics like software design to help bridge the gap between
+        what students need to know for industry and what they&apos;re taught in
+        classes. These concepts help with building complex software systems and
+        better prepare members for team projects, internships, and careers in
+        software development.
+      </p>
+      <h2>Fall 2023 Meetings</h2>
+      <p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
     </main>
   );
 }