256 lines
9.0 KiB
TypeScript
256 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import AutoScroll from "embla-carousel-auto-scroll";
|
|
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero230Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero230 = ({ className }: Hero230Props) => {
|
|
const images = [
|
|
"/block-media/shadcnblocks/block/lummi/random14.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw9.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/random11.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/landscape5.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/random15.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw4.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw5.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw6.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw7.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw8.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/person1.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/person2.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/person3.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/random1.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/random11.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/bw1.jpeg",
|
|
"/block-media/shadcnblocks/block/lummi/random3.jpeg",
|
|
];
|
|
const logos = [
|
|
{
|
|
id: "logo-1",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-2",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-3",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-4",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-5",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-6",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|
className: "h-5 w-auto",
|
|
},
|
|
{
|
|
id: "logo-7",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-8",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-1",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-2",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-3",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-4",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-5",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-6",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
|
|
className: "h-5 w-auto",
|
|
},
|
|
{
|
|
id: "logo-7",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
{
|
|
id: "logo-8",
|
|
description: "لوگوی شریک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
|
|
className: "h-7 w-auto",
|
|
},
|
|
];
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container flex flex-col items-center justify-center gap-4 text-center">
|
|
<Button
|
|
variant="secondary"
|
|
className="group flex w-fit items-center justify-center gap-3 rounded-full bg-muted/70 px-5 py-1"
|
|
>
|
|
<span className="size-2.5 rounded-full bg-foreground" />
|
|
پلن مناسب برای هر تیم
|
|
</Button>
|
|
<h1 className="font-calSans max-w-3xl text-2xll font-medium tracking-tight text-foreground md:text-2xll">
|
|
مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
|
|
</h1>
|
|
<p className="mt-3 max-w-xl text-muted-foreground/80">
|
|
صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
|
|
</p>
|
|
<div className="mt-8 mb-12 flex gap-4">
|
|
<Button
|
|
variant="secondary"
|
|
className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
|
|
>
|
|
<span>مشاهده مستندات</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
|
|
>
|
|
<span>شروع رایگان</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="relative mx-auto flex items-center justify-center">
|
|
<Carousel
|
|
plugins={[
|
|
AutoScroll({
|
|
speed: 1,
|
|
startDelay: 0,
|
|
playOnInit: true,
|
|
stopOnInteraction: false,
|
|
stopOnMouseEnter: false,
|
|
}),
|
|
]}
|
|
opts={{ loop: true, align: "start" }}
|
|
>
|
|
<CarouselContent className="ms-0">
|
|
{logos.map((logo, index) => (
|
|
<CarouselItem
|
|
key={index}
|
|
className="relative me-6 flex h-15 basis-1/2 justify-center ps-0 opacity-30 sm:basis-1/4 md:basis-1/3 lg:basis-1/9"
|
|
>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<img
|
|
src={logo.image}
|
|
alt={logo.description}
|
|
className={logo.className}
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
<div className="bg-gradient-t o-r absolute inset-y-0 left-0 w-32 from-background to-transparent"></div>
|
|
<div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent"></div>
|
|
</div>
|
|
<div className="relative mx-auto -mt-12 flex items-center justify-center">
|
|
<Carousel
|
|
plugins={[
|
|
AutoScroll({
|
|
speed: 1,
|
|
startDelay: 0,
|
|
playOnInit: true,
|
|
stopOnInteraction: false,
|
|
stopOnMouseEnter: false,
|
|
}),
|
|
]}
|
|
opts={{ loop: true, align: "start" }}
|
|
>
|
|
<CarouselContent>
|
|
{images.map((image, index) => (
|
|
<CarouselItem
|
|
key={index}
|
|
className="relative flex basis-1/2 translate-y-18 cursor-grab justify-center active:cursor-grabbing sm:basis-1/4 md:basis-1/3 lg:basis-1/5"
|
|
>
|
|
<div className="easeOut mt-auto w-full overflow-hidden rounded-t-3xl border transition-all hover:-translate-y-18">
|
|
<img
|
|
src={image}
|
|
alt="تصویر نمونه"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero230 };
|