Spaces:
Paused
Paused
File size: 2,019 Bytes
d530f14 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import { CurvyRect } from "@/components/shared/ui";
import Image from "@/components/shared/image/Image";
import "./Logocloud.css";
export default function Logocloud() {
// Create array starting from index 1, with 17-19 first, then 1-21
const logoIndices = [17, 18, ...Array.from({ length: 21 }, (_, i) => i + 1)];
return (
<div className="container relative -mt-1 lg:flex" data-allow-motion="true">
<div className="h-1 bottom-0 absolute left-0 w-full bg-border-faint" />
<div className="p-16 lg-max:text-center lg:p-40 relative">
<CurvyRect className="overlay" allSides />
<div className="text-body-large text-accent-black">
Trusted by{" "}
<span className="contents text-label-large text-heat-100">
5000+ <br /> companies
</span>{" "}
of all sizes
</div>
</div>
<div className="flex-1 lg-max:h-96 min-w-0 relative lg:-ml-1 lg-max:-mt-1">
<div className="h-full left-0 top-0 w-1 bg-border-faint absolute lg-max:w-full lg-max:h-1" />
<CurvyRect className="overlay" allSides />
<div className="w-full h-full overflow-x-clip">
<div className="w-max flex h-full logocloud-items">
{Array.from({ length: 2 }, (_, i) => (
<div className="flex h-full" key={i}>
{logoIndices.map((logoIndex, i) => (
<div
className="h-full aspect-[204/96] lg:aspect-[204/128] -ml-1 relative w-max"
key={i}
>
<Image
alt={`Logo ${logoIndex}`}
className="absolute object-cover w-full h-full"
src={`logocloud/${logoIndex}`}
raw
/>
<div className="overlay border-x border-border-faint" />
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
);
}
|