ロゴグリッド

1export function LogoCloudGrid001() {
2  const partners = [
3    { name: "Acme Corp", letter: "A" },
4    { name: "Beacon Inc", letter: "B" },
5    { name: "Catalyst", letter: "C" },
6    { name: "Delta Labs", letter: "D" },
7    { name: "Echo Systems", letter: "E" },
8    { name: "Flux Studio", letter: "F" },
9    { name: "Grove Tech", letter: "G" },
10    { name: "Horizon AI", letter: "H" },
11  ];
12
13  return (
14    <section className="bg-background py-24 border-t border-border">
15      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
16        {/* ヘッダー */}
17        <div className="text-center">
18          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
19            Partners
20          </p>
21          <h2 className="mt-3 text-lg font-medium tracking-wide text-foreground sm:text-xl">
22            信頼いただいているパートナー企業
23          </h2>
24        </div>
25
26        <div className="mx-auto mt-4 h-px max-w-24 bg-border/40" />
27
28        {/* ロゴグリッド */}
29        <div className="mt-14 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-4">
30          {partners.map((partner) => (
31            <div
32              key={partner.name}
33              className="group flex flex-col items-center justify-center gap-3 bg-background px-6 py-10 transition-colors duration-300 hover:bg-muted/50"
34            >
35              <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border text-muted-foreground transition-all duration-300 group-hover:border-foreground/20 group-hover:text-foreground">
36                <span className="text-base font-medium tracking-wider">
37                  {partner.letter}
38                </span>
39              </div>
40              <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60 transition-colors duration-300 group-hover:text-muted-foreground">
41                {partner.name}
42              </span>
43            </div>
44          ))}
45        </div>
46
47        {/* フッターテキスト */}
48        <p className="mt-10 text-center text-xs font-light tracking-wide text-muted-foreground/50">
49          他100社以上の企業様にご利用いただいています
50        </p>
51      </div>
52    </section>
53  );
54}