Files
reui-blocks/blocks/hero27.tsx
T

52 lines
2.5 KiB
TypeScript

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Hero27Props {
className?: string;
}
const Hero27 = ({ className }: Hero27Props) => {
return (
<section className={cn("relative overflow-hidden py-32", className)}>
{/* Decorative background element */}
<div className="absolute inset-0 -z-10 bg-linear-to-br from-background to-background/80" />
<div className="absolute top-1/2 right-0 h-96 w-96 translate-x-1/3 -translate-y-1/2 rounded-full bg-primary/10 blur-3xl" />
<div className="relative container">
<div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-10 md:gap-20 lg:flex-row lg:items-end">
<h1 className="relative text-2xll font-bold tracking-tighter md:text-[8vw] lg:w-3/5 2xl:text-9xl">
<span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
رشد
</span>
<br />
<span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
در
</span>
<br />
<span className="relative inline-block transition-transform duration-300 hover:translate-x-1">
مقیاس سازمانی
</span>
</h1>
<div className="lg:max-w-auto max-w-lg space-y-5 lg:mb-4 lg:w-2/5">
<p className="text-xl font-bold md:text-xl">
راهکاری یکپارچه برای توسعه، مدیریت و مقیاس‌پذیری محصولات دیجیتال.
<br />
<br />
</p>
<p className="text-lg text-muted-foreground">
همه ابزارهای موردنیاز برای توسعه و مدیریت محصولات دیجیتال را در یک پلتفرم یکپارچه در اختیار داشته باشید.
</p>
<Button className="group relative mt-8 overflow-hidden" size="lg">
<span className="relative z-10">شروع رایگان</span>
<span className="absolute inset-0 translate-y-full bg-primary/10 transition-transform duration-300 group-hover:translate-y-0" />
</Button>
</div>
</div>
</div>
</section>
);
};
export { Hero27 };