justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use DOT checker hero on trucking order pages

Browse source
This commit is contained in:
justin 2026-06-04 13:32:17 -05:00
parent fcb56a4707
commit 327c4c9790
1 changed files with 106 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

126
site/src/components/TruckingOrderHeader.astro
View file

@ -1,38 +1,124 @@
---
---
<section class="pw-trucking-order-header" aria-labelledby="pw-trucking-order-header-title">
<h2 id="pw-trucking-order-header-title">We handle your FMCSA filings so you can focus on the road.</h2>
<p>
<section class="pw-trucking-order-hero" aria-labelledby="pw-trucking-order-hero-title">
<div class="pw-trucking-order-badge">DOT / FMCSA Compliance Specialists</div>
<h2 id="pw-trucking-order-hero-title">We handle your FMCSA filings so you can focus on the road.</h2>
<p class="pw-trucking-order-copy">
Performance West is a dedicated transportation compliance firm serving thousands of motor carriers nationwide.
We combine deep regulatory expertise with purpose-built filing technology so your paperwork is done right, done fast,
and tracked every step of the way.
</p>
<div class="pw-trucking-order-cards" aria-label="Performance West trucking compliance advantages">
<article>
<div class="pw-card-icon">&#128203;</div>
<h3>Specialized in trucking compliance</h3>
<p>MCS-150, BOC-3, UCR, IFTA/IRP, operating authority and more, filed correctly the first time.</p>
</article>
<article>
<div class="pw-card-icon">&#9889;</div>
<h3>Fast turnaround</h3>
<p>Our automated filing systems submit most updates within 1-2 business days of receiving your information.</p>
</article>
<article>
<div class="pw-card-icon">&#128269;</div>
<h3>Attention to detail</h3>
<p>Every filing is verified against current FMCSA requirements. We catch errors before they become problems.</p>
</article>
<article>
<div class="pw-card-icon">&#128222;</div>
<h3>Real support, real people</h3>
<p>Questions? Call (888) 411-0383 or reply to any email. We respond same business day.</p>
</article>
</div>
</section>
<style>
.pw-trucking-order-header {
.pw-trucking-order-hero {
margin: 0 0 1.5rem;
padding: 1.25rem 1.5rem;
border: 1px solid rgba(26, 39, 68, 0.12);
border-left: 5px solid var(--pw-orange, #f97316);
border-radius: 14px;
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 58%, #f8fafc 100%);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
padding: 2rem 1.5rem;
border-radius: 18px;
background: var(--pw-navy-dark, #0f172a);
text-align: center;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.pw-trucking-order-header h2 {
margin: 0 0 0.5rem;
color: var(--pw-navy, #1a2744);
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.25;
.pw-trucking-order-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.875rem;
padding: 0.25rem 0.875rem;
border: 1px solid rgba(249, 115, 22, 0.3);
border-radius: 999px;
background: rgba(249, 115, 22, 0.15);
color: #fb923c;
font-size: 0.75rem;
font-weight: 700;
}
.pw-trucking-order-header p {
.pw-trucking-order-hero h2 {
margin: 0 0 0.75rem;
color: #ffffff;
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.2;
}
.pw-trucking-order-copy {
margin: 0 auto 1.5rem;
max-width: 42rem;
color: #cbd5e1;
font-size: 0.95rem;
line-height: 1.7;
}
.pw-trucking-order-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
max-width: 920px;
margin: 0 auto;
text-align: left;
}
.pw-trucking-order-cards article {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
}
.pw-card-icon {
margin-bottom: 0.375rem;
font-size: 1.375rem;
line-height: 1;
}
.pw-trucking-order-cards h3 {
margin: 0 0 0.25rem;
color: #ffffff;
font-size: 0.8125rem;
font-weight: 800;
line-height: 1.35;
}
.pw-trucking-order-cards p {
margin: 0;
max-width: 54rem;
color: var(--pw-muted, #64748b);
font-size: 1rem;
line-height: 1.65;
color: #94a3b8;
font-size: 0.75rem;
line-height: 1.5;
}
@media (max-width: 640px) {
.pw-trucking-order-hero {
padding: 1.5rem 1rem;
border-radius: 14px;
text-align: left;
}
.pw-trucking-order-copy {
margin-left: 0;
margin-right: 0;
}
}
</style>