116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import AutoScroll from "embla-carousel-auto-scroll";
|
|
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Logos10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Logos10 = ({ className }: Logos10Props) => {
|
|
const logos = [
|
|
{
|
|
id: "logo-1",
|
|
description: "Logo 1",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-2",
|
|
description: "Logo 2",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-3",
|
|
description: "Logo 3",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-4",
|
|
description: "Logo 4",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-5",
|
|
description: "Logo 5",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-6",
|
|
description: "Logo 6",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|
className: "h-5 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-7",
|
|
description: "Logo 7",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
{
|
|
id: "logo-8",
|
|
description: "Logo 8",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
|
|
className: "h-7 w-auto dark:invert",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container mx-auto">
|
|
<h2 className="mb-8 max-w-4xl text-xl font-medium tracking-tighter text-foreground md:text-2xll lg:mb-16">
|
|
Our blocks are used by the world's best product teams.
|
|
</h2>
|
|
<div className="relative flex items-center justify-center">
|
|
<Carousel
|
|
opts={{ loop: true }}
|
|
plugins={[AutoScroll({ playOnInit: true })]}
|
|
>
|
|
<CarouselContent className="ml-0">
|
|
{logos.map((logo, index) => (
|
|
<CarouselItem
|
|
key={logo.id}
|
|
className="relative flex h-35 basis-1/2 justify-center border border-r-0 border-border pl-0 sm:basis-1/4 md:basis-1/3 lg:basis-1/6"
|
|
>
|
|
<div className="flex flex-col items-center justify-center lg:mx-10">
|
|
<p className="absolute top-2 left-2 text-xs tracking-tighter">
|
|
{(index + 1).toString().padStart(2, "0")}
|
|
</p>
|
|
<img
|
|
src={logo.image}
|
|
alt={logo.description}
|
|
className={logo.className}
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
<div className="absolute inset-y-0 left-0 w-32 bg-linear-to-r from-background to-transparent"></div>
|
|
<div className="absolute inset-y-0 right-0 w-32 bg-linear-to-l from-background to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Logos10 };
|