update homepage

frontend/src/Components/Footer/Footer.jsx

@@ -2,24 +2,28 @@ import { Container, Stack, Row, Col, Image } from "react-bootstrap";
 import { Discord, Github, Instagram } from "react-bootstrap-icons";
 import "./Footer.scss";
 import logo from "../../assets/logo.png";
+import CSCentralWhite from "../../assets/cs-central-white.png";
 export default function Footer() {
   return (
     <footer id="CS-Catalog-footer" className="footer p-4">
       <Container fluid style={{ maxWidth: "1000px" }}>
         <Row>
           <Col
-            xs={{ span: 12 }}
-            lg={{ span: 6 }}
-            className="d-flex justify-content-center justify-content-lg-start align-items-center p-0"
+            className="d-flex align-items-center justify-content-center"
+            xs
+            md={3}
           >
             <Image
               src={logo}
               id="CS-Catalog-footer-logo"
               className="footer-logo"
               roundedCircle
+              fluid
             />
+          </Col>
+          <Col className="d-flex">
             <ul
-              className="footer-socials-list d-flex flex-column align-self-stretch justify-content-evenly m-0"
+              className="footer-socials-list d-flex flex-column justify-content-evenly m-0"
               id="footer-socials-list"
             >
               <li
@@ -55,19 +59,13 @@ export default function Footer() {
               </li>
             </ul>
           </Col>
-          <Col
-            xs={{ span: 12 }}
-            lg={{ span: 6 }}
-            className="d-flex justify-content-center justify-content-lg-start align-items-center p-0"
-          >
-            <h5
-              className="footer-title flex-column d-flex"
-              id="CS-Catalog-footer-title"
-            >
-              <span>CS</span> <span>CENTRAL</span>
-            </h5>
+          <Col md="auto" className="vertical-divider"></Col>
+          <Col className="d-flex justify-content-center" xs md={3}>
+            <Image src={CSCentralWhite} fluid />
+          </Col>
+          <Col className="d-flex justify-content-left">
             <ul
-              className="footer-more-info-links-container d-flex flex-column align-self-stretch justify-content-evenly m-0"
+              className="footer-more-info-links-container d-flex flex-column justify-content-evenly m-0"
               id="more-info-links-container"
             >
               <li className="footer-more-info-link-container">

frontend/src/Components/Footer/Footer.scss

@@ -12,7 +12,6 @@
 /*First half of footer*/
 .footer-logo {
   background: $primary;
-  width: 50%;
   max-width: 200px;
   min-width: 100px;
 }
@@ -56,18 +55,15 @@
     border-bottom: 1px solid white;
   }
 }
-
-.vertical-divider {
-  border-right: 1px solid white;
-  width: 1px;
+@media (min-width: 992px) {
+  .vertical-divider {
+    border-left: 1px solid white;
+    padding-right: 200px;
+    width: 1px;
+  }
 }
-/*more info links*/
 
-.footer-more-info-links-container {
-  padding-left: 50px;
-  display: flex;
-  gap: 10px;
-}
+/*more info links*/
 
 .footer-more-info-link-container {
   white-space: nowrap;

frontend/src/Components/Header/Header.scss

@@ -5,6 +5,9 @@
 @import "../../../node_modules//bootstrap/scss/mixins";
 
 .header-divider {
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
   border: 1.5px solid $header-text;
   height: 75%;
   margin-left: 1em;

frontend/src/Components/Home/MainArticle/MainArticle.scss

@@ -30,14 +30,8 @@ $color-mode-type: data;
 
 // Custom stylings
 .main-image {
-  @include media-breakpoint-up(md) {
-    width: 100%;
-    // padding-right: 10px;
-  }
-
-  @include media-breakpoint-up(xxl) {
-    width: 900px;
-  }
+  max-width: 100%;
+  height: auto;
 }
 
 .main-article-container {

frontend/src/pages/HomePage/Home.jsx

@@ -1,5 +1,4 @@
-import { Container, Row, Col, Stack } from "react-bootstrap";
-import AppTitle from "../../Components/Home/AppTitle/AppTitle";
+import { Container, Row, Col, Stack, Image } from "react-bootstrap";
 import MainArticle from "../../Components/Home/MainArticle/MainArticle";
 
 import main_article_img from "../../assets/Article_Images/main_article.png";
@@ -14,6 +13,7 @@ import devin_ai from "../../assets/Article_Images/devin_ai.png";
 import ai_in_business from "../../assets/Article_Images/ai_in_business.png";
 import quantum from "../../assets/Article_Images/quantum.png";
 import ai_brain from "../../assets/ml_brain.jpg";
+import CSCentralWhite from "../../assets/cs-central-white.png";
 
 export default function Home() {
   // demo feature article
@@ -81,9 +81,19 @@ export default function Home() {
     <>
       <Container fluid className="home-page flex-grow-1 mx-0 py-3">
         {/* Left section - Articles Display */}
-        <Row>
-          <Col>
-            <AppTitle />
+        <Row className="justify-content-around">
+          <Col className="d-flex flex-column justify-content-evenly cs-central-seperator">
+            <hr className="left-CS-central-hr" />
+          </Col>
+          <Col className="CS-central-top" xs={4} sm={3} md={2} lg={1}>
+            <Image
+              src={CSCentralWhite}
+              className="cs-central-img mx-auto d-block"
+              fluid
+            />
+          </Col>
+          <Col className="d-flex flex-column justify-content-evenly cs-central-seperator align-items-end">
+            <hr className="right-CS-central-hr" />
           </Col>
         </Row>
         {/* Right section - Popular Articles */}
@@ -104,6 +114,7 @@ export default function Home() {
           <Col></Col>
         </Row>
       </Container>
+      <hr />
     </>
   );
 }

frontend/src/pages/HomePage/Home.scss

@@ -9,12 +9,18 @@
     max-width: 1000px !important;
   }
 }
-
 // Dark mode
 @include color-mode(dark) {
   .home-page {
     background-color: $primary-bg-dark;
   }
+
+  .cs-central-seperator hr {
+    color: white;
+    opacity: 100;
+    border-style: solid;
+    width: 90%;
+  }
 }
 
 @include color-mode(light) {