reui-blocks/blocks/feature154.tsx

"use client";

import {
  Activity,
  ArrowDownToLine,
  ArrowUpDown,
  Bell,
  Brain,
  CheckCircle,
  Clock,
  Code,
  Database,
  FileText,
  GitBranch,
  Redo,
  Repeat,
  Rocket,
  Scaling,
  Scan,
  Zap,
} from "lucide-react";

import { Marquee } from "@/components/magicui/marquee";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const badges = [
  {
    title: "خرید و تأمین",
    icon: <Code className="size-4" />,
  },
  {
    title: "فاکتور و پرداخت",
    icon: <ArrowUpDown className="size-4" />,
  },
  {
    title: "گردش تأیید",
    icon: <GitBranch className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Zap className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Clock className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Activity className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Brain className="size-4" />,
  },
  {
    title: "گزارش مدیریتی",
    icon: <Database className="size-4" />,
  },
  {
    title: "مدیریت دارایی",
    icon: <Bell className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Rocket className="size-4" />,
  },
  {
    title: "ERP",
    icon: <CheckCircle className="size-4" />,
  },
  {
    title: "ERP",
    icon: <FileText className="size-4" />,
  },
  {
    title: "بودجه‌بندی",
    icon: <Redo className="size-4" />,
  },
  {
    title: "ERP",
    icon: <ArrowDownToLine className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Repeat className="size-4" />,
  },
  {
    title: "ERP",
    icon: <Scan className="size-4" />,
  },
  {
    title: "مدیریت مالی",
    icon: <Scaling className="size-4" />,
  },
];

interface Feature154Props {
  className?: string;
}

const Feature154 = ({ className }: Feature154Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center justify-center gap-6 text-center">
          <Badge variant="outline">ERP</Badge>
          <h1 className="text-xl font-semibold text-balance md:text-2xll">
            عملیات سازمان را یکپارچه کنید
          </h1>
          <p className="mx-auto max-w-3xl text-lg text-pretty text-muted-foreground">
            گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
          </p>
        </div>
        <div className="relative mt-10">
          <Marquee className="[--duration:30s]">
            {badges.map((badge) => (
              <div
                key={badge.title}
                className="flex items-center gap-2 rounded-full bg-muted px-4 py-2"
              >
                {badge.icon}
                {badge.title}
              </div>
            ))}
          </Marquee>
          <Marquee reverse className="[--duration:30s]">
            {badges.map((badge) => (
              <div
                key={badge.title}
                className="flex items-center gap-2 rounded-full bg-muted px-4 py-2"
              >
                {badge.icon}
                {badge.title}
              </div>
            ))}
          </Marquee>
          <div className="pointer-events-none absolute inset-y-0 start-0 w-1/4 bg-linear-to-e from-background" />
          <div className="pointer-events-none absolute inset-y-0 end-0 w-1/4 bg-linear-to-s from-background" />
        </div>
      </div>
    </section>
  );
};

export { Feature154 };