six bug
This commit is contained in:
mr.sabri
+43
-32
@@ -1,4 +1,4 @@
|
||||
import { ArrowDownRight } from "lucide-react";
|
||||
import { ArrowDownLeft } from "lucide-react";
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -27,57 +27,68 @@ interface Feature171Props {
|
||||
|
||||
const Feature171 = ({ className }: Feature171Props) => {
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("bg-secondary py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<DashedLine className="text-muted-foreground" />
|
||||
<span className="absolute bg-secondary px-3 font-mono text-sm font-medium tracking-wide text-muted-foreground max-lg:hidden">
|
||||
با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
|
||||
<section
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className={cn("w-full max-w-full overflow-visible bg-secondary py-32", className)}
|
||||
>
|
||||
<div className="container min-w-0 w-full">
|
||||
<div className="relative flex h-8 w-full items-center justify-center">
|
||||
<DashedLine className="pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<span className="relative z-10 bg-secondary px-3 text-sm font-medium tracking-wide text-muted-foreground">
|
||||
چرخه فروش
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-10 grid max-w-5xl gap-3 text-start lg:mt-24 lg:grid-cols-2">
|
||||
<h2 className="text-xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
|
||||
<div className="mx-auto mt-10 grid w-full max-w-5xl gap-3 text-start lg:mt-24 lg:grid-cols-2">
|
||||
<h2 className="text-3xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
|
||||
پیش‌بینی درآمد را دقیق‌تر کنید
|
||||
</h2>
|
||||
<p className="leading-snug font-medium text-pretty text-muted-foreground">
|
||||
چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
|
||||
چرخه فروش را از سرنخ تا قرارداد در یک مسیر مشخص پیش ببرید. مدیران می‌توانند
|
||||
گلوگاه‌ها را ببینند و تیم‌ها با اولویت درست روی معاملات ارزشمند تمرکز کنند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="mt-8 overflow-hidden rounded-2xl md:mt-12 lg:mt-20">
|
||||
<CardContent className="flex p-0 max-lg:flex-col">
|
||||
<Card className="mt-8 w-full gap-0! overflow-hidden rounded-2xl py-0! shadow-none ring-foreground/10 md:mt-12 lg:mt-20">
|
||||
<CardContent className="flex w-full p-0! max-lg:flex-col">
|
||||
{items.map((item, i) => (
|
||||
<div key={item.title} className="flex flex-1 max-lg:flex-col">
|
||||
<div className="ps-6 pt-6 lg:ps-8 lg:pt-8">
|
||||
<div className="relative ps-4">
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex min-w-0 flex-1 max-lg:flex-col"
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 flex-col ps-6 pt-6 lg:ps-8 lg:pt-8">
|
||||
<div className="relative min-w-0 w-full ps-4">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.imageAlt}
|
||||
className="aspect-[1.28/1] overflow-hidden rounded-ts-xl object-cover"
|
||||
className="aspect-[1.28/1] h-auto w-full max-w-full rounded-ss-xl object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-0 rounded-ss-xl bg-linear-to-t from-card via-transparent to-transparent" />
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="group flex items-center justify-between gap-4 p-6 ps-0! lg:p-8"
|
||||
className="group flex items-center justify-between gap-4 py-6 pe-6 ps-0 lg:py-8 lg:pe-8"
|
||||
>
|
||||
<h3 className="text-xl leading-tight font-semibold tracking-tight">
|
||||
{item.title}
|
||||
</h3>
|
||||
<ArrowDownRight className="size-6 shrink-0 rtl:rotate-180" />
|
||||
<ArrowDownLeft className="size-6 shrink-0 transition-transform group-hover:translate-x-[-2px] group-hover:translate-y-[2px]" />
|
||||
</a>
|
||||
</div>
|
||||
{i < items.length - 1 && (
|
||||
<div className="relative hidden lg:block">
|
||||
<DashedLine orientation="vertical" />
|
||||
</div>
|
||||
)}
|
||||
{i < items.length - 1 && (
|
||||
<div className="relative block lg:hidden">
|
||||
<DashedLine orientation="horizontal" />
|
||||
</div>
|
||||
)}
|
||||
{i < items.length - 1 ? (
|
||||
<>
|
||||
<div className="relative hidden w-px shrink-0 self-stretch lg:block">
|
||||
<DashedLine
|
||||
orientation="vertical"
|
||||
className="absolute inset-y-0 start-0 h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative block w-full shrink-0 py-2 lg:hidden">
|
||||
<DashedLine orientation="horizontal" />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
@@ -103,7 +114,7 @@ const DashedLine = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative text-muted-foreground",
|
||||
"text-muted-foreground",
|
||||
isHorizontal ? "h-px w-full" : "h-full w-px",
|
||||
className,
|
||||
)}
|
||||
@@ -114,12 +125,12 @@ const DashedLine = ({
|
||||
? [
|
||||
"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_45%,transparent)]",
|
||||
"[mask-image:linear-gradient(90deg,transparent,black_20%,black_80%,transparent)]",
|
||||
]
|
||||
: [
|
||||
"h-full w-px",
|
||||
"bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
|
||||
"[mask-image:linear-gradient(180deg,transparent,black_25%,black_45%,transparent)]",
|
||||
"[mask-image:linear-gradient(180deg,transparent,black_20%,black_80%,transparent)]",
|
||||
],
|
||||
)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user