nextjs-saas/components/layout/site-footer.tsx

import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';

import { Brand } from '@/components/shared/brand';
import { Container } from '@/components/shared/container';
import { footerColumns, siteConfig } from '@/lib/site';

const socialLinks = [
  { label: 'GitHub', href: siteConfig.links.github, Icon: RiGithubFill },
  { label: 'X (Twitter)', href: siteConfig.links.twitter, Icon: RiTwitterXFill },
];

export function SiteFooter() {
  return (
    <footer className="border-t border-border">
      <Container className="py-16">
        <div className="grid gap-10 md:grid-cols-[1.5fr_repeat(4,1fr)]">
          <div>
            <Brand />
            <p className="mt-4 max-w-xs text-sm text-foreground/45">
              {siteConfig.tagline}
            </p>
          </div>
          {footerColumns.map((column) => (
            <div key={column.heading}>
              <h4 className="text-sm font-medium text-foreground/80">
                {column.heading}
              </h4>
              <ul className="mt-4 space-y-3">
                {column.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm text-foreground/45 transition-colors hover:text-foreground"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-border pt-8 text-sm text-foreground/40 sm:flex-row sm:items-center">
          <span>
            © {new Date().getFullYear()} {siteConfig.name}, Inc. All rights reserved.
          </span>
          <div className="flex items-center gap-2">
            {socialLinks.map(({ label, href, Icon }) => (
              <a
                key={label}
                href={href}
                aria-label={label}
                className="inline-flex size-8 items-center justify-center rounded-md text-foreground/45 transition-colors hover:bg-foreground/5 hover:text-foreground"
              >
                <Icon className="size-4" aria-hidden="true" />
              </a>
            ))}
          </div>
        </div>
      </Container>
    </footer>
  );
}