Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Modernize Fleet section #491

Merged
merged 3 commits into from
Nov 21, 2023
Merged

Feat: Modernize Fleet section #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b89413c
refactor: implement 'Modernize your fleet' section
angela-tran Nov 14, 2023
02bd720
refactor: rename CSS class to be more generic
angela-tran Nov 14, 2023
121283e
refactor: extract out agency logos section into include
angela-tran Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/_includes/agencies.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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