45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
interface Hero58Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero58 = ({ className }: Hero58Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid items-center gap-10 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-8 lg:gap-12">
|
|
<h1 className="text-2xll font-semibold lg:text-2xll">
|
|
فضای کاری <br />
|
|
<span className="mx-1 inline-block whitespace-nowrap">
|
|
در هر مکان.
|
|
</span>
|
|
</h1>
|
|
<p className="text-muted-foreground lg:text-lg">
|
|
از هر دستگاه و هر مکان به پروژهها دسترسی داشته باشید و همکاری تیمی را بدون محدودیت ادامه دهید.
|
|
</p>
|
|
<Button size="lg" className="w-fit">
|
|
شروع رایگان
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,var(--muted)_1px,transparent_1px),linear-gradient(to_bottom,var(--muted)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-[size:64px_64px]"></div>
|
|
{/* illustrations available from https://icons8.com/illustrations/style--tokyo */}
|
|
<img
|
|
src="/block-media/shadcnblocks/block/illustrations/tokyo-selecting-the-elements-of-the-horizontal-graph-chart.svg"
|
|
alt="تصویر نمونه"
|
|
className="mx-auto max-h-[600px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero58 };
|