LogoCloud

Horizontal row of company names with separator dots

Marketing & Landinglogostrustsocial-proof

Dependencies

No additional dependencies needed.

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3export default function LogoCloud() {
4  const companies = ['Acme Corp', 'Globex', 'Initech', 'Umbrella', 'Stark Ind', 'Wayne Ent'];
5  
6  return (
7    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6 flex items-center">
8      <div className="container mx-auto max-w-5xl">
9        <div className="text-center mb-12">
10          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-3">
11            Trusted by industry leaders
12          </h2>
13          <p className="text-slate-400 text-lg">
14            Join thousands of companies that rely on our platform
15          </p>
16        </div>
17        
18        <div className="flex flex-wrap justify-center items-center gap-4 md:gap-8">
19          {companies.map((company, index) => (
20            <div key={company} className="flex items-center gap-4 md:gap-8">
21              <span className="text-xl md:text-2xl font-semibold text-slate-500 hover:text-slate-300 transition-colors cursor-default">
22                {company}
23              </span>
24              {index < companies.length - 1 && (
25                <div className="hidden md:block w-2 h-2 rounded-full bg-slate-700" />
26              )}
27            </div>
28          ))}
29        </div>
30        
31        <div className="mt-16 flex justify-center gap-8 text-center">
32          <div>
33            <p className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
34              500+
35            </p>
36            <p className="text-slate-400 mt-1">Companies</p>
37          </div>
38          <div>
39            <p className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
40              2M+
41            </p>
42            <p className="text-slate-400 mt-1">Users</p>
43          </div>
44          <div>
45            <p className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
46              99%
47            </p>
48            <p className="text-slate-400 mt-1">Satisfaction</p>
49          </div>
50        </div>
51      </div>
52    </div>
53  );
54}