86 lines
4.9 KiB
TypeScript
86 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature149Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature149 = ({ className }: Feature149Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative w-full max-w-full overflow-hidden py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container min-w-0 max-w-full">
|
|
<div className="relative isolate flex w-full min-w-0 flex-col gap-3 md:flex-row md:gap-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
|
|
alt="دستیار هوش مصنوعی"
|
|
className="absolute inset-0 z-[-1] hidden size-full rounded-2xl object-cover md:block"
|
|
/>
|
|
|
|
<div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
|
|
alt=""
|
|
aria-hidden
|
|
className="absolute inset-0 z-[-2] size-full object-cover md:hidden"
|
|
/>
|
|
<div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-b from-black/40 to-black/50 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/40 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
|
|
<Button
|
|
variant="outline"
|
|
className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
|
|
>
|
|
دستهبندی خودکار
|
|
</Button>
|
|
<h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
|
|
با هوش مصنوعی سریعتر تصمیم بگیرید
|
|
</h2>
|
|
<p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
|
|
درخواستها را خودکار دستهبندی کنید و به تیم مناسب بفرستید. کارهای
|
|
تکراری را به AI بسپارید.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative hidden h-[600px] w-5 shrink-0 bg-background md:block">
|
|
<div className="absolute top-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_-10px_0_0_var(--background)]" />
|
|
<div className="absolute top-0 end-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[10px_-10px_0_0_var(--background)]" />
|
|
<div className="absolute bottom-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_10px_0_0_var(--background)]" />
|
|
<div className="absolute end-[-40px] bottom-0 h-[40px] w-[40px] rounded-[1rem] shadow-[10px_10px_0_0_var(--background)]" />
|
|
</div>
|
|
|
|
<div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
|
|
alt=""
|
|
aria-hidden
|
|
className="absolute inset-0 z-[-2] size-full object-cover object-[center_70%] md:hidden"
|
|
/>
|
|
<div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-t from-black/50 to-black/40 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/40 group-hover:to-black/30 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
|
|
<Button
|
|
variant="outline"
|
|
className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
|
|
>
|
|
اتوماسیون AI
|
|
</Button>
|
|
<h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
|
|
پیشنهادهایی که واقعاً مفیدند
|
|
</h2>
|
|
<p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
|
|
داده را به بینش عملی تبدیل کنید
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature149 };
|