문장 사이에 광택 타일이 박힌 세 줄 헤드라인 히어로

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

function Tile({ src }: { src: string }) {
  return (
    <img
      src={`${ART}/${src}`}
      alt=""
      className="relative -top-[3px] mx-0.5 inline-block w-[1.05em] align-middle sm:-top-1.5 sm:mx-1.5 sm:w-[84px]"
    />
  );
}

/** Centred three-line headline with a glossy tile inside each line, two pills and a stack of cards below */
export default function LandingHero() {
  return (
    <section className="relative w-full overflow-hidden bg-[#fbfbfc] px-4 pt-20 sm:px-8 sm:pt-28">
      <div aria-hidden className="pointer-events-none absolute inset-0">
        <span className="absolute left-[12%] top-[30%] h-[380px] w-[520px] rounded-full bg-[#ddd6fe] opacity-45 blur-[90px]" />
        <span className="absolute left-[48%] top-[44%] h-[340px] w-[460px] rounded-full bg-[#fbcfe8] opacity-45 blur-[90px]" />
        <span className="absolute left-[62%] top-[14%] h-[360px] w-[420px] rounded-full bg-[#cffafe] opacity-45 blur-[90px]" />
      </div>
      <div className="relative mx-auto max-w-[1080px] text-center">
        <h1 className="text-[clamp(26px,9vw,38px)] font-bold leading-[1.1] tracking-[-0.045em] text-[#111114] sm:text-[80px]">
          <span className="block whitespace-nowrap">
            AI로 만든 <Tile src="tile-violet.webp" /> 화면을
          </span>
          <span className="block whitespace-nowrap">
            프롬프트 <Tile src="tile-pink.webp" /> 그대로
          </span>
          <span className="block whitespace-nowrap">
            다시 만드는 <Tile src="tile-cyan.webp" /> 곳
          </span>
        </h1>
        <p className="mx-auto mt-[26px] max-w-[540px] text-[15.5px] leading-[1.65] text-[#5c5c68] sm:text-[18px]">
          UI 블록, 인터랙션, 그래픽을 만든 프롬프트와 함께 모읍니다. 원하는 스택으로 복사해 바로 다시 만드세요.
        </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]"
          >
            Google로 시작하기
          </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]"
          >
            둘러보기 &rarr;
          </a>
        </div>
        <img src={`${ART}/hero-cards.webp`} alt="" className="mx-auto mt-6 block h-auto w-[min(760px,92vw)] sm:mt-[18px]" />
      </div>
    </section>
  );
}