Card Image Section (Tailwind)

"use client";
import { CardImageSection } from "./card-image-section";
import data from "./data.json";

export default function Page() {
  return <CardImageSection data={data} />;
}

import { ArrowPointer, Button } from "../../ui/button/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardImage,
  CardTitle,
} from "../../ui/card/card";

type CardData = {
  id: number;
  imageSrc: string;
  alt: string;
  title: string;
  description: string;
  href?: string;
};

type CardImageSectionProps = {
  data: {
    caption: string;
    heading: string;
    description: string;
    cards: CardData[];
  };
};

export function CardImageSection({ data }: CardImageSectionProps) {
  return (
    <section className="mx-auto w-full max-w-[900px] px-6 py-12 max-sm:px-4 max-sm:py-8">
      <header className="mb-12 text-left max-sm:mb-8">
        <span className="mb-3 block font-medium text-[length:var(--font-size-sm)] text-[var(--accent)] uppercase tracking-[0.05em]">
          {data.caption}
        </span>
        <h2 className="m-0 mb-4 font-semibold text-[clamp(1.75rem,4vw,2.5rem)] text-[var(--foreground)] leading-[1.2] tracking-[-0.02em]">
          {data.heading}
        </h2>
        <p className="m-0 max-w-[600px] text-[var(--muted-foreground)] text-base leading-[1.6]">{data.description}</p>
      </header>

      <div className="columns-1 sm:columns-2 sm:gap-x-6">
        {data.cards.map((card, index) => (
          <Card
            className={`mb-6 max-w-full break-inside-avoid rounded-[16px] [transform:translateZ(0)] sm:rounded-[20px] ${index === 0 ? "sm:mt-[120px]" : ""}`}
            key={card.id}
            variant="lift"
          >
            <CardImage alt={card.alt} className="w-auto rounded-[8px] sm:rounded-[12px]" src={card.imageSrc} />

            <CardContent className="gap-2">
              <CardTitle className="m-0 max-sm:text-[1.125rem] max-sm:leading-[1.3]">{card.title}</CardTitle>
              <CardDescription className="mt-0">{card.description}</CardDescription>
            </CardContent>

            <CardFooter>
              <Button className="pl-0" render={<a href={card.href ?? "#"} />} size="sm" variant="link">
                Learn More
                <ArrowPointer />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  );
}

{
  "caption": "What We Offer",
  "heading": "Four Pillars of Excellence",
  "description": "Discover the foundational elements that drive our approach to creating exceptional digital experiences.",
  "cards": [
    {
      "id": 1,
      "imageSrc": "/p-01.svg",
      "alt": "Feature 1 illustration",
      "title": "Feature 1",
      "description": "Add a description here to explain what this feature offers and why it matters to your users."
    },
    {
      "id": 2,
      "imageSrc": "/p-02.svg",
      "alt": "Feature 2 illustration",
      "title": "Feature 2",
      "description": "Add a description here to explain what this feature offers and why it matters to your users."
    },
    {
      "id": 3,
      "imageSrc": "/p-03.svg",
      "alt": "Feature 3 illustration",
      "title": "Feature 3",
      "description": "Add a description here to explain what this feature offers and why it matters to your users."
    },
    {
      "id": 4,
      "imageSrc": "/p-04.svg",
      "alt": "Feature 4 illustration",
      "title": "Feature 4",
      "description": "Add a description here to explain what this feature offers and why it matters to your users."
    }
  ]
}