A manually navigated testimonial panel with animated quote transitions and explicit source attribution.
"use client";
import * as React from "react";
import QuoteCrossfade, { type Quote } from "@/components/ui/quote-crossfade";
const testimonials: Quote[] = [
{ id: "maya", quote: "The handoff used to be where good ideas got lost. Now the whole team sees the same thing, from the first sketch to the final release.", name: "Maya Chen", role: "Head of product", company: "Northstar", initials: "MC", context: "A clearer handoff" },
{ id: "alex", quote: "It feels considered in all the places you only notice after a few weeks. Less explaining, fewer loose ends, and more time for the work itself.", name: "Alex Morgan", role: "Design director", company: "Folio", initials: "AM", context: "More time to design" },
{ id: "jordan", quote: "We finally have one place where decisions make sense together. What changed, why it changed, and what we’re building next.", name: "Jordan Rivera", role: "Engineering lead", company: "Relay", initials: "JR", context: "Built for the whole team" },
];
const settings = {
title: "Good work travels through people.",
description: "Different teams. Shared momentum. A few words from the people doing the work.",
autoPlay: false,
interval: 6500,
showAuthorTabs: true,
quoteCount: 3,
};
export default function QuoteCrossfadeDemo(props: Partial<typeof settings> = {}) {
const config = { ...settings, ...props };
const quotes = testimonials.slice(0, Math.max(0, Math.min(3, Math.round(config.quoteCount))));
return (
<main className="w-full bg-background text-foreground" style={{ maxWidth: 920, margin: "0 auto", padding: "clamp(16px, 4vw, 40px)" }}>
<QuoteCrossfade quotes={quotes} title={config.title} description={config.description} autoPlay={config.autoPlay} interval={config.interval} showAuthorTabs={config.showAuthorTabs} />
<p className="text-muted-foreground" style={{ margin: "16px 4px 0", fontSize: 11, lineHeight: 1.6 }}>Fictional testimonials for demonstration. Replace them with your own stories.</p>
</main>
);
}