ショーケース型ロゴクラウド

1export function LogoCloudShowcase001() {
2  const featured = [
3    { name: "Apex Studio", letter: "A" },
4    { name: "Bloom Tech", letter: "B" },
5    { name: "Cipher Labs", letter: "C" },
6  ];
7
8  const partners = [
9    { name: "Delta Systems", letter: "D" },
10    { name: "Echo Finance", letter: "E" },
11    { name: "Forge AI", letter: "F" },
12    { name: "Glyph Design", letter: "G" },
13    { name: "Helix Cloud", letter: "H" },
14    { name: "Iris Platform", letter: "I" },
15  ];
16
17  return (
18    <section className="bg-background py-28 border-t border-border">
19      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
20        {/* ヘッダー */}
21        <div className="text-center">
22          <div className="mx-auto flex items-center justify-center gap-4">
23            <div className="h-px w-8 bg-border/40" />
24            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
25            <div className="h-px w-8 bg-border/40" />
26          </div>
27          <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
28            Trusted Partners
29          </p>
30          <h2 className="mt-3 text-xl font-medium tracking-wide text-foreground sm:text-2xl">
31            業界をリードする企業との連携
32          </h2>
33          <p className="mx-auto mt-4 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
34            多くの先進的な企業にご採用いただき、共にイノベーションを推進しています。
35          </p>
36        </div>
37
38        {/* フィーチャードパートナー */}
39        <div className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-3">
40          {featured.map((partner) => (
41            <div
42              key={partner.name}
43              className="group flex flex-col items-center gap-4 rounded-lg border border-border bg-background px-6 py-10 transition-colors duration-300 hover:bg-muted/30"
44            >
45              <div className="flex h-16 w-16 items-center justify-center rounded-full border border-border text-foreground/60 transition-all duration-300 group-hover:border-foreground/20 group-hover:text-foreground">
46                <span className="text-xl font-medium tracking-wider">
47                  {partner.letter}
48                </span>
49              </div>
50              <div className="text-center">
51                <span className="text-sm font-medium tracking-wide text-foreground">
52                  {partner.name}
53                </span>
54                <p className="mt-1.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50">
55                  Strategic Partner
56                </p>
57              </div>
58            </div>
59          ))}
60        </div>
61
62        {/* 区切り線 */}
63        <div className="mx-auto my-12 flex items-center justify-center gap-3">
64          <div className="h-px w-12 bg-border/40" />
65          <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/40">
66            And More
67          </p>
68          <div className="h-px w-12 bg-border/40" />
69        </div>
70
71        {/* その他パートナー */}
72        <div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-3">
73          {partners.map((partner) => (
74            <div
75              key={partner.name}
76              className="group flex items-center justify-center gap-3 bg-background px-4 py-8 transition-colors duration-300 hover:bg-muted/30"
77            >
78              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-border text-muted-foreground transition-all duration-300 group-hover:border-foreground/20 group-hover:text-foreground">
79                <span className="text-sm font-medium tracking-wider">
80                  {partner.letter}
81                </span>
82              </div>
83              <span className="text-xs tracking-wide text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
84                {partner.name}
85              </span>
86            </div>
87          ))}
88        </div>
89
90        {/* フッターテキスト */}
91        <div className="mt-12 flex items-center justify-center gap-6">
92          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
93            200社以上の導入実績
94          </p>
95          <div className="h-3 w-px bg-border/40" />
96          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
97            99.9%の顧客満足度
98          </p>
99        </div>
100      </div>
101    </section>
102  );
103}