Add locations info to about page

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

@@ -0,0 +1,34 @@
+<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">
+            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="align-center">
+            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,17 @@
+<div class="getting-started-locations-only">
+    <div class="events-card-container">
+        <div class="event-card" >
+            <img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="Westside">
+        </div>
+        <div class="event-card" >
+            <img class="location-image" src="../assets/images/hack-nights/DTLA.png" alt="Downtown L.A.">
+        </div>
+        <div class="event-card">
+            <img class="location-image" src="../assets/images/hack-nights/southla.png" alt="South L.A." >
+        </div>
+    </div>
+</div>
+
+
+
+

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>