107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import AutoScroll from "embla-carousel-auto-scroll";
|
|
import { MoveRight } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import type { CarouselApi } from "@/components/ui/carousel";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const images = [
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-6.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
"/block-media/shadcnblocks/block/placeholder-6.svg",
|
|
];
|
|
|
|
interface Gallery7Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Gallery7 = ({ className }: Gallery7Props) => {
|
|
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
|
|
|
|
useEffect(() => {
|
|
if (!carouselApi) {
|
|
return;
|
|
}
|
|
carouselApi.reInit();
|
|
}, [carouselApi]);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24">
|
|
<div className="flex flex-col gap-8 text-start md:gap-12">
|
|
<h1 className="text-3xl font-bold md:text-xl">
|
|
زندگی بخشیدن به داده‌های شما با قدرت هوش مصنوعی
|
|
</h1>
|
|
</div>
|
|
<p className="text-start text-muted-foreground">
|
|
ما به قدرت هوش مصنوعی متکی هستیم. تیم ما از باتجربه‌ترین افراد در
|
|
این حوزه تشکیل شده و دائماً به دنبال روش‌های جدید برای فراتر رفتن
|
|
از مرزهای ممکن هستیم. ما تیمی از دانشمندان داده هستیم.
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="inline-flex items-center font-medium hover:underline md:col-span-2"
|
|
>
|
|
کاوش راهکارهای ما
|
|
<MoveRight className="ms-2 inline size-5 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="max-w-[100vw] overflow-x-hidden">
|
|
<Carousel
|
|
dir="rtl"
|
|
setApi={setCarouselApi}
|
|
opts={{
|
|
loop: true,
|
|
direction: "rtl",
|
|
}}
|
|
plugins={[
|
|
AutoScroll({
|
|
speed: 0.9,
|
|
}),
|
|
]}
|
|
className="pointer-events-none"
|
|
>
|
|
<CarouselContent className="-ms-4 me-0">
|
|
{images.map((image, index) => (
|
|
<CarouselItem key={index} className="basis-auto ps-4 pe-0">
|
|
<div className="max-h-80 max-w-60">
|
|
<img
|
|
src={image}
|
|
alt={`تصویر گالری ${(index + 1).toLocaleString("fa-IR")}`}
|
|
className={cn(
|
|
"mt-7 h-full w-full rounded-md object-cover",
|
|
index % 2 === 0 && "mt-16",
|
|
)}
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Gallery7 };
|