전체 보기 링크가 있는 3열 게시물 카드 목록

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

const POSTS = [
  { title: "유리 질감 가격표 섹션", img: "kind-block.webp", bg: "from-[#ede9fe] to-[#f5f3ff]" },
  { title: "눌리면 튀어 오르는 완료 버튼", img: "kind-interaction.webp", bg: "from-[#fce7f3] to-[#fdf2f8]" },
  { title: "광택 있는 3D 폴더 아이콘", img: "kind-graphic.webp", bg: "from-[#cffafe] to-[#ecfeff]" },
  { title: "말풍선이 떠다니는 문의 섹션", img: "bubble.webp", bg: "from-[#f5f3ff] to-[#fdf2f8]" },
  { title: "보라 타일 기능 소개 카드", img: "tile-violet.webp", bg: "from-[#ede9fe] to-[#ecfeff]" },
  { title: "분홍 타일 로딩 표시", img: "tile-pink.webp", bg: "from-[#fdf2f8] to-[#f5f3ff]" },
];

/** A head row with a "see all" link and a 3-column grid of post cards (2 columns and 4 cards on phones) */
export default function LandingPostList() {
  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-[1180px]">
        <div className="flex items-end justify-between">
          <h2 className="text-[22px] font-bold tracking-[-0.035em] text-[#111114] sm:text-[40px]">지금 올라와 있는 블록</h2>
          <a href="#" className="text-[15px] font-semibold text-[#5c5c68] hover:text-[#111114]">
            전체 보기 &rarr;
          </a>
        </div>
        <div className="mt-[18px] grid grid-cols-2 gap-2.5 sm:mt-[30px] sm:grid-cols-3 sm:gap-4">
          {POSTS.map((post, i) => (
            <a
              key={post.title}
              href="#"
              className={`${i >= 4 ? "hidden sm:block" : "block"} overflow-hidden rounded-[18px] border border-black/[0.07] bg-white shadow-[0_24px_50px_-34px_rgba(60,40,120,0.35)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed]`}
            >
              <span className={`grid aspect-video place-items-center bg-gradient-to-br ${post.bg}`}>
                <img src={`${ART}/${post.img}`} alt="" loading="lazy" className="h-3/5 w-auto object-contain" />
              </span>
              <span className="block truncate px-2.5 pb-2.5 pt-[9px] text-[12.5px] font-semibold text-[#111114] sm:px-3.5 sm:pb-3.5 sm:pt-3 sm:text-[14px]">
                {post.title}
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}