# SocialProofTestimonials

> A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.

## Facts

- **Product**: Crew OS
- **Family**: Marketing
- **Global**: `window.DigitalCrew.SocialProofTestimonials`
- **Source**: `digitalcrew-orchestrator: components/testimonial-scroll.tsx`
- **Import in the app**: `import { SocialProofTestimonials } from "@/components/testimonial-scroll";`
- **Live preview**: /design/components/social-proof-testimonials/preview.html
- **Page**: /design/components/social-proof-testimonials

## Guidelines

**Use it for** the testimonials section of the landing page, under a [`SectionHeader`](/design/components/section-header.md). `TestimonialCard` also works alone.

**What you provide**: `testimonials`: `{ id, name, role, img, description }[]`, where `description` is a node (a `<p>`, with the key phrase highlighted; Crew OS's `Highlight` helper is `p-1 py-0.5 font-medium dark:font-semibold text-secondary`). Every three testimonials make one column, so give 6 or 9. `TestimonialCard` takes `name`, `role`, `img`, `description` and `className`. Crew OS's customer photos come from randomuser.me, which is unreachable here, so this preview uses generated initials.

**Anatomy**: 40px side padding, at most 750px tall, `overflow-hidden`; two columns from `md`, three from `xl`. Cards are `rounded-xl`, `bg-accent`, 16px padding, a hairline ring and soft shadow (a lighter ring in dark mode), 24px between quote and author. Quote text is `text-primary/90`, `leading-relaxed`; the author row has a 32px round photo, the name in `font-medium` and the role in `text-xs text-primary/50`. The top and bottom sixth (fifth from `md`) fade into `background`.

**Behaviour**: each column is a vertical [`Marquee`](/design/components/marquee.md) (content repeated four times): 40s for the first, 60s the second, 30s the third. Hovering does not pause it, and there is no reduced-motion branch.

**Don't** put links in quotes, mix very long and very short quotes, or use fewer than six (columns run out).

## API

```ts
export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
    name: string;
    role: string;
    img?: string;
    description: React.ReactNode;
    className?: string;
}
export declare const TestimonialCard: ({ description, name, img, role, className, ...props }: TestimonialCardProps) => JSX.Element;
interface Testimonial {
    id: string;
    name: string;
    role: string;
    img: string;
    description: React.ReactNode;
}
export declare function SocialProofTestimonials({ testimonials, }: {
    testimonials: Testimonial[];
}): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  // Self-contained initials avatars (customer photos are remote in Crew OS).
  function avatar(name, bg) {
    var ini = name.split(" ").map(function (w) { return w[0]; }).join("");
    var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><rect width='64' height='64' fill='" + bg + "'/><text x='32' y='41' font-family='Arial' font-size='24' font-weight='600' fill='white' text-anchor='middle'>" + ini + "</text></svg>";
    return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
  }
  function quote(a, hl, b) { return h("p", null, a, " ", h("span", { className: "font-semibold text-primary" }, hl), " ", b); }
  var testimonials = [
    { id: "1", name: "Claire Dubois", role: "CFO at Northwind Traders", img: avatar("Claire Dubois", "#8b5cf6"), description: quote("We handed our finance follow-ups to Max in March.", "Month-end chasing dropped from three days to one afternoon.", "Nobody wants the old way back.") },
    { id: "2", name: "Omar Haddad", role: "VP Finance at Brightline", img: avatar("Omar Haddad", "#0ea5e9"), description: quote("The first week felt like hiring a senior SDR.", "Eleven qualified meetings, zero manual lists.", "Our AEs finally sell all day.") },
    { id: "3", name: "Lena Fischer", role: "Head of Sales at Kestrel Labs", img: avatar("Lena Fischer", "#10b981"), description: quote("Replies are sorted by intent before I open my inbox.", "I only see the conversations worth my time.", "") },
    { id: "4", name: "Marc Lefèvre", role: "Founder at Atlas Freight", img: avatar("Marc Lefèvre", "#f59e0b"), description: quote("We run outbound in three languages with a team of two.", "Follow-ups never slip anymore.", "It just keeps going.") },
    { id: "5", name: "Aiko Tanaka", role: "COO at Vantage Health", img: avatar("Aiko Tanaka", "#ec4899"), description: quote("Sophie screens every applicant the same day.", "Time to first interview went from nine days to two.", "") },
    { id: "6", name: "Julien Moreau", role: "Revenue Ops at Helios Capital", img: avatar("Julien Moreau", "#6366f1"), description: quote("Everything lands in the CRM with the context attached.", "Our pipeline reviews take half the time.", "Clean data, finally.") }
  ];
  function App() { return h(DC.SocialProofTestimonials, { testimonials: testimonials }); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Marketing

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.