332 lines
10 KiB
TypeScript
332 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import "swiper/css/effect-coverflow";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css";
|
|
import "swiper/css/effect-cards";
|
|
|
|
import AutoScroll from "embla-carousel-auto-scroll";
|
|
import { ArrowRight } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Autoplay, EffectCoverflow, Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero231Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero231 = ({ className }: Hero231Props) => {
|
|
const [domLoaded, setDomLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setDomLoaded(true);
|
|
}, []);
|
|
|
|
const images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "Joanna Doe",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "Joan Doe",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "مریم چناری",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "Joanna Doe",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "Joan Doe",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
|
|
alt: "تصویر نمونه",
|
|
name: "مریم چناری",
|
|
},
|
|
];
|
|
|
|
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",
|
|
},
|
|
];
|
|
|
|
const css = `
|
|
.mySwiperHero231 {
|
|
width: 100%;
|
|
min-width: 750px;
|
|
height: 100%;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.mySwiperHero231 .swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
width: 300px;
|
|
margin-top: 60px;
|
|
height: 420px;
|
|
}
|
|
|
|
.mySwiperHero231 .swiper-slide img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.swiper-3d .swiper-slide-shadow-left {
|
|
background-image: none;
|
|
}
|
|
.swiper-3d .swiper-slide-shadow-right{
|
|
background: none;
|
|
}
|
|
.swiper-pagination {
|
|
bottom: 10px !important;
|
|
width: 100% !important;
|
|
left: 0% !important;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.swiper-pagination {
|
|
width: fit-content !important;
|
|
left: 80% !important;
|
|
}
|
|
}
|
|
|
|
`;
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<style>{css}</style>
|
|
<div className="container mt-4 flex flex-col items-center justify-center gap-4 overflow-hidden text-start xl:mt-14 xl:flex-row xl:overflow-visible">
|
|
<div className="w-full space-y-10 xl:w-1/2">
|
|
<Button
|
|
variant="secondary"
|
|
className="items-left group flex w-fit 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 mt-12 text-2xll font-medium tracking-tight text-foreground md:text-2xll">
|
|
مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
|
|
</h1>
|
|
<p className="mt-3 max-w-lg text-muted-foreground/80">
|
|
صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
|
|
</p>
|
|
<div className="flex gap-4 xl:mt-32">
|
|
<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>
|
|
<div className="relative mt-36 h-145 w-full xl:mt-0 xl:w-3/5">
|
|
<div className="absolute -top-24 mx-auto flex items-center justify-center">
|
|
<Carousel
|
|
plugins={[AutoScroll({ playOnInit: true })]}
|
|
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/6 justify-center ps-0 opacity-30 xl:me-12"
|
|
>
|
|
<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="absolute inset-y-0 left-0 w-32 bg-gradient-to-r 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="mx-auto flex h-full items-center justify-center">
|
|
{domLoaded && (
|
|
<Swiper
|
|
spaceBetween={50}
|
|
autoplay={{
|
|
delay: 1500,
|
|
disableOnInteraction: false,
|
|
}}
|
|
effect="coverflow"
|
|
grabCursor={true}
|
|
centeredSlides={true}
|
|
loop={true}
|
|
slidesPerView={2.438}
|
|
coverflowEffect={{
|
|
rotate: 0,
|
|
stretch: 0,
|
|
depth: 100,
|
|
modifier: 2.5,
|
|
}}
|
|
className="mySwiperHero231"
|
|
modules={[EffectCoverflow, Autoplay, Pagination]}
|
|
pagination={{ clickable: true }}
|
|
>
|
|
{images.map((image, index) => (
|
|
<SwiperSlide key={index}>
|
|
<img
|
|
className="h-full w-full overflow-hidden rounded-3xl object-cover shadow-lg"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
)}
|
|
</div>
|
|
|
|
<div className="absolute top-0 right-0 -z-1 h-full w-full rounded-3xl bg-muted xl:top-1/2 xl:mt-4 xl:h-155 xl:w-9/10 xl:-translate-y-1/2" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero231 };
|