Files
reui-blocks/blocks/feature125.tsx
T

65 lines
2.3 KiB
TypeScript

"use client";
import { Check, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const checkedItems = [
"با هوش مصنوعی سریع‌تر تصمیم بگیرید",
"اتوماسیون AI",
"دستیار کسب‌وکار",
];
interface Feature125Props {
className?: string;
}
const Feature125 = ({ className }: Feature125Props) => {
return (
<section
dir="rtl"
lang="fa"
className={cn(
"container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
className,
)}
>
<div className="w-full text-start lg:w-[40%]">
<h2 className="mb-8 text-3xl font-bold">
کارهای تکراری را به AI بسپارید
</h2>
<p className="mb-10">
پیشنهادهایی که واقعاً مفیدند
</p>
<ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
{checkedItems.map((item) => (
<li className="flex items-center gap-2" key={item}>
<Check className="size-5 shrink-0" />
{item}
</li>
))}
</ul>
<Button variant="outline">
هوش مصنوعی
<ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
</Button>
</div>
<div className="relative flex h-[430px] w-full pt-4 pe-4 before:absolute before:inset-0 before:bg-primary/10 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/cross-pattern.svg')] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
<div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-70" />
<div className="relative mt-auto ms-auto w-[80%]">
<img
src="/block-media/shadcnblocks/block/placeholder-1.svg"
alt="دستیار هوش مصنوعی"
className="z-40 max-h-[350px] w-full rounded-md object-cover"
/>
</div>
<div className="absolute inset-0 z-50 bg-linear-to-l from-background via-transparent via-15%" />
<div className="absolute inset-0 z-50 bg-linear-to-t from-background via-transparent via-15%" />
</div>
</section>
);
};
export { Feature125 };