Contact card

import { ContactDesk } from '@/components/blocks/contact-04'


<ContactDesk />


// Send the form to your own endpoint
<ContactDesk
  onSubmit={async (values) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(values),
    })
    if (!response.ok) throw new Error('We could not send your message. Please try again.')
  }}
/>


// Your own copy, details and fields
<ContactDesk
  title="Get in touch"
  details={[
    { label: 'Email', value: 'hello@acme.example', href: 'mailto:hello@acme.example' },
    { label: 'Office', value: '12 Harbour Road, Bristol BS1 5TT' },
  ]}
  socials={[{ label: 'Acme on X', href: '#', icon: 'x' }]}
  fields={[
    { name: 'name', label: 'Full name', autoComplete: 'name', required: true, width: 'half' },
    { name: 'phone', label: 'Phone', kind: 'tel', autoComplete: 'tel', width: 'half' },
    { name: 'message', label: 'Message', kind: 'textarea', required: true, minLength: 10 },
  ]}
/>