122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface DashedLineProps {
|
|
orientation?: "horizontal" | "vertical";
|
|
className?: string;
|
|
}
|
|
|
|
const DashedLine = ({
|
|
orientation = "horizontal",
|
|
className,
|
|
}: DashedLineProps) => {
|
|
const isHorizontal = orientation === "horizontal";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative text-muted-foreground",
|
|
isHorizontal ? "h-px w-full" : "h-full w-px",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
isHorizontal
|
|
? [
|
|
"h-px w-full",
|
|
"bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
|
|
"[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
|
|
]
|
|
: [
|
|
"h-full w-px",
|
|
"bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
|
|
"[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
|
|
],
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface Stat {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface Hero262Props {
|
|
heading?: string;
|
|
subheading?: string;
|
|
description?: string;
|
|
stats?: Stat[];
|
|
className?: string;
|
|
}
|
|
|
|
const Hero262 = ({
|
|
heading = "نرم‌افزار باکیفیت برای همه",
|
|
subheading = "توسعه نرم‌افزارهای مدرن با کمک هوش مصنوعی.",
|
|
description =
|
|
"ما متعهدیم که نحوه برنامه‌ریزی، اجرا و تحویل پروژه‌ها توسط تیم‌ها را متحول کنیم. مأموریت ما ارائه مزیت غیرقابل‌رقابت به مشتریان در برابر تأخیر، ناکارآمدی و بی‌نظمی از طریق بینش‌های عملی و همکاری یکپارچه است. برای دادن ابزارهایی که هر پروژه را به خط پایان می‌رسانند، حاضر به هر تلاشی هستیم.\n\nما مشتری‌مدار هستیم وقت می‌گذاریم تا هر جنبه جریان کار شما را درک کنیم و بهتر از همیشه عمل کنید. ما در این مسیر با هم هستیم؛ چون موفقیت شما، موفقیت ما است.",
|
|
stats = [
|
|
{
|
|
value: "۱۵۰ میلیون ریال",
|
|
label: "سرمایه جمع‌آوری‌شده",
|
|
},
|
|
{
|
|
value: "۲۰ هزار",
|
|
label: "شرکت",
|
|
},
|
|
{
|
|
value: "۱٫۳ میلیارد",
|
|
label: "تراکنش ماهانه",
|
|
},
|
|
{
|
|
value: "۱٫۵ هزار",
|
|
label: "اتصال در دقیقه",
|
|
},
|
|
],
|
|
className,
|
|
}: Hero262Props) => {
|
|
return (
|
|
<section className={cn("py-28 lg:py-32", className)}>
|
|
<div className="container flex max-w-5xl flex-col justify-between gap-8 md:gap-20 lg:flex-row lg:items-center lg:gap-24 xl:gap-24">
|
|
<div className="flex-[1.5] text-start">
|
|
<h1 className="text-3xl tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
|
|
{heading}
|
|
</h1>
|
|
|
|
<p className="mt-5 text-xl text-muted-foreground md:text-3xl lg:text-xl">
|
|
{subheading}
|
|
</p>
|
|
|
|
<div className="mt-8 hidden max-w-lg space-y-6 text-lg text-balance text-muted-foreground md:block lg:mt-12">
|
|
{description.split("\n\n").map((paragraph, i) => (
|
|
<p key={i}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative flex flex-1 flex-col justify-center gap-3 text-start pt-10 lg:pt-0 lg:ps-10">
|
|
<DashedLine
|
|
orientation="vertical"
|
|
className="absolute top-0 start-0 max-lg:hidden"
|
|
/>
|
|
<DashedLine
|
|
orientation="horizontal"
|
|
className="absolute top-0 lg:hidden"
|
|
/>
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="flex flex-col gap-1">
|
|
<div className="text-xl tracking-wide md:text-2xll">
|
|
{stat.value}
|
|
</div>
|
|
<div className="text-muted-foreground">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero262 };
|