Agency Footer

Navigation 54

About

A clean multi-column footer section with brand summary, sitemap links, legal pages, contact details, and social icons for agency and business websites.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Agency Footer to your project and fits it to your theme.

Code

How Agency Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Footer from "@/components/ui/footer-01";

export default function DefaultFooterDemo() {
  return (
    <div className="w-full min-h-[620px] bg-background text-foreground flex flex-col justify-end">
      {/* Simulated page body so the footer reads as a real site footer anchored at the page bottom */}
      <div className="flex-1 flex items-center justify-center px-4">
        <div className="w-full max-w-7xl xl:px-16 lg:px-8 px-4 mx-auto">
          <div className="flex flex-col gap-4">
            <div className="h-3 w-40 rounded-full bg-muted" />
            <div className="h-2.5 w-full max-w-2xl rounded-full bg-muted/70" />
            <div className="h-2.5 w-full max-w-xl rounded-full bg-muted/70" />
            <div className="h-2.5 w-2/3 max-w-md rounded-full bg-muted/70" />
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}