Merge remote-tracking branch 'origin/main' into feat/conditional-rend…

…ering
UoaWDCC · Jul 30, 2024 · 30c42c0 · 30c42c0
2 parents 472b804 + c62afc8
commit 30c42c0
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 0 deletions.
diff --git a/frontend/public/ASPA Title.png b/frontend/public/ASPA Title.png
diff --git a/frontend/src/app/home/page.tsx b/frontend/src/app/home/page.tsx
@@ -1,8 +1,12 @@
 import PastEvents from "@/ui/PastEvents";
+import Description from "@/ui/home/Description";
 
 export default function Home() {
   return (
     <div>
+      <section id="description">
+        <Description/>
+      </section>
       <section id="past-events">
         <PastEvents/>
       </section>

diff --git a/frontend/src/ui/home/Description.module.css b/frontend/src/ui/home/Description.module.css
@@ -0,0 +1,84 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px; 
+    color: #FBF5F0;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 90px;
+  }
+
+  .leftColumn {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .rightColumn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 60px;
+    margin-bottom: 15px;
+    font-weight: bold;
+    line-height: 1.1;
+    overflow: hidden;
+  }
+
+  .image {
+    width: 100%;
+    height: auto;
+    margin-bottom: 16px;
+
+  }
+
+  .buttonContainer {
+    display: flex;
+    justify-content: space-between;
+    width: 75%;
+    font-size: 20px;
+  }
+
+.eventsButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #DD995B;
+    font-weight: 600;
+    margin: 15px 0;
+    color: #FBF5F0;
+  }
+
+  .horizontalAligned {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    color: #DD995B;
+  }
+
+  .regButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #87562A;
+    margin: 15px 0;
+    color: #FBF5F0;
+    width: 150px;
+    border-width: 2PX;
+
+  }
+
+  .logButton {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: #DD995B;
+    margin: 15px 0;
+    color: #FBF5F0;
+    width: 150px;
+    border-width: 2PX;
+  }
+
diff --git a/frontend/src/ui/home/Description.tsx b/frontend/src/ui/home/Description.tsx
@@ -0,0 +1,25 @@
+import styles from "./Description.module.css";
+
+export default function Description() {
+    return (
+        <div className={styles.container}>
+          <div className={styles.leftColumn}>
+            <h1 className={styles.title}>Welcome to Auckland Student Pool Association!</h1>
+            <p>
+              Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, Leque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,
+            </p>
+            <div className={styles.horizontalAligned}>
+              <button className={styles.eventsButton}>Current Events</button>
+              <p>dolor sit amet, consectetur,</p>
+            </div>
+          </div>
+          <div className={styles.rightColumn}>
+            <img src="/ASPA Title.png" alt="Association Image" className={styles.image}/>
+            <div className={styles.buttonContainer}>
+              <button className={styles.regButton}>REGISTER</button>
+              <button className={styles.logButton}>LOGIN</button>
+            </div>
+          </div>
+        </div>
+      );
+}