# Footer 1

> Four-column marketing footer with link groups and copyright bar.

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

- Page, with a live preview: https://shadcn.exchange/r/nusaiba/footer-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/nusaiba/footer-1-light-1ccfa133cf2dba54.png
- Registry item: https://nusaiba.dev/r/base-nova/footer-1.json
- Categories: footer
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://nusaiba.dev/r/base-nova/footer-1.json
```

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

## Dependencies

- Registry items: `@nusaiba/foundation`, `separator`

## Files

### `registry/blocks/footer/footer-data.ts`

```ts
export const footerBrand = {
	name: "Nusaiba",
	tagline:
		"Motion-first shadcn sections — preview live, install into your repo, keep every file.",
} as const;

export type FooterLinkItem = {
	label: string;
	href: string;
	badge?: string;
};

export type FooterColumn = {
	title: string;
	links: FooterLinkItem[];
};

export const footerColumns = {
	registry: {
		title: "Registry",
		links: [
			{ label: "Blocks", href: "/blocks", badge: "New" },
			{ label: "Motion", href: "/motion" },
			{ label: "Pricing", href: "/pricing" },
			{ label: "Docs", href: "/docs" },
		],
	},
	install: {
		title: "Install",
		links: [
			{ label: "CLI guide", href: "/docs" },
			{ label: "Copy prompt", href: "/docs" },
			{ label: "Pro registry", href: "/pricing", badge: "Pro" },
			{ label: "Changelog", href: "/blocks" },
		],
	},
	developers: {
		title: "Developers",
		links: [
			{ label: "Motion patterns", href: "/motion" },
			{ label: "Registry token", href: "/pricing" },
			{ label: "components.json", href: "/docs" },
			{ label: "Account", href: "/account" },
		],
	},
	company: {
		title: "Company",
		links: [
			{ label: "About", href: "/docs" },
			{ label: "Contact", href: "/contact" },
			{ label: "Commercial license", href: "/pricing" },
			{ label: "GitHub", href: "https://github.com" },
		],
	},
	legal: {
		title: "Legal",
		links: [
			{ label: "Privacy", href: "#" },
			{ label: "Terms", href: "#" },
			{ label: "Security", href: "#" },
			{ label: "License", href: "/pricing" },
		],
	},
	product: {
		title: "Product",
		links: [
			{ label: "Hero sections", href: "/blocks/hero" },
			{ label: "Pricing blocks", href: "/blocks/pricing" },
			{ label: "Logo clouds", href: "/blocks/logo-cloud" },
			{ label: "CTA bands", href: "/blocks/cta" },
		],
	},
	solutions: {
		title: "Solutions",
		links: [
			{ label: "SaaS landing", href: "/blocks/hero" },
			{ label: "Startup sites", href: "/blocks/cta" },
			{ label: "Agency builds", href: "/blocks/pricing" },
			{ label: "AI workflows", href: "/docs" },
		],
	},
	support: {
		title: "Support",
		links: [
			{ label: "Help center", href: "/docs" },
			{ label: "Getting started", href: "/docs" },
			{ label: "FAQs", href: "/docs" },
			{ label: "Report issue", href: "https://github.com" },
		],
	},
	resources: {
		title: "Resources",
		links: [
			{ label: "Motion gallery", href: "/motion" },
			{ label: "Block catalog", href: "/blocks" },
			{ label: "Copy prompt", href: "/docs" },
			{ label: "Registry API", href: "/docs" },
		],
	},
} satisfies Record<string, FooterColumn>;

export const footerSocials = [
	{ label: "GitHub", href: "https://github.com", icon: "github" as const },
	{ label: "X", href: "https://x.com", icon: "x" as const },
	{ label: "LinkedIn", href: "https://linkedin.com", icon: "linkedin" as const },
	{ label: "YouTube", href: "https://youtube.com", icon: "youtube" as const },
] as const;

export const footerLegalLinks: FooterLinkItem[] = [
	{ label: "Privacy", href: "#" },
	{ label: "Terms", href: "#" },
	{ label: "License", href: "/pricing" },
];

export const footerLegalInline = [
	{ label: "Terms of Service", href: "#" },
	{ label: "Privacy Policy", href: "#" },
	{ label: "Cookie Notice", href: "#" },
] as const;
```

### `registry/blocks/footer/1/footer-section.tsx`

```tsx
import Link from "next/link";
import { Separator } from "@/components/ui/separator";
import { footerBrand, footerColumns } from "../footer-data";

const columns = [
	footerColumns.product,
	footerColumns.registry,
	footerColumns.resources,
	footerColumns.legal,
] as const;

export function FooterSection() {
	const year = new Date().getFullYear();

	return (
		<footer className="border-t border-border px-4 py-8 md:py-12">
			<div className="mx-auto w-full max-w-5xl">
				<div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-5">
					<div className="lg:col-span-1">
						<Link className="font-bold text-sm tracking-[-0.04em]" href="/">
							{footerBrand.name}
						</Link>
						<p className="mt-3 max-w-xs text-pretty text-muted-foreground text-sm leading-relaxed">
							{footerBrand.tagline}
						</p>
					</div>
					{columns.map((column) => (
						<div key={column.title}>
							<p className="font-medium text-sm">{column.title}</p>
							<ul className="mt-4 space-y-2.5">
								{column.links.map((link) => (
									<li key={link.label}>
										<Link
											className="text-muted-foreground text-sm transition-colors hover:text-foreground"
											href={link.href}
										>
											{link.label}
										</Link>
									</li>
								))}
							</ul>
						</div>
					))}
				</div>
				<Separator className="my-8" />
				<p className="text-muted-foreground text-sm tabular-nums">
					© {year} {footerBrand.name}. All rights reserved.
				</p>
			</div>
		</footer>
	);
}
```