말풍선 오브젝트와 두 줄 제목의 마무리 행동 유도 섹션

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

/** Centred closing call: a glossy speech bubble, a two-line title, one sentence and two pills */
export default function LandingPostCta() {
  return (
    <section className="w-full bg-[#fbfbfc] px-4 py-20 text-center sm:px-8 sm:py-28">
      <img src={`${ART}/bubble.webp`} alt="" className="mx-auto mb-[18px] block h-auto w-[104px] sm:w-[150px]" />
      <h2 className="text-[34px] font-bold leading-[1.12] tracking-[-0.045em] text-[#111114] sm:text-[64px]">
        이제 내 컴포넌트를
        <br />
        올릴 차례입니다
      </h2>
      <p className="mx-auto mt-[22px] max-w-[480px] text-[15.5px] leading-[1.65] text-[#5c5c68] sm:text-[18px]">
        직접 붙여 넣거나, 쓰고 있는 AI 도구에서 한마디로 보내세요. 처음엔 비공개로 저장됩니다.
      </p>
      <div className="mt-8 flex justify-center gap-3">
        <a
          href="#"
          className="inline-flex h-[46px] items-center justify-center whitespace-nowrap rounded-full bg-[#111114] px-5 text-[15px] font-semibold text-white transition-[transform,background-color] duration-150 hover:bg-[#2a2a31] active:scale-[0.97] sm:h-[50px] sm:px-[26px] sm:text-[16px]"
        >
          첫 블록 올리기
        </a>
        <a
          href="#"
          className="inline-flex h-[46px] items-center justify-center whitespace-nowrap rounded-full border border-black/10 bg-white px-5 text-[15px] font-semibold text-[#111114] transition-[transform,background-color] duration-150 hover:bg-[#f4f4f6] active:scale-[0.97] sm:h-[50px] sm:px-[26px] sm:text-[16px]"
        >
          AI 도구 연결하기
        </a>
      </div>
    </section>
  );
}