Contact Sections

Contact sections give visitors a fast way to reach your team. Each variant is built with react-hook-form and zod validation and never makes a network request on its own.

Component Variants

Usage

import {
  ContactSimple,
  ContactSplit,
  ContactWithCards,
  ContactMinimal,
} from '@/components/ui/contact';

// Contact Simple
<ContactSimple
  title="Get in touch"
  description="Have a question or feedback?"
  onSubmit={async (values) => console.log(values)}
/>

// Contact Split (details + optional map placeholder)
<ContactSplit
  title="Let's talk"
  address="548 Market Street, San Francisco, CA 94104"
  phone="+1 (555) 234-5678"
  email="hello@example.com"
  showMap
  onSubmit={async (values) => console.log(values)}
/>

// Contact With Cards (Sales / Support / Press)
<ContactWithCards
  cards={[
    { title: 'Sales', email: 'sales@example.com', description: 'Pricing questions' },
    { title: 'Support', email: 'support@example.com', description: 'Account help' },
    { title: 'Press', email: 'press@example.com', description: 'Media inquiries' },
  ]}
  onSubmit={async (values) => console.log(values)}
/>

// Contact Minimal (inline email + textarea that expands on focus)
<ContactMinimal onSubmit={async (values) => console.log(values)} />

Props Reference

ContactSimple

ContactSplit

ContactWithCards

ContactMinimal