From 210117e73eec50d1ab84efc2ddd0048f268400a2 Mon Sep 17 00:00:00 2001 From: platform-mcp Date: Wed, 17 Jun 2026 13:35:26 +0530 Subject: [PATCH] feat(homepage): add TrustStrip + GuaranteeBand for trust + risk-reversal - TrustStrip.astro: single-row, grayscale-on-default / colour-on-hover client logo strip under the hero. 6 logos via 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. --- public/images/logos/gov-bihar.svg | 7 ++ public/images/logos/iit-patna.svg | 10 ++ public/images/logos/moc-soft.svg | 7 ++ public/images/logos/plnr.svg | 6 + public/images/logos/pscl.svg | 7 ++ public/images/logos/rentec.svg | 6 + src/components/GuaranteeBand.astro | 140 +++++++++++++++++++++ src/components/TrustStrip.astro | 194 +++++++++++++++++++++++++++++ src/pages/index.astro | 24 +++- 9 files changed, 396 insertions(+), 5 deletions(-) create mode 100644 public/images/logos/gov-bihar.svg create mode 100644 public/images/logos/iit-patna.svg create mode 100644 public/images/logos/moc-soft.svg create mode 100644 public/images/logos/plnr.svg create mode 100644 public/images/logos/pscl.svg create mode 100644 public/images/logos/rentec.svg create mode 100644 src/components/GuaranteeBand.astro create mode 100644 src/components/TrustStrip.astro diff --git a/public/images/logos/gov-bihar.svg b/public/images/logos/gov-bihar.svg new file mode 100644 index 0000000..ff39026 --- /dev/null +++ b/public/images/logos/gov-bihar.svg @@ -0,0 +1,7 @@ + + Govt. of Bihar + + + GOVT. OF BIHAR + 11 DISTRICTS · PSCL + diff --git a/public/images/logos/iit-patna.svg b/public/images/logos/iit-patna.svg new file mode 100644 index 0000000..f5b50b2 --- /dev/null +++ b/public/images/logos/iit-patna.svg @@ -0,0 +1,10 @@ + + IIT Patna + + + + + + IIT PATNA + UNIVERSITY SYSTEM + diff --git a/public/images/logos/moc-soft.svg b/public/images/logos/moc-soft.svg new file mode 100644 index 0000000..ca8d274 --- /dev/null +++ b/public/images/logos/moc-soft.svg @@ -0,0 +1,7 @@ + + MOC Soft + + MOC + MOC Soft + TECHNOLOGIES + diff --git a/public/images/logos/plnr.svg b/public/images/logos/plnr.svg new file mode 100644 index 0000000..453d107 --- /dev/null +++ b/public/images/logos/plnr.svg @@ -0,0 +1,6 @@ + + PLNR + + P + PLNR + diff --git a/public/images/logos/pscl.svg b/public/images/logos/pscl.svg new file mode 100644 index 0000000..34dc588 --- /dev/null +++ b/public/images/logos/pscl.svg @@ -0,0 +1,7 @@ + + PSCL + + PS + PSCL + BIHAR · SCMS + diff --git a/public/images/logos/rentec.svg b/public/images/logos/rentec.svg new file mode 100644 index 0000000..f33069c --- /dev/null +++ b/public/images/logos/rentec.svg @@ -0,0 +1,6 @@ + + RENTEC + + + RENTEC + diff --git a/src/components/GuaranteeBand.astro b/src/components/GuaranteeBand.astro new file mode 100644 index 0000000..6b02097 --- /dev/null +++ b/src/components/GuaranteeBand.astro @@ -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 (). 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: + '', + }, + { + 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: + '', + }, + { + title: 'Fixed-price quotes', + body: 'Scope-locked proposals with a clear deliverable and a clear number — no surprise change-orders.', + // Currency / receipt icon + icon: + '', + }, +]; +--- + + +
+
+
+ +

Our guarantees

+ + +
    + {claims.map((claim, index) => ( +
  • +
    + + + + +
    +

    + + {claim.title} +

    +

    + {claim.body} +

    +
    +
    +
    • + ))} +
+
+
+
diff --git a/src/components/TrustStrip.astro b/src/components/TrustStrip.astro new file mode 100644 index 0000000..4c5afce --- /dev/null +++ b/src/components/TrustStrip.astro @@ -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 `` 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/.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` `` component only processes files under + * `src/assets/`. Public-folder static SVGs are best served with a plain + * `` (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/.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(' '); +--- + + +
+
+ +

Trusted by

+ + +
    + {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 ( +
  • + +
    • + ); + })} +
+
+
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 5a716cc..f3c1283 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,11 +2,12 @@ // Home page - WorkRoot IT Solutions import BaseLayout from '../layouts/BaseLayout.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 HomepageFaq from '../components/HomepageFaq.astro'; import ProofNumbers from '../components/ProofNumbers.astro'; import PricingTimelineBand from '../components/PricingTimelineBand.astro'; +import GuaranteeBand from '../components/GuaranteeBand.astro'; // Services data — outcome-led headlines with anchor slugs that deep-link // into the matching detail sections on /services. @@ -254,10 +255,10 @@ const techStack = [ -
- + See who we work with @@ -266,9 +267,15 @@ const techStack = [
- +
- +
+ + +