113 lines
4.7 KiB
TypeScript
113 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight, ArrowUpRight, Group } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
import { ShineBorder } from "@/components/magicui/shine-border";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Feature236Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature236 = ({ className }: Feature236Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
|
|
<div className="container flex flex-col items-center gap-10 md:gap-0">
|
|
<Button
|
|
variant="outline"
|
|
className="flex items-center justify-center gap-5 rounded-full px-5! py-5 text-sm font-medium text-muted-foreground"
|
|
>
|
|
<Group />
|
|
تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
|
|
<ArrowUpRight className="rtl:rotate-180" />
|
|
</Button>
|
|
<BracketedBorder>
|
|
<div className="mb-7 flex items-center justify-center gap-5 tracking-tight">
|
|
<div className="relative flex items-center justify-center">
|
|
<span className="absolute inline-block size-2 rounded-full bg-green-300" />
|
|
<span className="absolute inline-block size-3 animate-ping rounded-full bg-green-300" />
|
|
</div>
|
|
<p>از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.</p>
|
|
</div>
|
|
<h1 className="max-w-xl px-4 text-center text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-[90px] md:leading-22">
|
|
هر سرنخ را تا قرارداد دنبال کنید
|
|
</h1>
|
|
</BracketedBorder>
|
|
<h2 className="text-3xl font-medium tracking-tighter text-foreground">
|
|
فروش تیم‌تان را یکجا مدیریت کنید
|
|
</h2>
|
|
<p className="max-w-2xl px-10 text-center text-pretty text-muted-foreground sm:mt-5 lg:text-xl">
|
|
پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
|
|
</p>
|
|
<div className="flex flex-col gap-4 sm:mt-8 md:flex-row">
|
|
<Button className="h-11 w-full rounded-xl sm:w-auto">
|
|
روابط مشتری را در یک نگاه ببینید
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="h-11 w-full gap-2 rounded-xl sm:w-auto"
|
|
>
|
|
پایپ‌لاین فروش را شفاف کنید
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const BracketedBorder = ({ children }: { children: ReactNode }) => (
|
|
<motion.div
|
|
initial={{ width: 0, opacity: 0 }}
|
|
className="relative flex flex-col items-center justify-center sm:my-10 md:h-[500px] md:overflow-hidden"
|
|
whileInView={{ width: "65vw", opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{
|
|
width: {
|
|
type: "spring",
|
|
stiffness: 50,
|
|
damping: 20,
|
|
mass: 1,
|
|
},
|
|
opacity: { duration: 0.5 },
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 hidden border border-foreground/10 md:block">
|
|
<ShineBorder
|
|
duration={10}
|
|
borderWidth={2}
|
|
shineColor={["oklch(87.1% 0.15 154.449)"]}
|
|
/>
|
|
<Vector className="absolute start-1 top-1 rotate-90" />
|
|
<Vector className="absolute end-1 top-1 -rotate-180" />
|
|
<Vector className="absolute start-1 bottom-1" />
|
|
<Vector className="absolute end-1 bottom-1 -rotate-90" />
|
|
</div>
|
|
<div className="flex h-full w-screen flex-col items-center justify-center">
|
|
{children}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
|
|
export { Feature236 };
|
|
|
|
const Vector = ({ className }: { className?: string }) => (
|
|
<svg
|
|
className={className}
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 21 21"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M0.7718 20.3821L0.771792 0.265381C3.72131 0.262685 6.1138 2.65299 6.1138 5.6025V15.1587H15.5512C18.436 15.1587 20.7746 17.4973 20.7746 20.3821H0.7718Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
);
|