광택 오브젝트가 올라간 세 가지 종류 소개 카드

const ART = "https://nnuer.site/brand/landing";

const KINDS = [
  { img: "kind-block.webp", label: "UI 블록", hint: "히어로, 가격표, 로그인처럼 페이지를 이루는 섹션" },
  { img: "kind-interaction.webp", label: "인터랙션", hint: "버튼, 로딩, 전환처럼 움직임과 반응이 핵심인 조각" },
  { img: "kind-graphic.webp", label: "그래픽", hint: "아이콘, 일러스트, 3D 오브젝트처럼 AI로 만든 이미지" },
];

/** Title, lead and three soft cards, each with a glossy object; cards lift on hover */
export default function LandingKinds() {
  return (
    <section className="w-full bg-[#fbfbfc] px-4 py-16 sm:px-8 sm:py-24">
      <div className="mx-auto w-full max-w-[1080px]">
        <h2 className="text-center text-[26px] font-bold tracking-[-0.035em] text-[#111114] sm:text-[40px]">세 가지를 모읍니다</h2>
        <p className="mx-auto mt-3.5 max-w-[520px] text-center text-[14.5px] leading-[1.6] text-[#5c5c68] sm:text-[17px]">
          AI 도구에서 만들고, 한마디로 올리고, 원하는 스택으로 다시 만드세요.
        </p>
        <div className="mt-5 grid grid-cols-1 gap-2.5 sm:mt-11 sm:grid-cols-3 sm:gap-[18px]">
          {KINDS.map((k) => (
            <a
              key={k.label}
              href="#"
              className="grid grid-cols-[56px_1fr] items-center gap-x-3.5 rounded-[20px] border border-black/[0.07] bg-gradient-to-b from-white to-[#f4f3f8] px-4 py-3.5 shadow-[0_30px_60px_-36px_rgba(60,40,120,0.3)] transition-[transform,box-shadow] duration-200 hover:-translate-y-1 hover:shadow-[0_36px_70px_-34px_rgba(60,40,120,0.4)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] sm:block sm:rounded-[28px] sm:px-7 sm:pb-[34px] sm:pt-8"
            >
              <img
                src={`${ART}/${k.img}`}
                alt=""
                className="row-span-2 h-14 w-14 object-contain sm:h-[104px] sm:w-[120px] sm:object-left"
              />
              <h3 className="text-[18px] font-bold tracking-[-0.02em] text-[#111114] sm:mt-[30px] sm:text-[24px]">{k.label}</h3>
              <p className="mt-1 text-[14px] leading-[1.65] text-[#5c5c68] sm:mt-2.5 sm:text-[15.5px]">{k.hint}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}