ティア別パートナーロゴクラウド

1export function LogoCloudTiered001() {
2  const premium = [
3    { name: "Aether Corp", letter: "A" },
4    { name: "Bloom Systems", letter: "B" },
5    { name: "Cipher Tech", letter: "C" },
6  ];
7
8  const standard = [
9    { name: "Delta AI", letter: "D" },
10    { name: "Echo Labs", letter: "E" },
11    { name: "Forge Inc", letter: "F" },
12    { name: "Glyph Studio", letter: "G" },
13    { name: "Helix Cloud", letter: "H" },
14    { name: "Iris Platform", letter: "I" },
15  ];
16
17  const starter = [
18    { name: "Jade Systems", letter: "J" },
19    { name: "Kite Works", letter: "K" },
20    { name: "Lumen AI", letter: "L" },
21    { name: "Nova Labs", letter: "N" },
22    { name: "Orbit Tech", letter: "O" },
23    { name: "Pulse Inc", letter: "P" },
24    { name: "Quartz Dev", letter: "Q" },
25    { name: "Rune Studio", letter: "R" },
26  ];
27
28  return (
29    <section className="bg-background py-28">
30      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
31        {/* ヘッダー */}
32        <div className="text-center">
33          <div className="mx-auto flex items-center justify-center gap-4">
34            <div className="h-px w-8 bg-border/40" />
35            <div className="h-1.5 w-1.5 rounded-full bg-foreground/20" />
36            <div className="h-px w-8 bg-border/40" />
37          </div>
38          <p className="mt-8 text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
39            Partnership Tiers
40          </p>
41          <h2 className="mt-3 text-xl font-medium tracking-wide text-foreground sm:text-2xl">
42            パートナーエコシステム
43          </h2>
44          <p className="mx-auto mt-4 max-w-lg text-sm font-light leading-relaxed text-muted-foreground">
45            業界をリードする企業との戦略的パートナーシップを通じて、最高水準のソリューションを提供します。
46          </p>
47        </div>
48
49        {/* プレミアムティア */}
50        <div className="mt-16">
51          <div className="flex items-center gap-3">
52            <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
53              Premium
54            </p>
55            <div className="h-px flex-1 bg-border/40" />
56          </div>
57          <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
58            {premium.map((partner) => (
59              <div
60                key={partner.name}
61                className="group relative flex items-center gap-4 border border-border px-6 py-8 transition-colors duration-300 hover:bg-muted/30"
62              >
63                <div className="absolute left-2 top-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
64                <div className="absolute bottom-2 right-2 h-1.5 w-1.5 rounded-full bg-foreground/10" />
65                <div className="flex h-12 w-12 shrink-0 items-center justify-center border border-border text-foreground/40 transition-colors duration-300 group-hover:border-foreground/20 group-hover:text-foreground/70">
66                  <span className="text-lg font-medium tracking-wider">
67                    {partner.letter}
68                  </span>
69                </div>
70                <div>
71                  <p className="text-sm font-medium tracking-wide text-foreground">
72                    {partner.name}
73                  </p>
74                  <p className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/40">
75                    Strategic Partner
76                  </p>
77                </div>
78              </div>
79            ))}
80          </div>
81        </div>
82
83        {/* スタンダードティア */}
84        <div className="mt-12">
85          <div className="flex items-center gap-3">
86            <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
87              Standard
88            </p>
89            <div className="h-px flex-1 bg-border/40" />
90          </div>
91          <div className="mt-6 grid grid-cols-2 gap-px overflow-hidden border border-border bg-border sm:grid-cols-3">
92            {standard.map((partner) => (
93              <div
94                key={partner.name}
95                className="group flex items-center justify-center gap-3 bg-background px-4 py-7 transition-colors duration-300 hover:bg-muted/30"
96              >
97                <div className="flex h-9 w-9 shrink-0 items-center justify-center border border-border text-muted-foreground/50 transition-colors duration-300 group-hover:border-foreground/20 group-hover:text-foreground/60">
98                  <span className="text-sm font-medium tracking-wider">
99                    {partner.letter}
100                  </span>
101                </div>
102                <span className="text-xs tracking-wide text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
103                  {partner.name}
104                </span>
105              </div>
106            ))}
107          </div>
108        </div>
109
110        {/* スターターティア */}
111        <div className="mt-12">
112          <div className="flex items-center gap-3">
113            <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/60">
114              Starter
115            </p>
116            <div className="h-px flex-1 bg-border/40" />
117          </div>
118          <div className="mt-6 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
119            {starter.map((partner) => (
120              <span
121                key={partner.name}
122                className="text-xs font-light tracking-[0.1em] text-muted-foreground/40 transition-colors duration-300 hover:text-foreground/60"
123              >
124                {partner.name}
125              </span>
126            ))}
127          </div>
128        </div>
129
130        {/* フッター */}
131        <div className="mt-16 flex items-center justify-center gap-6">
132          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
133            300社以上のパートナー
134          </p>
135          <div className="h-3 w-px bg-border/40" />
136          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
137            3つのティアプログラム
138          </p>
139          <div className="h-3 w-px bg-border/40" />
140          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
141            グローバル展開
142          </p>
143        </div>
144      </div>
145    </section>
146  );
147}