フィーチャーカード

const items = [
  {
    title: "Web集客支援",
    body: "アクセス解析と改善提案で、公開後もサイトの成果を伸ばし続けます。",
  },
  {
    title: "ホームページ制作",
    body: "目的とターゲットに合わせて、成果につながるサイトを設計・制作します。",
  },
];

return function FeatureCard() {
  return (
    <div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
      {items.map((item) => (
        <a
          key={item.title}
          href="#"
          className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:border-amber-200 hover:shadow-md"
        >
          <span
            className="absolute inset-x-0 top-0 h-0.5 w-0 bg-amber-500 transition-all duration-300 group-hover:w-full"
            aria-hidden="true"
          />
          <h3 className="text-base font-bold text-gray-900">{item.title}</h3>
          <p className="mt-2 text-sm leading-relaxed text-gray-500">{item.body}</p>
          <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-amber-700">
            詳しく見る
            <span className="transition-transform group-hover:translate-x-0.5">→</span>
          </span>
        </a>
      ))}
    </div>
  );
}