【Next.js】お客様の声セクションの作り方を導入事例カードの実装例で紹介

import Image from "next/image";
  
  const testimonials = [
    {
      quote: "問い合わせへの返信にかかる時間が、導入から2か月で半分になりました。",
      name: "山田 花子",
      role: "カスタマーサクセス責任者",
      company: "Acme 株式会社",
      avatar: "/avatars/yamada.jpg",
    },
    {
      quote: "LP の更新をエンジニアに頼まずに済むようになり、施策の回数が増えました。",
      name: "佐藤 健",
      role: "マーケティング部",
      company: "Globex 株式会社",
      avatar: "/avatars/sato.jpg",
    },
    {
      quote: "初日から迷わず使えました。社内の説明会を開く必要もありませんでした。",
      name: "鈴木 一郎",
      role: "代表取締役",
      company: "Initech 合同会社",
      avatar: "/avatars/suzuki.jpg",
    },
  ];
  
  export function Testimonials() {
    return (
      <section className="mx-auto max-w-6xl px-6 py-24">
        <h2 className="text-center text-3xl font-semibold">お客様の声</h2>
        <ul className="mt-12 grid gap-6 md:grid-cols-3">
          {testimonials.map((t) => (
            <li key={t.name}>
              <figure className="flex h-full flex-col rounded-2xl border border-zinc-200 bg-white p-6">
                <blockquote className="flex-1 leading-relaxed text-zinc-800">
                  <p>「{t.quote}」</p>
                </blockquote>
                <figcaption className="mt-6 flex items-center gap-3">
                  <Image src={t.avatar} alt="" width={40} height={40} className="size-10 rounded-full object-cover" />
                  <div className="text-sm">
                    <div className="font-medium">{t.name}</div>
                    <div className="text-zinc-500">{t.role}・{t.company}</div>
                  </div>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </section>
    );
  }

<ul className="mt-12 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-4">
    {testimonials.map((t) => (
      <li key={t.name} className="w-[85%] shrink-0 snap-start sm:w-[45%] lg:w-[30%]">
        {/* figure の中身はグリッド版と同じ */}
      </li>
    ))}
  </ul>

"use client";
  
  import { motion } from "motion/react";
  
  export function TestimonialCard({ index, children }: { index: number; children: React.ReactNode }) {
    return (
      <motion.li
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.5, delay: index * 0.1, ease: "easeOut" }}
      >
        {children}
      </motion.li>
    );
  }