Social Proof 01

1import { LogosCarousel } from "@/registry/components/logos-carousel"
2 
3export default function SocialProof01() {
4  return (
5    <div className="max-w-screen overflow-x-clip">
6      <div className="@container container mx-auto px-4">
7        <div className="border-x border-line py-8">
8          <div className="screen-line-top screen-line-bottom">
9            <h2 className="ml-4 py-4 text-center text-sm font-medium tracking-wide text-muted-foreground @2xl:text-base/none">
10              Trusted by people at
11            </h2>
12 
13            <div className="screen-line-top relative">
14              <div
15                className="pointer-events-none absolute inset-0 grid grid-cols-3 @2xl:grid-cols-4"
16                aria-hidden
17              >
18                <div className="border-r border-dashed border-line" />
19                <div className="border-r border-dashed border-line" />
20                <div className="border-r border-dashed border-line @max-2xl:hidden" />
21              </div>
22 
23              {/* A full rotation runs past seven seconds, far longer than a
24                  phone spends scrolling by, so narrow viewports get every logo
25                  at once. Wider ones keep this list in the accessibility tree
26                  and let the carousel handle the visuals, since the carousel
27                  only ever holds a third of the logos in the DOM. */}
28              <ul className="grid grid-cols-3 gap-y-4 py-4 text-foreground @2xl:sr-only">
29                {COMPANY_LIST.map((company) => (
30                  <li key={company.name}>
31                    <company.logo
32                      className="h-auto w-full"
33                      role="img"
34                      aria-label={company.name}
35                    />
36                  </li>
37                ))}
38              </ul>
39 
40              <div className="@max-2xl:hidden" aria-hidden>
41                <LogosCarousel className="py-4 text-foreground [--column-count:4]">
42                  {COMPANY_LIST.map((company) => (
43                    <company.logo
44                      key={company.name}
45                      className="h-auto w-full"
46                    />
47                  ))}
48                </LogosCarousel>
49              </div>
50            </div>
51          </div>
52        </div>
53      </div>
54    </div>
55  )
56}
57 
58const COMPANY_LIST = [
59  {
60    name: "Vercel",
61    logo: function (props: React.ComponentProps<"svg">) {
62      return (
63        <svg viewBox="0 0 320 96" {...props}>
64          <path
65// … truncated