Footer 1

components/pro-blocks/landing-page/footers/footer-1.tsx

import { Logo } from "@/components/project/logo"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"

type FooterLink = { href: string; label: string }

type Props = {
  mainNavLinks?: FooterLink[]
  legalLinks?: FooterLink[]
  copyrightSite?: { name: string; href: string }
}

const defaultProps = {
  mainNavLinks: [
    { href: "#", label: "Home" },
    { href: "#", label: "About" },
    { href: "#", label: "Products" },
    { href: "#", label: "Services" },
    { href: "#", label: "Contact" },
  ],
  legalLinks: [
    { href: "/legal/privacy-policy", label: "Privacy Policy" },
    { href: "/legal/cookies", label: "Cookies" },
  ],
  copyrightSite: { name: "initium.sh", href: "/" },
}

export function Footer1({
  mainNavLinks = defaultProps.mainNavLinks,
  legalLinks = defaultProps.legalLinks,
  copyrightSite = defaultProps.copyrightSite,
}: Props) {
  return (
    <footer
      className="bg-background text-sm"
      role="contentinfo"
      aria-label="Site footer"
    >
      <div className="wrapper flex flex-col gap-12 lg:gap-16">
        <div className="flex w-full flex-col items-center gap-12 text-center">
          <Link href="/" aria-label="Go to homepage">
            <Logo className="h-5 w-auto" />
          </Link>

          <nav
            className="flex flex-col items-center gap-4 md:flex-row md:gap-8"
            aria-label="Footer navigation"
          >
            {mainNavLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                {link.label}
              </Link>
            ))}
          </nav>
        </div>

        <Separator role="presentation" />

        <div className="flex w-full flex-col-reverse items-center gap-12 lg:flex-row lg:justify-between lg:gap-6">
          <p className="text-center text-muted-foreground lg:text-left">
            <span>Copyright © {new Date().getFullYear()}</span>{" "}
            <Link href={copyrightSite.href} className="hover:underline">
              {copyrightSite.name}
            </Link>
            . All rights reserved.
          </p>

          <nav
            className="flex flex-col items-center gap-4 md:flex-row md:gap-8"
            aria-label="Legal links"
          >
            {legalLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                {link.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </footer>
  )
}