Logo Cloud 1

1"use client";
2 
3import {
4  Canpoy,
5  Canva,
6  Casetext,
7  Clearbit,
8  Descript,
9  Duolingo,
10  Faire,
11  IDEO,
12  KhanAcademy,
13  Quizlet,
14  Ramp,
15  Strava,
16} from "@/components/smoothui/shared";
17 
18const LOGOS = [
19  <Canpoy key="1" />,
20  <Canva key="2" />,
21  <Casetext key="3" />,
22  <Strava key="4" />,
23  <Descript key="5" />,
24  <Duolingo key="6" />,
25  <Faire key="7" />,
26  <Clearbit key="8" />,
27  <IDEO key="9" />,
28  <KhanAcademy key="10" />,
29  <Quizlet key="11" />,
30  <Ramp key="12" />,
31];
32 
33interface LogoCloudSimpleProps {
34  count?: number;
35  description?: string;
36  title?: string;
37}
38 
39export function LogoCloudSimple({
40  title = "You're in good company",
41  description = "Trusted by leading teams from around the world",
42  count = 4,
43}: LogoCloudSimpleProps) {
44  const logos = LOGOS.slice(0, count);
45 
46  return (
47    <section className="bg-background py-16">
48      <div className="mx-auto max-w-5xl px-6">
49        <div className="mx-auto mb-12 max-w-xl text-balance text-center md:mb-16">
50          <h2 className="font-semibold text-4xl">{title}</h2>
51          <p className="mt-4 text-lg text-muted-foreground">{description}</p>
52        </div>
53        <div className="mx-auto grid max-w-5xl grid-cols-2 items-center gap-8 md:grid-cols-4">
54          {logos.map((logo) => (
55            <div
56              className="flex items-center justify-center opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100"
57              key={logo.key}
58            >
59              {logo}
60            </div>
61          ))}
62        </div>
63      </div>
64    </section>
65  );
66}
67 
68export default LogoCloudSimple;