CTA Banner

return function CtaBanner() {
  return (
    <div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-amber-100 bg-gradient-to-br from-amber-50 to-orange-50 p-8 text-center sm:p-10">
      <p className="text-xs font-bold tracking-[0.2em] text-amber-600 uppercase">Contact</p>
      <h2 className="mt-3 text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
        まずは無料相談から、はじめませんか。
      </h2>
      <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-gray-600">
        現状のサイトの課題を整理し、改善の方向性をご提案します。相談だけでも歓迎です。
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
        <a
          href="#"
          className="rounded-lg bg-amber-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-amber-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
        >
          無料で相談する
        </a>
        <a
          href="#"
          className="rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-semibold text-gray-800 shadow-sm transition-colors hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
        >
          制作実績を見る
        </a>
      </div>
    </div>
  );
}