アニメーションロゴクラウド

1"use client";
2
3export function LogoCloudAnimated001() {
4  const logos = [
5    { name: "Vercel", letter: "V" },
6    { name: "Stripe", letter: "S" },
7    { name: "Linear", letter: "L" },
8    { name: "Notion", letter: "N" },
9    { name: "Figma", letter: "F" },
10    { name: "Slack", letter: "S" },
11    { name: "Discord", letter: "D" },
12    { name: "GitHub", letter: "G" },
13  ];
14
15  // Duplicate logos for seamless infinite scroll
16  const duplicatedLogos = [...logos, ...logos];
17
18  return (
19    <section className="bg-background py-16 overflow-hidden border-y border-border">
20      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
21        {/* Header */}
22        <p className="text-center text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
23          Trusted by leading companies worldwide
24        </p>
25      </div>
26
27      {/* Animated Logo Marquee */}
28      <div className="relative mt-12">
29        {/* Gradient Overlays */}
30        <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-32 bg-gradient-to-r from-background to-transparent" />
31        <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-32 bg-gradient-to-l from-background to-transparent" />
32
33        {/* Scrolling Container */}
34        <div className="flex animate-[scroll_30s_linear_infinite]">
35          {duplicatedLogos.map((logo, index) => (
36            <div
37              key={`${logo.name}-${index}`}
38              className="mx-8 flex flex-shrink-0 items-center gap-3"
39            >
40              <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground transition-all duration-300 hover:border-border/80 hover:text-foreground">
41                <span className="text-lg font-semibold tracking-wider">{logo.letter}</span>
42              </div>
43              <span className="text-sm font-medium tracking-wide text-muted-foreground">
44                {logo.name}
45              </span>
46            </div>
47          ))}
48        </div>
49      </div>
50
51      <style jsx>{`
52        @keyframes scroll {
53          0% {
54            transform: translateX(0);
55          }
56          100% {
57            transform: translateX(-50%);
58          }
59        }
60      `}</style>
61    </section>
62  );
63}