# Footer Section One

> A multi-column product footer with social links and an email newsletter form.

A shadcn/ui block from the [@navui](https://ui.navdeepsingh.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/navui/footer-section-one).

- Page, with a live preview: https://shadcn.exchange/r/navui/footer-section-one
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/navui/footer-section-one-light-429457c733287084.png
- Registry item: https://ui.navdeepsingh.dev/r/footer-section-one.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-one.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`
- Registry items: `button`

## Files

### `src/registry/blocks/footer/footer-section-one/footer-section-one.tsx`

```tsx
import Link from 'next/link'

import { Button } from '@/components/ui/button'
import LogoMark from '@/components/ui-library-logo'
import { ArrowRight, Send } from 'lucide-react'

const products = [
  { title: 'Overview', href: '#' },
  { title: 'Features', href: '#' },
  { title: 'Integrations', href: '#' },
  { title: 'Use cases', href: '#' },
  { title: 'Pricing', href: '#' },
  { title: 'Demo', href: '#' },
]

const company = [
  { title: 'About us', href: '#' },
  { title: 'Careers', href: '#' },
  { title: 'Blog', href: '#' },
  { title: 'Customers', href: '#' },
  { title: 'Contact', href: '#' },
  { title: 'Legal & Privacy', href: '#' },
]

export default function FooterSectionOne() {
  return (
    <footer className="border-t border-border bg-background text-foreground">
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 md:py-12 lg:px-8 lg:py-16">
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-5 lg:gap-12">
          <div className="flex flex-col gap-2 sm:col-span-2 lg:col-span-2">
            <div className="flex items-center justify-start gap-1">
              <LogoMark aria-hidden="true" className="size-6" />
              <span className="text-lg font-semibold text-foreground">Nav UI</span>
            </div>

            <p className="max-w-2xs pl-1 text-sm font-normal text-muted-foreground">
              Modern UI components for fast and accessible web apps.
            </p>

            <Button asChild variant="secondary" className="mt-2 w-fit">
              <Link href="#">
                Start Free Trial
                <ArrowRight aria-hidden="true" data-icon="inline-end" className="size-4" />
              </Link>
            </Button>
          </div>

          <div className="flex flex-col gap-3">
            <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
              Products
            </h4>

            <ul className="list-none space-y-2">
              {products.map((item) => (
                <li key={item.title}>
                  <Link
                    href={item.href}
                    className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                  >
                    {item.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="flex flex-col gap-3">
            <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
              Company
            </h4>

            <ul className="list-none space-y-2">
              {company.map((item) => (
                <li key={item.title}>
                  <Link
                    href={item.href}
                    className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                  >
                    {item.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="flex flex-col gap-3 sm:col-span-2 lg:col-span-1">
            <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
              Newsletter
            </h4>

            <form className="flex overflow-hidden rounded-lg border border-input bg-muted/40 transition-shadow focus-within:ring-2 focus-within:ring-ring/50">
              <input
                type="email"
                aria-label="Email address for newsletter"
                name="email"
                required
                autoComplete="email"
                placeholder="Your email"
                className="min-w-0 flex-1 bg-transparent px-4 py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground"
              />

              <button
                type="submit"
                aria-label="Subscribe to newsletter"
                className="shrink-0 rounded-none bg-primary px-4 py-3 text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
              >
                <Send aria-hidden="true" className="size-4" />
              </button>
            </form>
          </div>
        </div>
      </div>

      <div className="border-t border-border px-4 py-8">
        <span className="block text-center text-sm text-muted-foreground">
          © {new Date().getFullYear()} Nav UI. All rights reserved.
        </span>
      </div>
    </footer>
  )
}
```

### `src/registry/components/ui-library-logo/ui-library-logo.tsx`

```tsx
import type { SVGProps } from 'react'

export type LogoProps = Omit<SVGProps<SVGSVGElement>, 'children'> & {
  title?: string
}

const MARK_PATH =
  'M48 230V76C48 46 66 29 90 29C110 29 122 42 136 61L250 211C263 228 279 232 299 232H319C347 232 366 213 366 188C366 164 352 149 331 142L279 123C255 114 244 98 244 77C244 50 264 30 291 30H366'

const MARK_TRANSFORM = 'translate(200 200) scale(.68) translate(-207 -130.5)'

export function Logo({ className, height = 22, title, width = 22, ...props }: LogoProps) {
  const classes = [
    '[--logo-start:#3F3F43]',
    '[--logo-highlight:#29292D]',
    '[--logo-middle:#141416]',
    '[--logo-end:#050506]',
    '[--logo-rim:rgba(255,255,255,0.28)]',
    '[--logo-mark:#FFFFFF]',

    'dark:[--logo-start:#FFFFFF]',
    'dark:[--logo-highlight:#FAFAFA]',
    'dark:[--logo-middle:#F0F0F1]',
    'dark:[--logo-end:#DEDEE2]',
    'dark:[--logo-rim:rgba(255,255,255,0.75)]',
    'dark:[--logo-mark:#18181B]',

    className,
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <svg
      {...props}
      aria-hidden={title ? undefined : true}
      aria-label={title}
      className={classes}
      fill="none"
      focusable="false"
      height={height}
      preserveAspectRatio="xMidYMid meet"
      role={title ? 'img' : undefined}
      shapeRendering="geometricPrecision"
      viewBox="0 0 400 400"
      width={width}
      xmlns="http://www.w3.org/2000/svg"
    >
      {title ? <title>{title}</title> : null}

      <defs>
        <linearGradient
          id="logo-surface"
          x1="65"
          x2="335"
          y1="8"
          y2="392"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="var(--logo-start)" />
          <stop offset="0.22" stopColor="var(--logo-highlight)" />
          <stop offset="0.58" stopColor="var(--logo-middle)" />
          <stop offset="1" stopColor="var(--logo-end)" />
        </linearGradient>
      </defs>

      <rect
        fill="url(#logo-surface)"
        height="384"
        rx="88"
        stroke="var(--logo-rim)"
        strokeWidth="6"
        width="384"
        x="8"
        y="8"
      />

      <g transform={MARK_TRANSFORM}>
        <path
          d={MARK_PATH}
          stroke="var(--logo-mark)"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="32"
        />
      </g>
    </svg>
  )
}

export default Logo
```