Benefits 13 – Card grid with section header

1import type { ReactNode } from "react";
2 
3import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
4import { Card, CardContent } from "@/components/ui/card";
5import {
6  FeatureStack,
7  FeatureStackContent,
8  FeatureStackDescription,
9  FeatureStackHeader,
10  FeatureStackTitle,
11} from "@/components/shadcncraft/pro-marketing/feature-stack";
12import { FeaturedIcon } from "@/components/shadcncraft/pro-marketing/featured-icon";
13import {
14  SectionHeading,
15  SectionHeadingBody,
16  SectionHeadingTagline,
17  SectionHeadingTitle,
18} from "@/components/shadcncraft/pro-marketing/section-heading";
19 
20export function Benefits13() {
21  return (
22    <section className="py-6 lg:py-20">
23      <div className="mx-auto flex max-w-7xl flex-col gap-12 px-5 lg:gap-16 lg:px-8">
24        {/* Section Heading */}
25        <SectionHeading alignment="center" size="lg" className="mx-auto w-full max-w-3xl">
26          <SectionHeadingTagline>Benefits</SectionHeadingTagline>
27          <SectionHeadingTitle>Why Choose Acme Inc.</SectionHeadingTitle>
28          <SectionHeadingBody>
29            Discover the key advantages that make Acme Inc. the right choice for your
30            team.
31          </SectionHeadingBody>
32        </SectionHeading>
33 
34        {/* Benefits Grid */}
35        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-9">
36          {benefitsData.map((benefit) => (
37            <Card key={benefit.title}>
38              <CardContent>
39                <FeatureStack alignment="left" size="sm">
40                  <FeaturedIcon size="md">{benefit.icon}</FeaturedIcon>
41 
42                  <FeatureStackHeader>
43                    <FeatureStackTitle>{benefit.title}</FeatureStackTitle>
44                    <FeatureStackDescription>
45                      {benefit.description}
46                    </FeatureStackDescription>
47                  </FeatureStackHeader>
48 
49                  <FeatureStackContent>
50                    <a
51                      href="#"
52                      className="text-sm font-medium text-primary hover:underline"
53                    >
54                      Learn more
55                    </a>
56                  </FeatureStackContent>
57                </FeatureStack>
58              </CardContent>
59            </Card>
60          ))}
61        </div>
62      </div>
63    </section>
64  );
65}
66 
67const benefitsData: { icon: ReactNode; title: string; description: string }[] = [
68  {
69    icon: (
70      <IconPlaceholder
71        lucide="ArrowBigUpDash"
72        tabler="IconArrowBigUpLine"
73// … truncated