Section · Proof & conversion

Contact form section

Compact industry-agnostic conversion section with contextual media and a form.

Component gallery

The section at every supported size.

Gives qualified visitors a clear next step without forcing them into a food-distribution-specific narrative.

Desktop1440 × 760
Live component specimen
Tablet900 × 680
Live component specimen
Mobile390 × 720
Live component specimen

Build recipe

Anatomy and content rules

Anatomy

  1. Section label
  2. Short heading
  3. Supporting copy
  4. Contextual image
  5. Form panel
  6. Cursor-following gradient

Content checklist

  • Keep language industry agnostic
  • Use explicit field labels
  • Maintain WCAG AA contrast
  • Keep section height compact

Composition guidance

Place it with compatible sections.

Works beside

Homepage media featureSite footer

Live usage

/#contact

Source reference

app/components/ContactSection.tsx