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

- 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:
platform-mcp
2026-06-17 13:35:26 +05:30
parent 35c8cc23a9
commit 210117e73e
9 changed files with 396 additions and 5 deletions
+19 -5
View File
@@ -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 = [
</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. -->
<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>
<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>
@@ -266,9 +267,15 @@ const techStack = [
</div>
</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">
<ClientLogos />
<TrustStrip />
</div>
<!-- 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. -->
<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
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