ミニマルロゴクラウド

1export function LogoCloudMinimal001() {
2  const logos = [
3    { name: "Aether" },
4    { name: "Prism" },
5    { name: "Vertex" },
6    { name: "Lumina" },
7    { name: "Nexus" },
8    { name: "Cipher" },
9  ];
10
11  return (
12    <section className="bg-background py-24">
13      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
14        {/* ヘッダー */}
15        <div className="text-center">
16          <p className="text-[10px] font-medium uppercase tracking-[0.3em] text-muted-foreground">
17            Trusted Partners
18          </p>
19          <h2 className="mt-4 text-2xl font-light tracking-tight text-foreground">
20            信頼あるパートナーとの協業
21          </h2>
22        </div>
23
24        {/* ロゴグリッド */}
25        <div className="relative mt-16 border border-border/40 p-1">
26          {/* コーナードット */}
27          <div className="absolute left-2 top-2 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
28          <div className="absolute right-2 top-2 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
29          <div className="absolute bottom-2 left-2 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
30          <div className="absolute bottom-2 right-2 h-1.5 w-1.5 rounded-full bg-muted-foreground/20" />
31
32          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
33            {logos.map((logo, i) => (
34              <div
35                key={i}
36                className="group flex items-center justify-center border border-border/20 px-6 py-10 transition-colors hover:bg-foreground/[0.02]"
37              >
38                <div className="flex items-center gap-2">
39                  <svg
40                    className="h-5 w-5 text-foreground/20 transition-colors group-hover:text-foreground/40"
41                    viewBox="0 0 24 24"
42                    fill="none"
43                    stroke="currentColor"
44                    strokeWidth="1.5"
45                  >
46                    <rect x="3" y="3" width="18" height="18" rx="3" />
47                    <path d="M9 12h6M12 9v6" />
48                  </svg>
49                  <span className="text-sm font-light tracking-[0.1em] text-foreground/30 transition-colors group-hover:text-foreground/60">
50                    {logo.name}
51                  </span>
52                </div>
53              </div>
54            ))}
55          </div>
56        </div>
57
58        {/* フッターテキスト */}
59        <p className="mt-8 text-center text-xs tracking-wide text-muted-foreground/50">
60          100社以上のパートナー企業と協業しています
61        </p>
62      </div>
63    </section>
64  );
65}