Add locations info to about page

_includes/about-page/about-card-our-locations.html

@@ -0,0 +1,36 @@
+<div class="card-primary page-card-lg page-card--about">
+    <div class="about-us-section-header" data-hash="locations">
+        <span class="sec-head-img">
+            <img src="" alt="">
+        </span>
+        Our Locations
+    </div>
+
+    <div class="about-us-section-content">
+        <div class="align-center locations-section-header">
+            From In-Person Events to Remote Collaboration
+        </div>
+        <div class="top-paragraph">
+            <p>
+                In 2013, Hack for LA began as an in-person civic tech community, hosting events across Los Angeles—including the Westside, Downtown LA, and South LA—bringing volunteers together in shared spaces.
+            </p>
+            <p>
+                During the COVID-19 pandemic, the organization transitioned to a fully remote operating model, expanding access and enabling broader participation beyond geographic boundaries. 
+            </p>
+        </div>
+
+        <div class="locations-section-divider"></div>
+
+        <div class="align-center locations-section-subheader">
+            Former in-person event locations across Los Angeles
+        </div>
+        <div class="mobile-locations-dropdown">
+            {% include about-page/our-locations-images.html %}
+        </div>
+        <div class="bottom-paragraph">
+            <p>
+                Today, Hack for LA continues to serve Los Angeles as a remote-first organization, supporting a distributed network of contributors.
+            </p>
+        </div>
+    </div>
+</div>

_includes/about-page/our-locations-images.html

@@ -0,0 +1,13 @@
+<div class="getting-started-locations-only">
+    <div class="locations-card-container">
+        <div class="location-card">
+            <img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="Westside">
+        </div>
+        <div class="location-card" >
+            <img class="location-image" src="../assets/images/hack-nights/DTLA.png" alt="Downtown L.A.">
+        </div>
+        <div class="location-card">
+            <img class="location-image" src="../assets/images/hack-nights/southla.png" alt="South L.A.">
+        </div>
+    </div>
+</div>

_sass/components/_about.scss

@@ -552,6 +552,42 @@ a.anchor {
   margin-top: 18px;
 }
 
+.locations-section-header {
+  font-size: 1.125rem;
+  font-weight: bolder;
+}
+
+.locations-section-subheader {
+  font-size: 1rem;
+  font-weight: bolder;
+}
+
+.locations-section-divider {
+  border-top: 2px solid $color-pink;
+  margin: 40px 0;
+}
+
+.locations-card-container {
+  color: $color-white;
+  display: flex;
+  justify-content: center;
+  margin-top: 48px;
+  margin-bottom: 32px;
+  gap: 16px;
+}
+
+.location-card {
+  border-radius: 20px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.location-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
 .garcetti-mobile {
   display: block;
 }

pages/about.html

@@ -34,6 +34,9 @@ <h1 class="title1">About Us</h1>
             {% assign accomplishments= site.data.internal.accomplishments %}
             {% include about-page/about-card-accomplishments.html %}
 
+            <a class="anchor" id='locations' data-name="Our Locations"></a>
+            {% include about-page/about-card-our-locations.html %}
+
             <a class="anchor" id='metrics' data-name="Metrics"></a>
             {% include about-page/about-card-metrics.html %}
 
@@ -59,6 +62,7 @@ <h1 class="title1">About Us</h1>
                 <li><a href='#platform'>Hack for LA Platform</a></li>
                 <li><a href='#sustainability'>Sustainability</a></li>
                 <li><a href='#accomplishments'>Accomplishments</a></li>
+                <li><a href='#locations'>Our Locations</a></li>
                 <li><a href='#metrics'>Metrics</a></li>
                 <li><a href='#partners'>Partners</a></li>
                 <li><a href='#donations'>Make a Donation</a></li>