misc pages css reorganization

Author: shansitads

src/App.js

@@ -13,7 +13,6 @@ import {
   Routes,
   Navigate
 } from "react-router-dom";
-import "./style.css";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 

src/components/Footer.js

@@ -15,8 +15,8 @@ function Footer() {
             <h3>Copyright @ 2025 BrainHack Vanderbilt</h3>
           </Col>
           <Col md={4} className="footer-body">
-            <ul className="footer-icons">
-              <li className="social-icons">
+            <ul className="footer-icons-section">
+              <li className="footer-social-icons">
                 <a
                   href="https://github.com/brainhack-vandy"
                   target="_blank"
@@ -25,7 +25,7 @@ function Footer() {
                   <AiFillGithub />
                 </a>
               </li>
-              <li className="social-icons">
+              <li className="footer-social-icons">
                 <a
                   href="https://www.youtube.com/@BrainHackVanderbilt"
                   target="_blank"
@@ -34,7 +34,7 @@ function Footer() {
                   <AiFillYoutube />
                 </a>
               </li>
-              <li className="social-icons">
+              <li className="footer-social-icons">
                 <a
                   href="https://www.instagram.com/brainhackvu/"
                   target="_blank"

src/components/Home/home.css

@@ -386,4 +386,49 @@
     .introduction-subheading {
         font-size: 1.6em;
     }
+}
+
+
+/* --------- 
+  Sponsor Section styles
+  --------- */
+.sponsor-section {
+    padding: 4rem 0;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35));
+    overflow: hidden;
+}
+
+.sponsor-icons {
+    font-size: 4.5em !important;
+    margin: 15px !important;
+    padding: 10px !important;
+    opacity: 0.93 !important;
+    border: 1.7px solid rgba(200, 137, 230, 0.637) !important;
+    vertical-align: middle !important;
+    text-align: center !important;
+    border-radius: 5px !important;
+    display: table !important;
+    box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;
+    overflow: hidden !important;
+    transition: all 0.4s ease 0s !important;
+}
+
+.sponsor-icons:hover {
+    transform: scale(1.05) !important;
+    overflow: hidden !important;
+    border: 2.2px solid rgba(197, 115, 230, 0.883) !important;
+}
+
+.sponsor-icon-images {
+    padding: 20px !important;
+    line-height: 1.6 !important;
+
+}
+
+@media (max-width: 767px) {
+    .sponsor-icons {
+        margin: 10px !important;
+    }
 }

src/components/Navbar.js

@@ -87,8 +87,8 @@ function NavBar() {
                 target="_blank"
                 className="fork-btn-inner"
               >
-                <CgGitFork style={{ fontSize: "1.2em" }} />{" "}
-                <AiFillStar style={{ fontSize: "1.1em" }} />
+                <CgGitFork className="fork-btn-subicon" />{" "}
+                <AiFillStar className="fork-btn-subicon" />
               </Button>
             </Nav.Item>
 

src/components/Schedule/schedule.css

@@ -1,3 +1,41 @@
+.schedule-section {
+    position: relative !important;
+    padding-top: 150px !important;
+    padding-bottom: 30px !important;
+    background-image: var(--section-background-color) !important;
+}
+
+.schedule-card {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    padding-left: 25px !important;
+    padding-right: 25px !important;
+}
+
+.schedule-card-view {
+    display: flex;
+    align-items: flex-start;
+    box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459) !important;
+    color: white !important;
+    background-color: transparent !important;
+    opacity: 0.9 !important;
+    transition: all 0.5s ease 0s !important;
+    padding: 20px !important;
+    border-radius: 8px !important;
+}
+
+.schedule-card-view:hover {
+    transform: scale(1.02) !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 4px 5px rgba(129, 72, 144, 0.561) !important;
+}
+
+@media (max-width: 768px) {
+    .schedule-card-view {
+        flex-direction: column;
+    }
+}
+
 /* Date selector styles */
 .date-selector {
     display: flex;