116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature {
|
|
image: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
interface Timeline3Props {
|
|
className?: string;
|
|
heading: string;
|
|
description: string;
|
|
buttons: {
|
|
primary: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
secondary: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
};
|
|
features?: Feature[];
|
|
}
|
|
|
|
const Timeline3 = ({
|
|
className,
|
|
heading = "تفاوت را با ما تجربه کنید",
|
|
description = "ما به ایجاد مشارکت‌های پایدار با مشتریانمان باور داریم و بر موفقیت بلندمدت از طریق نوآوری مشترک و پشتیبانی متعهد تمرکز می‌کنیم.",
|
|
buttons = {
|
|
primary: {
|
|
text: "همین حالا شروع کنید",
|
|
url: "#",
|
|
},
|
|
secondary: {
|
|
text: "رزرو دمو",
|
|
url: "#",
|
|
},
|
|
},
|
|
features = [
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
title: "گسترش بین‌المللی",
|
|
description:
|
|
"فعالیت‌ها را به ۵ کشور جدید گسترش دادیم و به میلیون‌ها کاربر تازه دست یافتیم.",
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
title: "جذب سرمایه سری B",
|
|
description:
|
|
"۵۰ میلیون دلار سرمایه سری B برای تسریع توسعه محصول جذب کردیم.",
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
title: "راه‌اندازی محصول",
|
|
description:
|
|
"محصول اصلی خود را با موفقیت به بازار عرضه کردیم." ,
|
|
},
|
|
{
|
|
image:
|
|
"/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
title: "تأسیس شرکت",
|
|
description:
|
|
"با چشم‌اندازی برای تحول در صنعت آغاز به کار کردیم.",
|
|
},
|
|
],
|
|
}: Timeline3Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container max-w-6xl">
|
|
<div className="relative grid gap-16 md:grid-cols-2">
|
|
<div className="top-40 h-fit text-start md:sticky">
|
|
<h2 className="mt-4 mb-6 text-xl font-semibold md:text-2xll">
|
|
{heading}
|
|
</h2>
|
|
<p className="font-medium text-muted-foreground md:text-xl">
|
|
{description}
|
|
</p>
|
|
<div className="mt-8 flex flex-col gap-4 lg:flex-row">
|
|
<Button className="gap-2" size="lg" asChild>
|
|
<a href={buttons.primary.url}>{buttons.primary.text}</a>
|
|
</Button>
|
|
<Button variant="outline" size="lg" className="gap-2" asChild>
|
|
<a href={buttons.secondary.url}>{buttons.secondary.text}</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-12 md:gap-20">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="rounded-xl border p-2">
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.title}
|
|
className="aspect-video w-full rounded-xl border border-dashed object-cover"
|
|
/>
|
|
<div className="p-6 text-start">
|
|
<h3 className="mb-1 text-xl font-semibold">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-muted-foreground">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Timeline3 };
|