reui-blocks/blocks/footer15.tsx

"use client";
import { Facebook, Github, Linkedin, Twitter } from "lucide-react";

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

const SOCIAL_LINKS = [
  {
    icon: Github,
    href: "#",
  },
  {
    icon: Linkedin,
    href: "#",
  },
  {
    icon: Facebook,
    href: "#",
  },
  {
    icon: Twitter,
    href: "#",
  },
];

const NAVIGATION = [
  {
    title: "پلتفرم",
    links: [
      { name: "نمای کلی", href: "#" },
      { name: "کاربردها", href: "#" },
    ],
  },
  {
    title: "درباره ما",
    links: [
      { name: "تیم", href: "#" },
      { name: "پشتیبانی", href: "#" },
      { name: "حقوقی", href: "#" },
      { name: "امنیت", href: "#" },
    ],
  },
  {
    title: "یادگیری",
    links: [
      { name: "آموزش‌ها", href: "#" },
      { name: "مستندات اتصال هوشمند", href: "#" },
      { name: "شروع سریع", href: "#" },
    ],
  },
];

interface Footer15Props {
  className?: string;
}

const Footer15 = ({ className }: Footer15Props) => {
  return (
    <section className={cn("py-32", className)}>
      <footer className="container flex flex-col gap-32">
        <div className="flex w-full flex-col justify-between gap-y-24 lg:flex-row">
          <div className="flex shrink-0 grow-0 basis-auto flex-col items-start justify-start gap-6">
            {/* Logo */}
            <a href="https://ShadcnBlocks">
              <img
                src="/block-media/shadcnblocks/block/logos/ShadcnBlockscom-wordmark.svg"
                alt="لوگوی ری یو آی"
                title="ShadcnBlocks"
                className="h-10 dark:invert"
              />
            </a>
            <p className="w-full max-w-54 text-base leading-normal text-muted-foreground md:text-lg">
              تجربه‌های دیجیتال خود را به‌سادگی و در مقیاس بزرگ
              شخصی‌سازی کنید.
            </p>
            <div className="flex w-full items-center justify-start gap-7">
              {SOCIAL_LINKS.map((item, i) => (
                <a
                  href={item.href}
                  key={`social-link-${i}`}
                  className="flex size-6 opacity-100 transition-opacity hover:opacity-50"
                >
                  <item.icon className="m-auto size-full stroke-foreground" />
                </a>
              ))}
            </div>
            <div className="pt-6">
              <Badge className="rounded-full border-muted bg-background p-0 text-foreground">
                <a href="#" className="flex items-center gap-2 px-3 py-2">
                  <div className="relative size-[0.4375rem]">
                    <span className="absolute inset-0 z-10 m-auto size-[0.6875rem] animate-pulse rounded-full bg-green-400/50" />
                    <span className="absolute inset-0 z-20 m-auto size-full rounded-full bg-green-500" />
                  </div>
                  <div className="text-[0.9375rem] leading-none font-normal">
                    همه سیستم‌ها فعال هستند
                  </div>
                </a>
              </Badge>
            </div>
          </div>
          <div className="flex flex-col gap-24">
            <nav className="flex flex-wrap gap-24 md:gap-40">
              {NAVIGATION.map((section, _) => (
                <div
                  key={section.title}
                  className="flex flex-col items-start justify-start gap-4"
                >
                  <p className="mb-2 text-sm font-semibold text-foreground md:text-base">
                    {section.title}
                  </p>
                  {section.links.map((link, _) => (
                    <a
                      key={link.name}
                      href={link.href}
                      className="text-sm leading-none font-medium text-foreground opacity-50 transition-opacity hover:opacity-100"
                    >
                      {link.name}
                    </a>
                  ))}
                </div>
              ))}
            </nav>
          </div>
        </div>
        <div className="flex flex-col justify-between gap-y-4 md:flex-row">
          <div className="text-sm font-medium text-muted-foreground">
            © ۲۲۵ ری یو آی
          </div>
          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
            ساخته‌شده در آمریکا{" "}
            <img
              src="/block-media/shadcnblocks/block/flags/united-states.png"
              alt="پرچم آمریکا"
              className="h-5 rounded-sm"
            />
          </div>
        </div>
      </footer>
    </section>
  );
};

export { Footer15 };