# Contact 6

> Full-width email capture band — quick pre-sale contact above footer.

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

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

## Install

```bash
npx shadcn@latest add https://nusaiba.dev/r/base-nova/contact-6.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: `motion`
- Registry items: `@nusaiba/foundation`, `button`, `input`

## Files

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

```ts
export const contactSite = {
	name: "Nusaiba",
	email: "hello@nusaiba.dev",
	domain: "nusaiba.dev",
	namespace: "@nusaiba",
} as const;

export const contactFormCopy = {
	submit: "Send message",
	sending: "Sending…",
	namePlaceholder: "Jane",
	lastNamePlaceholder: "Doe",
	emailPlaceholder: "you@nusaiba.dev",
	messagePlaceholder: "Tell us about your landing page or Pro licensing needs…",
} as const;

export const contactSplitCopy = {
	eyebrow: "Contact",
	title: "Questions about the registry?",
	description:
		"Ask about Pro access, commercial licensing, team seats, or custom block installs — we respond within one business day.",
} as const;

export const contactCompactCopy = {
	eyebrow: "Reach us",
	title: "Send a note",
	description:
		"Pro licensing, team plans, or help picking blocks for your landing page — we read every message.",
} as const;

export const contactVisualCopy = {
	eyebrow: "Support",
	title: "Let's talk about your page",
	description:
		"Share your stack and timeline — we'll point you to the right blocks and install path.",
} as const;

export const contactBandCopy = {
	title: "Need help before you buy?",
	description: "Leave your email — we'll send install tips and Pro licensing details.",
	submit: "Request info",
} as const;

export const contactTopics = [
	{ id: "pro", label: "Pro license" },
	{ id: "team", label: "Team plan" },
	{ id: "blocks", label: "Block advice" },
	{ id: "other", label: "Other" },
] as const;

export type ContactTopicId = (typeof contactTopics)[number]["id"];

export const contactSubjects = [
	"Pro commercial license",
	"Team workspace (10 seats)",
	"Custom block install",
	"Partnership / press",
] as const;

export const contactChannels = [
	{
		id: "email",
		label: "Email",
		value: contactSite.email,
		href: `mailto:${contactSite.email}`,
	},
	{
		id: "docs",
		label: "Docs",
		value: `${contactSite.domain}/docs`,
		href: "/docs",
	},
	{
		id: "registry",
		label: "Registry",
		value: contactSite.namespace,
		href: "/blocks",
	},
] as const;

export const contactEnterpriseCopy = {
	eyebrow: "Enterprise",
	title: "Talk to us about team access",
	description:
		"Agency or product team rolling out blocks across client landing pages — tell us seat count and timeline.",
} as const;

export const contactFramedCopy = {
	eyebrow: "Contact",
	title: "Get in touch",
	description: "We help builders install, customize, and license Nusaiba blocks for production sites.",
} as const;
```

### `registry/blocks/contact/6/contact-section.tsx`

```tsx
"use client";

import Link from "next/link";
import { useRef } from "react";
import { ArrowRightIcon } from "lucide-react";
import { motion, useInView, useReducedMotion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { motionStagger, motionViewport } from "@/lib/motion-tokens";
import { cn } from "@/lib/utils";
import { contactBandCopy, contactFormCopy, contactSite } from "../contact-data";
import { SectionShell } from "@/components/layout-contract";

const spring = { type: "spring" as const, duration: 0.3, bounce: 0 };

export function ContactInlineBandSection() {
	const reduceMotion = useReducedMotion();
	const ref = useRef<HTMLElement>(null);
	const inView = useInView(ref, motionViewport);

	const itemVariants = reduceMotion
		? { hidden: { opacity: 1 }, visible: { opacity: 1 } }
		: {
				hidden: { opacity: 0, filter: "blur(4px)", y: 8 },
				visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring },
			};

	return (
		<SectionShell spacingMode="section" className="bg-muted/40" ref={ref}>
			<motion.div
				animate={inView ? "visible" : "hidden"}
				className="mx-auto flex w-full max-w-5xl flex-col gap-6 md:flex-row md:items-center md:justify-between"
				initial="hidden"
				variants={{
					hidden: {},
					visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 } },
				}}
			>
				<motion.div className="max-w-md" variants={itemVariants}>
					<h2 className="text-balance font-medium text-xl tracking-tight md:text-2xl">
						{contactBandCopy.title}
					</h2>
					<p className="mt-2 text-pretty text-muted-foreground text-sm">
						{contactBandCopy.description}
					</p>
					<Link
						className="mt-3 inline-flex items-center gap-1 text-foreground text-sm underline-offset-4 hover:underline"
						href={`mailto:${contactSite.email}`}
					>
						{contactSite.email}
						<ArrowRightIcon className="size-3.5" />
					</Link>
				</motion.div>

				<motion.form
					className="flex w-full max-w-md flex-col gap-3 sm:flex-row"
					variants={itemVariants}
				>
					<Input
						className="flex-1"
						placeholder={contactFormCopy.emailPlaceholder}
						type="email"
					/>
					<Button className={cn("active:scale-[0.96] transition-transform sm:shrink-0")} type="button">
						{contactBandCopy.submit}
					</Button>
				</motion.form>
			</motion.div>
		</SectionShell>
	);
}
```