Footer 31 - Dark footer with headline, newsletter form, navigation, social links, and animated logo

Pro

Dark-themed footer with a large heading, email contact, two link columns, a newsletter subscription form, location text, legal links, and an animated SVG logo.

Vue
Shadcn Footer 31 block

Component Data

  • ID:footer31
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Footer 31 block design & features

The section forces a dark background. The upper area splits a large heading ("Unlock 800+ blocks now") and an email contact link on the left from a two-column grid of navigation and social links on the right. Social links include small ArrowUpRight icons. Below, a second row places a newsletter signup form (a borderless shadcn/ui input with a ghost arrow button inside a bottom-bordered container) on the left and a two-column grid with a location address and legal links on the right. At the bottom, a full-width animated SVG logo renders the brand name using Framer Motion staggered path reveals.

The newsletter input strips away its standard border and background, sitting directly on the dark surface with only a bottom border on its container. The placeholder text uses very low-opacity foreground text in uppercase. The animated SVG logo reveals each letterform path sequentially with a slide-up and fade-in transition, creating a reveal effect as the section enters the viewport.

The animated logo, combined with the dark theme and understated form styling, gives this footer a refined, motion-design sensibility. The light-weight typography and minimal use of color keep the focus on the structural rhythm of the content.

On smaller screens the headline and link columns stack vertically, the newsletter form takes full width, and the animated logo scales proportionally with the container width.