PLOT. 블루 가입 유도 띠

/** PLOT. 가입 유도 띠: 블루 바탕 가운데 2줄 문구와 버튼 2개, 큰 화면에서 좌우에 반투명 흰 원 장식 */
export default function Cta() {
  return (
    <section className="relative w-full overflow-hidden bg-[#0055FF] px-5 py-28 text-center text-white">
      <svg aria-hidden viewBox="0 0 640 640" fill="none" className="absolute top-1/2 -left-24 hidden w-80 -translate-y-1/2 lg:block">
        <circle cx="320" cy="320" r="230" stroke="#FFFFFF" strokeOpacity=".22" strokeWidth="64" />
        <circle cx="560" cy="540" r="36" fill="#FFFFFF" />
      </svg>
      <svg aria-hidden viewBox="0 0 640 640" fill="none" className="absolute top-1/2 -right-24 hidden w-80 -translate-y-1/2 lg:block">
        <path d="M120 120H360A120 120 0 0 1 360 360H200V520" stroke="#FFFFFF" strokeOpacity=".22" strokeWidth="64" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="480" cy="500" r="36" fill="#FFFFFF" />
      </svg>
      <div className="relative">
        <p className="text-[28px] font-light tracking-[-0.04em] md:text-[44px]">PLOT이 만드는</p>
        <h2 className="mt-1 text-[30px] font-bold tracking-[-0.04em] break-keep md:text-[48px]">우리 회사 브랜드를 직접 경험해 보세요!</h2>
        <div className="mt-10 flex flex-wrap justify-center gap-4">
          <a href="#" className="rounded-full bg-white px-10 py-4 text-lg font-bold text-[#0055FF] transition-colors hover:bg-white/90">
            무료로 시작하기
          </a>
          <a href="#pricing" className="rounded-full px-10 py-[14px] text-lg font-bold text-white ring-2 ring-white/70 ring-inset transition-colors hover:bg-white/10">
            요금 보기
          </a>
        </div>
      </div>
    </section>
  );
}