feat(home): replace "Why Choose Us" benefits grid with ProofNumbers band
E2E Test Suite / Smoke Tests (P0) (push) Has been cancelled
E2E Test Suite / Critical User Journeys (push) Has been cancelled
E2E Test Suite / API Integration Tests (push) Has been cancelled
E2E Test Suite / Form Interaction Tests (push) Has been cancelled
E2E Test Suite / Destructive & Chaos Tests (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (chromium) (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (firefox) (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (webkit) (push) Has been cancelled
E2E Test Suite / Mobile Device Tests (push) Has been cancelled
E2E Test Suite / Security Header Tests (push) Has been cancelled
E2E Test Suite / Test Report Summary (push) Has been cancelled
Ping Search Engines / Notify Search Engines (push) Successful in 3s
Deploy to Production / Build & Verify (push) Waiting to run
Deploy to Production / Pre-Deploy Tests (push) Has been cancelled
Deploy to Production / Deploy to Railway (push) Has been cancelled
Deploy to Production / Deploy to Render (push) Has been cancelled
Deploy to Production / Deploy to VPS (PM2) (push) Has been cancelled
Deploy to Production / Deploy to Fly.io (push) Has been cancelled
Deploy to Production / Post-Deploy Verification (push) Has been cancelled
Deploy to Production / Notify on Failure (push) Has been cancelled
E2E Test Suite / Smoke Tests (P0) (push) Has been cancelled
E2E Test Suite / Critical User Journeys (push) Has been cancelled
E2E Test Suite / API Integration Tests (push) Has been cancelled
E2E Test Suite / Form Interaction Tests (push) Has been cancelled
E2E Test Suite / Destructive & Chaos Tests (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (chromium) (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (firefox) (push) Has been cancelled
E2E Test Suite / Cross-Browser Regression (webkit) (push) Has been cancelled
E2E Test Suite / Mobile Device Tests (push) Has been cancelled
E2E Test Suite / Security Header Tests (push) Has been cancelled
E2E Test Suite / Test Report Summary (push) Has been cancelled
Ping Search Engines / Notify Search Engines (push) Successful in 3s
Deploy to Production / Build & Verify (push) Waiting to run
Deploy to Production / Pre-Deploy Tests (push) Has been cancelled
Deploy to Production / Deploy to Railway (push) Has been cancelled
Deploy to Production / Deploy to Render (push) Has been cancelled
Deploy to Production / Deploy to VPS (PM2) (push) Has been cancelled
Deploy to Production / Deploy to Fly.io (push) Has been cancelled
Deploy to Production / Post-Deploy Verification (push) Has been cancelled
Deploy to Production / Notify on Failure (push) Has been cancelled
Swaps the soft-adjective benefits section (Rapid Development, Enterprise Security, Built to Scale, 24/7 Support) for a compact horizontal stat band so the first below-the-fold surface leads with hard, scannable numbers instead of generic copy. - New src/components/ProofNumbers.astro renders 4 large gradient numbers with one-line captions: 20+ Projects Delivered, 5★ Client Rating, 11 Districts Deployed, < 2s Avg Page Load. Numbers carry a TODO for stakeholder confirmation; defaults mirror existing hero/stat copy. - Responsive grid: 2×2 on mobile (<md), 4×1 horizontal band on desktop, with subtle vertical dividers between columns on md+. - Matches site typography tokens (text-secondary-* / text-primary-*) with full dark-mode parity (gradients shift to primary-400/300). - Removes now-unused `benefits` data array and inline SVG icons from src/pages/index.astro along with the surrounding section markup.
This commit is contained in:
@@ -0,0 +1,101 @@
|
||||
---
|
||||
/**
|
||||
* ProofNumbers Component
|
||||
*
|
||||
* A compact horizontal "stat band" rendered between the social-proof logo
|
||||
* strip and the services grid on the homepage. Replaces the older
|
||||
* "Why Choose Us" / "Built for Your Success" benefits grid — the goal is
|
||||
* to lead with hard, scannable proof points instead of soft adjectives.
|
||||
*
|
||||
* Layout:
|
||||
* - 2 × 2 grid on mobile (<md)
|
||||
* - 4 × 1 horizontal band on desktop (md+)
|
||||
*
|
||||
* Typography matches the site's existing tokens (text-secondary-* /
|
||||
* text-primary-*) and supports dark mode via Tailwind's `dark:` variants
|
||||
* so the band stays legible under the theme toggle.
|
||||
*
|
||||
* @prop {Array<{ value: string; label: string }>} [items] - override the
|
||||
* default set of proof points. Each `value` is rendered as the large
|
||||
* headline number, `label` is the one-line caption underneath.
|
||||
*
|
||||
* NOTE on the default copy: these numbers are placeholder defaults pending
|
||||
* stakeholder confirmation — update them against the latest delivery log
|
||||
* / Google Analytics / Lighthouse run before each release.
|
||||
*/
|
||||
|
||||
interface ProofItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
items?: ProofItem[];
|
||||
}
|
||||
|
||||
// TODO(content): confirm these proof numbers with the WorkRoot leadership /
|
||||
// marketing team before each public release. Defaults reflect the current
|
||||
// public-facing claims (hero badge: "20+ teams · 11 districts") plus the
|
||||
// performance budget the site is built against (<2s LCP on 4G).
|
||||
//
|
||||
// - "20+ Projects Delivered" — sourced from existing homepage stats array
|
||||
// - "5★ Client Rating" — every testimonial in this file has
|
||||
// rating: 5; tighten to "4.9★" once a
|
||||
// weighted average is available
|
||||
// - "11 Districts Deployed" — matches hero trust badge copy
|
||||
// - "< 2s Avg Page Load" — performance budget for the marketing site
|
||||
//
|
||||
// If real audited numbers become available, prefer those over these defaults.
|
||||
const defaultItems: ProofItem[] = [
|
||||
{ value: '20+', label: 'Projects Delivered' },
|
||||
{ value: '5★', label: 'Client Rating' },
|
||||
{ value: '11', label: 'Districts Deployed' },
|
||||
{ value: '< 2s', label: 'Avg Page Load' },
|
||||
];
|
||||
|
||||
const { items = defaultItems } = Astro.props;
|
||||
// Cap at 4 — the band is designed as a 4×1 / 2×2 layout and extra entries
|
||||
// would break the responsive grid. Trim silently rather than overflowing.
|
||||
const proofItems = items.slice(0, 4);
|
||||
---
|
||||
|
||||
<section
|
||||
id="proof-numbers"
|
||||
class="py-16 sm:py-20 bg-white dark:bg-secondary-900 border-y border-secondary-100 dark:border-secondary-800"
|
||||
aria-label="WorkRoot by the numbers"
|
||||
>
|
||||
<div class="container-wrapper">
|
||||
<dl
|
||||
class="grid grid-cols-2 md:grid-cols-4 gap-y-10 gap-x-6 sm:gap-x-10 max-w-6xl mx-auto"
|
||||
data-animate="fade-up"
|
||||
>
|
||||
{proofItems.map((item, index) => (
|
||||
<div
|
||||
class:list={[
|
||||
'text-center',
|
||||
// Subtle vertical divider between columns on desktop — keeps the
|
||||
// band feeling like one continuous strip rather than four cards.
|
||||
index > 0
|
||||
? 'md:border-l md:border-secondary-100 md:dark:border-secondary-800'
|
||||
: '',
|
||||
]}
|
||||
data-animate="fade-up"
|
||||
data-delay={String(index * 100)}
|
||||
>
|
||||
<dt
|
||||
class="text-4xl sm:text-5xl lg:text-6xl font-bold text-secondary-900 dark:text-secondary-100 tracking-tight leading-none"
|
||||
>
|
||||
<span class="bg-gradient-to-br from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent">
|
||||
{item.value}
|
||||
</span>
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-3 text-sm sm:text-base font-semibold text-secondary-600 dark:text-secondary-400 uppercase tracking-wider"
|
||||
>
|
||||
{item.label}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user