79 lines
4.2 KiB
TypeScript
79 lines
4.2 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Compare5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Compare5 = ({ className }: Compare5Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("py-32 text-start", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-medium sm:text-xl md:text-2xll lg:text-2xll">
|
|
مقایسه روش سنتی و مدرن
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-3xl text-lg text-muted-foreground sm:mt-6 sm:text-xl">
|
|
مزایا، محدودیت‌ها و ارزش هر رویکرد را برای انتخاب بهتر بررسی کنید.
|
|
</p>
|
|
</div>
|
|
<div className="relative mt-8 grid gap-6 sm:mt-10 md:mt-12 lg:grid-cols-2 lg:gap-10 xl:gap-14">
|
|
<div className="relative h-full">
|
|
<div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl bg-accent sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
|
|
alt="تیم متخصص پروژه را برای شما می‌سازد"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
|
|
<div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
|
|
<h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
|
|
اجرای پروژه توسط تیم متخصص
|
|
</h3>
|
|
<p className="mt-2 text-sm text-white/80 sm:text-base">
|
|
بگذارید تیم متخصص ما همه‌چیز را برایتان انجام دهد. کل فرآیند
|
|
توسعه را از ابتدا تا انتها مدیریت می‌کنیم و راه‌حلی دقیقاً
|
|
مطابق نیازهای شما تحویل می‌دهیم.
|
|
</p>
|
|
<Button variant="outline">شروع همکاری</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative h-full">
|
|
<div className="relative aspect-4/5 min-h-[400px] overflow-hidden rounded-2xl sm:aspect-[0.9] sm:min-h-[480px] sm:rounded-3xl md:min-h-[520px]">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg"
|
|
alt="خودتان پروژه را پیش ببرید"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 h-[40%] bg-linear-to-t from-black via-black/50 to-transparent backdrop-blur-[2px] sm:h-[45%] md:h-[50%]" />
|
|
<div className="absolute bottom-0 w-full space-y-4 p-4 sm:p-6 lg:p-8 xl:p-10">
|
|
<h3 className="text-xl font-semibold text-white sm:text-xl lg:text-3xl">
|
|
توسعه مستقل با پلتفرم
|
|
</h3>
|
|
<p className="mt-2 text-sm text-white/80 sm:text-base">
|
|
کنترل پروژه را با پلتفرم جامع خودخدمات ما در دست بگیرید. به
|
|
ابزارها و منابع قدرتمند دسترسی دارید و با راهنمایی متخصص در
|
|
صورت نیاز، راه‌حل خود را با سرعت خودتان می‌سازید.
|
|
</p>
|
|
<Button variant="outline">شروع همکاری</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-background px-4 py-2 text-sm font-bold shadow-lg sm:px-6 sm:py-4 sm:text-base lg:px-8 lg:py-6">
|
|
یا
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Compare5 };
|