フィーチャードテスティモニアル

1export function TestimonialFeatured001() {
2  const featured = {
3    quote:
4      "導入から半年で業務効率が劇的に改善しました。チーム全体の生産性が向上し、これまで手作業で行っていたプロセスが自動化されたことで、本質的な業務に集中できるようになりました。",
5    name: "田中 美咲",
6    role: "プロダクトマネージャー",
7    company: "Aether Technologies",
8  };
9
10  const supporting = [
11    {
12      quote:
13        "シンプルなインターフェースと強力な機能の両立。技術チームからの評価も非常に高いです。",
14      name: "佐藤 健一",
15      role: "CTO",
16      company: "Prism Labs",
17    },
18    {
19      quote:
20        "サポート体制が素晴らしく、導入時の不安を完全に払拭してくれました。信頼できるパートナーです。",
21      name: "山田 優子",
22      role: "事業部長",
23      company: "Vertex Inc",
24    },
25    {
26      quote:
27        "柔軟なカスタマイズ性が決め手でした。私たちの独自のワークフローに完全に適応しています。",
28      name: "鈴木 大輔",
29      role: "エンジニアリングリード",
30      company: "Lumina Systems",
31    },
32  ];
33
34  return (
35    <section className="bg-background py-28">
36      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
37        {/* ヘッダー */}
38        <div className="text-center">
39          <div className="mx-auto flex items-center justify-center gap-4">
40            <div className="h-px w-8 bg-border/40" />
41            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
42            <div className="h-px w-8 bg-border/40" />
43          </div>
44          <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
45            Testimonials
46          </p>
47          <h2 className="mt-3 text-xl font-medium tracking-wide text-foreground sm:text-2xl">
48            お客様の声
49          </h2>
50        </div>
51
52        {/* フィーチャードテスティモニアル */}
53        <div className="relative mt-16 border border-border px-6 py-12 sm:px-12 sm:py-16">
54          <div className="absolute left-2 top-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
55          <div className="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
56          <div className="absolute bottom-2 left-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
57          <div className="absolute bottom-2 right-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
58
59          <svg
60            className="mx-auto h-6 w-6 text-foreground/10"
61            fill="currentColor"
62            viewBox="0 0 24 24"
63          >
64            <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z" />
65          </svg>
66
67          <blockquote className="mx-auto mt-6 max-w-2xl text-center text-base font-light leading-relaxed text-foreground sm:text-lg">
68            {featured.quote}
69          </blockquote>
70
71          <div className="mt-8 h-px bg-border/30" />
72
73          <div className="mt-6 text-center">
74            <p className="text-sm font-medium tracking-wide text-foreground">
75              {featured.name}
76            </p>
77            <p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
78              {featured.role} — {featured.company}
79            </p>
80          </div>
81        </div>
82
83        {/* サポーティングテスティモニアル */}
84        <div className="mt-8 grid grid-cols-1 gap-px overflow-hidden border border-border bg-border sm:grid-cols-3">
85          {supporting.map((item) => (
86            <div
87              key={item.name}
88              className="flex flex-col justify-between bg-background px-6 py-8"
89            >
90              <p className="text-sm font-light leading-relaxed text-muted-foreground">
91                &ldquo;{item.quote}&rdquo;
92              </p>
93              <div className="mt-6">
94                <div className="h-px bg-border/30" />
95                <div className="mt-4">
96                  <p className="text-xs font-medium tracking-wide text-foreground">
97                    {item.name}
98                  </p>
99                  <p className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50">
100                    {item.role}
101                  </p>
102                  <p className="mt-0.5 text-[10px] tracking-[0.15em] text-muted-foreground/40">
103                    {item.company}
104                  </p>
105                </div>
106              </div>
107            </div>
108          ))}
109        </div>
110
111        {/* フッターテキスト */}
112        <div className="mt-10 flex items-center justify-center gap-6">
113          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
114            導入企業 200社以上
115          </p>
116          <div className="h-3 w-px bg-border/40" />
117          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
118            顧客満足度 98.5%
119          </p>
120        </div>
121      </div>
122    </section>
123  );
124}