Quartz Contact Form

Quartz Contact Form

An elegant real estate inquiry form component with a refined crystal quartz aesthetic.

Features

• Split layout: contact form (left) + office information (right)
• Full form fields: Name, Email, Phone, Property Interest dropdown, Budget Range pills, Message textarea
• Office info card with address, phone, email, and business hours
• Decorative map placeholder with subtle dot pattern
• Rose quartz (#f9a8d4, #fce7f3) and grey (#9ca3af) color palette
• Dark mode support with WCAG AA compliant contrast
• Responsive: stacks vertically on mobile, 3:2 split on desktop
• Google Fonts: Playfair Display for headings, DM Sans for body

Usage

import RegistryItem from './registry-item';

export default function Page() {
  return <RegistryItem />;
}

Customization

• Replace officeDetails, budgetRanges, and propertyTypes data with your agency's information
• Swap to your brand colors by modifying the pink Tailwind classes
• Add form validation using react-hook-form or your preferred library
• Replace the map placeholder with an actual map embed