[feat] about section: about us and image carousel (#18)

* about us and image carousel

* fixed image distortion by importing cropped photos

* added alt to images

* added alt descriptions, images erroring

* fixed headings and images

* about us and image carousel

* fixed image distortion by importing cropped photos

* added alt descriptions, images erroring

* fixed headings and images

* about us and image carousel

* added alt descriptions, images erroring

* removed a webp file

* spacing

* fixed image bar and fonts

* rebase changes

* reorganize files, hide overflow, update styles

---------

Co-authored-by: jinkang-0 <[email protected]>

src/components/About.astro

@@ -1,40 +1,80 @@
-<section> 
+---
+import { Image } from 'astro:assets';
+import working from '../graphics/about/working.webp';
+import crowdLarge from '../graphics/about/crowd-large.webp';
+import fourppl from '../graphics/about/fourppl.webp';
+import bear from '../graphics/about/bear.webp';
+import annie from '../graphics/about/anniew.webp';
+import crowd from '../graphics/about/crowd.webp';
+---
+
+<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>
+    <h3>
+      At Hack for Impact, you will join over
+      <div class="text">200+ hackers</div>
+      at UC Berkeley to innovate for social good.
+    </h3>
+  </div>
+
+  <div class="imageRow">
+    <Image class="img" src={working} alt="Group of 5 people coding" />
+    <Image
+      class="img"
+      src={crowdLarge}
+      alt="Large group of people coding at hackathon"
+    />
+    <Image class="img" src={fourppl} alt="Picture of Calhacks members" />
+    <Image
+      class="img"
+      src={bear}
+      alt="Hackathon attendees posing with stuffed bear"
+    />
+    <Image class="img" src={annie} alt="Girl with tools" />
+    <Image
+      class="img"
+      src={crowd}
+      alt="Large group of people coding at hackathon"
+    />
   </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>
+      <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>
+        <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>
+          <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>
+          <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>
@@ -43,15 +83,19 @@
 
 <style lang="scss">
   @use '../styles/colors';
+  @use '../styles/fonts';
+
   section {
     display: flex;
     flex-direction: column;
-    align-items: center; 
+    align-items: center;
     text-align: center;
     width: 100%;
     margin: 0 auto;
     padding-top: 5rem;
+    overflow-x: hidden;
   }
+
   div.spacer {
     height: 1.5rem;
   }
@@ -61,7 +105,7 @@
   }
 
   div.bigRow {
-    margin-top: 8.3125rem; 
+    margin-top: 8.3125rem;
     display: flex;
     flex-direction: row;
     gap: 0 6.125rem;
@@ -75,19 +119,53 @@
   }
 
   h2.left {
-    display: inline-block; 
+    display: inline-block;
     min-width: 12rem;
   }
 
   div.captionRow {
-    display: flex; 
+    display: flex;
+    flex-direction: row;
+    margin-top: 3.75rem;
+    gap: 0 1.5rem;
+  }
+
+  div.text {
+    font-family: fonts.$serif;
+    font-weight: 600;
+    display: inline-block;
+  }
+
+  div.captionRow {
+    display: flex;
     flex-direction: row;
     margin-top: 3.75rem;
-    gap: 0 1.5rem; 
+    gap: 0 1.5rem;
+  }
+
+  div.spacer {
+    height: 1.5rem;
   }
 
   div.header {
     display: inline-block;
-    // flex-direction: row;
+    width: 744px;
+  }
+
+  div.header h2 {
+    display: inline-block;
+  }
+
+  div.imageRow {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    margin-top: 74px;
+  }
+
+  .img {
+    border-radius: 8px;
+    width: 264px;
+    height: 171px;
   }
 </style>