From 327c4c9790ed4691bf2985ec68e24cd7680e4ca4 Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Thu, 4 Jun 2026 13:32:17 -0500
Subject: [PATCH] Use DOT checker hero on trucking order pages

---
 site/src/components/TruckingOrderHeader.astro | 126 +++++++++++++++---
 1 file changed, 106 insertions(+), 20 deletions(-)

diff --git a/site/src/components/TruckingOrderHeader.astro b/site/src/components/TruckingOrderHeader.astro
index b774e63..b70f0e6 100644
--- a/site/src/components/TruckingOrderHeader.astro
+++ b/site/src/components/TruckingOrderHeader.astro
@@ -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>