Footer

Overview

The Footer component renders a simple footer with the brand logo, copyright text, and a row of navigation links (Docs, GitHub, Twitter).

File: src/components/Footer.tsx

Structure

The footer uses a horizontal flex layout that stacks vertically on mobile:

export default function Footer() {
  return (
    <footer className="border-t border-gray-200 bg-white px-4 py-8 sm:px-6 lg:px-8">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 sm:flex-row">
        {/* Logo + copyright */}
        {/* Nav links */}
      </div>
    </footer>
  );
}

Customization

Change the brand name

Update the logo text:

<span className="text-lg font-bold text-indigo-600">YourBrand</span>

Replace with an <img> tag for a graphical logo.

Update the copyright year

The year is currently hardcoded. For dynamic updates:

<span className="text-sm text-gray-400">
  &copy; {new Date().getFullYear()}. All rights reserved.
</span>

Change or add links

The navigation links are hardcoded in the JSX. Add, remove, or modify them:

<nav className="flex items-center gap-6">
  <a href="/docs" className="text-sm text-gray-400 transition hover:text-gray-600">
    Docs
  </a>
  <a href="https://github.com/your-repo" target="_blank" rel="noopener noreferrer" className="text-sm text-gray-400 transition hover:text-gray-600">
    GitHub
  </a>
  <a href="/privacy" className="text-sm text-gray-400 transition hover:text-gray-600">
    Privacy
  </a>
  <a href="/terms" className="text-sm text-gray-400 transition hover:text-gray-600">
    Terms
  </a>
</nav>

Replace text links with Lucide icons for social platforms:

import { Github, Twitter } from "lucide-react";

<a href="https://github.com/..." className="text-gray-400 hover:text-gray-600">
  <Github className="h-5 w-5" />
</a>

Add multiple columns

For a more detailed footer, restructure into a grid:

<div className="grid gap-8 sm:grid-cols-3">
  <div>
    <h4 className="font-semibold text-gray-900">Product</h4>
    {/* links */}
  </div>
  <div>
    <h4 className="font-semibold text-gray-900">Resources</h4>
    {/* links */}
  </div>
  <div>
    <h4 className="font-semibold text-gray-900">Legal</h4>
    {/* links */}
  </div>
</div>

Key Tailwind Classes

Class	Purpose
`border-t border-gray-200`	Top border separating footer from content
`flex-col sm:flex-row`	Stacks vertically on mobile, horizontal on desktop
`max-w-6xl mx-auto`	Consistent max width with the rest of the page
`text-gray-400 hover:text-gray-600`	Subtle links with hover darkening

Tips

Always include Privacy Policy and Terms of Service links if you process user data.
Keep the footer lightweight on landing pages; save detailed sitemaps for the main app.

Done reading? Mark this page as complete.

Footer

On this page