ロゴ付きテスティモニアル

1// acsim.appスタイル: コーナードット、subtle border
2// ロゴクラウドと引用を組み合わせたテスティモニアル
3// ダーク/ライトモード両対応
4export function TestimonialLogos001() {
5  const companies = [
6    { name: "Stripe", logo: "STRIPE" },
7    { name: "Vercel", logo: "VERCEL" },
8    { name: "Linear", logo: "LINEAR" },
9    { name: "Notion", logo: "NOTION" },
10    { name: "Figma", logo: "FIGMA" },
11    { name: "Raycast", logo: "RAYCAST" },
12  ];
13
14  const testimonials = [
15    {
16      content: "The best design system we've ever implemented.",
17      author: "Engineering Team",
18      company: "Stripe",
19    },
20    {
21      content: "Transformed how we build products at scale.",
22      author: "Design Team",
23      company: "Vercel",
24    },
25  ];
26
27  return (
28    <section className="bg-background py-24">
29      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
30        {/* Header */}
31        <div className="text-center">
32          <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
33            Trusted by
34          </p>
35          <h2 className="text-3xl font-light tracking-tight text-foreground">
36            Industry-leading teams
37          </h2>
38        </div>
39
40        {/* Logo Cloud */}
41        <div className="relative mt-16 border border-border bg-card/20 py-12">
42          {/* Corner dots */}
43          <div className="absolute left-3 top-3 h-1 w-1 rounded-full bg-muted-foreground/30" />
44          <div className="absolute right-3 top-3 h-1 w-1 rounded-full bg-muted-foreground/30" />
45          <div className="absolute bottom-3 left-3 h-1 w-1 rounded-full bg-muted-foreground/30" />
46          <div className="absolute bottom-3 right-3 h-1 w-1 rounded-full bg-muted-foreground/30" />
47
48          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-8 px-8">
49            {companies.map((company, index) => (
50              <span
51                key={index}
52                className="text-sm font-medium tracking-[0.2em] text-muted-foreground transition-colors hover:text-foreground"
53              >
54                {company.logo}
55              </span>
56            ))}
57          </div>
58        </div>
59
60        {/* Testimonials */}
61        <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
62          {testimonials.map((testimonial, index) => (
63            <div
64              key={index}
65              className="group relative border border-border/50 bg-card/10 p-8"
66            >
67              {/* Corner line accents */}
68              <div className="absolute left-0 top-0 h-4 w-px bg-border" />
69              <div className="absolute left-0 top-0 h-px w-4 bg-border" />
70              <div className="absolute bottom-0 right-0 h-4 w-px bg-border" />
71              <div className="absolute bottom-0 right-0 h-px w-4 bg-border" />
72
73              <p className="text-lg leading-relaxed tracking-wide text-muted-foreground">
74                &ldquo;{testimonial.content}&rdquo;
75              </p>
76
77              <div className="mt-6 flex items-center gap-2">
78                <span className="text-sm tracking-wide text-muted-foreground">
79                  {testimonial.author}
80                </span>
81                <span className="text-muted-foreground/50">—</span>
82                <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
83                  {testimonial.company}
84                </span>
85              </div>
86            </div>
87          ))}
88        </div>
89
90        {/* CTA */}
91        <div className="mt-16 flex justify-center">
92          <button className="group relative border border-border bg-transparent px-8 py-3 text-xs uppercase tracking-[0.2em] text-muted-foreground transition-colors hover:border-foreground/30 hover:text-foreground">
93            <span>View all customers</span>
94            <span className="ml-2 inline-block transition-transform group-hover:translate-x-1">
95              →
96            </span>
97          </button>
98        </div>
99      </div>
100    </section>
101  );
102}