Minimal Feature Cards

import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import {
  Feature,
  FeatureGroup,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Everything you need to answer well",
  body: "Reply faster and keep every customer conversation where the whole team can see it.",
  more: "Learn more",
} as const

const FEATURES = [
  {
    title: "Shared inbox",
    body: "Support mail lands in one list the whole team reads, so a thread is never answered twice.",
    href: "#",
  },
  {
    title: "Collision detection",
    body: "See when a teammate is already replying, and hand the thread over with one click.",
    href: "#",
  },
  {
    title: "Saved replies",
    body: "Answers you write often are one keystroke away, and the team keeps them current.",
    href: "#",
  },
] as const

export default function MinimalFeatures02() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <FeatureGroup cols={1} gap="sm" className="@4xl:grid-cols-3">
          {FEATURES.map((feature) => (
            <Feature key={feature.title}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle role="heading" aria-level={3}>
                    {feature.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="flex-1">
                  <CardDescription>{feature.body}</CardDescription>
                </CardContent>
                <CardFooter>
                  <a
                    href={feature.href}
                    data-slot="button"
                    className={cn(
                      buttonVariants({ variant: "link" }),
                      "h-auto p-0 font-semibold"
                    )}
                  >
                    {COPY.more}
                    <span className="sr-only"> about {feature.title}</span>
                    <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
                  </a>
                </CardFooter>
              </Card>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/minimal-features-02

npx shadcn add @01orbital/minimal-features-02

yarn shadcn add @01orbital/minimal-features-02

bunx --bun shadcn add @01orbital/minimal-features-02