reui-blocks/blocks/footer50.tsx

import { ArrowUpRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface NavItem {
  name: string;
  href: string;
}

interface SocialItem {
  name: string;
  href: string;
}

interface Footer50Props {
  heading?: string;
  description?: string;
  ctaText?: string;
  ctaHref?: string;
  navigation?: NavItem[];
  social?: SocialItem[];
  legal?: NavItem[];
  brandName?: string;
  className?: string;
}

const Footer50 = ({
  heading = "رتبه جستجو را با داده، نه حدس، مدیریت کنید",
  description = "ممیزی فنی، کلمات کلیدی و گزارش رقبا در یک پلتفرم سئو.",
  ctaText = "شروع آزمایشی",
  ctaHref = "#",
  navigation = [
    { name: "ابزار سئو", href: "#" },
    { name: "درباره ما", href: "/about" },
    { name: "قیمت‌گذاری", href: "/pricing" },
    { name: "راهنمای رتبه", href: "/faq" },
    { name: "تماس با فروش", href: "/contact" },
  ],
  social = [
    { name: "توییتر", href: "#" },
    { name: "لینکدین", href: "#" },
  ],
  legal = [{ name: "حریم خصوصی", href: "/privacy" }],
  brandName = "mainline",
  className,
}: Footer50Props) => {
  return (
    <footer
      className={cn(
        "flex flex-col items-center gap-14 pt-28 lg:pt-32",
        className,
      )}
    >
      <div className="container space-y-3 text-center">
        <h2 className="text-xl tracking-tight md:text-xl lg:text-2xll">
          {heading}
        </h2>
        <p className="mx-auto max-w-xl leading-snug text-balance text-muted-foreground">
          {description}
        </p>
        <div>
          <Button size="lg" className="mt-4" asChild>
            <a href={ctaHref}>{ctaText}</a>
          </Button>
        </div>
      </div>

      <nav className="container flex flex-col items-center gap-4">
        <ul className="flex flex-wrap items-center justify-center gap-6">
          {navigation.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="font-medium transition-opacity hover:opacity-75"
              >
                {item.name}
              </a>
            </li>
          ))}
          {social.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="flex items-center gap-0.5 font-medium transition-opacity hover:opacity-75"
              >
                {item.name}{" "}
                <ArrowUpRight className="size-4 rtl:rotate-180" />
              </a>
            </li>
          ))}
        </ul>
        <ul className="flex flex-wrap items-center justify-center gap-6">
          {legal.map((item) => (
            <li key={item.name}>
              <a
                href={item.href}
                className="text-sm text-muted-foreground transition-opacity hover:opacity-75"
              >
                {item.name}
              </a>
            </li>
          ))}
        </ul>
      </nav>

      <div className="mt-10 w-full text-primary md:mt-14 lg:mt-20">
        <svg
          width="1570"
          height="293"
          viewBox="0 0 1570 293"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full"
          aria-label={`لوگوی ${brandName}`}
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M642.357 112.457V368.321H677.656V112.457H642.357ZM641.853 45.3953C646.896 50.5539 652.947 53.1332 660.007 53.1332C667.067 53.1332 673.118 50.5539 678.16 45.3953C683.203 40.2368 685.724 33.8746 685.724 26.3087C685.724 18.3989 683.203 12.0366 678.16 7.22198C673.118 2.40733 667.067 0 660.007 0C652.611 0 646.392 2.40733 641.349 7.22198C636.642 12.0366 634.289 18.3989 634.289 26.3087C634.289 33.8746 636.811 40.2368 641.853 45.3953ZM1028.99 368.321V112.457H1064.29V368.321H1028.99ZM1046.64 53.1332C1039.58 53.1332 1033.53 50.5539 1028.48 45.3953C1023.44 40.2368 1020.92 33.8746 1020.92 26.3087C1020.92 18.3989 1023.27 12.0366 1027.98 7.22198C1033.02 2.40733 1039.24 0 1046.64 0C1053.7 0 1059.75 2.40733 1064.79 7.22198C1069.83 12.0366 1072.36 18.3989 1072.36 26.3087C1072.36 33.8746 1069.83 40.2368 1064.79 45.3953C1059.75 50.5539 1053.7 53.1332 1046.64 53.1332ZM1099.76 112.457V368.322H1135.05V235.747C1135.05 214.424 1138.42 196.541 1145.14 182.097C1152.2 167.653 1161.78 156.649 1173.88 149.083C1185.98 141.517 1199.6 137.734 1214.73 137.734C1236.58 137.734 1253.22 144.612 1264.65 158.368C1276.42 172.124 1282.3 193.102 1282.3 221.303V368.322H1317.6V217.176C1317.6 191.727 1313.56 170.921 1305.5 154.757C1297.43 138.25 1286.17 126.041 1271.71 118.131C1257.25 110.222 1240.28 106.267 1220.78 106.267C1201.95 106.267 1185.31 110.565 1170.86 119.163C1156.4 127.761 1144.97 140.141 1136.57 156.305H1135.05L1132.03 112.457H1099.76ZM1391.49 358.004C1409.64 369.009 1430.49 374.512 1454.02 374.512C1473.52 374.512 1490.66 371.073 1505.45 364.195C1520.25 356.973 1532.52 347.171 1542.27 334.791C1552.01 322.41 1558.91 308.482 1562.94 293.007H1528.65C1523.27 308.826 1514.19 321.207 1501.42 330.148C1488.64 339.09 1472.84 343.56 1454.02 343.56C1439.56 343.56 1425.61 339.949 1412.16 332.727C1399.05 325.162 1388.3 313.813 1379.89 298.681C1372.38 284.851 1368.23 268 1367.43 248.127H1569.5C1569.83 243.312 1570 239.014 1570 235.231V224.398C1570 203.763 1565.46 184.505 1556.38 166.622C1547.31 148.739 1534.2 134.295 1517.05 123.29C1499.91 111.941 1479.23 106.267 1455.03 106.267C1431.16 106.267 1409.98 111.769 1391.49 122.774C1373 133.779 1358.54 149.255 1348.12 169.201C1338.04 189.148 1332.99 212.705 1332.99 239.873C1332.99 267.042 1338.21 290.771 1348.63 311.061C1359.05 331.008 1373.34 346.656 1391.49 358.004ZM1367.64 217.176C1368.79 201.865 1372.7 188.797 1379.39 177.971C1387.46 164.558 1398.04 154.413 1411.16 147.535C1424.27 140.657 1438.39 137.218 1453.51 137.218C1476.37 137.218 1495.54 144.268 1511 158.368C1526.46 172.468 1534.7 192.071 1535.71 217.176H1367.64ZM956.449 4.64307V368.322H991.748V4.64307H956.449ZM713.124 368.322V112.457H745.397L748.423 156.305H749.936C758.34 140.141 769.77 127.761 784.226 119.163C798.681 110.565 815.322 106.267 834.148 106.267C853.646 106.267 870.623 110.222 885.079 118.131C899.535 126.041 910.797 138.25 918.865 154.757C926.933 170.921 930.967 191.727 930.967 217.176V368.322H895.669V221.303C895.669 193.102 889.786 172.124 878.019 158.368C866.589 144.612 849.948 137.734 828.097 137.734C812.969 137.734 799.354 141.517 787.251 149.083C775.149 156.649 765.568 167.653 758.508 182.097C751.785 196.541 748.423 214.424 748.423 235.747V368.322H713.124ZM490.55 374.512C469.707 374.512 452.394 370.901 438.61 363.679C424.827 356.113 414.574 346.312 407.85 334.275C401.126 322.238 397.765 309.17 397.765 295.07C397.765 277.187 402.303 262.227 411.38 250.19C420.457 237.81 433.231 228.525 449.704 222.334C466.177 216.144 485.171 213.049 506.686 213.049H575.267C575.267 196.885 572.577 183.129 567.198 171.78C562.156 160.431 554.76 151.834 545.011 145.988C535.261 140.141 523.159 137.218 508.703 137.218C491.222 137.218 476.094 141.861 463.319 151.146C450.545 160.088 442.644 173.328 439.619 190.867H402.303C404.32 172.296 410.539 156.82 420.961 144.44C431.719 131.715 444.83 122.258 460.294 116.068C475.758 109.534 491.894 106.267 508.703 106.267C531.9 106.267 550.894 110.737 565.686 119.679C580.814 128.62 592.076 141.001 599.471 156.82C606.867 172.296 610.565 190.351 610.565 210.985V368.322H578.292L574.762 318.799H573.25C569.888 326.021 565
            fill="url(#paint0_linear_footer50)"
          />
          <defs>
            <linearGradient
              id="paint0_linear_footer50"
              x1="742.5"
              y1="0"
              x2="742.5"
              y2="218.5"
              gradientUnits="userSpaceOnUse"
            >
              <stop stopColor="currentColor" />
              <stop offset="1" stopColor="currentColor" stopOpacity="0.2" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </footer>
  );
};

export { Footer50 };