Footer 3

Renders a mega footer with columns, newsletter, social links, and copyright. It animates on scroll and responds to hover interactions. Use it for websites needing a comprehensive and interactive footer.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/footer-3

npx layro-cli add @educlopez/footer-3

npx layro-cli add @educlopez/footer-3

bunx layro-cli add @educlopez/footer-3

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import Field, { FieldLabel } from "@/components/smoothui/field";
import Input from "@/components/smoothui/input";
import SmoothButton from "@/components/smoothui/smooth-button";
import { Github, Linkedin, Twitter, Youtube } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

const ANIMATION_DURATION = 0.25;
const DELAY_INCREMENT = 0.05;
const HOVER_SCALE = 1.1;
const TAP_SCALE = 0.95;
const DELAY_NEWSLETTER = 6;