Footer 2

Navigation 213

About

a modern website footer featuring multi-column navigation, social media icons, and App Store & Google Play buttons. Perfect for SaaS, eCommerce, or blogs, it adds credibility, easy navigation, and mobile app links in one elegant layout.

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

Code

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

Usage.tsx

import { Footer2 } from "@/components/ui/footer-2";

export default function DemoOne() {
   return (
    <div className="w-full">
      <div className="w-full relative flex min-h-[calc(100vh-20rem)] h-full items-center">
        {/* Subtle dotted grid */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              "radial-gradient(rgba(255,255,255,0.08) 0.8px, transparent 0.8px)",
            backgroundSize: "14px 14px",
            maskImage:
              "radial-gradient( circle at 50% 10%, rgba(0,0,0,1), rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70% )",
          }}
        />
      </div>

      <Footer2 />
    </div>
  );
}