return function HeroSplit() {
  return (
    <div className="w-full max-w-4xl overflow-hidden rounded-2xl border border-gray-200 bg-white">
      <div className="grid items-center gap-8 p-8 sm:p-10 lg:grid-cols-2 lg:gap-6">
        <div>
          <p className="text-xs font-bold tracking-[0.2em] text-amber-600 uppercase">
            Web Production
          </p>
          <h1 className="mt-4 text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-4xl">
            作って終わり、
            <br />
            にしないサイトを。
          </h1>
          <p className="mt-4 max-w-md text-sm leading-relaxed text-gray-500">
            中小企業のホームページ制作から公開後の集客改善まで。成果につながるサイトを、伴走型で。
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <a
              href="#"
              className="rounded-lg bg-amber-600 px-5 py-2.5 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-5 py-2.5 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>
          <dl className="mt-8 flex gap-8">
            <div>
              <dt className="text-xs text-gray-500">制作実績</dt>
              <dd className="text-xl font-bold text-gray-900">120<span className="text-sm">社+</span></dd>
            </div>
            <div>
              <dt className="text-xs text-gray-500">最短納期</dt>
              <dd className="text-xl font-bold text-gray-900">4<span className="text-sm">週間</span></dd>
            </div>
          </dl>
        </div>

        <div className="relative">
          <div className="absolute -inset-4 -z-10 rounded-3xl bg-gradient-to-br from-amber-100/60 to-orange-50" aria-hidden="true" />
          <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
            <div className="flex items-center gap-1.5 border-b border-gray-100 bg-gray-50 px-3 py-2">
              <span className="size-2 rounded-full bg-gray-300" />
              <span className="size-2 rounded-full bg-gray-300" />
              <span className="size-2 rounded-full bg-gray-300" />
            </div>
            <div className="space-y-3 p-4">
              <div className="h-16 rounded-lg bg-gradient-to-br from-amber-200 to-orange-100" />
              <div className="h-2.5 w-2/3 rounded bg-gray-200" />
              <div className="h-2 w-full rounded bg-gray-100" />
              <div className="h-2 w-5/6 rounded bg-gray-100" />
              <div className="grid grid-cols-3 gap-2 pt-1">
                <div className="h-10 rounded-lg bg-gray-100" />
                <div className="h-10 rounded-lg bg-gray-100" />
                <div className="h-10 rounded-lg bg-gray-100" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}