Marketing block

Aggregate Rating Breakdown

A mean score over a stated sample with all five rating bands left visible, including the one-star row — proof that survives the objection every hand-picked quote wall invites.

198 lineslucide-reactAdded 24 Aug 2026Updated 10 Sept 2026

reviews
ratings
stars
social proof
aggregate

What's included

components/testimonial-ratings.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add testimonial-ratings

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rated by the people paying for it

4.8out of 5

from 2,298 verified reviews

5 stars: 1,783
4 stars: 402
3 stars: 71
2 stars: 24
1 star: 18

4.8on G2
4.7on Capterra
4.9on Product Hunt

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/testimonial-ratings.tsx

/**
 * <TestimonialRatings> — the aggregate, not the anecdote.
 *
 * <TestimonialGrid> and <TestimonialSpotlight> both argue from individuals:
 * here is a person, here is what they said. That argument has a known hole,
 * and a sceptical buyer finds it immediately — six quotes on a vendor's own
 * page are six quotes the vendor chose. Nothing about a wall of praise tells
 * you what the unhappy customers said, or how many of them there are.
 *
 * This block makes the opposite kind of claim. A mean score over a stated
 * number of reviews, with the distribution left visible, is a statement that
 * survives the objection: the one-star row is right there, and showing it is
 * what makes the four- and five-star rows worth believing. A distribution
 * with the bottom bars quietly omitted is worse than no distribution at all,
 * so `breakdown` takes all five and renders all five, including zeroes.
 *
 * The sources rail carries the same weight. "4.8 out of 5" means nothing
 * without who counted, and a score attributed to a third party the reader
 * can go and check is the only version of this section that is evidence
 * rather than decoration.
 *
 * Stars are decorative here and marked `aria-hidden`; the score is announced
 * from the text beside them, because a screen reader counting eight path
 * elements communicates nothing. The bars are a <dl>, so each rating band is
 * programmatically tied to its count instead of being two adjacent numbers
 * that happen to sit on one line.
 */

import * as React from 'react'
import { Star } from 'lucide-react'

export interface RatingSource {
  name: string
  score: string
  href?: string
}

export interface RatingBand {
  /** Stars, 5 down to 1. */
  stars: number
  count: number
}

export interface TestimonialRatingsProps {
  score?: string
  outOf?: number
  totalReviews?: string
  headline?: string
  /** All five bands, including the empty ones. See the note above. */
  breakdown?: RatingBand[]
  sources?: RatingSource[]
  className?: string
}

const DEFAULT_BREAKDOWN: RatingBand[] = [
  { stars: 5, count: 1783 },
  { stars: 4, count: 402 },
  { stars: 3, count: 71 },
  { stars: 2, count: 24 },
  { stars: 1, count: 18 },
]

const DEFAULT_SOURCES: RatingSource[] = [
  { name: 'G2', score: '4.8' },
  { name: 'Capterra', score: '4.7' },
  { name: 'Product Hunt', score: '4.9' },
]

/**
 * The heading's id, derived from the heading rather than fixed.
 *
 * It was the literal `ratings-heading`, which is correct for one instance
 * and wrong for two. Two is not hypothetical: a sign-up screen and a
 * consumer landing page both want an aggregate rating, and a catalog hub
 * renders every page it has on one document — at which point both sections
 * point `aria-labelledby` at whichever heading comes first, and one of them
 * is announced under the other's name.
 *
 * `React.useId()` is the textbook fix and is not available here. This block
 * is static markup with no `'use client'`, and adding one to generate an id
 * ships a hydration pass to render a bar chart that never changes. The
 * headline is the discriminator already to hand, and it differs in every
 * real case where two of these coexist — see `footer-mega.tsx`, which
 * reaches the same conclusion from the brand name.
 */
const headingId = (headline: string) =>
  `ratings-${headline.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`

