# Testimonials Wall Responsive customer proof wall with ratings, quotes, roles, and company context. - Category: Marketing - Tier: Free - Page: /blocks/testimonials_wall - Source attribution: Tailark + TWBlocks - License: MIT OR Apache-2.0 (block source) ## Source Free block source is dual licensed under MIT OR Apache-2.0. Use of the Proa framework is governed separately under AGPL-3.0-only or a commercial Proa license. ### testimonials_wall.rs ```rust // SPDX-FileCopyrightText: 2026 Proa Labs, Inc. // SPDX-License-Identifier: (MIT OR Apache-2.0) AND MIT // Adapted from MIT-licensed sources: // - Tailark, `packages/dusk-kit/blocks/testimonials/six/index.tsx` // https://github.com/tailark/blocks @ 8eadeb3389ccccc4bfc4a10bca959c1b39e47b71 (MIT License) // - Tailark, `packages/mist-kit/blocks/testimonials/two/index.tsx` // https://github.com/tailark/blocks @ 8eadeb3389ccccc4bfc4a10bca959c1b39e47b71 (MIT License) // - TWBlocks, `blocks/testimonials/testimonials1.tsx` // https://github.com/tommyjepsen/twblocks @ ff88cb951dab0dc01198b6570ec5f5cf21250d45 (MIT License) //! Testimonials wall block — a responsive social-proof grid with customer identities. use proa_core::{DataLoader, WebContext, WebRenderSync, WriteBuf, WriteError}; use proa_macros::html_sync; use proa_ui::{ Avatar, AvatarFallback, AvatarShape, AvatarSize, Badge, BadgeVariant, Card, CardContent, }; /// The flourish above a quote. The wall deliberately varies these so the grid /// does not read as six copies of one card. enum Topper { None, /// A five-star rating, with the rating also stated for screen readers. Stars, /// An oversized quote mark paired with a category badge. Category(&'static str), /// Short technology tags. Tags(&'static [&'static str]), } /// Light card on the page background, or the one inverted card that anchors the /// grid. Every colour that has to flip lives here rather than being repeated as /// a per-card class string. #[derive(Clone, Copy, PartialEq)] enum Tone { Light, Inverted, } impl Tone { fn card(self) -> &'static str { match self { Self::Light => "border-border/80 bg-background shadow-none", Self::Inverted => "border-border/80 bg-primary text-primary-foreground shadow-none", } } fn quote(self) -> &'static str { match self { Self::Light => "text-base leading-7 text-foreground", Self::Inverted => "text-lg font-medium leading-8", } } fn avatar(self) -> Option<&'static str> { match self { Self::Light => None, Self::Inverted => Some("ring-2 ring-primary-foreground/20"), } } fn cite(self) -> &'static str { match self { Self::Light => "not-italic text-sm font-semibold text-foreground", Self::Inverted => "not-italic text-sm font-semibold", } } fn role(self) -> &'static str { match self { Self::Light => "text-xs text-muted-foreground", Self::Inverted => "text-xs text-primary-foreground/70", } } } struct Testimonial { topper: Topper, tone: Tone, quote: &'static str, initials: &'static str, /// Avatar fill, spelled out in full for Tailwind's source scan. avatar_tint: &'static str, name: &'static str, role: &'static str, } impl WebRenderSync for &Testimonial { fn render(self, cx: &mut WebContext) -> Result<(), WriteError> { // Only the star rating pushes the quote down; the other toppers carry // their own bottom margin. let quote_spacing = if matches!(self.topper, Topper::Stars) { "mt-5" } else { "" }; html_sync! { {Card { class: Some(self.tone.card()), children: Some(CardContent { class: Some("pt-6"), children: Some(html_sync! { {match &self.topper { Topper::None => {} Topper::Stars => html_sync! { "5 out of 5 stars" }.render(cx)?, Topper::Category(label) => html_sync! {
"“" {Badge { variant: BadgeVariant::Secondary, class: Some("rounded-full"), children: Some(*label), }}
}.render(cx)?, Topper::Tags(tags) => html_sync! {
{for tag in *tags { html_sync! { {*tag} } }}
}.render(cx)?, }}
{self.quote}
{Avatar { size: AvatarSize::Lg, shape: AvatarShape::Circle, class: self.tone.avatar(), image: None::<()>, fallback: Some(AvatarFallback { size: AvatarSize::Lg, class: Some(self.avatar_tint), children: Some(self.initials), }), }}
{self.name}

