トラストロゴ

1export function TrustLogos001() {
2  const companies = [
3    { name: "Google", letter: "G" },
4    { name: "Meta", letter: "M" },
5    { name: "Apple", letter: "A" },
6    { name: "Amazon", letter: "A" },
7    { name: "Microsoft", letter: "M" },
8    { name: "Netflix", letter: "N" },
9  ];
10
11  const metrics = [
12    { value: "10M+", label: "Active Users" },
13    { value: "500+", label: "Enterprise Clients" },
14    { value: "99.9%", label: "Uptime SLA" },
15    { value: "24/7", label: "Support" },
16  ];
17
18  return (
19    <section className="bg-background py-20 border-y border-border">
20      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
21        {/* Companies */}
22        <div className="text-center">
23          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground/70">
24            Trusted by teams at
25          </p>
26          <div className="mt-10 flex flex-wrap items-center justify-center gap-8 lg:gap-16">
27            {companies.map((company) => (
28              <div
29                key={company.name}
30                className="flex items-center gap-2 text-muted-foreground transition-colors duration-200 hover:text-foreground"
31              >
32                <div className="flex h-8 w-8 items-center justify-center rounded-md border border-border bg-muted">
33                  <span className="text-sm font-semibold">{company.letter}</span>
34                </div>
35                <span className="text-sm font-medium tracking-wide">{company.name}</span>
36              </div>
37            ))}
38          </div>
39        </div>
40
41        {/* Divider */}
42        <div className="my-16 border-t border-border" />
43
44        {/* Metrics */}
45        <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
46          {metrics.map((metric) => (
47            <div key={metric.label} className="text-center">
48              <p className="text-3xl font-semibold tracking-wide text-foreground lg:text-4xl">
49                {metric.value}
50              </p>
51              <p className="mt-2 text-xs tracking-widest text-muted-foreground uppercase">
52                {metric.label}
53              </p>
54            </div>
55          ))}
56        </div>
57      </div>
58    </section>
59  );
60}