Footer Services

"use client"

import {
  ArrowCounterClockwiseIcon,
  ArrowRightIcon,
  ChatCircleIcon,
  CheckIcon,
  CreditCardIcon,
  TruckIcon,
} from "@phosphor-icons/react"
import * as React from "react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,

A footer that opens with a band of four service highlights, followed by a newsletter signup, a link directory and a legal row. The services and directory show two columns on mobile and four on desktop, where the signup form also moves beside its heading. Use it when the footer should also promote support, delivery or other services.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/footer-services

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add blocks footer-services

Manual

1. Install the dependencies:

$ pnpm add @phosphor-icons/react

2. Add the pieces it builds on: Input Group.

3. Copy the source into components/blocks/footer-services.tsx:

"use client"

import {
  ArrowCounterClockwiseIcon,
  ArrowRightIcon,
  ChatCircleIcon,
  CheckIcon,
  CreditCardIcon,
  TruckIcon,
} from "@phosphor-icons/react"
import * as React from "react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,

4. Update the import paths to match your project.

Usage

import { FooterServices } from "@/components/blocks/footer-services"

<FooterServices />

Edit services, sections and legal for the content, and replace the slug helper with your routes. The signup form only validates the address and shows a confirmation, so send the email to your mailing list provider in its submit handler.

Notes

The form runs its own validation instead of the browser's, marks the field invalid on a bad address and announces the confirmation.