Testimonials Section 1

components/pro-blocks/landing-page/testimonials-sections/testimonials-section-1.tsx

import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"

type Props = {
  quote?: string
  avatarSrc?: string
  avatarAlt?: string
  avatarClassName?: string
  name?: string
  role?: string
  sectionAriaLabelledBy?: string
}

const defaultProps = {
  quote:
    "This product has completely transformed our workflow. It is intuitive, saves our team hours every week, and gives us polished patterns we can adapt quickly.",
  avatarSrc: "/avatar-mw-s.png",
  avatarAlt: "Lucas Mercer",
  name: "Lucas Mercer",
  role: "CEO at Acme Inc.",
  sectionAriaLabelledBy: "testimonials-section-1-label",
}

export function TestimonialsSection1({
  quote = defaultProps.quote,
  avatarSrc = defaultProps.avatarSrc,
  avatarAlt = defaultProps.avatarAlt,
  avatarClassName,
  name = defaultProps.name,
  role = defaultProps.role,
  sectionAriaLabelledBy = defaultProps.sectionAriaLabelledBy,
}: Props) {
  return (
    <section className="bg-muted/60" aria-labelledby={sectionAriaLabelledBy}>
      <div className="wrapper">
        <div className="mx-auto flex max-w-2xl flex-col items-center">
          <blockquote className="text-center text-lg font-medium text-pretty text-foreground md:text-xl/8">
            &quot;{quote}&quot;
          </blockquote>

          <div className="mt-8 flex flex-col items-center gap-4">
            <Avatar
              className={cn(
                "size-12 rounded-xl md:size-14",
                avatarClassName
              )}
            >
              <AvatarImage src={avatarSrc} alt={avatarAlt} />
            </Avatar>

            <div className="flex flex-col items-center sm:flex-row sm:gap-2">
              <span className="font-medium text-foreground">{name}</span>
              <span className="hidden text-muted-foreground opacity-50 sm:block">
                •
              </span>
              <span className="text-muted-foreground">{role}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}