six bug
This commit is contained in:
mr.sabri
+57
-46
@@ -24,15 +24,16 @@ const DATA: DataItem[] = [
|
||||
"تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
||||
imageAlt: "داشبورد مدیریت ارتباط با مشتری",
|
||||
icon: <Sparkles className="h-6 w-6 text-white" />,
|
||||
icon: <Sparkles className="size-5 text-white sm:size-6" />,
|
||||
},
|
||||
{
|
||||
id: "feature-2",
|
||||
title: "اتوماسیون مراحل فروش",
|
||||
description: "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
|
||||
description:
|
||||
"وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
||||
imageAlt: "نمای پایپ‌لاین فروش",
|
||||
icon: <Database className="h-6 w-6 text-white" />,
|
||||
icon: <Database className="size-5 text-white sm:size-6" />,
|
||||
},
|
||||
{
|
||||
id: "feature-3",
|
||||
@@ -41,7 +42,7 @@ const DATA: DataItem[] = [
|
||||
"بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
||||
imageAlt: "پروفایل یکپارچه مشتری",
|
||||
icon: <LockKeyhole className="h-6 w-6 text-white" />,
|
||||
icon: <LockKeyhole className="size-5 text-white sm:size-6" />,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -53,86 +54,96 @@ const Feature186 = ({ className }: Feature186Props) => {
|
||||
const [selection, setSelection] = useState(DATA[0].id);
|
||||
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("relative py-16 md:py-32", className)}>
|
||||
<section
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className={cn(
|
||||
"relative w-full max-w-full overflow-x-hidden py-16 md:py-32",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 right-0 left-0 z-0 h-[800px] w-screen [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] bg-repeat opacity-30"
|
||||
className="absolute inset-x-0 top-0 z-0 h-[min(800px,100%)] w-full [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] bg-repeat opacity-30"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/block-media/shadcnblocks/block/patterns/architect.svg')",
|
||||
backgroundSize: "60px",
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10 container">
|
||||
<div className="text-right">
|
||||
<div className="relative z-10 container min-w-0 px-4 sm:px-6">
|
||||
<div className="min-w-0 text-right">
|
||||
<h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
|
||||
هر سرنخ را تا قرارداد دنبال کنید
|
||||
</h2>
|
||||
<p className="mt-4 text-pretty text-muted-foreground md:text-lg">
|
||||
تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
|
||||
<p className="mt-4 max-w-3xl text-sm text-pretty text-muted-foreground sm:text-base md:text-lg">
|
||||
تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود.
|
||||
تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات
|
||||
بیشتری می‌بندد.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 lg:mt-8">
|
||||
<Tabs dir="rtl" value={selection} onValueChange={setSelection}>
|
||||
<div className="relative">
|
||||
<div className="overflow-auto">
|
||||
<div
|
||||
dir="rtl"
|
||||
className="flex min-w-fit flex-col items-start overflow-y-hidden lg:mb-8"
|
||||
<div className="mt-6 min-w-0 lg:mt-8">
|
||||
<Tabs
|
||||
dir="rtl"
|
||||
value={selection}
|
||||
onValueChange={setSelection}
|
||||
className="w-full min-w-0 gap-4"
|
||||
>
|
||||
<TabsList className="flex h-auto! w-full min-w-0 flex-wrap justify-start gap-2 bg-transparent p-0 sm:gap-3">
|
||||
{DATA.map((feature) => (
|
||||
<TabsTrigger
|
||||
key={feature.id}
|
||||
value={feature.id}
|
||||
className="h-auto! flex-none max-w-full px-3 py-2 text-xs whitespace-normal sm:text-sm"
|
||||
>
|
||||
<TabsList className="gap-4 bg-transparent">
|
||||
{DATA.map((feature) => (
|
||||
<TabsTrigger key={feature.id} value={feature.id}>
|
||||
{feature.title}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--background))_0%,transparent_10%,transparent_90%,hsl(var(--background))_100%)] md:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
{feature.title}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<div className="relative w-full overflow-hidden">
|
||||
<div className="relative w-full min-w-0">
|
||||
{DATA.map((feature) => (
|
||||
<TabsContent
|
||||
key={feature.id}
|
||||
value={feature.id}
|
||||
className="relative z-20"
|
||||
className="mt-0 min-w-0"
|
||||
>
|
||||
<div className="aspect-3/2 w-full rounded-lg bg-accent p-6 md:p-14 md:px-24">
|
||||
<div className="max-w-full text-right md:max-w-md">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-black">
|
||||
<div className="flex w-full min-w-0 flex-col gap-4 rounded-lg bg-accent p-4 sm:gap-6 sm:p-6 md:p-10 lg:p-14 lg:px-24">
|
||||
<div className="w-full min-w-0 max-w-md text-right">
|
||||
<div className="flex size-10 items-center justify-center rounded-full bg-black sm:size-12">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="my-4 md:my-8">
|
||||
<h3 className="text-lg font-bold sm:text-xl lg:text-xl">
|
||||
<div className="mt-4 space-y-2 sm:mt-6 md:mt-8">
|
||||
<h3 className="text-lg font-bold text-pretty sm:text-xl">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-base text-pretty text-muted-foreground sm:text-lg lg:text-xl">
|
||||
<p className="text-sm text-pretty text-muted-foreground sm:text-base lg:text-lg">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src={feature.image}
|
||||
alt={feature.imageAlt}
|
||||
className="mt-4 h-full w-full rounded-lg object-cover object-center md:mt-0"
|
||||
/>
|
||||
<div className="w-full min-w-0 overflow-hidden rounded-lg">
|
||||
<img
|
||||
src={feature.image}
|
||||
alt={feature.imageAlt}
|
||||
className="aspect-video h-auto w-full max-w-full object-cover object-center sm:aspect-[16/10]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center py-3 md:hidden">
|
||||
<div className="flex justify-center gap-1 py-1 sm:hidden">
|
||||
{DATA.map((feature) => (
|
||||
<Button
|
||||
key={feature.id}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelection(feature.id);
|
||||
}}
|
||||
className="size-8 px-0"
|
||||
aria-label={feature.title}
|
||||
onClick={() => setSelection(feature.id)}
|
||||
>
|
||||
<div
|
||||
<span
|
||||
className={cn(
|
||||
"size-2 rounded-full",
|
||||
feature.id === selection ? "bg-primary" : "bg-input",
|
||||
|
||||
Reference in New Issue
Block a user