Files
reui-blocks/blocks/hero86.tsx
T

52 lines
2.2 KiB
TypeScript

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Hero86Props {
className?: string;
}
const Hero86 = ({ className }: Hero86Props) => {
return (
<section className={cn("pb-24", className)}>
<div className="bg-muted pt-16 lg:pt-24">
<div className="container flex flex-col items-center lg:flex-row lg:items-start">
<div className="relative flex flex-col items-start gap-8 pb-20 lg:w-1/2">
<h2 className="text-3xl leading-tight font-bold tracking-tighter text-foreground lg:text-2xll">
کمپین‌های تبلیغاتی شما با{" "}
<span className="border-muted2 border-b-2">تجربه ما</span> بازدهی بیشتری خواهند داشت.
</h2>
<p className="text-lg text-foreground">
با تحلیل داده‌ها، بهینه‌سازی کمپین‌ها و مشاوره تخصصی، بازگشت سرمایه تبلیغات خود را افزایش دهید.
</p>
<Button className="h-fit px-6 py-3.5 text-base font-medium lg:text-lg">
می‌خواهم تبلیغات را برون‌سپاری کنم
</Button>
</div>
<div className="relative flex w-full justify-center lg:w-1/2">
<div className="relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]">
<AspectRatio ratio={355 / 520} className="border-muted2 border">
<img
src="/block-media/shadcnblocks/block/placeholder-1.svg"
alt=""
className="size-full object-cover"
/>
</AspectRatio>
</div>
<div className="absolute bottom-0 w-full overflow-hidden">
<AspectRatio ratio={2} className="relative">
<AspectRatio
ratio={1}
className="absolute w-full rounded-full bg-muted"
/>
</AspectRatio>
</div>
</div>
</div>
</div>
</section>
);
};
export { Hero86 };