Soft card

import { ContactSoftCard } from '@/components/blocks/contact-02'


<ContactSoftCard />


// Your own details, an extra phone field and a real submit handler
<ContactSoftCard
  title="Talk to our team"
  details={[
    { label: 'Email', value: 'team@quillmark.example', href: 'mailto:team@quillmark.example' },
    { label: 'Office', value: '500 Market Street\nSan Diego, CA 92101' },
  ]}
  socials={[{ network: 'x', href: '#' }]}
  fields={[
    { name: 'name', label: 'Name', required: true, autoComplete: 'name', width: 'half' },
    { name: 'phone', label: 'Phone', kind: 'tel', autoComplete: 'tel', width: 'half' },
    { name: 'email', label: 'Email', kind: 'email', required: true, autoComplete: 'email' },
    { name: 'message', label: 'Message', kind: 'textarea', required: true, maxLength: 800 },
  ]}
  onSubmit={async (values) => {
    const response = await fetch('/api/contact', { method: 'POST', body: JSON.stringify(values) })
    if (!response.ok) throw new Error('Failed to send')
  }}
/>