Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,188 @@
|
||||
"use client";
|
||||
|
||||
import AutoScroll from "embla-carousel-auto-scroll";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/components/ui/carousel";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const BUTTON_LOGOS = [
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
|
||||
},
|
||||
];
|
||||
|
||||
const LOGOS = [
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-1.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-2.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-3.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-4.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-5.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-6.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-7.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-9.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-10.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-11.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-13.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-14.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-15.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-16.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-17.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-18.svg",
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/logos/integration/integration-8.svg",
|
||||
},
|
||||
];
|
||||
|
||||
interface Integration6Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Integration6 = ({ className }: Integration6Props) => {
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="dark flex flex-col gap-10 overflow-hidden rounded-xl bg-background py-4 md:py-10">
|
||||
<div className="flex w-full flex-col justify-between gap-5 px-10 py-5 lg:flex-row lg:items-end">
|
||||
<div className="flex-1">
|
||||
<div className="flex w-full max-w-[32rem] flex-col gap-5 text-start">
|
||||
<h2 className="text-[2rem] leading-none font-bold tracking-tight text-foreground md:text-[2.75rem] lg:text-2xll">
|
||||
رابطهای زیبا را سریع بسازید
|
||||
</h2>
|
||||
<p className="leading-[1.4] text-muted-foreground">
|
||||
از امروز با بلاکهای رابط کاربری قابلاستفاده مجدد طراحی را
|
||||
هوشمندانهتر کنید؛ در زمان صرفهجویی کنید، یکپارچگی را افزایش
|
||||
دهید و تجربه کاربری بهتری بسازید.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:self-end">
|
||||
<Button
|
||||
asChild
|
||||
className="h-fit w-full justify-between gap-4 rounded-full p-2.5 pe-5 shadow-[0_0_0_4px_#363636] transition-shadow hover:shadow-[0_0_0_4px_#4b4b4b] sm:w-fit sm:gap-28"
|
||||
variant="secondary"
|
||||
>
|
||||
<a href="#">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Carousel
|
||||
dir="rtl"
|
||||
opts={{ direction: "rtl" }}
|
||||
plugins={[
|
||||
Autoplay({
|
||||
delay: 2000,
|
||||
}),
|
||||
]}
|
||||
className="size-8 shrink-0 overflow-hidden rounded-full border border-white/20 bg-black/50"
|
||||
>
|
||||
<CarouselContent className="ms-0 size-7.5">
|
||||
{BUTTON_LOGOS.map((logo, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="flex size-7.5 overflow-hidden rounded-full p-0"
|
||||
>
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={`لوگوی یکپارچهسازی ${index + 1}`}
|
||||
className="m-auto block size-4.5 object-contain object-center"
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
<div>مشاهده همه کامپوننتها</div>
|
||||
</div>
|
||||
<ArrowRight className="rtl:rotate-180" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<Carousel
|
||||
dir="rtl"
|
||||
opts={{
|
||||
loop: true,
|
||||
watchDrag: false,
|
||||
container: "nav",
|
||||
direction: "rtl",
|
||||
}}
|
||||
plugins={[
|
||||
AutoScroll({
|
||||
speed: 0.5,
|
||||
}),
|
||||
]}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselContent>
|
||||
{LOGOS.map((logo, index) => (
|
||||
<CarouselItem key={index} className="h-8 basis-20 ps-12">
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={`لوگوی یکپارچهسازی ${index + 1}`}
|
||||
className="block size-full object-contain object-center"
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
<Separator />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Integration6 };
|
||||
Reference in New Issue
Block a user