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 <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.
2026-06-17 13:35:26 +05:30
parent 35c8cc23a9
commit 210117e73e
9 changed files with 396 additions and 5 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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