{self.role}

}), }), }} } .render(cx) } } /// One entry per masonry column. The columns are uneven on purpose, so this is a /// slice of slices rather than a flat list chunked at render time. const COLUMNS: &[&[Testimonial]] = &[ &[ Testimonial { topper: Topper::Stars, tone: Tone::Light, quote: "We replaced a fragile set of templates with a component system the whole Rust team can actually improve. The first migration shipped in days.", initials: "AK", avatar_tint: "bg-primary/10 text-primary", name: "Ari Kim", role: "Engineering lead, Lantern", }, Testimonial { topper: Topper::None, tone: Tone::Inverted, quote: "The source-first model is the rare promise that gets better as your product becomes more opinionated.", initials: "MP", avatar_tint: "bg-primary-foreground/15 text-primary-foreground", name: "Mina Patel", role: "Founder, Incline", }, ], &[ Testimonial { topper: Topper::Category("Design systems"), tone: Tone::Light, quote: "Typed recipes made our design reviews concrete. Designers can point to a token, engineers can point to an API, and both sides stay in sync.", initials: "JL", avatar_tint: "bg-violet-500/10 text-violet-600 dark:text-violet-400", name: "Jordan Lee", role: "Design director, Thread", }, Testimonial { topper: Topper::None, tone: Tone::Light, quote: "Our marketing pages got lighter, our product surfaces got more consistent, and we stopped debugging hydration for content that never needed it.", initials: "SC", avatar_tint: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", name: "Sam Chen", role: "Staff engineer, Northstar", }, ], &[Testimonial { topper: Topper::Tags(&["SSR", "Rust"]), tone: Tone::Light, quote: "Proa let us keep the ergonomics our frontend developers expect while moving the rendering path somewhere far easier to reason about.", initials: "RN", avatar_tint: "bg-sky-500/10 text-sky-600 dark:text-sky-400", name: "Riley Novak", role: "CTO, Fieldwork", }], ]; const COLUMN_CLASSES: &[&str] = &[ "space-y-4", "space-y-4 lg:pt-8", "space-y-4 md:col-span-2 lg:col-span-1", ]; /// Copy-paste-ready block composition. pub struct TestimonialsWallBlock; impl proa_core::WebRenderSync for TestimonialsWallBlock { fn render( self, cx: &mut proa_core::WebContext, ) -> Result<(), proa_core::WriteError> { html_sync! {
{Badge { variant: BadgeVariant::Outline, class: Some("rounded-full bg-background"), children: Some("Built with Proa"), }}

"Teams move faster when the UI stops fighting back."

"From first prototype to mature design system, Proa gives product teams a clearer path to the interface they meant to ship."

{for (index, column) in COLUMNS.iter().enumerate() { html_sync! {
{for testimonial in *column { html_sync! { {testimonial} } }} {if index + 1 == COLUMNS.len() { // The result card closes the wall: a number rather // than a quote, so it stays hand-written instead of // being bent into the Testimonial shape. html_sync! { {Card { class: Some("overflow-hidden border-border/80 bg-zinc-950 text-zinc-50 shadow-none"), children: Some(CardContent { class: Some("relative pt-6"), children: Some(html_sync! {

"Release velocity"

"2.4×"

"More product surfaces shipped per quarter after consolidating on one component system."

}), }), }} }.render(cx)?; }}
} }}
} .render(cx) } } ```