Testimonial 11 – Editorial quote grid

1import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
2import { Card, CardContent } from "@/components/ui/card";
3import {
4  ProfileCard,
5  ProfileCardAvatar,
6  ProfileCardDetails,
7} from "@/components/shadcncraft/pro-marketing/profile-card";
8import {
9  SectionHeading,
10  SectionHeadingBody,
11  SectionHeadingTagline,
12  SectionHeadingTitle,
13} from "@/components/shadcncraft/pro-marketing/section-heading";
14 
15export function Testimonials11() {
16  return (
17    <section className="py-6 lg:py-20">
18      <div className="mx-auto flex max-w-7xl flex-col gap-12 px-5 lg:gap-16 lg:px-8">
19        {/* Section Heading */}
20        <SectionHeading alignment="center" className="mx-auto w-full max-w-3xl">
21          <SectionHeadingTagline>Testimonials</SectionHeadingTagline>
22          <SectionHeadingTitle>What Our Customers Say</SectionHeadingTitle>
23          <SectionHeadingBody>
24            Don&apos;t just take our word for it. See what teams are saying about Acme
25            Inc.
26          </SectionHeadingBody>
27        </SectionHeading>
28 
29        {/* Testimonials Grid */}
30        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
31          {testimonialsData.map((testimonial) => (
32            <Card key={testimonial.id}>
33              <CardContent className="group flex flex-1 flex-col gap-6">
34                <IconPlaceholder
35                  lucide="Quote"
36                  tabler="IconQuote"
37                  hugeicons="QuoteDownIcon"
38                  phosphor="QuotesIcon"
39                  remixicon="RiDoubleQuotesL"
40                  className="size-6 rotate-180 text-muted-foreground transition-colors group-hover:text-foreground"
41                />
42                <blockquote className="text-lg font-medium text-pretty">
43                  {testimonial.quote}
44                </blockquote>
45                <IconPlaceholder
46                  lucide="Quote"
47                  tabler="IconQuote"
48                  hugeicons="QuoteDownIcon"
49                  phosphor="QuotesIcon"
50                  remixicon="RiDoubleQuotesL"
51                  className="size-6 self-end text-muted-foreground transition-colors group-hover:text-foreground"
52                />
53                <ProfileCard className="mt-auto">
54                  <ProfileCardAvatar src={testimonial.imageSrc} name={testimonial.name} />
55                  <ProfileCardDetails name={testimonial.name} body={testimonial.role} />
56                </ProfileCard>
57              </CardContent>
58            </Card>
59// … truncated