[feat] create about section (Our Vision, The Mission) (#13)

* create skeleton

* change div to section

* fill out Our Mission + Vision

* add and use b

* clean up / remove comments

* check style (prettier)

* remove b from global styles

* create div for mission and vision

src/components/About.astro

@@ -1 +1,93 @@
-<section></section>
+<section> 
+  <h4 id="about">ABOUT US</h4>
+  <div class="spacer"></div>
+  <div class="header">
+    <h3>At Hack for Impact, you will join over&nbsp;</h3>
+      <h2>200+ hackers</h2>
+      <h3>&nbsp;at UC Berkeley to innovate for social good.</h3>
+  </div>
+
+  <div class="mission-vision">
+    <div class="bigRow">
+      <h2 class="left">Our Vision</h2>
+      <p>To solve the most pressing challenges of our world, 
+        we will need the best and the brightest minds to work collaboratively on 
+        creative, ethical, and technical solutions that will propel humanity forward. 
+        Our audience is anyone, anywhere, who believes that 
+        technology can solve hard problems, grow prosperity, 
+        and expand human possibilities.</p>
+    </div>
+    <div class="bigRow">
+      <h2 class="left">The Mission</h2>
+      <div>
+        <p>Hack for Impact 2024 is a 1-day hackathon co-hosted by 
+          Blueprint and Cal Hacks at UC Berkeley. 
+          The event’s mission is two-fold:</p>
+        <div class="captionRow">
+          <div class="image-placeholder"></div>
+          <p>To <b>empower</b> student hackers to develop creative solutions 
+            for relevant social causes and collaborate with 
+            non-profit organizations on ethical innovation 
+            with tangible community impact.</p>
+        </div>
+        <div class="captionRow">
+          <div class="image-placeholder"></div>
+          <p>To <b>educate</b> students via a <b>series of workshops and speaker panels</b> 
+            to learn about professional opportunities in social good, 
+            as well as emerging technologies and their ethical aspects.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  @use '../styles/colors';
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+    padding-top: 5rem;
+  }
+  div.spacer {
+    height: 1.5rem;
+  }
+
+  div.mission-vision {
+    max-width: 58.625rem;
+  }
+
+  div.bigRow {
+    margin-top: 8.3125rem; 
+    display: flex;
+    flex-direction: row;
+    gap: 0 6.125rem;
+    text-align: left;
+  }
+
+  .image-placeholder {
+    background-color: colors.$secondary;
+    min-width: 10.5rem;
+    height: 7.0625rem;
+  }
+
+  h2.left {
+    display: inline-block; 
+    min-width: 12rem;
+  }
+
+  div.captionRow {
+    display: flex; 
+    flex-direction: row;
+    margin-top: 3.75rem;
+    gap: 0 1.5rem; 
+  }
+
+  div.header {
+    display: inline-block;
+    // flex-direction: row;
+  }
+</style>