WIP - Customer stories page and homepage stats

_config.yml

@@ -22,6 +22,8 @@ domain: www.calitp.org
 google_fonts: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Raleway:wght@700&display=swap"
 navigation:
   header:
+    - name: Customer stories
+      url: /customer-stories
     - name: Resources
       url: /resources
     - name: Press

src/_includes/header.html

@@ -18,8 +18,8 @@
 
       <div class="navbar-collapse collapse justify-content-end" id="mainNav">
         <ul class="navbar-nav mb-0">
-          {% include link_repeater.html list_class="nav-item" menu_items=site.navigation.header anchor_class="nav-link h4 mb-0
-          d-block rounded-1" %}
+          {% include link_repeater.html list_class="nav-item" menu_items=site.navigation.header anchor_class="nav-link text-nowrap
+          h4 mb-0 d-block rounded-1" %}
         </ul>
       </div>
     </div>

src/customer-stories.html

@@ -0,0 +1,217 @@
+---
+layout: default
+permalink: /customer-stories
+title: Customer stories
+---
+
+{% include clipped.html %}
+
+<div class="row">
+  <div class="clipped background-calitp-blue rhombus-1 offset-lg-1 col-lg-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+    <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
+      <h1 class="text-white mb-2">Our customers</h1>
+      <p class="text-white mb-3 pb-3">
+        The California Integrated Travel Project (Cal-ITP) is working with transit agencies across the state (and country!) to
+        promote a modern and consistent transportation experience throughout California. Each and every transit agency in the
+        state can become a Cal-ITP customer. We provide free technical assistance and support to help agencies implement
+        Contactless Payments, Transit Benefits, GTFS and more.
+      </p>
+      <div class="row d-none d-lg-flex">
+        <div class="col-lg-8">
+          <span class="small-caps">Why it matters</span>
+        </div>
+        <div class="col-lg-4">
+          <span class="small-caps">Network of agencies</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-lg-4">
+          <span class="small-caps d-lg-none">Why it matters</span>
+          <h2>1.88M</h2>
+          <p>Daily transit rides in CA<sup>1</sup></p>
+        </div>
+        <div class="col-lg-4">
+          <h2>300+</h2>
+          <p>Transit agencies in CA; all can leverage Cal-ITP</p>
+        </div>
+        <div class="col-lg-4">
+          <span class="small-caps d-lg-none">Network of agencies</span>
+          <figure>
+            <img src="/images/customers-map-agencies.png" alt="" style="height: 150px" />
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<section class="row flex-lg-row flex-column-reverse">
+  <div class="offset-lg-3 col-lg-5">
+    <h2>Selected agency highlights</h2>
+    <figure class="image pt-3 mt-3">
+      <img
+        alt="Commuter riders board a Ventura County Transportation Commission bus."
+        class="rounded-1 w-100"
+        src="/images/stories-photo-vctc.jpg"
+      />
+      <figcaption>Courtesy of Ventura County Transportation Commission</figcaption>
+    </figure>
+    <figure class="quote pt-3 mt-3">
+      <blockquote>
+        “As a small agency who doesn’t have the resources to be specialists in these areas, we’re able to leverage Cal-ITP’s
+        support to get complicated tech projects done more quickly…or at all.”
+      </blockquote>
+      <figcaption>- Public Transit Director in Ventura County</figcaption>
+    </figure>
+    <span class="small-caps mt-3">GTFS</span>
+    <h3>Ventura County Transportation Commission</h3>
+    <ul class="mt-3">
+      <li>Fleet size: 41</li>
+      <li>Services operated: fixed-route, paratransit</li>
+      <li>
+        Goals:
+        <ul>
+          <li>Improve GTFS production processes</li>
+          <li>Streamline scheduling operations</li>
+          <li>Modernize fleet</li>
+          <li>Regional open-loop contactless payment system</li>
+          <li>Regional interoperability</li>
+        </ul>
+      </li>
+    </ul>
+    <p class="mt-3">
+      The Ventura County Transportation Commission (VCTC) supports several transit agencies in greater Ventura County and manages
+      two. With a goal of unifying and modernizing transit in their region, VCTC partnered with Cal-ITP. They wanted to pilot
+      scheduling software that could help them adjust existing routes, plan for the addition of electric vehicles, make quick and
+      efficient schedule changes, and export high-quality GTFS (as required by the National Transit Database). In addition,
+      Cal-ITP helped VCTC to better understand integrations between their technology vendors, to work to implement open loop
+      payments on their VCTC Intercity service and to identify opportunities to streamline GTFS processes.
+    </p>
+
+    <figure class="image pt-3 mt-3">
+      <img
+        alt="Commuter riders board a Ventura County Transportation Commission bus."
+        class="rounded-1 w-100"
+        src="/images/stories-photo-vctc.jpg"
+      />
+      <figcaption>Courtesy of Glenn County Transportation Division</figcaption>
+    </figure>
+    <span class="small-caps pt-3 mt-3">Contactless Payments</span>
+    <h3>Glenn County Transportation Division</h3>
+    <ul class="mt-3">
+      <li>Fleet size: 4</li>
+      <li>Services operated: fixed-route, paratransit</li>
+      <li>
+        Goals:
+        <ul>
+          <li>Implement contactless payments</li>
+          <li>Reduce cash dependency</li>
+          <li>Reduce dwell times</li>
+        </ul>
+      </li>
+    </ul>
+    <p class="mt-3">
+      Glenn County is a small agency with big goals to improve the rider experience  through contactless payments. They are
+      working with their Cal-ITP account manager and a team of Cal-ITP payments specialists to plan the project and prepare for
+      implementation. The Cal-ITP team’s role includes guiding the agency through scoping their requirements; making use of the
+      State of California Master Service Agreements; and providing support with rider marketing and communications. This dedicated
+      support is designed to help Glenn County make informed decisions, meet their deadlines, and set them up for a successful
+      contactless payments launch.
+    </p>
+    <figure class="quote mt-3">
+      <blockquote>
+        “Our county’s situation may be a bit more unique than other jurisdictions, requiring more handholding, but Cal-ITP’s
+        assistance hasn’t wavered. They’ve navigated us throughout this process and provided crucial resources—that’s more than
+        appreciated.”
+      </blockquote>
+      <figcaption>- Administrative Services Analysts in Glenn County</figcaption>
+    </figure>
+
+    <span class="small-caps pt-3 mt-3">Benefits</span>
+    <h3>Monterey-Salinas Transit</h3>
+    <ul class="mt-3">
+      <li>Fleet size: 88</li>
+      <li>Services operated: fixed-route, paratransit</li>
+      <li>
+        Goals:
+        <ul>
+          <li>Reduce cash dependency</li>
+          <li>Implement contactless payments for all riders</li>
+          <li>Streamline eligibility verification for discounts</li>
+          <li>Improve connectivity in rural areas</li>
+        </ul>
+      </li>
+    </ul>
+    <p class="mt-3">
+      After implementing contactless payments, Monterey-Salinas Transit (MST) needed a way to help their riders quickly and easily
+      access transit benefits and discounts. They wanted a minimalist, seamless solution. They wanted riders to be able to use
+      their benefits without downloading a new app or device.
+    </p>
+    <p class="mt-3">
+      Cal-ITP partnered with MST to review existing fare policies, including for federally required groups like veterans and older
+      adults. MST implemented Cal-ITP Benefits, an automated process which allows riders to link their transit discount to their
+      card for contactless payment. Digitally verifying identification reduced the burden on the customer service team at MST, who
+      previously processed all applications by hand.
+    </p>
+    <p class="mt-3">
+      In 2022, MST became the first transit agency in the nation to provide an automated method for Senior Citizen Discounts via
+      an open-loop contactless payment system. In the past year, 200% more riders have tapped to pay and received their discounted
+      fare automatically!
+    </p>
+    <figure class="quote mt-3">
+      <blockquote>
+        “The Cal-ITP team is wonderful to work with. We greatly appreciate their support, technical expertise, and collaboration!”
+      </blockquote>
+      <figcaption>- Marketing and Communications Manager in Monterey-Salinas Transit</figcaption>
+    </figure>
+    <figure class="image pt-3 mt-3">
+      <img
+        alt="Commuter riders board a Ventura County Transportation Commission bus."
+        class="rounded-1 w-100"
+        src="/images/stories-photo-vctc.jpg"
+      />
+      <figcaption>Courtesy of Glenn County Transportation Division</figcaption>
+    </figure>
+    <hr />
+  </div>
+  <div class="offset-lg-1 col-lg-2">
+    <span class="small-caps">Topics</span>
+  </div>
+</section>
+
+<section class="row">
+  <div class="offset-lg-3 col-lg-5">
+    <h2 class="h1">Get in touch today to see how Cal-ITP can help!</h2>
+
+    <p class="mt-3">
+      Cal-ITP’s Customer Success team will provide a dedicated account manager who can help your agency meet your goals. Together,
+      we make transit in California better for everyone.
+    </p>
+    <svg class="position-absolute svg">
+      <clipPath id="stories-contact-path" clipPathUnits="objectBoundingBox">
+        <path
+          d="M0.038,0.158 C0.04,0.109,0.059,0.071,0.082,0.069 L0.897,0.003 C0.921,0.001,0.941,0.038,0.945,0.088 L1,0.89 C1,0.95,0.983,1,0.954,1 H0.048 C0.02,1,-0.001,0.952,0.002,0.894 L0.038,0.158"
+        ></path>
+      </clipPath>
+    </svg>
+    <div class="background-calitp-blue py-3 my-3 py-md-4 my-md-3 px-5 text-center clipped-stories-contact">
+      <picture
+        ><img
+          class="pt-3 pt-md-4"
+          src="/images/connect.png"
+          alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
+          width="105"
+      /></picture>
+      <h3 class="text-white d-block pt-3 pt-md-4 pb-3 pb-md-0">E-mail [email protected] to connect with the Cal-ITP team.</h3>
+    </div>
+
+    <hr />
+  </div>
+</section>
+
+<section class="row">
+  <div class="offset-lg-3 col-lg-5">
+    <small>1. Source</small>
+    <small>2. Source</small>
+  </div>
+</section>

src/stylesheets/main.css

@@ -328,7 +328,8 @@ footer a:hover {
 
 .clipped,
 .clipped-start,
-.clipped-end {
+.clipped-end,
+.clipped-stories-contact {
   -webkit-clip-path: none;
   clip-path: none;
   border-radius: 1.25rem;
@@ -371,7 +372,8 @@ footer a:hover {
 
   .clipped,
   .clipped-start,
-  .clipped-end {
+  .clipped-end,
+  .clipped-stories-contact {
     border-radius: 0;
   }
 
@@ -389,6 +391,11 @@ footer a:hover {
     -webkit-clip-path: url(#my-clip-path-end);
     clip-path: url(#my-clip-path-end);
   }
+
+  .clipped-stories-contact {
+    -webkit-clip-path: url(#stories-contact-path);
+    clip-path: url(#stories-contact-path);
+  }
 }
 
 @media (max-width: 992px) {