feat: about page is doneeeeeeee

docs/about.html

@@ -62,20 +62,41 @@
         </p>
       </div>
       <div class="about-text">
+        <h1>Thousands of Users!</h1>
         <p>
           On April 17th, 2023, the project was born! Though it was finished
           midway through registration, the following registration periods saw a
           lot of use from students all over campus.
         </p>
-        <iframe
-          width="100%"
-          height="371"
-          object-position="center"
-          seamless
-          frameborder="0"
-          scrolling="no"
-          src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIcbjzLhH9H0RP8rF69XrnZtQk1umBTofOJBqAG5xWGBJhVDAi_mEmxQ-DsZZtuLVMvrhvJadYCf_m/pubchart?oid=370744605&amp;format=interactive"
-        ></iframe>
+        <div class="iframe-container">
+          <iframe
+            width="600"
+            height="371"
+            frameborder="0"
+            src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSIcbjzLhH9H0RP8rF69XrnZtQk1umBTofOJBqAG5xWGBJhVDAi_mEmxQ-DsZZtuLVMvrhvJadYCf_m/pubchart?oid=370744605&amp;format=interactive"
+            allowfullscreen
+          ></iframe>
+        </div>
+        <p>(Mobile Users may have to scroll a bit)</p>
+      </div>
+      <div class="about-text">
+        <h1>What's next?</h1>
+        <p>
+          The website will continue to be updated with the latest grade
+          distribution data from UT Austin for the foreseeable future
+        </p>
+        <p>
+          In the meantime, my team and I have been working on
+          <a
+            href="https://chromewebstore.google.com/detail/ut-registration-plus/hboadpjkoaieogjimneceaahlppnipaa"
+            target="_blank"
+            rel="noopener noreferrer"
+            >UT Registration Plus</a
+          >
+          so we're excited to ship out our new overhaul update soon! Check the
+          <a href="/docs/changelog">changelog</a> for our beta testing interest
+          form!
+        </p>
       </div>
     </div>
     <div class="footy">

docs/main.css

@@ -219,8 +219,9 @@ h1 {
 }
 
 .image-container {
-    width: 100%;
+    width: 80%;
     max-width: fit-content;
+    min-width: 200px;
     margin: 0 auto;
     margin-bottom: 10px;
     overflow: hidden;
@@ -235,6 +236,13 @@ h1 {
     transition: transform 0.3s ease;
 }
 
+.iframe-container {
+    width: 100%;
+    overflow: auto; /* Enable scrolling when content overflows */
+    max-width: 600px; /* Set maximum width to match iframe width */
+    margin: 0 auto; /* Center the container horizontally */
+  }
+
 .fa:hover {
     opacity: 0.9;
 }