78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ChevronRightIcon } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero201Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero201 = ({ className }: Hero201Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="relative container overflow-hidden md:py-32">
|
|
<div className="mb-4 flex items-center justify-center gap-4">
|
|
<img
|
|
className="size-6 dark:invert"
|
|
alt="لوگو"
|
|
src="/block-media/shadcnblocks/block/block-1.svg"
|
|
/>
|
|
<h2 className="text-center text-lg font-semibold tracking-tight text-foreground">
|
|
استفاده بدون پیچیدگی
|
|
</h2>
|
|
</div>
|
|
|
|
<h1 className="font-inter mx-auto max-w-4xl text-center text-[70px] leading-[65px] font-semibold tracking-tighter text-foreground md:text-[105px] md:leading-[96px]">
|
|
کامپوننتهای آماده و حرفهای
|
|
</h1>
|
|
|
|
<p className="mx-auto mt-6 max-w-3xl text-center text-xl text-muted-foreground">
|
|
صدها کامپوننت استاندارد و قابل سفارشیسازی را بدون نیاز به طراحی از ابتدا در پروژه خود استفاده کنید.
|
|
</p>
|
|
|
|
<div className="relative mt-8 flex flex-col items-center justify-center">
|
|
<Button className="w-75 rounded-2xl px-2 py-6 shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40]">
|
|
شروع رایگان
|
|
</Button>
|
|
<a
|
|
href="#"
|
|
className="group relative z-12 flex w-75 items-center justify-center rounded-2xl py-6 text-muted-foreground hover:bg-none"
|
|
>
|
|
درخواست نسخه نمایشی
|
|
<ChevronRightIcon className="ms-1 h-4 w-4 transition-all ease-in-out group-hover:ms-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -250, scale: 0.6 }}
|
|
animate={{ opacity: 100, y: 0, scale: 1 }}
|
|
transition={{ ease: "easeInOut", duration: 0.6 }}
|
|
className="absolute -top-80 -right-80 -z-10 hidden h-full w-240 items-center justify-center md:flex"
|
|
>
|
|
<img
|
|
className="infinite absolute w-full rotate-12 animate-[spin_15s_linear_infinite] dark:invert"
|
|
src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
|
|
alt="تصویر نمونه"
|
|
/>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 250, scale: 0.6 }}
|
|
animate={{ opacity: 100, y: 0, scale: 1 }}
|
|
transition={{ ease: "easeInOut", duration: 0.6 }}
|
|
className="-bottom-80 -left-80 -z-10 mt-32 -mb-24 flex h-full w-full items-center justify-center md:absolute md:w-240"
|
|
>
|
|
<img
|
|
className="infinite absolute w-full rotate-12 animate-[spin_15s_linear_infinite] dark:invert"
|
|
src="/block-media/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
|
|
alt="تصویر نمونه"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero201 };
|