スタック型ロゴクラウド

1export function LogoCloudStacked001() {
2  const premium = [
3    { name: "Zenith Corp", letter: "Z" },
4    { name: "Orion Labs", letter: "O" },
5    { name: "Vantage AI", letter: "V" },
6  ];
7
8  const standard = [
9    { name: "Arc Systems", letter: "A" },
10    { name: "Flux Design", letter: "F" },
11    { name: "Kite Studio", letter: "K" },
12    { name: "Nova Cloud", letter: "N" },
13    { name: "Pulse Tech", letter: "P" },
14    { name: "Reef Data", letter: "R" },
15  ];
16
17  return (
18    <section className="relative bg-background py-28">
19      <div className="absolute left-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
20      <div className="absolute right-6 top-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
21      <div className="absolute bottom-6 left-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
22      <div className="absolute bottom-6 right-6 h-1.5 w-1.5 rounded-full bg-foreground/20" />
23
24      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
25        {/* ヘッダー */}
26        <div className="mb-20">
27          <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
28            Partners
29          </p>
30          <div className="mt-4 h-px w-12 bg-border/40" />
31          <h2 className="mt-6 text-2xl font-light tracking-wide text-foreground sm:text-3xl">
32            信頼のパートナーシップ
33          </h2>
34          <p className="mt-4 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
35            業界をリードする企業とともに、新しい価値の創出に取り組んでいます。
36          </p>
37        </div>
38
39        {/* プレミアムパートナー */}
40        <div className="space-y-px">
41          {premium.map((partner, index) => (
42            <div
43              key={partner.name}
44              className="group flex items-center gap-6 border border-border/30 bg-background px-6 py-8 transition-colors duration-300 hover:bg-muted/20 sm:px-8"
45            >
46              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-border/40 transition-colors duration-300 group-hover:border-foreground/20">
47                <span className="text-lg font-light tracking-wider text-foreground/50 transition-colors duration-300 group-hover:text-foreground">
48                  {partner.letter}
49                </span>
50              </div>
51              <div className="flex flex-1 items-center justify-between">
52                <div>
53                  <p className="text-sm font-medium tracking-wide text-foreground">
54                    {partner.name}
55                  </p>
56                  <p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50">
57                    Premium Partner
58                  </p>
59                </div>
60                <div className="hidden items-center gap-2 sm:flex">
61                  <div className="h-px w-8 bg-border/30 transition-all duration-300 group-hover:w-12 group-hover:bg-foreground/20" />
62                  <span className="text-[10px] tabular-nums tracking-[0.15em] text-muted-foreground/40">
63                    {String(index + 1).padStart(2, "0")}
64                  </span>
65                </div>
66              </div>
67            </div>
68          ))}
69        </div>
70
71        {/* 区切り */}
72        <div className="my-12 flex items-center gap-4">
73          <div className="h-px flex-1 bg-border/20" />
74          <div className="h-1 w-1 rounded-full bg-foreground/15" />
75          <div className="h-px flex-1 bg-border/20" />
76        </div>
77
78        {/* スタンダードパートナー */}
79        <div className="grid grid-cols-1 gap-px sm:grid-cols-2">
80          {standard.map((partner) => (
81            <div
82              key={partner.name}
83              className="group flex items-center gap-4 px-6 py-5 transition-colors duration-300 hover:bg-muted/10"
84            >
85              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border/30 transition-colors duration-300 group-hover:border-foreground/15">
86                <span className="text-xs font-light tracking-wider text-foreground/30 transition-colors duration-300 group-hover:text-foreground/60">
87                  {partner.letter}
88                </span>
89              </div>
90              <span className="text-xs tracking-wide text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
91                {partner.name}
92              </span>
93            </div>
94          ))}
95        </div>
96
97        {/* フッター */}
98        <div className="mt-16 flex items-center justify-center gap-6">
99          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
100            150社以上のパートナー企業
101          </p>
102          <div className="h-3 w-px bg-border/30" />
103          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
104            グローバル展開
105          </p>
106        </div>
107      </div>
108    </section>
109  );
110}