reui-blocks/blocks/feature236.tsx

"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(
        "w-full min-w-0 overflow-x-hidden bg-background py-12 sm:py-20 lg:py-32",
        className,
      )}
    >
      <div className="container flex min-w-0 flex-col items-center gap-8 px-4 sm:gap-10 sm:px-6 md:gap-0">
        <Button
          variant="outline"
          className="h-auto max-w-full gap-3 rounded-full px-4 py-4 text-sm font-medium whitespace-normal text-muted-foreground sm:gap-5 sm:px-5 sm:py-5"
        >
          <Group className="size-4 shrink-0 sm:size-5" />
          <span className="text-pretty">
            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود.
            تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات
            بیشتری می‌بندد.
          </span>
          <ArrowUpRight className="size-4 shrink-0 rtl:rotate-180" />
        </Button>

        <BracketedBorder>
          <div className="mb-5 flex w-full min-w-0 max-w-2xl items-center justify-center gap-3 px-2 tracking-tight sm:mb-7 sm:gap-5 sm:px-4">
            <div className="relative flex shrink-0 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 className="min-w-0 text-pretty text-sm text-muted-foreground sm:text-base">
              از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است.
              گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست
              دادن درآمد شناسایی کنند.
            </p>
          </div>
          <h1 className="max-w-full px-2 text-center text-3xl font-semibold tracking-tighter text-balance text-foreground sm:px-4 sm:text-4xl md:max-w-3xl md:text-5xl md:leading-tight lg:text-6xl xl:text-7xl">
            هر سرنخ را تا قرارداد دنبال کنید
          </h1>
        </BracketedBorder>

        <h2 className="max-w-full px-2 text-center text-2xl font-medium tracking-tighter text-balance text-foreground sm:text-3xl">
          فروش تیم‌تان را یکجا مدیریت کنید
        </h2>
        <p className="max-w-2xl px-2 text-center text-pretty text-muted-foreground sm:mt-5 sm:px-6 lg:text-xl">
          پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان
          می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر
          می‌رود.
        </p>
        <div className="flex w-full min-w-0 max-w-2xl flex-col gap-4 sm:mt-8 md:flex-row md:justify-center">
          <Button className="h-auto min-h-11 w-full rounded-xl px-4 py-2 whitespace-normal sm:w-auto">
            روابط مشتری را در یک نگاه ببینید
          </Button>
          <Button
            variant="outline"
            className="h-auto min-h-11 w-full gap-2 rounded-xl px-4 py-2 whitespace-normal sm:w-auto"
          >
            پایپ‌لاین فروش را شفاف کنید
            <ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </section>
  );
};

const BracketedBorder = ({ children }: { children: ReactNode }) => (
  <motion.div
    initial={{ opacity: 0, scaleX: 0.85 }}
    className="relative flex w-full min-w-0 max-w-full flex-col items-center justify-center overflow-hidden sm:my-10 md:min-h-[500px]"
    whileInView={{ opacity: 1, scaleX: 1 }}
    viewport={{ once: true }}
    transition={{
      scaleX: {
        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 w-full min-w-0 max-w-4xl flex-col items-center justify-center px-4 py-8 md:max-w-[65vw] md:py-12">
      {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>
);