119 lines
5.2 KiB
TypeScript
119 lines
5.2 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const profile = {
|
|
title: "لیدهاب",
|
|
subtitle: "سامانه مدیریت ارتباط با مشتری برای تیم‌های فروش در حال رشد",
|
|
bio: `لیدهاب سامانه مدیریت ارتباط با مشتری سبک و قدرتمند برای تیم‌های فروش B2B است. مخاطبین، فرصت‌ها و فعالیت‌ها در یک جا می‌مانند تا هیچ لیدی از دست نرود.`,
|
|
vision: `فروش وقتی مقیاس می‌گیرد که داده‌ها تمیز، قابل جست‌وجو و متصل به کمپین باشند. لیدهاب برای رشد تدریجی تیم فروش طراحی شده است؛ از ۳ نفر تا ۳۰۰ نفر.`,
|
|
outro: `به هزاران تیم فروشی بپیوندید که پایپ‌لاین خود را با لیدهاب شفاف و قابل پیش‌بینی کرده‌اند.`,
|
|
team: [
|
|
{ id: "01", item: "مریم چناری", type: "مدیرعامل و هم‌بنیان‌گذار" },
|
|
{ id: "02", item: "مهدی محمدی", type: "مدیر فناوری و هم‌بنیان‌گذار" },
|
|
{ id: "03", item: "الهام حسینی", type: "مدیر محصول" },
|
|
{ id: "04", item: "داوود کیمیایی", type: "مهندس ارشد سامانه مدیریت ارتباط با مشتری" },
|
|
{ id: "05", item: "لیلا احمدی", type: "مدیر تجربه محصول" },
|
|
{ id: "06", item: "امیر جعفری", type: "مدیر رشد" },
|
|
{ id: "07", item: "راحله سبز", type: "مدیر فروش سازمانی" },
|
|
],
|
|
};
|
|
|
|
interface About10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const About10 = ({ className }: About10Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col-reverse gap-5 md:flex-row md:gap-12">
|
|
<div className="w-full md:w-1/3 md:pr-4">
|
|
<div className="sticky top-20 md:p-6">
|
|
<div className="mb-8">
|
|
<div className="mb-6 flex items-center gap-4">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png"
|
|
alt="تیم لیدهاب"
|
|
className="h-16 w-16 rounded-lg object-cover"
|
|
/>
|
|
<div>
|
|
<h3 className="font-semibold">{profile.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{profile.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav>
|
|
<div className="py-4">
|
|
<div className="group flex p-0 text-start text-xl font-medium hover:bg-transparent sm:text-xl">
|
|
<span className="border-b-2 border-border pb-0.5 transition-colors">
|
|
درخواست دمو
|
|
</span>
|
|
<ArrowUpRight className="ml-1 h-6 w-5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full md:w-2/3 md:p-6">
|
|
<div className="max-w-4xl">
|
|
<h1 className="mb-12 text-2xll font-semibold">درباره ما</h1>
|
|
|
|
<div className="space-y-12">
|
|
<p className="w-full text-xl leading-[36px] font-medium md:max-w-2xl">
|
|
{profile.bio}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
|
|
<h2 className="text-xl font-medium">رویکرد ما</h2>
|
|
<p className="leading-relaxed">{profile.vision}</p>
|
|
</div>
|
|
|
|
<div className="my-12">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/lummi/bw12.jpeg"
|
|
alt="دفتر لیدهاب"
|
|
className="rounded-2xl object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="mb-8 text-xl font-medium">تیم ما</h2>
|
|
<div className="space-y-6">
|
|
{profile.team.map(({ id, item, type }) => (
|
|
<div
|
|
key={id}
|
|
className="flex items-center justify-between border-b py-4"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<span className="font-mono text-sm text-muted-foreground">
|
|
{id}
|
|
</span>
|
|
<span className="text-base">{item}</span>
|
|
</div>
|
|
<span className="text-sm text-muted-foreground">
|
|
{type}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-16">
|
|
<p className="leading-relaxed">{profile.outro}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { About10 };
|