Skip to content

Commit

Permalink
Feat: Modernize Fleet section (#491)
Browse files Browse the repository at this point in the history
  • Loading branch information
@angela-tran
angela-tran authored Nov 21, 2023
2 parents 76f073c + 121283e commit 112a666
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 74 deletions.
15 changes: 15 additions & 0 deletions src/_includes/agencies.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="agency-container">
<div class="agency">
<img alt="Clean Air Express" src="/uploads/clean-air-express.png" />
</div>
<div class="agency">
<img alt="Monterey-Salinas Transit" src="/uploads/monterey-salinas-transit-mst.png" />
</div>
<div class="agency">
<img alt="Sacramento Regional Transit" src="/uploads/sacramento-regional-transit-sacrt.png" />
</div>
<div class="agency">
<img alt="Santa Barbara Metropolitan Transit District"
src="/uploads/santa-barbara-metropolitan-transit-district-sb-mtd.png" />
</div>
</div>
8 changes: 4 additions & 4 deletions src/_sass/pages/_go-contactless.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,18 @@ $gc-blue: rgb(235, 248, 252);
}

.go-contactless-benefit-card,
.go-contactless-agency {
.agency {
border-radius: 6px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
}

.go-contactless-benefit-card {
background-color: #fff;
padding: 1rem;
}

.go-contactless-agency-container {
.agency-container {
display: grid;
grid-gap: 2rem;
padding: calc(32rem / 16) 0;
Expand All @@ -63,7 +63,7 @@ $gc-blue: rgb(235, 248, 252);
}
}

.go-contactless-agency {
.agency {
display: flex;
justify-content: center;
align-items: center;
Expand Down
84 changes: 37 additions & 47 deletions src/go-contactless.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@
<header>
<h1>Tap into the future of fare payment</h1>
</header>
<p>Transit providers, we can help you make the switch to start accepting contactless bank cards and smart devices.</p>
<p>Transit providers, we can help you make the switch to start accepting contactless bank cards and smart devices.
</p>
<div>
<a class="btn btn-primary btn-data-package" href="/how-to/go-contactless">Get started</a>
</div>
<img
alt="Artistic rendering of woman paying with a credit card for coffee and public transportation"
class="img-fluid"
src="/uploads/hero.svg"
/>
<img alt="Artistic rendering of woman paying with a credit card for coffee and public transportation"
class="img-fluid" src="/uploads/hero.svg" />
</div>
</section>

Expand All @@ -31,28 +29,30 @@ <h2 class="mt-0 text-center text-md-start">Make buying a ride fast and simple</h
</header>
<section>
<p>
Riding transit <strong>should be as easy as buying a cup of coffee</strong>: Regardless of what customers order or
where the coffee shop is, they know they can instantly pay by tapping their contactless bank card or smart device.
Riding transit <strong>should be as easy as buying a cup of coffee</strong>: Regardless of what customers
order or
where the coffee shop is, they know they can instantly pay by tapping their contactless bank card or smart
device.
</p>
<p>
But most California transit providers only accept regional fare cards or cash in exact change. These legacy fare
But most California transit providers only accept regional fare cards or cash in exact change. These legacy
fare
systems are expensive to maintain and create barriers for new riders.
</p>
<p>
It’s time for California to tap into the future of fare payment.
<strong>Nearly 75% of Californians have access to a contactless credit/debit card</strong>, and most have a smart
device as well. Travelers will be more likely to choose transit if they can use what’s already in their pocket to pay
<strong>Nearly 75% of Californians have access to a contactless credit/debit card</strong>, and most have a
smart
device as well. Travelers will be more likely to choose transit if they can use what’s already in their
pocket to pay
for it—just like they pay for coffee.
</p>
</section>
</div>
</div>
<div class="col-lg-4 d-flex">
<img
alt="Artistic drawing of credit cards, smart phone, and smart watch with wireless paying capabilities"
class="img-fluid my-auto"
src="/uploads/payment-types.png"
/>
<img alt="Artistic drawing of credit cards, smart phone, and smart watch with wireless paying capabilities"
class="img-fluid my-auto" src="/uploads/payment-types.png" />
</div>
</div>
</section>
Expand All @@ -69,7 +69,8 @@ <h2 class="mt-0 text-center">Long-term benefits for transit providers</h2>
</picture>
<h3>Lower overhead</h3>
<p>
Spend less money buying and servicing ticketing and change machines, and free up agents from selling fare cards by hand.
Spend less money buying and servicing ticketing and change machines, and free up agents from selling fare cards
by hand.
</p>
</div>
<div class="go-contactless-benefit-card">
Expand All @@ -78,14 +79,16 @@ <h3>Lower overhead</h3>
</picture>
<h3>Faster boarding</h3>
<p>
Dwell times are cut in half when riders are able to tap to ride and transfer with a contactless bank card or smart device.
Dwell times are cut in half when riders are able to tap to ride and transfer with a contactless bank card or
smart device.
</p>
</div>
<div class="go-contactless-benefit-card">
<picture> <img alt="" src="/uploads/higher-ridership.svg" /></picture>
<h3>Higher ridership</h3>
<p>
Easier payments and seamless transfers improve satisfaction and grow ridership, particularly among new or occasional
Easier payments and seamless transfers improve satisfaction and grow ridership, particularly among new or
occasional
riders.
</p>
</div>
Expand All @@ -99,29 +102,15 @@ <h2 class="mt-0 text-center">Agencies that added contactless fare payments</h2>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p>
Cal-ITP provides resource materials and technical assistance to public transportation providers in California and beyond
as they modernize their fare payment systems to accept customers’ contactless debit/credit cards and mobile wallets.
Cal-ITP provides resource materials and technical assistance to public transportation providers in California
and beyond
as they modernize their fare payment systems to accept customers’ contactless debit/credit cards and mobile
wallets.
</p>
</div>
</div>

<div class="go-contactless-agency-container">
<div class="go-contactless-agency">
<img alt="Clean Air Express" src="/uploads/clean-air-express.png" />
</div>
<div class="go-contactless-agency">
<img alt="Monterey-Salinas Transit" src="/uploads/monterey-salinas-transit-mst.png" />
</div>
<div class="go-contactless-agency">
<img alt="Sacramento Regional Transit" src="/uploads/sacramento-regional-transit-sacrt.png" />
</div>
<div class="go-contactless-agency">
<img
alt="Santa Barbara Metropolitan Transit District"
src="/uploads/santa-barbara-metropolitan-transit-district-sb-mtd.png"
/>
</div>
</div>
{% include agencies.html %}

<div class="text-center">
<a class="btn btn-action btn-primary" href="/contact">Contact us to learn more</a>
Expand All @@ -134,33 +123,33 @@ <h2 class="mt-0 mb-4 pb-3 text-center">Ready to tap into the future of fare paym
</header>
<div class="row mt-4 pt-3 d-flex flex-md-row">
<div class="procurement-image col-md-4 col-lg-4 text-center">
<img
alt="A smart phone and credit card being tapped at a bus fare device"
class="img-fluid contactless-cta-image"
src="/uploads/go-contactless-illo-payment-types.png"
/>
<img alt="A smart phone and credit card being tapped at a bus fare device" class="img-fluid contactless-cta-image"
src="/uploads/go-contactless-illo-payment-types.png" />
</div>
<div class="procurement-timeline col-md-8 col-lg-8">
<ol class="timeline">
<li>
<div class="timeline-item">
<h3>Prepare</h3>
<p>Cal-ITP can help you prepare to start accepting contactless bank cards and smart devices’ digital wallets.</p>
<p>Cal-ITP can help you prepare to start accepting contactless bank cards and smart devices’ digital
wallets.</p>
</div>
</li>
<li>
<div class="timeline-item">
<h3>Purchase</h3>
<p>
The State of California has Master Service Agreements (MSAs) available to help you modernize your transit system.
The State of California has Master Service Agreements (MSAs) available to help you modernize your transit
system.
</p>
</div>
</li>
<li>
<div class="timeline-item">
<h3>Implement</h3>
<p>
Cal-ITP can provide the technical assistance you need to implement open-loop contactless payments across your fleet.
Cal-ITP can provide the technical assistance you need to implement open-loop contactless payments across
your fleet.
</p>
</div>
</li>
Expand All @@ -169,7 +158,8 @@ <h3>Implement</h3>
<div class="procurement-button col-md-12">
<div class="py-4 py-md-0 my-4 my-md-0 mx-auto text-center">
<h4 class="mt-4 pt-3 mb-4 pb-3 d-md-block d-none w-50 mx-auto">
If you’d like to learn more about how to go contactless, please review the step-by-step guide or contact us for support.
If you’d like to learn more about how to go contactless, please review the step-by-step guide or contact us
for support.
</h4>
<a class="btn btn-primary mb-2 mb-sm-2 mb-md-0 mb-lg-0" href="/how-to/go-contactless">View guide</a>
<a class="btn btn-outline-primary" href="/contact">Contact us</a>
Expand Down
74 changes: 51 additions & 23 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,63 @@
<h1 class="home-hero-title">A new home for modern and equitable transportation innovations</h1>
</div>
<div class="imaged-section__image">
<img
alt="A woman and child paying for bus fare from their smart phone while at bus stop"
class="img-fluid"
src="/uploads/home-illo-main.png"
/>
<img alt="A woman and child paying for bus fare from their smart phone while at bus stop" class="img-fluid"
src="/uploads/home-illo-main.png" />
</div>
<div class="imaged-section__content">
<p>
Welcome to the California Mobility Marketplace—a one-stop resource to help California’s transportation providers make
Welcome to the California Mobility Marketplace—a one-stop resource to help California’s transportation providers
make
travel planning and payments simpler and more cost effective for customers.
</p>
<p>
Explore this site to find support for purchasing various products, such as open-loop fare collection hardware/software
Explore this site to find support for purchasing various products, such as open-loop fare collection
hardware/software
and data plans, that can help your agency design and provide the best experience for your riders.
</p>
<a class="btn btn-primary m-t-md" href="/contracts/" target="_self">View contracts</a>
</div>
</div>
</div>

<div class="bg-dark-tan">
<div class="container">
<section class="py-5">
<header>
<h2 class="text-center pt-3">Modernize your fleet</h2>
</header>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p>
Cal-ITP provides resource materials and technical assistance to public transportation providers in
California
and beyond as they modernize their fleets with <a href="/go-contactless">contactless payments</a>, <a
href="/how-to/get-connected">data plans</a>, and more. These are just some
of the agencies we’ve worked with.
</p>
</div>
</div>

{% include agencies.html %}

<div class="text-center">
<p>
Have questions about your fleet? Reach out and we can help!
</p>
<a class="btn btn-action btn-primary" href="/contact">Contact us</a>
</div>
</section>
</div>
</div>

<div class="container" id="what-is">
<section class="imaged-section imaged-section--right">
<div class="imaged-section__title">
<h2 class="home-title">What is Cal-ITP?</h2>
</div>
<div class="imaged-section__image">
<img
alt="A smart phone and credit card being tapped at a bus fare device"
class="img-fluid"
src="/uploads/home-illo-payment-types.png"
/>
<img alt="A smart phone and credit card being tapped at a bus fare device" class="img-fluid"
src="/uploads/home-illo-payment-types.png" />
</div>
<div class="imaged-section__content">
<p>
Expand All @@ -49,11 +75,15 @@ <h2 class="home-title">What is Cal-ITP?</h2>
(CalSTA) and the
<a rel="noreferrer" target="_blank" href="https://dot.ca.gov/ ">California Department of Transportation</a>
(Caltrans) through a grant from the
<a rel="noreferrer" target="_blank" href="https://calsta.ca.gov/subject-areas/transit-intercity-rail-capital-prog">California Transit and Intercity Rail Capital Program</a>
(<abbr>TIRCP</abbr>), the California Integrated Travel Project (Cal-ITP) is a statewide solution to make travel simpler and
<a rel="noreferrer" target="_blank"
href="https://calsta.ca.gov/subject-areas/transit-intercity-rail-capital-prog">California Transit and
Intercity Rail Capital Program</a>
(<abbr>TIRCP</abbr>), the California Integrated Travel Project (Cal-ITP) is a statewide solution to make travel
simpler and
cost-effective for everyone.
</p>
<a class="btn btn-action btn-primary" rel="noreferrer" target="_blank" href="https://www.calitp.org/">Learn more</a>
<a class="btn btn-action btn-primary" rel="noreferrer" target="_blank" href="https://www.calitp.org/">Learn
more</a>
</div>
</section>
</div>
Expand All @@ -65,16 +95,14 @@ <h2 class="home-title">What is Cal-ITP?</h2>
<h2 class="home-title">Get in touch</h2>
</div>
<div class="imaged-section__image">
<img
alt="An illustration of a bus' front entrance"
class="img-fluid"
src="/uploads/bus-circle.svg"
/>
</div>
<img alt="An illustration of a bus' front entrance" class="img-fluid" src="/uploads/bus-circle.svg" />
</div>
<div class="imaged-section__content">
<p>
Whether you are a public transit provider in California or elsewhere in the US, Cal-ITP can provide materials and
support to help you navigate the process to modernize your fleet. If you’re a vendor, we’d love to hear about your
Whether you are a public transit provider in California or elsewhere in the US, Cal-ITP can provide materials
and
support to help you navigate the process to modernize your fleet. If you’re a vendor, we’d love to hear about
your
company’s products and/or services.
</p>

Expand Down

0 comments on commit 112a666

Please sign in to comment.