120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import {
|
|
DraggableCardBody,
|
|
DraggableCardContainer,
|
|
} from "@/components/aceternity/draggable-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero244Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero244 = ({ className }: Hero244Props) => {
|
|
const items = [
|
|
{
|
|
title: "مجموعه کنترلر",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img12.jpeg",
|
|
className: "absolute top-10 left-[20%] rotate-[-5deg]",
|
|
},
|
|
{
|
|
title: "مجموعه ژوئن",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img6.jpeg",
|
|
className: "absolute top-40 left-[25%] rotate-[-7deg]",
|
|
},
|
|
{
|
|
title: "حال‌وهوای تابستان",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img8.jpeg",
|
|
className: "absolute top-5 left-[40%] rotate-[8deg]",
|
|
},
|
|
{
|
|
title: "سبک شهری",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img9.jpeg",
|
|
className: "absolute top-32 left-[55%] rotate-[10deg]",
|
|
},
|
|
{
|
|
title: "نسخه کلاسیک",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img3.jpeg",
|
|
className: "absolute top-20 lg:right-[35%] rotate-[2deg]",
|
|
},
|
|
{
|
|
title: "سری پریمیوم",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img13.jpeg",
|
|
className: "absolute top-24 left-[45%] rotate-[-7deg]",
|
|
},
|
|
{
|
|
title: "نسخه محدود",
|
|
image:
|
|
"/block-media/shadcnblocks/block/guri3/img7.jpeg",
|
|
className: "absolute top-8 left-[30%] rotate-[4deg]",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative grid w-screen overflow-hidden border py-32 lg:min-h-screen",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-10 lg:grid lg:grid-cols-2">
|
|
<div className="flex flex-col items-center justify-center text-center lg:items-start lg:text-start">
|
|
<h1 className="font-calSans max-w-lg text-2xll">
|
|
کنترل کامل محصول سامانه ابری خود را در اختیار بگیرید
|
|
</h1>
|
|
<p className="mt-10 max-w-md text-muted-foreground">
|
|
صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
|
|
</p>
|
|
|
|
<div className="mt-10 flex gap-5">
|
|
<Button className="h-11 rounded-xl">
|
|
دسترسی نامحدود <ArrowRight className="-rotate-45 rtl:rotate-180" />
|
|
</Button>
|
|
<Button className="h-11 rounded-xl" variant="secondary">
|
|
آشنایی بیشتر <ArrowRight className="-rotate-45 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<DraggableCardContainer className="relative flex h-[80vh] w-full items-center justify-center lg:h-full">
|
|
<p className="font-calSans absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-xl text-muted-foreground">
|
|
به نسخه حرفه‌ای کتابخانه کامپوننت دسترسی پیدا کنید
|
|
</p>
|
|
{items.map((item) => (
|
|
<DraggableCardBody
|
|
key={item.title}
|
|
className={cn(
|
|
item.className,
|
|
"-translate-x-20 scale-75 rounded-2xl p-3 lg:translate-x-0 lg:scale-100",
|
|
)}
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="pointer-events-none relative z-10 h-82 w-80 rounded-2xl object-cover"
|
|
/>
|
|
<h3 className="mt-4 text-center text-xl tracking-tighter">
|
|
{item.title}
|
|
</h3>
|
|
</DraggableCardBody>
|
|
))}
|
|
</DraggableCardContainer>
|
|
</div>
|
|
<div className="absolute inset-0 flex h-full w-full items-center justify-between">
|
|
{Array.from({ length: 7 }).map((_, index) => (
|
|
<div key={index} className="h-full w-px bg-border"></div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero244 };
|