export function TestimonialRatings({
  score = '4.8',
  outOf = 5,
  totalReviews = '2,298',
  headline = 'Rated by the people paying for it',
  breakdown = DEFAULT_BREAKDOWN,
  sources = DEFAULT_SOURCES,
  className = '',
}: TestimonialRatingsProps) {
  const total = breakdown.reduce((sum, band) => sum + band.count, 0)
  const filled = Math.round(Number(score))
  const labelId = headingId(headline)

  return (
    <section
      aria-labelledby={labelId}
      className={`mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}
    >
      <div className="grid gap-10 rounded-2xl border border-border/60 bg-card/80 p-8 sm:p-12 lg:grid-cols-[auto_1fr] lg:gap-16">
        <div className="lg:min-w-56">
          <h2
            id={labelId}
            className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
          >
            {headline}
          </h2>

          <p className="mt-4 flex items-baseline gap-2">
            <span className="text-5xl font-bold tracking-tight text-foreground">{score}</span>
            <span className="text-lg text-muted-foreground">out of {outOf}</span>
          </p>

          <p className="mt-3 flex items-center gap-1">
            {Array.from({ length: outOf }, (_, i) => (
              <Star
                key={i}
                aria-hidden
                className={
                  i < filled
                    ? 'h-5 w-5 fill-primary text-primary'
                    : 'h-5 w-5 fill-muted text-muted'
                }
              />
            ))}
          </p>

          <p className="mt-3 text-sm text-muted-foreground">
            from {totalReviews} verified reviews
          </p>
        </div>

        <dl className="grid content-center gap-2.5 border-border/60 max-lg:border-t max-lg:pt-8 lg:border-s lg:ps-16">
          {breakdown.map((band) => {
            const share = total === 0 ? 0 : (band.count / total) * 100
            return (
              <div key={band.stars} className="flex items-center gap-4">
                <dt className="w-16 shrink-0 break-words text-sm text-muted-foreground">
                  {band.stars} star{band.stars === 1 ? '' : 's'}
                </dt>
                <dd className="flex min-w-0 flex-1 items-center gap-4">
                  <span
                    aria-hidden
                    className="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted"
                  >
                    <span
                      className="block h-full rounded-full bg-primary border border-transparent"
                      style={{ width: `${share}%` }}
                    />
                  </span>
                  <span className="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">
                    {band.count.toLocaleString()}
                  </span>
                </dd>
              </div>
            )
          })}
        </dl>
      </div>

      <ul className="mt-8 flex flex-wrap items-center justify-center gap-3">
        {sources.map((source) => {
          const label = (
            <>
              <Star aria-hidden className="h-3.5 w-3.5 fill-primary text-primary" />
              <span className="font-semibold text-foreground">{source.score}</span>
              <span className="text-muted-foreground">on {source.name}</span>
            </>
          )
          return (
            <li key={source.name}>
              {source.href ? (
                <a
                  href={source.href}
                  className="flex items-center gap-2 rounded-full border border-border/60 px-4 py-2 text-sm transition-colors hover:border-border hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                >
                  {label}
                </a>
              ) : (
                <span className="flex items-center gap-2 rounded-full border border-border/60 px-4 py-2 text-sm">
                  {label}
                </span>
              )}
            </li>
          )
        })}
      </ul>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/testimonial-ratings.tsx and import it where you need the section:

import { TestimonialRatings } from '@/components/testimonial-ratings'

Customize

4 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`score`	`string`	`'4.8'`
`outOf`	`number`	`5`
`totalReviews`	`string`	`'2,298'`
`headline`	`string`	`'Rated by the people paying for it'`
`breakdown`All five bands, including the empty ones. See the note above.	`RatingBand[]`	`DEFAULT_BREAKDOWN`
`sources`	`RatingSource[]`	`DEFAULT_SOURCES`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

testimonial-ratings.html

<!--
  Aggregate Rating Breakdown — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section aria-labelledby="ratings-rated-by-the-people-paying-for-it" class="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="grid gap-10 rounded-2xl border border-border/60 bg-card/80 p-8 sm:p-12 lg:grid-cols-[auto_1fr] lg:gap-16">
    <div class="lg:min-w-56">
      <h2 id="ratings-rated-by-the-people-paying-for-it" class="text-sm font-medium uppercase tracking-wider text-muted-foreground">Rated by the people paying for it</h2>
      <p class="mt-4 flex items-baseline gap-2">
        <span class="text-5xl font-bold tracking-tight text-foreground">4.8</span>
        <span class="text-lg text-muted-foreground">out of 5</span>
      </p>
      <p class="mt-3 flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 w-5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
      </p>
      <p class="mt-3 text-sm text-muted-foreground">from 2,298 verified reviews</p>
    </div>
    <dl class="grid content-center gap-2.5 border-border/60 max-lg:border-t max-lg:pt-8 lg:border-s lg:ps-16">
      <div class="flex items-center gap-4">
        <dt class="w-16 shrink-0 break-words text-sm text-muted-foreground">5 stars</dt>
        <dd class="flex min-w-0 flex-1 items-center gap-4">
          <span aria-hidden="true" class="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
            <span class="block h-full rounded-full bg-primary border border-transparent" style="width:77.58920800696258%"></span>
          </span>
          <span class="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">1,783</span>
        </dd>
      </div>
      <div class="flex items-center gap-4">
        <dt class="w-16 shrink-0 break-words text-sm text-muted-foreground">4 stars</dt>
        <dd class="flex min-w-0 flex-1 items-center gap-4">
          <span aria-hidden="true" class="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
            <span class="block h-full rounded-full bg-primary border border-transparent" style="width:17.4934725848564%"></span>
          </span>
          <span class="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">402</span>
        </dd>
      </div>
      <div class="flex items-center gap-4">
        <dt class="w-16 shrink-0 break-words text-sm text-muted-foreground">3 stars</dt>
        <dd class="flex min-w-0 flex-1 items-center gap-4">
          <span aria-hidden="true" class="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
            <span class="block h-full rounded-full bg-primary border border-transparent" style="width:3.0896431679721497%"></span>
          </span>
          <span class="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">71</span>
        </dd>
      </div>
      <div class="flex items-center gap-4">
        <dt class="w-16 shrink-0 break-words text-sm text-muted-foreground">2 stars</dt>
        <dd class="flex min-w-0 flex-1 items-center gap-4">
          <span aria-hidden="true" class="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
            <span class="block h-full rounded-full bg-primary border border-transparent" style="width:1.0443864229765014%"></span>
          </span>
          <span class="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">24</span>
        </dd>
      </div>
      <div class="flex items-center gap-4">
        <dt class="w-16 shrink-0 break-words text-sm text-muted-foreground">1 star</dt>
        <dd class="flex min-w-0 flex-1 items-center gap-4">
          <span aria-hidden="true" class="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
            <span class="block h-full rounded-full bg-primary border border-transparent" style="width:0.7832898172323759%"></span>
          </span>
          <span class="min-w-14 shrink-0 text-end text-sm tabular-nums text-muted-foreground">18</span>
        </dd>
      </div>
    </dl>
  </div>
  <ul class="mt-8 flex flex-wrap items-center justify-center gap-3">
    <li>
      <span class="flex items-center gap-2 rounded-full border border-border/60 px-4 py-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3.5 w-3.5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <span class="font-semibold text-foreground">4.8</span>
        <span class="text-muted-foreground">on G2</span>
      </span>
    </li>
    <li>
      <span class="flex items-center gap-2 rounded-full border border-border/60 px-4 py-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3.5 w-3.5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <span class="font-semibold text-foreground">4.7</span>
        <span class="text-muted-foreground">on Capterra</span>
      </span>
    </li>
    <li>
      <span class="flex items-center gap-2 rounded-full border border-border/60 px-4 py-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3.5 w-3.5 fill-primary text-primary" aria-hidden="true">
          <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
        </svg>
        <span class="font-semibold text-foreground">4.9</span>
        <span class="text-muted-foreground">on Product Hunt</span>
      </span>
    </li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

5 more blocks in Testimonials

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Testimonials

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Testimonials blocks

View category

What people say

From teams that ship on a deadline.

“We replaced a week of design polish with an afternoon. The parts that used to get cut for time are just there now.”

Priya RamanStaff Engineer, Northwind

“Dropped it in on a Friday and shipped Monday. No dependency argument with my team for once.”

Marco SilvaFounder, Ferrytale

“The thing I did not expect: it made our junior engineers faster, because the patterns are readable. They learn from what they paste.”

Alex ChenEngineering Manager, Contoso

“Our marketing site went from three weeks to four days. Same designer, same headcount.”

Dana WhitfieldHead of Design, Globex

“I stopped keeping a personal snippets file. That file had been following me between jobs for six years.”

Samir HaddadFrontend Lead, Initech

Masonry Testimonial Wall

Quotes packed by height using CSS multi-column, with star ratings, initial avatars and no ragged bottom edge.

Testimonials140 lines1 dep13 Sept

“We had tried two other tools and rolled both back. This one stuck because the agents stopped asking us to change how they work — the queue finally matched how support actually thinks about a bad morning.”

Ingrid SolheimVP of Customer Experience, Meridian Logistics

fewer escalations to engineering: 48%; fewer escalations to engineering
median first-response time, down from 3.2 hrs: 11 min; median first-response time, down from 3.2 hrs
from pilot to full support-team rollout: 4 weeks; from pilot to full support-team rollout

Trusted by support teams at

Meridian
Coastline Health
Fieldstone

Single-Quote Spotlight

One customer, quoted at length and backed by a stat row — the section for when a single believable story argues better than a wall of five-star fragments.

Testimonials110 lines1 dep2 Sept

Customers

Twenty months of people telling us what they actually thought

5 out of 5
“The migration took an afternoon, which I did not believe when sales said it. What actually saved us was that our old exports imported without a schema rewrite.”
Dara OkonkwoStaff Engineer, Northwind Freight
5 out of 5
“We bought it for one team and it spread to four without anyone asking me to approve a rollout. That has happened twice in nine years here.”
Priya RamachandranDirector of Platform, Alcove Health
5 out of 5
“Support answered a schema question at 2am our time with an actual query, not a docs link. I have kept the thread.”
Tomas LindqvistData Lead, Ravel Studio
4 out of 5
“It is not the cheapest thing we evaluated. It is the only one where the trial ended and nobody asked to go back.”
Amara BelhadjVP Engineering, Kestrel Systems
5 out of 5
“Our audit went from a three-week scramble to a report we generate. I know that sounds like copy off your own website. It is what happened.”
Ruth MbekiHead of Compliance, Fieldstone Bank
4 out of 5
“The onboarding was rough and we nearly gave up in week one. Two releases later the thing we were stuck on is a checkbox.”
Jonas WeberPrincipal Architect, Meridian Logistics

Scroll-Snap Quote Rail

Twenty quotes in the height of six, scrolled by CSS snap points with arrows that disable at the ends — no auto-advance, and every quote stays in the DOM for search and Cmd-F.

Testimonials270 lines1 dep13 Sept

In their words

Three customers, unscripted

Recorded on their own time, edited only for length. Transcripts on each page.

Watch Priya Ramachandran of Alcove Health, 1:48
“We replaced three internal tools with this and cut the on-call rota from nine people to four.”
Priya RamachandranDirector of Platform, Alcove Health
Watch Dara Okonkwo of Northwind Freight, 2:12
“The part I tell other engineers about is the migration. One afternoon, no schema rewrite.”
Dara OkonkwoStaff Engineer, Northwind Freight
Watch Ruth Mbeki of Fieldstone Bank, 3:05
“Audit used to be a three-week scramble across four teams. It is a report we generate now.”
Ruth MbekiHead of Compliance, Fieldstone Bank

Video Testimonial Cards

Poster tiles linking out to recordings, each with a pull-quote that has to land for the majority who never press play, and a drawn placeholder until you supply a still.

Testimonials198 lines1 dep13 Sept

Results

What changed, and over how long

Most readers skip the quotes. What they do not skip is a number with a time period attached to it, and every figure here names the company it came from and how long it took.

Support replies: -63%
Onboarding: 9 days → 2
Manual reconciliation: 12 hrs/wk
Kept using it: 94%

Customer Outcome Band

Testimonials reduced to the measured outcome and the conditions it happened under, for readers who skip the quotes.

Testimonials121 linesNo deps13 Sept