UI about redesign v2

client/src/pages/About.tsx

@@ -22,28 +22,26 @@ export default function About() {
   }, []);
 
   return (
-    <div className='about'>
-      <h1>Making Shuttles</h1>
-      <h1><span className='word-rotator'>{words[wordIndex]}</span></h1>
-      <p>
-        Shubble is the latest shuttle tracker, which is built using Mapkit JS, React, and Flask.
-      </p>
-      <p>
-        Shubble is an open source project under the Rensselaer Center for Open Source (RCOS).
-      </p>
-      <p>
-        Have an idea to improve it? Contributions are welcome. Visit our <a href='https://github.com/wtg/shubble' target='_blank'>Github Repository</a> to learn more.
-      </p>
-      <p>
-        Interested in Shubble's data? Take a look at our
-        <Link to='/data'>
-          <span className = 'link1'>data page</span>
-        </Link>.
-      </p>
-      <div className='small'>
-        <p>
-          &copy; 2025 SHUBBLE
-        </p>
+    <div className="about-wrapper">
+      <div className="about-left">
+        <p className="about-small-title">Making Shuttles</p>
+        <h1 className="about-main-header"><span className='word-rotator'>{words[wordIndex]}</span></h1>
+        <div className="about-description">
+          <h1>Track RPI shuttles in real time and view schedules seamlessly with Shubble<br /><br /></h1>
+          <p>
+            Shubble is an open source project under the Rensselaer Center for Open Source (RCOS).<br />
+            Have an idea to improve it? Contributions are welcome!<br /> 
+            Visit our <a href='https://github.com/wtg/shubble' target='_blank'>Github Repository</a> to learn more.<br />
+            Interested in Shubble's data? Take a look at our
+            <Link to='/data'>
+              <span className = 'link1'>data page</span>
+            </Link>.
+          </p>
+        </div>
+      </div>
+
+      <div className="about-right">
+        <img src="/RPIStudentUnionv2.png" alt="RPI Student Union" className="about-image" />
       </div>
     </div>
   )

client/src/styles/About.css

@@ -2,41 +2,128 @@
 .word-rotator {
     color: #206ef9;
     font-weight: bold;
-    text-decoration: underline;
     text-decoration-color: #206ef9;
+    font-weight: 700;
+}
+
+/* Wrapper covers the whole about page section */
+.about-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom right, #FFF 0%, rgba(174, 195, 254, .8) 100%);
 }
 
+.about-left {
+  flex: 0 0 45%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 0px;
+  padding-left: 60px;
+}
 
+.about-left p {
+  margin: 0px;
 
-.about {
-    padding: 10px;
 }
 
-.link1{
-    margin-left: .6ch;
+.about-left h1 {
+  margin: 0px;
 }
 
-.about h1 {
-    font-size: 2.5em;
-    font-weight: 700;
-    text-align: center;
-
+/* Top small text */
+.about-small-title {
+  font-size: 1.8rem;
+  font-weight: 700;
 }
-.about p {
-    font-size: 1.3em;
-    text-align: left;
-    padding: 5px;
 
+/* Main header text */
+.about-main-header {
+  font-size: 4rem;
+}
+
+/* Description text */
+.about-description {
+}
+
+.about-description h1 {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+
+.about-description p {
+  font-size: 1rem;
+  font-weight: normal;
 }
 
-@media (max-width: 1025px){
-    /* Mobile View < 1025px */
-    .about h1 {
-        font-size: 1.5em;
-    }
 
-    .about p {
-        font-size: 1em;
-    }
+.about-right {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
+/* Image styling */
+.about-image {
+  width: 70%;
+  border-radius: 15px;
+  border: 5px solid #436F9F;
+  object-fit: cover;
+}
+
+.link1{
+    margin-left: .6ch;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 1025px) {
+  /* Stack vertically */
+  .about-wrapper {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+  }
+
+  .about-right {
+    flex: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  .about-left {
+    flex: none;
+    width: 100%;
+    margin-top: 20px;
+    padding: 0;
+  }
+
+  .about-small-title {
+    font-size: 1.2rem;
+    padding-left: 0;
+  }
+
+  .about-main-header {
+    font-size: 2.5rem;
+    padding-left: 0;
+  }
+
+  .about-description {
+    padding: 15px 20px;
+  }
+
+  .about-description h1 {
+    font-size: 1rem;
+  }
+
+  .about-description p {
+    font-size: 0.9rem;
+  }
+  .about-image {
+    width: 50%;
+    margin-top: 25px;
+    margin-bottom: 25px;
+  }
+}