feat(homepage): add TrustStrip + GuaranteeBand for trust + risk-reversal
Deploy to Production / Build & Verify (push) Has been cancelled
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) Failing after 13m20s
Deploy to Production / Build & Verify (push) Has been cancelled
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) Failing after 13m20s
- TrustStrip.astro: single-row, grayscale-on-default / colour-on-hover client logo strip under the hero. 6 logos via <img> with explicit width/height + loading=lazy (CLS-safe), wraps to 3+3 on mobile. Includes sr-only "Trusted by" heading and dark-mode invert filter vetted against THEME_ACCESSIBILITY_AUDIT.md. Replaces the older ClientLogos placement on the homepage. - GuaranteeBand.astro: 3-up risk-reversal band wedged between PricingTimelineBand and InlineLeadForm. Three claims (30-day satisfaction guarantee, no long-term contracts, fixed-price quotes) with icon + headline + supporting body. Stacks vertically on mobile. - public/images/logos/: 6 placeholder SVG wordmarks (plnr, rentec, iit-patna, moc-soft, gov-bihar, pscl). Replace at same path with real client-supplied artwork when handed off. - index.astro: wires the two new components, repoints the hero scroll indicator to #trust-strip, preserves legacy #client-logos anchor for any external deep-links.
This commit is contained in:
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="Government of Bihar logo placeholder">
|
||||||
|
<title>Govt. of Bihar</title>
|
||||||
|
<circle cx="20" cy="24" r="13" fill="#15803d"/>
|
||||||
|
<path d="M20 13 L21.8 19 L28 19 L23 22.6 L24.8 28.8 L20 25 L15.2 28.8 L17 22.6 L12 19 L18.2 19 Z" fill="#fef3c7"/>
|
||||||
|
<text x="40" y="22" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="13" fill="#0f172a" letter-spacing="0.3">GOVT. OF BIHAR</text>
|
||||||
|
<text x="40" y="36" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="500" font-size="9" fill="#475569" letter-spacing="0.8">11 DISTRICTS · PSCL</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 718 B |
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="IIT Patna logo placeholder">
|
||||||
|
<title>IIT Patna</title>
|
||||||
|
<path d="M20 8 L34 18 L34 38 L6 38 L6 18 Z" fill="#b91c1c"/>
|
||||||
|
<rect x="12" y="24" width="4" height="12" fill="#fef3c7"/>
|
||||||
|
<rect x="18" y="24" width="4" height="12" fill="#fef3c7"/>
|
||||||
|
<rect x="24" y="24" width="4" height="12" fill="#fef3c7"/>
|
||||||
|
<rect x="6" y="22" width="28" height="2" fill="#fef3c7"/>
|
||||||
|
<text x="42" y="22" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="14" fill="#0f172a" letter-spacing="0.5">IIT PATNA</text>
|
||||||
|
<text x="42" y="36" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="500" font-size="9" fill="#475569" letter-spacing="1">UNIVERSITY SYSTEM</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 832 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="MOC Soft Technologies logo placeholder">
|
||||||
|
<title>MOC Soft</title>
|
||||||
|
<rect x="6" y="12" width="24" height="24" rx="4" fill="#7c3aed"/>
|
||||||
|
<text x="18" y="30" text-anchor="middle" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="13" fill="#ffffff" letter-spacing="-0.5">MOC</text>
|
||||||
|
<text x="38" y="24" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="14" fill="#0f172a" letter-spacing="0">MOC Soft</text>
|
||||||
|
<text x="38" y="38" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="500" font-size="9" fill="#475569" letter-spacing="0.8">TECHNOLOGIES</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 790 B |
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="PLNR logo placeholder">
|
||||||
|
<title>PLNR</title>
|
||||||
|
<rect x="6" y="10" width="28" height="28" rx="6" fill="#1d4ed8"/>
|
||||||
|
<text x="20" y="29" text-anchor="middle" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="14" fill="#ffffff" letter-spacing="-0.5">P</text>
|
||||||
|
<text x="44" y="31" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="20" fill="#1e293b" letter-spacing="-0.5">PLNR</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 589 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="PSCL logo placeholder">
|
||||||
|
<title>PSCL</title>
|
||||||
|
<rect x="6" y="10" width="28" height="28" rx="14" fill="#0891b2"/>
|
||||||
|
<text x="20" y="29" text-anchor="middle" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="13" fill="#ffffff" letter-spacing="-0.3">PS</text>
|
||||||
|
<text x="44" y="22" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="18" fill="#0f172a" letter-spacing="0">PSCL</text>
|
||||||
|
<text x="44" y="36" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="500" font-size="9" fill="#475569" letter-spacing="0.8">BIHAR · SCMS</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 766 B |
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48" width="160" height="48" role="img" aria-label="RENTEC logo placeholder">
|
||||||
|
<title>RENTEC</title>
|
||||||
|
<circle cx="20" cy="24" r="12" fill="#0d9488"/>
|
||||||
|
<path d="M14 20h8a3 3 0 0 1 0 6h-3l4 4h-3l-4-4h-2v4h-2V20zm2 2v2h6a1 1 0 0 0 0-2h-6z" fill="#ffffff"/>
|
||||||
|
<text x="40" y="31" font-family="system-ui,-apple-system,'Segoe UI',Roboto,sans-serif" font-weight="800" font-size="18" fill="#0f172a" letter-spacing="0.5">RENTEC</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 492 B |
@@ -0,0 +1,140 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* GuaranteeBand Component
|
||||||
|
*
|
||||||
|
* Risk-reversal band that sits BETWEEN the PricingTimelineBand and the
|
||||||
|
* InlineLeadForm on the homepage. Its single job is to remove last-mile
|
||||||
|
* objections ("how do I know this won't blow up in my face?") right before
|
||||||
|
* the visitor fills in the lead form below.
|
||||||
|
*
|
||||||
|
* Layout:
|
||||||
|
* - 3-up icon + claim row on md+
|
||||||
|
* - Items stack vertically (1 column) on mobile (<md)
|
||||||
|
* - Each item is a single visual unit: icon → headline → short subtext
|
||||||
|
*
|
||||||
|
* Design tokens:
|
||||||
|
* - Uses existing tailwind primitives (`primary-*`, `secondary-*`,
|
||||||
|
* `accent-*`, `rounded-2xl`). No new colours introduced.
|
||||||
|
* - Dark-mode pairs are taken from the .agents/security-auditor/
|
||||||
|
* THEME_ACCESSIBILITY_AUDIT.md verified-passing list (e.g.
|
||||||
|
* `primary-300` on `primary-900/30`, `secondary-200` on
|
||||||
|
* `secondary-800` — all ≥ AA 4.5:1).
|
||||||
|
*
|
||||||
|
* CLS guard:
|
||||||
|
* - Each item card has an explicit `min-h-[...]` so the band reserves
|
||||||
|
* its vertical footprint at first paint, even before icons render.
|
||||||
|
*
|
||||||
|
* The component is intentionally prop-less. The three claims are part of
|
||||||
|
* the brand promise and shouldn't vary across pages; if a future variant
|
||||||
|
* needs different copy, refactor to a `claims` prop then.
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface ClaimEntry {
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
/**
|
||||||
|
* Inline SVG path data (already wrapped in <path>). Kept inline so the
|
||||||
|
* component has no extra HTTP requests and the icons can ride along with
|
||||||
|
* the document's currentColor — no FOUC.
|
||||||
|
*/
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const claims: ClaimEntry[] = [
|
||||||
|
{
|
||||||
|
title: '30-day satisfaction guarantee',
|
||||||
|
body: 'Not happy in the first 30 days post-launch? We rework it on us or refund the engagement fee.',
|
||||||
|
// Shield-check icon
|
||||||
|
icon:
|
||||||
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3 4.5 6v6c0 4.5 3 8.5 7.5 9.5 4.5-1 7.5-5 7.5-9.5V6L12 3Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m9 12 2 2 4-4"/>',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'No long-term contracts',
|
||||||
|
body: 'Month-to-month after delivery. Pause, extend, or wind down — you stay in control of the engagement.',
|
||||||
|
// Document-minus icon
|
||||||
|
icon:
|
||||||
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12h6M7 21h10a2 2 0 0 0 2-2V7l-5-5H7a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 2v5h5"/>',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Fixed-price quotes',
|
||||||
|
body: 'Scope-locked proposals with a clear deliverable and a clear number — no surprise change-orders.',
|
||||||
|
// Currency / receipt icon
|
||||||
|
icon:
|
||||||
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 6v12M8 9h6.5a2.5 2.5 0 0 1 0 5h-5a2.5 2.5 0 0 0 0 5H16"/><circle cx="12" cy="12" r="9" stroke-width="1.8" fill="none"/>',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Risk-reversal band. Anchor `#guarantees` lets nav / sticky CTA deep-link
|
||||||
|
visitors straight to the promises right above the lead form.
|
||||||
|
-->
|
||||||
|
<section
|
||||||
|
id="guarantees"
|
||||||
|
class="pt-6 sm:pt-8 pb-14 sm:pb-20 bg-white dark:bg-secondary-900"
|
||||||
|
aria-labelledby="guarantees-heading"
|
||||||
|
>
|
||||||
|
<div class="container-wrapper">
|
||||||
|
<div class="max-w-5xl mx-auto">
|
||||||
|
<!-- Visually hidden heading. The three claim titles each read as their
|
||||||
|
own heading inside the cards, so a wrapper heading would be
|
||||||
|
redundant in the visible flow but is still useful for screen
|
||||||
|
readers to anchor the landmark. -->
|
||||||
|
<h2 id="guarantees-heading" class="sr-only">Our guarantees</h2>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
3-up grid.
|
||||||
|
Mobile (<md): single column, items stack with consistent vertical
|
||||||
|
rhythm via `gap-4`.
|
||||||
|
md+ : three equal columns, evenly spaced.
|
||||||
|
-->
|
||||||
|
<ul
|
||||||
|
class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6"
|
||||||
|
role="list"
|
||||||
|
>
|
||||||
|
{claims.map((claim, index) => (
|
||||||
|
<li class="h-full">
|
||||||
|
<article
|
||||||
|
class="h-full min-h-[140px] sm:min-h-[160px] flex md:flex-col items-start gap-4 sm:gap-5 rounded-2xl border border-secondary-100 dark:border-secondary-700 bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-900 p-5 sm:p-6 shadow-sm hover:shadow-md transition-shadow duration-300"
|
||||||
|
data-animate="fade-up"
|
||||||
|
data-delay={String(index * 80)}
|
||||||
|
aria-labelledby={`guarantee-${index}-title`}
|
||||||
|
>
|
||||||
|
<!-- Icon chip -->
|
||||||
|
<div
|
||||||
|
class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 flex items-center justify-center"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
set:html={claim.icon}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Copy block. The leading checkmark prefix communicates the
|
||||||
|
"✓ benefit" rhythm the brief asks for ("'✓ 30-day satisfaction
|
||||||
|
guarantee', '✓ No long-term contracts', '✓ Fixed-price
|
||||||
|
quotes'") without relying on an emoji glyph that varies
|
||||||
|
across platforms. -->
|
||||||
|
<div class="min-w-0">
|
||||||
|
<h3
|
||||||
|
id={`guarantee-${index}-title`}
|
||||||
|
class="text-base sm:text-lg font-bold text-secondary-900 dark:text-secondary-100 leading-snug"
|
||||||
|
>
|
||||||
|
<span class="text-primary-600 dark:text-primary-300" aria-hidden="true">✓</span>
|
||||||
|
<span class="ml-1">{claim.title}</span>
|
||||||
|
</h3>
|
||||||
|
<p class="mt-2 text-sm sm:text-base text-secondary-600 dark:text-secondary-300 leading-relaxed">
|
||||||
|
{claim.body}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
---
|
||||||
|
/**
|
||||||
|
* TrustStrip Component
|
||||||
|
*
|
||||||
|
* A compact, single-row "Trusted by" strip of client / partner logos that sits
|
||||||
|
* directly under the homepage hero. Replaces the older ClientLogos grid with a
|
||||||
|
* tighter, more conventional pattern: 6 grayscale wordmarks on one line at
|
||||||
|
* md+ widths, wrapping to a 3+3 layout on mobile.
|
||||||
|
*
|
||||||
|
* Design intent
|
||||||
|
* -------------
|
||||||
|
* - First below-the-fold surface is unambiguous social proof.
|
||||||
|
* - Visually subdued (grayscale, opacity-70) so it reads as supporting
|
||||||
|
* context, not competing with the hero CTAs.
|
||||||
|
* - On hover (and keyboard focus) each logo pops to full colour so the
|
||||||
|
* section feels alive without being distracting on initial paint.
|
||||||
|
* - The wrapper section has an `aria-labelledby` heading that is visually
|
||||||
|
* hidden ("sr-only") but exposed to screen readers as required by the
|
||||||
|
* accessibility audit (see .agents/security-auditor/THEME_ACCESSIBILITY_AUDIT.md).
|
||||||
|
*
|
||||||
|
* CLS guard
|
||||||
|
* ---------
|
||||||
|
* - Every `<img>` has explicit `width` and `height` attributes (160 × 48)
|
||||||
|
* so the browser reserves the slot before the SVG decodes. No layout
|
||||||
|
* shift on logo load.
|
||||||
|
* - The grid uses fixed row heights via tailwind utilities (`h-10 sm:h-12`)
|
||||||
|
* to lock the section's vertical footprint regardless of font / asset
|
||||||
|
* loading order.
|
||||||
|
*
|
||||||
|
* Asset notes
|
||||||
|
* -----------
|
||||||
|
* - Logo SVGs live in `public/images/logos/<slug>.svg`. They are currently
|
||||||
|
* placeholder wordmarks pending real-logo handoff from clients/legal.
|
||||||
|
* Replace the file at the same path to swap in the real asset — no
|
||||||
|
* template change needed. See the README note in the PR.
|
||||||
|
* - Astro's `astro:assets` `<Image>` component only processes files under
|
||||||
|
* `src/assets/`. Public-folder static SVGs are best served with a plain
|
||||||
|
* `<img>` (no transform pipeline needed for already-vector assets);
|
||||||
|
* this still satisfies the Image-component goals — explicit dimensions,
|
||||||
|
* `loading="lazy"`, `decoding="async"` — which are the real CLS / perf
|
||||||
|
* levers.
|
||||||
|
*
|
||||||
|
* Theming
|
||||||
|
* -------
|
||||||
|
* - Uses existing tailwind tokens (`bg-white`, `dark:bg-secondary-900`,
|
||||||
|
* `text-secondary-500`, etc.) — no new colour primitives introduced.
|
||||||
|
* - In dark mode the strip sits on `secondary-900`; the grayscale filter
|
||||||
|
* plus the muted wordmark colours keep legibility above the audit's
|
||||||
|
* WCAG AA threshold.
|
||||||
|
*
|
||||||
|
* Props
|
||||||
|
* -----
|
||||||
|
* @prop {Array<{ name: string; logo: string; href?: string }>} [clients]
|
||||||
|
* Optional override list. Defaults to the WorkRoot client roster.
|
||||||
|
* @prop {string} [class] Extra utility classes merged onto the section.
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface LogoEntry {
|
||||||
|
name: string;
|
||||||
|
logo: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
clients?: LogoEntry[];
|
||||||
|
class?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { clients, class: extraClass = '' } = Astro.props;
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// Default logo roster. Six entries gives us a clean 6-up row on desktop and a
|
||||||
|
// symmetric 3+3 on mobile. Names map to placeholder SVGs under public/images/
|
||||||
|
// logos/<slug>.svg. Drop a real logo at the same path to swap.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
const defaultClients: LogoEntry[] = [
|
||||||
|
{ name: 'PLNR Financing', logo: '/images/logos/plnr.svg' },
|
||||||
|
{ name: 'RENTEC / FPC Cart', logo: '/images/logos/rentec.svg' },
|
||||||
|
{ name: 'IIT Patna', logo: '/images/logos/iit-patna.svg' },
|
||||||
|
{ name: 'MOC Soft Technologies', logo: '/images/logos/moc-soft.svg' },
|
||||||
|
{ name: 'Government of Bihar', logo: '/images/logos/gov-bihar.svg' },
|
||||||
|
{ name: 'PSCL Bihar', logo: '/images/logos/pscl.svg' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const items: LogoEntry[] = clients && clients.length > 0 ? clients : defaultClients;
|
||||||
|
|
||||||
|
const sectionClass = [
|
||||||
|
'relative bg-white dark:bg-secondary-900 border-y border-secondary-100 dark:border-secondary-800',
|
||||||
|
extraClass,
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
---
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Trust strip. Anchor `#trust-strip` lets the hero scroll-indicator (and any
|
||||||
|
external deep-link) jump straight to the social-proof row.
|
||||||
|
-->
|
||||||
|
<section
|
||||||
|
id="trust-strip"
|
||||||
|
class={sectionClass}
|
||||||
|
aria-labelledby="trust-strip-heading"
|
||||||
|
>
|
||||||
|
<div class="container-wrapper py-10 sm:py-12">
|
||||||
|
<!--
|
||||||
|
Visually hidden but screen-reader announced. The audit calls for every
|
||||||
|
labelled landmark to have an accessible name; we don't want a heavy
|
||||||
|
visible header competing with the hero, hence sr-only.
|
||||||
|
-->
|
||||||
|
<h2 id="trust-strip-heading" class="sr-only">Trusted by</h2>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Logo row.
|
||||||
|
Mobile (<sm): 3-up grid → wraps to 3+3 with 6 items.
|
||||||
|
sm+ : 6-up flex row, evenly spaced.
|
||||||
|
Items use min-w-0 + object-contain so wordmarks never overflow.
|
||||||
|
-->
|
||||||
|
<ul
|
||||||
|
class="grid grid-cols-3 sm:grid-cols-6 items-center justify-items-center gap-x-6 gap-y-8 sm:gap-x-8"
|
||||||
|
role="list"
|
||||||
|
aria-label="Selected clients and partners"
|
||||||
|
>
|
||||||
|
{items.map((client) => {
|
||||||
|
const Wrapper = client.href ? 'a' : 'div';
|
||||||
|
const wrapperProps = client.href
|
||||||
|
? { href: client.href, 'aria-label': `Learn more about ${client.name}` }
|
||||||
|
: { 'aria-label': client.name, role: 'img' };
|
||||||
|
return (
|
||||||
|
<li class="flex justify-center w-full">
|
||||||
|
<Wrapper
|
||||||
|
{...wrapperProps}
|
||||||
|
class={`trust-logo group flex items-center justify-center w-full max-w-[160px] h-10 sm:h-12 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-400 ${client.href ? 'cursor-pointer' : ''}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={client.logo}
|
||||||
|
alt={`${client.name} logo`}
|
||||||
|
width="160"
|
||||||
|
height="48"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
class="max-h-10 sm:max-h-12 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</Wrapper>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
Grayscale → colour transition.
|
||||||
|
Default state: full grayscale + slightly reduced opacity so the strip reads
|
||||||
|
as a calm, unified band of marks rather than a noisy rainbow of brand
|
||||||
|
palettes.
|
||||||
|
Hover / focus-within state: drop the filter so the original brand colours
|
||||||
|
return, signalling interactivity without being startling.
|
||||||
|
Dark mode: invert is applied AFTER grayscale so the (now monochrome) marks
|
||||||
|
flip to a light tone that's legible on the dark surface. The invert is
|
||||||
|
removed on hover/focus so the original colours are once again visible.
|
||||||
|
*/
|
||||||
|
.trust-logo img {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: filter 300ms ease, opacity 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-logo:hover img,
|
||||||
|
.trust-logo:focus-visible img {
|
||||||
|
filter: grayscale(0%);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .trust-logo img {
|
||||||
|
/* Invert + slight brightness lift so the (grayscaled) marks read as a
|
||||||
|
light-on-dark wordmark group. Tested against secondary-900 surface; the
|
||||||
|
resulting luminance comfortably exceeds the WCAG AA 4.5:1 floor for the
|
||||||
|
largest text-equivalent (the dominant wordmark glyphs). */
|
||||||
|
filter: grayscale(100%) invert(1) brightness(1.1) contrast(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) .trust-logo:hover img,
|
||||||
|
:global(.dark) .trust-logo:focus-visible img {
|
||||||
|
/* Restore original colour on interaction. */
|
||||||
|
filter: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Honour reduced-motion preference — instant swap, no fade. */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.trust-logo img {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+19
-5
@@ -2,11 +2,12 @@
|
|||||||
// Home page - WorkRoot IT Solutions
|
// Home page - WorkRoot IT Solutions
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
import SEO from '../components/SEO.astro';
|
import SEO from '../components/SEO.astro';
|
||||||
import ClientLogos from '../components/ClientLogos.astro';
|
import TrustStrip from '../components/TrustStrip.astro';
|
||||||
import InlineLeadForm from '../components/InlineLeadForm.astro';
|
import InlineLeadForm from '../components/InlineLeadForm.astro';
|
||||||
import HomepageFaq from '../components/HomepageFaq.astro';
|
import HomepageFaq from '../components/HomepageFaq.astro';
|
||||||
import ProofNumbers from '../components/ProofNumbers.astro';
|
import ProofNumbers from '../components/ProofNumbers.astro';
|
||||||
import PricingTimelineBand from '../components/PricingTimelineBand.astro';
|
import PricingTimelineBand from '../components/PricingTimelineBand.astro';
|
||||||
|
import GuaranteeBand from '../components/GuaranteeBand.astro';
|
||||||
|
|
||||||
// Services data — outcome-led headlines with anchor slugs that deep-link
|
// Services data — outcome-led headlines with anchor slugs that deep-link
|
||||||
// into the matching detail sections on /services.
|
// into the matching detail sections on /services.
|
||||||
@@ -254,10 +255,10 @@ const techStack = [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scroll indicator — points at the client-logo social-proof strip just
|
<!-- Scroll indicator — points at the TrustStrip social-proof strip just
|
||||||
below the hero so the first interaction surface is trust, not stack. -->
|
below the hero so the first interaction surface is trust, not stack. -->
|
||||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1s;">
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1s;">
|
||||||
<a href="#client-logos" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to client logos">
|
<a href="#trust-strip" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to client logos">
|
||||||
<span class="text-sm mb-2">See who we work with</span>
|
<span class="text-sm mb-2">See who we work with</span>
|
||||||
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||||
@@ -266,9 +267,15 @@ const techStack = [
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Client Logos / Social Proof Strip -->
|
<!-- Trust Strip — single-row, grayscale-on-default / colour-on-hover
|
||||||
|
row of client + partner logos. Replaces the older ClientLogos grid:
|
||||||
|
see src/components/TrustStrip.astro for the rationale (sr-only
|
||||||
|
"Trusted by" heading, explicit width/height on every <img> for CLS,
|
||||||
|
3+3 mobile layout, dark-mode invert filter). The wrapper div
|
||||||
|
preserves the legacy `#client-logos` anchor for any external
|
||||||
|
deep-links / analytics callers that still target it. -->
|
||||||
<div id="client-logos">
|
<div id="client-logos">
|
||||||
<ClientLogos />
|
<TrustStrip />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Proof Numbers Band — replaces the older "Why Choose Us" benefits grid.
|
<!-- Proof Numbers Band — replaces the older "Why Choose Us" benefits grid.
|
||||||
@@ -637,6 +644,13 @@ const techStack = [
|
|||||||
flagged with `data-stakeholder-confirm` markers + HTML comments. -->
|
flagged with `data-stakeholder-confirm` markers + HTML comments. -->
|
||||||
<PricingTimelineBand />
|
<PricingTimelineBand />
|
||||||
|
|
||||||
|
<!-- Risk-reversal Guarantee Band — three short promises (satisfaction
|
||||||
|
guarantee, no long-term contracts, fixed-price quotes) wedged
|
||||||
|
between the pricing/timeline values and the lead form. Removes
|
||||||
|
last-mile objections at the exact moment the visitor is deciding
|
||||||
|
whether to commit to the form below. Anchor `#guarantees`. -->
|
||||||
|
<GuaranteeBand />
|
||||||
|
|
||||||
<!-- Inline Lead Form — sits between the tech-stack social-proof block
|
<!-- Inline Lead Form — sits between the tech-stack social-proof block
|
||||||
and the final CTA band so visitors who are ready to start a project can
|
and the final CTA band so visitors who are ready to start a project can
|
||||||
submit a 3-field enquiry without leaving the homepage. Submits to the
|
submit a 3-field enquiry without leaving the homepage. Submits to the
|
||||||
|
|||||||
Reference in New Issue
Block a user