"use client"; import React, { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { BadgeCheck, Workflow, BarChart } from "lucide-react"; import Image from "next/image"; import clsx from "clsx"; export interface TestimonialTab { id: string; name: string; title: string; company: string; quote: string; image: string; } interface TestimonialTabsProps { testimonials?: TestimonialTab[]; } export const DEFAULT_TABS: TestimonialTab[] = [ { id: "sahil", name: "Sahil Mansuri", title: "CEO & Co-founder", company: "Bravado", quote: "Attio is the first CRM that feels truly modern. It’s powerful, flexible, and fast to build with. There’s nothing like it on the market.", image: "https://avatars.githubusercontent.com/u/111233383?s=400&u=4907246edac57d1a1576bc4d38c43dec1e2a2a81&v=4", }, { id: "jane", name: "Jane Doe", title: "VP of Sales", company: "TechCorp", quote: "Attio helped us transform our sales pipeline. Everything feels smooth, and it's incredibly fast.", image: "https://avatars.githubusercontent.com/u/111233383?s=400&u=4907246edac57d1a1576bc4d38c43dec1e2a2a81&v=4", }, { id: "alex", name: "Alex Lee", title: "Head of Growth", company: "StartupX", quote: "Finally, a CRM that feels like it belongs in 2025. Fast, beautiful, and flexible. We love Attio.", image: "https://avatars.githubusercontent.com/u/111233383?s=400&u=4907246edac57d1a1576bc4d38c43dec1e2a2a81&v=4", }, ]; export function TestimonialTabs({ testimonials = DEFAULT_TABS, }: TestimonialTabsProps) { const [active, setActive] = useState(testimonials[0]?.id || ""); return (

{testimonials.map((t) => { const isActive = t.id === active; return (

{isActive && (

“{t.quote}”

{t.name},{" "} {t.title}, {t.company}

Workflows

Deals

Reports

)}

); })}

); }

Testimonial Tabs

Installation

Usage