36 lines
2.4 KiB
TypeScript
36 lines
2.4 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Cta6Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Cta6 = ({ className }: Cta6Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="max-w-full overflow-hidden border-y border-border bg-accent pt-10 md:pt-16 lg:pt-20">
|
|
<div className="relative container flex flex-col md:flex-row md:gap-12">
|
|
<div className="mb-[18rem] text-start md:mb-28 md:w-2/3 lg:shrink-0 xl:mb-20 xl:w-1/2">
|
|
<h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-2xll lg:mb-6">
|
|
همین امروز شروع کنید
|
|
</h3>
|
|
<p className="mb-8 text-muted-foreground lg:text-lg">
|
|
با استفاده از ابزارها و قابلیتهای آماده، زمان توسعه را کاهش دهید، کیفیت محصول را افزایش دهید و سریعتر به بازار برسید.
|
|
</p>
|
|
<Button>شروع رایگان</Button>
|
|
</div>
|
|
<div className="absolute bottom-0 left-1/2 h-min w-[110%] max-w-md -translate-x-1/2 md:-end-36 md:w-3/4 md:max-w-xl md:translate-x-0 lg:mt-auto xl:relative xl:end-0 xl:h-full xl:w-full xl:max-w-full">
|
|
<div className="relative aspect-8/5 h-full min-h-[16rem] w-full">
|
|
<div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[24%] translate-y-[24%] -rotate-[30deg] justify-center overflow-clip rounded-3xl bg-background shadow-lg shadow-foreground/20 md:max-xl:-translate-x-[8%] md:max-xl:translate-y-[16%] rtl:translate-x-[24%] rtl:rotate-[30deg] md:max-xl:rtl:translate-x-[8%]"></div>
|
|
<div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 -translate-x-[16%] translate-y-[8%] -rotate-[15deg] justify-center overflow-clip rounded-3xl bg-background shadow-xl shadow-foreground/20 md:max-xl:-translate-x-[6%] md:max-xl:translate-y-[6%] rtl:translate-x-[16%] rtl:rotate-[15deg] md:max-xl:rtl:translate-x-[6%]"></div>
|
|
<div className="absolute top-0 end-0 z-40 flex aspect-3/5 w-3/5 items-center justify-center overflow-clip rounded-3xl bg-background shadow-2xl shadow-foreground/20"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Cta6 };
|