feeddeck/landing/components/footer.tsx

import Link from "next/link";
import Image from "next/image";

export default function Footer() {
  const navigation = [
    {
      title: "Features",
      href: "/#features",
      isExternal: false,
    },
    {
      title: "Pricing",
      href: "/pricing",
      isExternal: false,
    },
    {
      title: "Download",
      href: "/download",
      isExternal: false,
    },
  ];

  const legal = [
    {
      title: "Support",
      href: "/support",
      isExternal: false,
    },
    {
      title: "Terms & Conditions",
      href: "/terms-and-conditions",
      isExternal: false,
    },
    {
      title: "Privacy Policy",
      href: "/privacy-policy",
      isExternal: false,
    },
  ];

  return (
    <div className="relative">
      <div className="container p-8 mx-auto xl:px-0">
        <div className="grid max-w-screen-xl grid-cols-1 gap-10 pt-10 mx-auto mt-5 lg:grid-cols-5">
          <div className="lg:col-span-2">
            <div>
              <Link
                href="/"
                className="flex items-center space-x-2 text-2xl font-medium"
              >
                <Image
                  src="/logo.svg"
                  alt="N"
                  width="32"
                  height="32"
                  className="w-8 rounded-full"
                />
                <span>FeedDeck</span>
              </Link>
            </div>

            <div className="max-w-md mt-4 text-gray-400">
              FeedDeck is an open source RSS and social media feed reader,
              inspired by TweetDeck. FeedDeck allows you to follow your favorite
              feeds in one place on all platforms.
            </div>
          </div>

          <div>
            <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0">
              {navigation.map((item, index) => (
                <Link
                  key={index}
                  href={item.href}
                  target={item.isExternal ? "_blank" : undefined}
                  rel={item.isExternal ? "noopener noreferrer" : undefined}
                  className="w-full px-4 py-2 rounded-md hover:text-primary focus:text-primary"
                >
                  {item.title}
                </Link>
              ))}
            </div>
          </div>
          <div>
            <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0">
              {legal.map((item, index) => (
                <Link
                  key={index}
                  href={item.href}
                  target={item.isExternal ? "_blank" : undefined}
                  rel={item.isExternal ? "noopener noreferrer" : undefined}
                  className="w-full px-4 py-2 rounded-md hover:text-primary focus:text-primary"
                >
                  {item.title}
                </Link>
              ))}
            </div>
          </div>
          <div>
            <div>Follow us</div>
            <div className="flex mt-5 space-x-5 text-gray-500">
              <a
                href="https://x.com/feeddeckapp"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="sr-only">X</span>
                <X />
              </a>
              <a
                href="https://github.com/feeddeck/feeddeck"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="sr-only">GitHub</span>
                <GitHub />
              </a>
            </div>
          </div>
        </div>

        <div className="my-10 text-sm text-center text-gray-400">
          Copyright © {new Date().getFullYear()}{" "}
          Rico Berger. All rights reserved.
        </div>
      </div>
    </div>
  );
}

const X = () => (
  <svg
    width="24px"
    height="24px"
    viewBox="0 0 4096 4096"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
  >
    <g id="X" transform="matrix(8.90048,0,0,8.90048,-238.533,-230.522)">
      <path d="M389.2,48L459.8,48L305.6,224.2L487,464L345,464L233.7,318.6L106.5,464L35.8,464L200.7,275.5L26.8,48L172.4,48L272.9,180.9L389.2,48ZM364.4,421.8L403.5,421.8L151.1,88L109.1,88L364.4,421.8Z" />
    </g>
  </svg>
);

const GitHub = () => (
  <svg
    width="24px"
    height="24px"
    viewBox="0 0 4096 4096"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
  >
    <g id="GitHub" transform="matrix(8.25806,0,0,8.25806,0,-14.8952)">
      <path d="M165.9,397.4C165.9,399.4 163.6,401 160.7,401C157.4,401.3 155.1,399.7 155.1,397.4C155.1,395.4 157.4,393.8 160.3,393.8C163.3,393.5 165.9,395.1 165.9,397.4ZM134.8,392.9C134.1,394.9 136.1,397.2 139.1,397.8C141.7,398.8 144.7,397.8 145.3,395.8C145.9,393.8 144,391.5 141,390.6C138.4,389.9 135.5,390.9 134.8,392.9ZM179,391.2C176.1,391.9 174.1,393.8 174.4,396.1C174.7,398.1 177.3,399.4 180.3,398.7C183.2,398 185.2,396.1 184.9,394.1C184.6,392.2 181.9,390.9 179,391.2ZM244.8,8C106.1,8 0,113.3 0,252C0,362.9 69.8,457.8 169.5,491.2C182.3,493.5 186.8,485.6 186.8,479.1C186.8,472.9 186.5,438.7 186.5,417.7C186.5,417.7 116.5,432.7 101.8,387.9C101.8,387.9 90.4,358.8 74,351.3C74,351.3 51.1,335.6 75.6,335.9C75.6,335.9 100.5,337.9 114.2,361.7C136.1,400.3 172.8,389.2 187.1,382.6C189.4,366.6 195.9,355.5 203.1,348.9C147.2,342.7 90.8,334.6 90.8,238.4C90.8,210.9 98.4,197.1 114.4,179.5C111.8,173 103.3,146.2 117,111.6C137.9,105.1 186,138.6 186,138.6C206,133 227.5,130.1 248.8,130.1C270.1,130.1 291.6,133 311.6,138.6C311.6,138.6 359.7,105 380.6,111.6C394.3,146.3 385.8,173 383.2,179.5C399.2,197.2 409,211 409,238.4C409,334.9 350.1,342.6 294.2,348.9C303.4,356.8 311.2,371.8 311.2,395.3C311.2,429 310.9,470.7 310.9,478.9C310.9,485.4 315.5,493.3 328.2,491C428.2,457.8 496,362.9 496,252C496,113.3 383.5,8 244.8,8ZM97.2,352.9C95.9,353.9 96.2,356.2 97.9,358.1C99.5,359.7 101.8,360.4 103.1,359.1C104.4,358.1 104.1,355.8 102.4,353.9C100.8,352.3 98.5,351.6 97.2,352.9ZM86.4,344.8C85.7,346.1 86.7,347.7 88.7,348.7C90.3,349.7 92.3,349.4 93,348C93.7,346.7 92.7,345.1 90.7,344.1C88.7,343.5 87.1,343.8 86.4,344.8ZM118.8,380.4C117.2,381.7 117.8,384.7 120.1,386.6C122.4,388.9 125.3,389.2 126.6,387.6C127.9,386.3 127.3,383.3 125.3,381.4C123.1,379.1 120.1,378.8 118.8,380.4ZM107.4,365.7C105.8,366.7 105.8,369.3 107.4,371.6C109,373.9 111.7,374.9 113,373.9C114.6,372.6 114.6,370 113,367.7C111.6,365.4 109,364.4 107.4,365.7Z" />
    </g>
  </svg>
);