71 lines
3.9 KiB
TypeScript
71 lines
3.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("py-32", className)}>
|
|
<div className="container">
|
|
<div className="relative isolate flex flex-col md:flex-row md:gap-0">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
|
|
alt="دستیار هوش مصنوعی"
|
|
className="absolute top-0 start-0 z-[-1] h-full w-full rounded-2xl object-cover"
|
|
/>
|
|
|
|
<div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3">
|
|
<div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-t-[20px] bg-linear-to-b from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
|
|
>
|
|
درخواستها را خودکار دستهبندی کنید و به تیم مناسب بفرستید.
|
|
</Button>
|
|
<h1 className="text-3xl font-bold text-white md:text-2xll">
|
|
با هوش مصنوعی سریعتر تصمیم بگیرید
|
|
</h1>
|
|
<p className="max-w-md text-start text-white/90">
|
|
کارهای تکراری را به AI بسپارید
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative hidden h-[600px] w-5 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 h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3"
|
|
onClick={() => {
|
|
console.log("click");
|
|
}}
|
|
>
|
|
<div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-b-[20px] bg-linear-to-t from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
|
|
>
|
|
اتوماسیون AI
|
|
</Button>
|
|
<h1 className="text-3xl font-bold text-white md:text-2xll">
|
|
پیشنهادهایی که واقعاً مفیدند
|
|
</h1>
|
|
<p className="max-w-md text-start text-white/90">
|
|
داده را به بینش عملی تبدیل کنید
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature149 };
|