ceo founders leadership quote paired trust about ceo founder quote testimonial leadership paired about-us trust two founder quotes side by side CEO testimonials with avatars leadership social proof section
Testimonials CEO Paired
Fetch pattern JSON:
curl https://webspire.de/patterns/testimonials/ceo-paired.json ceo-paired.html
<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="mb-10 text-center">
<p class="mb-3 text-sm font-semibold uppercase tracking-widest text-[var(--ws-testimonials-accent)]">Leadership</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">Wir stehen hinter dem, was wir bauen.</h2>
</div>
<div class="grid gap-6 md:grid-cols-2">
<!-- Quote 1 -->
<figure class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-8">
<div class="mb-4 text-4xl font-serif leading-none text-[var(--ws-testimonials-accent)] opacity-40" aria-hidden="true">“</div>
<blockquote class="mb-6">
<p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
"Unsere Kunden kommen mit einer Vielfalt an Fragen auf uns zu. Das ist herausfordernd — und genau das macht unsere ganzheitlichen Lösungen so wertvoll."
</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-[var(--ws-testimonials-accent)] text-lg font-bold text-white" aria-hidden="true">SR</div>
<div>
<p class="font-semibold text-[var(--ws-testimonials-text)]">Sebastian Rutz</p>
<p class="text-sm text-[var(--ws-testimonials-text-muted)]">CEO & Co-Founder</p>
</div>
</figcaption>
</figure>
<!-- Quote 2 -->
<figure class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-8">
<div class="mb-4 text-4xl font-serif leading-none text-[var(--ws-testimonials-accent)] opacity-40" aria-hidden="true">“</div>
<blockquote class="mb-6">
<p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
"Unser Antrieb ist der Geschäftserfolg unserer Kunden. Den erreichen wir nur, wenn jeder bei uns seine Stärken voll entfalten kann."
</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-[var(--ws-testimonials-accent)] text-lg font-bold text-white" aria-hidden="true">TH</div>
<div>
<p class="font-semibold text-[var(--ws-testimonials-text)]">Tobias Hejna</p>
<p class="text-sm text-[var(--ws-testimonials-text-muted)]">CEO & Co-Founder</p>
</div>
</figcaption>
</figure>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ceofoundersleadershipquotepairedtrustabout
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading (e.g. "Leadership"). |
| heading | No | Section heading. |
| quote-1 | Yes | First quote text. |
| person-1 | Yes | Name, title and avatar initials for the first person. |
| quote-2 | Yes | Second quote text. |
| person-2 | Yes | Name, title and avatar initials for the second person. |
Nutzt <figure> + <figcaption> + <blockquote> für semantisch korrektes Markup. Avatar-Initialen statt Fotos — funktioniert ohne externe Assets. Einfach durch ein <img> in der figcaption mit rounded-full ersetzen.