Benefits 13

Card grid with section header

A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that collapses responsively. Use when you need a structured, repeatable set of items with strong visual separation.

Radix UI

Base UI

7 shadcn styles

5 icon sets

Get this blockFree

Benefits 13 of 13

components/shadcncraft/pro-marketing/benefits/benefits-13/index.tsx

import type { ReactNode } from "react";

import { FeaturedIcon } from "@/components/shadcncraft/pro-marketing/featured-icon";
import {
  SectionHeading,
  SectionHeadingBody,
  SectionHeadingTagline,
  SectionHeadingTitle,
} from "@/components/shadcncraft/pro-marketing/section-heading";
import { IconPlaceholder } from "@/registry/icons/icon-placeholder";

export function Benefits13() {
  return (
    <section className="py-12 lg:py-20">
      <div className="mx-auto flex max-w-7xl flex-col gap-12 px-5 lg:gap-16 lg:px-8">
        {/* Section Heading */}
        <SectionHeading alignment="center" className="mx-auto w-full max-w-3xl">
          <SectionHeadingTagline>Benefits</SectionHeadingTagline>
          <SectionHeadingTitle>Why Choose Acme Inc.</SectionHeadingTitle>
          <SectionHeadingBody>
            Discover the key advantages that make Acme Inc. the right choice for your
            team.
          </SectionHeadingBody>
        </SectionHeading>

        {/* Benefits Grid */}
        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-3 lg:gap-9">
          {benefitsData.map((benefit) => (
            <div
              key={benefit.title}
              className="group flex flex-col gap-4 rounded-xl border bg-card p-6"
            >
              <FeaturedIcon size="lg">{benefit.icon}</FeaturedIcon>

              <div className="flex flex-col gap-1">
                <h3 className="text-xl font-medium tracking-tight">{benefit.title}</h3>
                <p className="text-lg text-muted-foreground">{benefit.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const benefitsData: { icon: ReactNode; title: string; description: string }[] = [
  {
    icon: (
      <IconPlaceholder
        lucide="ArrowBigUpDash"
        tabler="IconArrowBigUpLine"
        hugeicons="ArrowUp03Icon"
        phosphor="ArrowFatLinesUpIcon"
        remixicon="RiArrowUpWideLine"
      />
    ),
    title: "Intelligent Prioritization",
    description:
      "Know exactly what to work on next with AI that understands your goals and context. Prioritize smarter with Acme Inc.",
  },
  {
    icon: (
      <IconPlaceholder
        lucide="IterationCcw"
        tabler="IconRepeat"
        hugeicons="RepeatIcon"
        phosphor="ArrowsCounterClockwiseIcon"
        remixicon="RiLoopLeftLine"
      />
    ),
    title: "Effortless Integration",
    description:
      "Acme Inc. connects seamlessly with the tools your team already uses, so there's no steep learning curve or disruption.",
  },
  {
    icon: (
      <IconPlaceholder
        lucide="Database"
        tabler="IconDatabase"
        hugeicons="DatabaseIcon"
        phosphor="DatabaseIcon"
        remixicon="RiDatabaseLine"
      />
    ),
    title: "Clear Decision Support",
    description:
      "When projects stall, it's rarely because of lack of effort, it's lack of clarity. Acme Inc. provides AI-driven insights.",
  },
  {
    icon: (
      <IconPlaceholder
        lucide="ChartSpline"
        tabler="IconVectorSpline"
        hugeicons="ChartLineData02Icon"
        phosphor="ChartLineIcon"
        remixicon="RiLineChartLine"
      />
    ),
    title: "Smarter Analytics",
    description:
      "Turn data into clarity with AI-powered insights that help you act faster and more confidently.",
  },
  {
    icon: (
      <IconPlaceholder
        lucide="Workflow"
        tabler="IconGitBranch"
        hugeicons="WorkflowCircle01Icon"
        phosphor="FlowArrowIcon"
        remixicon="RiGitBranchLine"
      />
    ),
    title: "Seamless Workflow",
    description:
      "Stay in the zone without constant context switching across apps and tools.",
  },
  {
    icon: (
      <IconPlaceholder
        lucide="Users"
        tabler="IconUsers"
        hugeicons="UserGroupIcon"
        phosphor="UsersIcon"
        remixicon="RiGroupLine"
      />
    ),
    title: "Team Alignment",
    description:
      "Keep everyone on the same page with a single source of truth for projects and decisions.",
  },
];