Files

81 lines
3.1 KiB
TypeScript

import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Cta7Props {
className?: string;
}
const Cta7 = ({ className }: Cta7Props) => {
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<div className="relative rounded-xl border border-border bg-accent px-6 py-8 2xl:grid 2xl:grid-cols-2 2xl:px-14 2xl:py-10">
<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
<svg
fill="none"
width={404}
height={384}
viewBox="0 0 404 384"
aria-hidden="true"
className="absolute top-full end-full -translate-x-2/3 -translate-y-1/2 rotate-[60deg] rtl:translate-x-2/3 rtl:-rotate-[60deg]"
>
<defs>
<pattern
x={0}
y={0}
id="dots"
width={16}
height={16}
patternUnits="userSpaceOnUse"
>
<circle
cx={2}
cy={2}
r={2}
fill="currentColor"
className="text-border"
/>
</pattern>
</defs>
<rect fill="url(#dots)" width={400} height={400} />
</svg>
</div>
<div className="relative mb-12 text-start 2xl:mb-0">
<h3 className="mb-6 text-xl font-semibold md:mb-8 md:text-xl lg:mb-12">
همین امروز شروع کنید
</h3>
<p className="mb-6 text-xs tracking-widest text-muted-foreground uppercase">
تفاوت را در عمل تجربه کنید.
</p>
<ul className="grid gap-x-8 gap-y-4 text-muted-foreground md:grid-cols-2">
<li className="flex items-center gap-2">
<Check className="size-5 shrink-0 text-foreground" />
یکپارچه‌سازی سریع با سرویس‌ها
</li>
<li className="flex items-center gap-2">
<Check className="size-5 shrink-0 text-foreground" />
پشتیبانی تخصصی
</li>
<li className="flex items-center gap-2">
<Check className="size-5 shrink-0 text-foreground" />
شخصی‌سازی کامل رابط کاربری
</li>
<li className="flex items-center gap-2">
<Check className="size-5 shrink-0 text-foreground" />
به‌روزرسانی و توسعه مستمر
</li>
</ul>
</div>
<div className="relative flex items-end 2xl:justify-end">
<Button size="lg">شروع رایگان</Button>
</div>
</div>
</div>
</section>
);
};
export { Cta7 };