ロゴクラウド

1export function LogoCloud001() {
2  const logos = [
3    {
4      name: "Spotify",
5      svg: (
6        <svg className="h-8 w-auto" viewBox="0 0 167 52" fill="currentColor">
7          <path d="M83.996 26.312c-5.718-1.39-6.74-2.368-6.74-4.418 0-1.918 1.806-3.21 4.498-3.21 2.6 0 5.186 1.002 7.69 2.978.078.06.176.088.27.076a.345.345 0 00.248-.14l2.766-3.92a.353.353 0 00-.068-.478c-3.084-2.48-6.55-3.688-10.594-3.688-5.958 0-10.104 3.492-10.104 8.5 0 5.35 3.47 7.238 9.752 8.818 5.412 1.292 6.326 2.37 6.326 4.254 0 2.12-1.906 3.44-4.974 3.44-3.414 0-6.186-1.13-8.98-3.666a.358.358 0 00-.254-.09.35.35 0 00-.242.138l-3.046 3.752a.35.35 0 00.05.49c3.348 2.982 7.476 4.558 11.946 4.558 6.36 0 10.49-3.412 10.49-8.68 0-4.478-2.696-6.984-8.984-8.584zM28.174 14.014c-3.016 0-5.506 1.086-7.614 3.324V7.166a.35.35 0 00-.35-.352h-5.13a.35.35 0 00-.35.352v35.468a.35.35 0 00.35.35h5.13a.35.35 0 00.35-.35V27.6c0-4.382 2.384-7.06 6.22-7.06 3.746 0 5.97 2.612 5.97 7.002v14.792a.35.35 0 00.35.352h5.13a.35.35 0 00.35-.352V26.532c0-7.648-4.22-12.518-10.406-12.518zM60.076 14.014c-7.834 0-13.986 6.12-13.986 13.926 0 7.69 6.152 13.774 14.014 13.774 7.78 0 13.906-6.084 13.906-13.858 0-7.754-6.126-13.842-13.934-13.842zm0 22.16c-4.556 0-8.086-3.652-8.086-8.376 0-4.704 3.448-8.264 8.024-8.264 4.574 0 8.108 3.652 8.108 8.35 0 4.718-3.452 8.29-8.046 8.29zM108.358 14.014c-3.018 0-5.508 1.086-7.616 3.324V7.166a.35.35 0 00-.35-.352h-5.128a.35.35 0 00-.35.352v35.468a.35.35 0 00.35.35h5.128a.35.35 0 00.35-.35V27.6c0-4.382 2.384-7.06 6.22-7.06 3.748 0 5.972 2.612 5.972 7.002v14.792a.35.35 0 00.35.352h5.128a.35.35 0 00.35-.352V26.532c0-7.648-4.218-12.518-10.404-12.518zM134.682 14.014c-7.834 0-13.986 6.12-13.986 13.926 0 7.69 6.152 13.774 14.014 13.774 7.78 0 13.906-6.084 13.906-13.858 0-7.754-6.126-13.842-13.934-13.842zm0 22.16c-4.556 0-8.086-3.652-8.086-8.376 0-4.704 3.448-8.264 8.024-8.264 4.576 0 8.108 3.652 8.108 8.35 0 4.718-3.452 8.29-8.046 8.29zM159.31 14.014c-7.834 0-13.986 6.12-13.986 13.926 0 7.69 6.152 13.774 14.014 13.774 7.78 0 13.908-6.084 13.908-13.858 0-7.754-6.128-13.842-13.936-13.842zm0 22.16c-4.556 0-8.086-3.652-8.086-8.376 0-4.704 3.448-8.264 8.024-8.264 4.576 0 8.108 3.652 8.108 8.35 0 4.718-3.45 8.29-8.046 8.29zM9.626 23.298a22.014 22.014 0 00-9.626-2.22.35.35 0 00-.348.352v4.366a.35.35 0 00.298.348 16.482 16.482 0 017.2 1.66.35.35 0 00.478-.13l1.998-3.458a.35.35 0 00-.13-.478l.13-.44z" />
8        </svg>
9      ),
10    },
11    {
12      name: "Vercel",
13      svg: (
14        <svg className="h-6 w-auto" viewBox="0 0 116 100" fill="currentColor">
15          <path fillRule="evenodd" clipRule="evenodd" d="M57.5 0L115 100H0L57.5 0z" />
16        </svg>
17      ),
18    },
19    {
20      name: "Stripe",
21      svg: (
22        <svg className="h-8 w-auto" viewBox="0 0 60 25" fill="currentColor">
23          <path d="M59.64 14.28h-8.06c.19 1.93 1.6 2.55 3.2 2.55 1.64 0 2.96-.37 4.05-.95v3.32a12.56 12.56 0 01-4.56.75c-4.11 0-6.98-2.38-6.98-7.14 0-4.15 2.54-7.27 6.52-7.27 3.94 0 5.85 2.94 5.85 6.8 0 .63-.02 1.2-.02 1.94zm-5.87-5.5c-1.08 0-2.1.7-2.3 2.42h4.5c-.07-1.46-.73-2.42-2.2-2.42zM40.95 20h4.3V6.04h-4.3V20zm0-15.76h4.3V.5h-4.3v3.74zM37.06 6.53L36.94 6h-3.85V20h4.3v-8.47c.76-1.54 2.38-1.34 2.89-1.14V6.04c-.56-.17-2.49-.47-3.22 1.5zM27.65 2.4L23.4 3.36v13.8c0 2.66 1.96 4.6 4.6 4.6a7.95 7.95 0 002.27-.37v-3.34c-.4.14-2.43.64-2.43-1.06V9.63h2.43V6.04h-2.43V2.4zM15.1 9.88c0-.64.52-.89 1.38-.89.93 0 2.4.27 3.5.83V6.04a10.32 10.32 0 00-3.5-.59C13.14 5.45 11 7.2 11 10.08c0 4.37 5.9 3.66 5.9 5.55 0 .76-.66 1.01-1.59 1.01-1.37 0-3.13-.57-4.52-1.34v3.8c1.54.66 3.1 1.08 4.52 1.08 3.4 0 5.78-1.6 5.78-4.54 0-4.69-5.98-3.87-5.98-5.76z" />
24        </svg>
25      ),
26    },
27    {
28      name: "Linear",
29      svg: (
30        <svg className="h-6 w-auto" viewBox="0 0 100 100" fill="currentColor">
31          <path d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5765C17.7935 94.8089 3.09186 80.2079 1.22541 61.5228zM.00189135 46.8891c-.01764375.2833.00519424.5765.07734684.8765.13653124.5686.494975 1.0497 1.00264535 1.2852L86.4834 99.2448c1.7139.7954 3.5522-.9689 2.6826-2.5964L56.3238 39.6306c-.2216-.4148-.5873-.7256-1.0235-.8692-4.6439-1.5283-9.8266-2.1619-14.9685-1.7556-14.7089 1.1619-27.8238 10.9154-33.5704 26.1485-.5953 1.5773-2.4523 2.0827-3.5957.9552C1.08655 62.0428-.166848 55.1458.00189135 46.8891zM14.5765 24.9664c-.5291-.5291-1.382-.5349-1.9183-.0128C5.49797 31.0355.549919 39.7745.0281 49.3609c-.01768.3265.08445.6485.28573.9022.20126.2537.492.4207.81517.4682 1.00174.1472 1.92982-.5538 2.21626-1.5186 6.50962-21.9156 26.98524-36.5709 49.54594-35.4074.7907.0408 1.4893-.5083 1.5691-1.297.0798-.7888-.4535-1.5055-1.2319-1.6573-4.3609-.8503-8.8553-1.0776-13.33-1.0776-6.4636 0-13.0661.7829-19.1483 2.8637-1.4914.5096-2.7628-.7617-2.254-2.254 2.3076-6.7708 6.0758-12.6823 11.0326-17.436.5221-.5006.5163-1.3353-.0128-1.8644l-2.512-2.512z" />
32        </svg>
33      ),
34    },
35    {
36      name: "Notion",
37      svg: (
38        <svg className="h-8 w-auto" viewBox="0 0 100 100" fill="currentColor">
39          <path d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z" />
40          <path fill="#09090b" d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z" />
41        </svg>
42      ),
43    },
44    {
45      name: "Figma",
46      svg: (
47        <svg className="h-8 w-auto" viewBox="0 0 38 57" fill="none">
48          <path fill="#fff" d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" />
49          <path fill="#a1a1aa" d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" />
50          <path fill="#d4d4d8" d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" />
51          <path fill="#71717a" d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" />
52          <path fill="#52525b" d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" />
53        </svg>
54      ),
55    },
56  ];
57
58  return (
59    <section className="bg-zinc-950 py-20 border-y border-zinc-800/50">
60      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
61        {/* Header */}
62        <div className="text-center">
63          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
64            Trusted by industry leaders
65          </p>
66        </div>
67
68        {/* Logos Grid */}
69        <div className="mt-12 grid grid-cols-2 gap-8 sm:gap-12 md:grid-cols-3 lg:grid-cols-6">
70          {logos.map((logo) => (
71            <div
72              key={logo.name}
73              className="flex items-center justify-center text-zinc-600 opacity-60 transition-all duration-300 hover:text-white hover:opacity-100"
74            >
75              {logo.svg}
76            </div>
77          ))}
78        </div>
79
80        {/* Optional: Customer count */}
81        <div className="mt-14 text-center">
82          <p className="text-sm tracking-wide text-zinc-600">
83            Join <span className="font-medium text-white">5,000+</span> companies
84            already growing with us
85          </p>
86        </div>
87      </div>
88    </section>
89  );
90}