Footer With Newsletter and Large Wordmark
A light website footer: newsletter sign-up with inline validation, link columns, live studio clocks and a giant wordmark whose letters rise toward the pointer.
Features
- The brand's name spread across the full width; letters near the pointer rise out of the crop on a soft spring
- Newsletter field that checks the address on submit and answers inline with a friendly error or a thank-you, no network
- Live local times for each studio, with an in-office or after-hours note, read after the page loads
- Link columns with quiet notes ("2 open"), a status line with a pulsing dot and social icon links with labels
- A back-to-top button that glides, or jumps for reduced motion
- Light on the page's own background, re-composed for phones from 360px
Best for: Agencies, studios and product sites that want a footer with a newsletter, a sitemap and a memorable brand moment at the very bottom.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | The brand's logo, top left. |
| tagline | string | - | One line about the company under the logo. |
| status | string | - | Optional live line with a pulsing dot. |
| newsletter | NewsletterCopy | - | Every word of the sign-up: title, description, placeholder, hint, both errors, and the success message with {email}. |
| columns | { title: string; links: { label; href; note? }[] }[] | - | The link columns; up to three sit in one row. |
| clocks | { studios: { city; timeZone }[]; hours: { opens; closes }; openLabel; closedLabel } | - | The studios whose local time is shown, and their working hours. |
| socials | { label: string; href: string; icon: ComponentType }[] | - | Icon links; the label is read to screen readers. |
| legal | string | - | The copyright line. |
| legalLinks | { label: string; href: string }[] | - | Privacy, terms and the like. |
| backToTopLabel | string | - | The back-to-top button's text. |
| wordmark | string | - | The name spread across the bottom, letter by letter. |
| className | string | - | Extra classes for the footer. |
FAQ
Is the Footer With Newsletter and Large Wordmark free to use?
Yes. Footer With Newsletter and Large Wordmark is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Footer With Newsletter and Large Wordmark work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Footer With Newsletter and Large Wordmark in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Footer With Newsletter and Large Wordmark need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Footer With Newsletter and Large Wordmark accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.