マーキーロゴクラウド

1// パートナー企業データ
2const partners = [
3  { name: "Apex Systems", letter: "A" },
4  { name: "Bloom Digital", letter: "B" },
5  { name: "Cipher Works", letter: "C" },
6  { name: "Drift Studio", letter: "D" },
7  { name: "Echo Platform", letter: "E" },
8  { name: "Forge Logic", letter: "F" },
9  { name: "Grain Labs", letter: "G" },
10  { name: "Halo Cloud", letter: "H" },
11];
12
13// ロゴアイテムコンポーネント
14function LogoItem({ name, letter }: { name: string; letter: string }) {
15  return (
16    <div className="flex shrink-0 items-center gap-3 px-8">
17      <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground/50">
18        <span className="text-sm font-medium tracking-wider">{letter}</span>
19      </div>
20      <span className="whitespace-nowrap text-sm tracking-wide text-muted-foreground">
21        {name}
22      </span>
23    </div>
24  );
25}
26
27export function LogoCloudMarquee001() {
28  return (
29    <section className="relative bg-background py-28 border-t border-border">
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            Trusted By
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-md text-sm font-light leading-relaxed text-muted-foreground">
45            業界を問わず、成長を続ける企業のデジタル基盤として採用されています。
46          </p>
47        </div>
48      </div>
49
50      {/* マーキースクロール */}
51      <div className="mt-16 overflow-hidden">
52        {/* 上段：左から右 */}
53        <div className="relative">
54          {/* フェードエッジ */}
55          <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-24 bg-gradient-to-r from-background to-transparent" />
56          <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-24 bg-gradient-to-l from-background to-transparent" />
57
58          <div className="flex animate-[marquee_30s_linear_infinite] items-center py-4">
59            {/* 2回繰り返してシームレスにスクロール */}
60            {partners.map((p) => (
61              <LogoItem key={`a-${p.name}`} name={p.name} letter={p.letter} />
62            ))}
63            {partners.map((p) => (
64              <LogoItem key={`b-${p.name}`} name={p.name} letter={p.letter} />
65            ))}
66          </div>
67        </div>
68
69        {/* 区切り */}
70        <div className="mx-auto h-px max-w-5xl bg-border/20" />
71
72        {/* 下段：右から左 */}
73        <div className="relative">
74          <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-24 bg-gradient-to-r from-background to-transparent" />
75          <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-24 bg-gradient-to-l from-background to-transparent" />
76
77          <div className="flex animate-[marquee-reverse_35s_linear_infinite] items-center py-4">
78            {[...partners].reverse().map((p) => (
79              <LogoItem
80                key={`c-${p.name}`}
81                name={p.name}
82                letter={p.letter}
83              />
84            ))}
85            {[...partners].reverse().map((p) => (
86              <LogoItem
87                key={`d-${p.name}`}
88                name={p.name}
89                letter={p.letter}
90              />
91            ))}
92          </div>
93        </div>
94      </div>
95
96      {/* フッターテキスト */}
97      <div className="mx-auto mt-16 max-w-5xl px-4 sm:px-6 lg:px-8">
98        <div className="flex items-center justify-center gap-6">
99          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
100            500社以上の導入実績
101          </p>
102          <div className="h-3 w-px bg-border/40" />
103          <p className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
104            業界トップクラスの信頼性
105          </p>
106        </div>
107      </div>
108
109      {/* マーキーアニメーション用スタイル */}
110      <style
111        dangerouslySetInnerHTML={{
112          __html: `
113            @keyframes marquee {
114              0% { transform: translateX(0); }
115              100% { transform: translateX(-50%); }
116            }
117            @keyframes marquee-reverse {
118              0% { transform: translateX(-50%); }
119              100% { transform: translateX(0); }
120            }
121          `,
122        }}
123      />
124    </section>
125  );
126}