feat(home): add pricing + timeline band above inline lead form

Adds a new PricingTimelineBand component that sits directly above the homepage InlineLeadForm with two side-by-side cards answering the two final pre-conversion questions every buyer has: 1. "Projects from $X,XXX" — includes discovery, design, build, QA, and post-launch support. 2. "Typical timeline: 4–8 weeks" — discovery week 1, weekly demos, launch by week 8. A subtle "Custom quote available — tell us about your project" line with a downward chevron visually bridges the band into the form below. Implementation notes: - Anchor id="pricing-timeline" so the mobile sticky CTA bar / nav can deep-link to it. - grid-cols-1 md:grid-cols-2 → stacks vertically on mobile, side-by- side on md+ (>=768px). - Each card has an explicit min-h-[260px] sm:min-h-[280px] so the band reserves its own vertical space at first paint, keeping Lighthouse CLS unchanged. - Uses existing design tokens (primary-* / accent-* / secondary-*, rounded-3xl, container-wrapper, gradient-br) so the band feels native to the page. - Placeholder copy ($X,XXX and 4–8 weeks) is flagged with data-stakeholder-confirm markers + HTML comments so the marketing/ leadership team knows what still needs sign-off. - Reduced-motion-respecting CSS animation on the bridging chevron.
2026-06-17 13:21:58 +05:30
parent dc84e3ebe8
commit 8ae947b1ae
2 changed files with 225 additions and 0 deletions
@@ -0,0 +1,216 @@
+---
+/**
+ * PricingTimelineBand Component
+ *
+ * Sits directly above the homepage InlineLeadForm and answers the two
+ * questions every late-stage buyer has BEFORE they fill in a contact form:
+ *   1. "Roughly how much does this cost?"
+ *   2. "Roughly how long does it take?"
+ *
+ * Layout:
+ *   - 2 cards side-by-side on md+ (Pricing, Timeline)
+ *   - Stacked vertically on mobile (<md)
+ *   - A subtle "Custom quote available — tell us about your project" line
+ *     visually bridges the band into the form below it.
+ *
+ * Anchor: `id="pricing-timeline"` so the mobile sticky CTA bar / nav /
+ * external deep-links can scroll directly to this band.
+ *
+ * CLS guard: each card has an explicit `min-h-[...]` so the band reserves
+ * its own vertical space at first paint, regardless of font loading or
+ * icon-fetch delay. Lighthouse CLS should be unaffected.
+ *
+ * Design tokens: uses the same `text-secondary-*`, `text-primary-*`,
+ * `rounded-3xl`, container-wrapper, and gradient conventions established
+ * by InlineLeadForm and ProofNumbers so the band feels native to the page.
+ *
+ * NOTE on copy: the headline values below are PLACEHOLDERS pending
+ * stakeholder (marketing / leadership) confirmation. See the inline
+ * `data-stakeholder-confirm` markers + HTML comments at each value.
+ */
+---
+
+<!--
+  Pricing + Timeline band.
+  ANCHOR: #pricing-timeline — referenced by the mobile sticky CTA bar
+  and any nav deep-links. Do not rename without updating those callers.
+-->
+<section
+  id="pricing-timeline"
+  class="pt-20 sm:pt-24 pb-10 sm:pb-12 bg-gradient-to-b from-white to-white dark:from-secondary-900 dark:to-secondary-900"
+  aria-labelledby="pricing-timeline-heading"
+>
+  <div class="container-wrapper">
+    <div class="max-w-5xl mx-auto">
+      <!-- Eyebrow + section heading. Kept short so the cards below are the
+           visual focal point. -->
+      <div class="text-center mb-10 sm:mb-12" data-animate="fade-up">
+        <p
+          class="text-xs sm:text-sm font-semibold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400"
+        >
+          What to expect
+        </p>
+        <h2
+          id="pricing-timeline-heading"
+          class="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-tight"
+        >
+          Transparent pricing &amp; predictable timelines.
+        </h2>
+      </div>
+
+      <!-- Two-card grid: stacks on mobile, side-by-side on md+. -->
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8"
+        data-animate="fade-up"
+      >
+        <!-- Card 1: Pricing -->
+        <article
+          class="relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-900 rounded-3xl border border-secondary-100 dark:border-secondary-700 shadow-lg hover:shadow-xl transition-shadow duration-300 p-8 sm:p-10 min-h-[260px] sm:min-h-[280px] flex flex-col"
+          aria-labelledby="pricing-card-heading"
+        >
+          <!-- Icon chip -->
+          <div
+            class="w-12 h-12 rounded-2xl bg-primary-100 dark:bg-primary-500/20 text-primary-600 dark:text-primary-300 flex items-center justify-center mb-5 flex-shrink-0"
+            aria-hidden="true"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+
+          <p
+            class="text-xs sm:text-sm font-semibold uppercase tracking-wider text-secondary-500 dark:text-secondary-400"
+          >
+            Starting at
+          </p>
+
+          <!--
+            STAKEHOLDER-CONFIRM: replace placeholder "$X,XXX" with the
+            current floor price agreed with WorkRoot leadership / sales.
+            Keep the format consistent ("$5,000", "$8,500") so the
+            min-height reservation below remains accurate.
+          -->
+          <h3
+            id="pricing-card-heading"
+            data-stakeholder-confirm="pricing-floor"
+            class="mt-2 text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-none tracking-tight"
+          >
+            Projects from
+            <span
+              class="block mt-1 bg-gradient-to-br from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent"
+            >
+              $X,XXX
+            </span>
+          </h3>
+
+          <p
+            class="mt-5 text-base sm:text-lg text-secondary-600 dark:text-secondary-300 leading-relaxed"
+          >
+            <!-- 1-line "what's included" copy — keep to ~14 words so it
+                 sits in one comfortable line at md+ widths. -->
+            Includes discovery, design, build, QA, and post-launch support.
+          </p>
+        </article>
+
+        <!-- Card 2: Timeline -->
+        <article
+          class="relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-900 rounded-3xl border border-secondary-100 dark:border-secondary-700 shadow-lg hover:shadow-xl transition-shadow duration-300 p-8 sm:p-10 min-h-[260px] sm:min-h-[280px] flex flex-col"
+          aria-labelledby="timeline-card-heading"
+        >
+          <!-- Icon chip -->
+          <div
+            class="w-12 h-12 rounded-2xl bg-accent-100 dark:bg-accent-500/20 text-accent-600 dark:text-accent-300 flex items-center justify-center mb-5 flex-shrink-0"
+            aria-hidden="true"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+
+          <p
+            class="text-xs sm:text-sm font-semibold uppercase tracking-wider text-secondary-500 dark:text-secondary-400"
+          >
+            Typical timeline
+          </p>
+
+          <!--
+            STAKEHOLDER-CONFIRM: the "4–8 weeks" range is the current
+            default placeholder. Update after delivery-lead review if the
+            average shifts (e.g. 6–10 weeks for ERP-heavy scopes).
+          -->
+          <h3
+            id="timeline-card-heading"
+            data-stakeholder-confirm="timeline-range"
+            class="mt-2 text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-none tracking-tight"
+          >
+            <span
+              class="block bg-gradient-to-br from-accent-600 to-accent-500 dark:from-accent-400 dark:to-accent-300 bg-clip-text text-transparent"
+            >
+              4&ndash;8 weeks
+            </span>
+          </h3>
+
+          <p
+            class="mt-5 text-base sm:text-lg text-secondary-600 dark:text-secondary-300 leading-relaxed"
+          >
+            <!-- 1-line "process" copy — discovery → sprints → launch. -->
+            Discovery in week 1, weekly demos through build, launch by week 8.
+          </p>
+        </article>
+      </div>
+
+      <!-- Bridging line into the form below. Visually subtle: small text,
+           muted color, centered, with a chevron pointing down to imply
+           "fill the form below to get the custom number". -->
+      <p
+        class="mt-10 sm:mt-12 text-center text-sm sm:text-base text-secondary-600 dark:text-secondary-300"
+        data-animate="fade-up"
+      >
+        <span class="inline-flex items-center gap-2">
+          <span>
+            <span class="font-semibold text-secondary-800 dark:text-secondary-100">Custom quote available</span>
+            &mdash; tell us about your project
+          </span>
+          <svg
+            class="w-4 h-4 text-primary-500 dark:text-primary-300 animate-bounce-slow"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        </span>
+      </p>
+    </div>
+  </div>
+</section>
+
+<style>
+  /* Slow bounce for the bridging chevron — pure CSS, no JS, no layout
+     impact (transform only, so it never triggers reflow / CLS). */
+  @keyframes pricing-timeline-bounce-slow {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(4px); }
+  }
+  .animate-bounce-slow {
+    animation: pricing-timeline-bounce-slow 2.4s ease-in-out infinite;
+  }
+
+  /* Respect reduced-motion preference. */
+  @media (prefers-reduced-motion: reduce) {
+    .animate-bounce-slow {
+      animation: none;
+    }
+  }
+</style>
@@ -6,6 +6,7 @@ import ClientLogos from '../components/ClientLogos.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';

 // Services data — outcome-led headlines with anchor slugs that deep-link
 // into the matching detail sections on /services.
@@ -628,6 +629,14 @@ const techStack = [
    </div>
  </section>

+  <!-- Pricing + Timeline Band — sits directly above the inline lead form
+       so late-stage visitors get the two answers they need (rough price
+       and rough duration) BEFORE filling in the form. Anchor
+       `#pricing-timeline` is referenced by the mobile sticky CTA bar /
+       nav for deep-linking. Placeholder values inside the component are
+       flagged with `data-stakeholder-confirm` markers + HTML comments. -->
+  <PricingTimelineBand />
+
  <!-- 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