69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import React from "react";
|
|
|
|
import { Ripple } from "@/components/magicui/ripple";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature252Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature252 = ({ className }: Feature252Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"relative w-full min-w-0 overflow-hidden bg-muted py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="relative h-92 w-full min-w-0 max-w-full overflow-hidden rounded-4xl border bg-background p-4">
|
|
<svg
|
|
className="absolute start-0 top-0 size-full max-w-full p-4"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<rect
|
|
opacity="0.2"
|
|
width="100%"
|
|
height="100%"
|
|
rx="22"
|
|
strokeWidth="2"
|
|
stroke="currentColor"
|
|
strokeDasharray="7 12"
|
|
/>
|
|
</svg>
|
|
<div className="relative flex size-full min-w-0 items-center justify-center overflow-hidden rounded-3xl text-center">
|
|
<div className="relative z-10 flex min-w-0 flex-col items-center gap-4 px-2">
|
|
<p className="mx-auto max-w-sm text-pretty text-muted-foreground lg:text-xl">
|
|
گزارشهای بصری نشان میدهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
|
|
</p>
|
|
<h1 className="text-xl font-medium tracking-tighter text-balance break-words sm:text-2xl md:text-2xll">
|
|
داده پراکنده را به تصمیم تبدیل کنید
|
|
</h1>
|
|
<Button
|
|
variant="secondary"
|
|
className="relative z-10 mb-16 w-fit rounded-none! border px-10 sm:mb-20"
|
|
>
|
|
شروع کنید
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Keep ripple circles inside the card: smaller radius + milder offset */}
|
|
<Ripple
|
|
mainCircleSize={280}
|
|
numCircles={6}
|
|
className="absolute inset-x-0 -bottom-32 top-auto h-64 overflow-hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature252 };
|