Contact Us Screen

A complete contact page combining contact form, location map, office information, and social links in a responsive layout.

Features

Contact Form: Full-featured form with validation
Interactive Map: Office locations with directions
Office Info: Address, phone, hours, email
Social Links: Connect on social platforms
FAQ Section: Common questions with answers
Responsive: Optimized for mobile, tablet, desktop
Dark Mode: Full dark mode support

Installation

pnpm add @mycuppa/screens

Basic Usage

import { ContactUsScreen } from '@mycuppa/screens'

export default function ContactPage() {
  return (
    <ContactUsScreen
      company={{
        name: 'Acme Inc.',
        email: 'hello@acme.com',
        phone: '+1 (555) 123-4567',
        address: '123 Main St, San Francisco, CA 94102',
        coordinates: { lat: 37.7749, lng: -122.4194 },
      }}
    />
  )
}

With Multiple Offices

import { ContactUsScreen, Office } from '@mycuppa/screens'

const offices: Office[] = [
  {
    id: 'sf',
    name: 'San Francisco HQ',
    email: 'sf@acme.com',
    phone: '+1 (555) 123-4567',
    address: '123 Main St, San Francisco, CA 94102',
    coordinates: { lat: 37.7749, lng: -122.4194 },
    hours: 'Mon-Fri 9am-5pm PST',
    isPrimary: true,
  },
  {
    id: 'ny',
    name: 'New York Office',
    email: 'ny@acme.com',
    phone: '+1 (555) 987-6543',
    address: '456 Broadway, New York, NY 10013',
    coordinates: { lat: 40.7128, lng: -74.0060 },
    hours: 'Mon-Fri 9am-5pm EST',
  },
]

export default function ContactPage() {
  return (
    <ContactUsScreen
      company={{ name: 'Acme Inc.' }}
      offices={offices}
    />
  )
}

With FAQ

import { ContactUsScreen, FAQ } from '@mycuppa/screens'

const faqs: FAQ[] = [
  {
    question: 'What are your business hours?',
    answer: 'We are open Monday through Friday, 9am to 5pm PST. We are closed on weekends and major holidays.',
  },
  {
    question: 'How quickly do you respond to inquiries?',
    answer: 'We aim to respond to all inquiries within 24 hours during business days.',
  },
  {
    question: 'Do you offer phone support?',
    answer: 'Yes! Call us at (555) 123-4567 during business hours for immediate assistance.',
  },
]

export default function ContactPage() {
  return (
    <ContactUsScreen
      company={companyInfo}
      faqs={faqs}
    />
  )
}

With Custom Sections

import { ContactUsScreen } from '@mycuppa/screens'

export default function ContactPage() {
  return (
    <ContactUsScreen
      company={companyInfo}
      sections={{
        hero: {
          title: 'Get in Touch',
          subtitle: 'We\'d love to hear from you. Send us a message and we\'ll respond as soon as possible.',
        },
        form: {
          title: 'Send us a Message',
          submitText: 'Send Message',
        },
        map: {
          title: 'Visit Our Office',
          showDirections: true,
        },
        info: {
          title: 'Contact Information',
          showSocial: true,
        },
      }}
    />
  )
}

Full Example with All Features

import { ContactUsScreen } from '@mycuppa/screens'

export default function ContactPage() {
  const handleFormSubmit = async (data) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })

    if (response.ok) {
      // Success handled by component
      console.log('Message sent successfully')
    }
  }

  return (
    <ContactUsScreen
      // Company info
      company={{
        name: 'Acme Inc.',
        logo: '/images/logo.svg',
        email: 'hello@acme.com',
        phone: '+1 (555) 123-4567',
        address: '123 Main St, San Francisco, CA 94102',
        coordinates: { lat: 37.7749, lng: -122.4194 },
      }}

      // Multiple offices
      offices={[
        {
          id: 'sf',
          name: 'San Francisco HQ',
          address: '123 Main St, San Francisco, CA 94102',
          coordinates: { lat: 37.7749, lng: -122.4194 },
          phone: '+1 (555) 123-4567',
          email: 'sf@acme.com',
          hours: 'Mon-Fri 9am-5pm PST',
          isPrimary: true,
        },
        {
          id: 'ny',
          name: 'New York Office',
          address: '456 Broadway, New York, NY 10013',
          coordinates: { lat: 40.7128, lng: -74.0060 },
          phone: '+1 (555) 987-6543',
          email: 'ny@acme.com',
          hours: 'Mon-Fri 9am-5pm EST',
        },
      ]}

      // Social media
      social={{
        twitter: 'https://twitter.com/acme',
        linkedin: 'https://linkedin.com/company/acme',
        facebook: 'https://facebook.com/acme',
        instagram: 'https://instagram.com/acme',
      }}

      // FAQs
      faqs={[
        {
          question: 'What are your business hours?',
          answer: 'We are open Monday through Friday, 9am to 5pm PST.',
        },
        {
          question: 'How quickly do you respond?',
          answer: 'We aim to respond within 24 hours during business days.',
        },
      ]}

      // Form handler
      onFormSubmit={handleFormSubmit}

      // Custom sections
      sections={{
        hero: {
          title: 'Get in Touch',
          subtitle: 'We\'d love to hear from you',
          image: '/images/contact-hero.jpg',
        },
      }}

      // Theming
      theme={{
        primary: '#3b82f6',
        accent: '#8b5cf6',
      }}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | company | CompanyInfo | Required | Company details | | offices | Office[] | - | Multiple office locations | | social | SocialLinks | - | Social media URLs | | faqs | FAQ[] | - | Frequently asked questions | | onFormSubmit | (data) => Promise<void> | - | Form submit handler | | sections | SectionConfig | - | Customize sections | | theme | ThemeConfig | - | Custom colors | | showMap | boolean | true | Show location map | | showFAQ | boolean | true if FAQs provided | Show FAQ section |

Type Definitions

interface CompanyInfo {
  name: string
  logo?: string
  email?: string
  phone?: string
  address?: string
  coordinates?: { lat: number; lng: number }
}

interface Office {
  id: string
  name: string
  address: string
  coordinates: { lat: number; lng: number }
  phone?: string
  email?: string
  hours?: string
  isPrimary?: boolean
}

interface SocialLinks {
  twitter?: string
  linkedin?: string
  facebook?: string
  instagram?: string
  youtube?: string
  github?: string
}

interface FAQ {
  question: string
  answer: string
}

Layout

The screen is organized into sections:

Hero Section: Page title and subtitle
Contact Form: Left column (2/3 width)
Quick Info: Right column (1/3 width) - phone, email, hours
Office Locations: Cards with map markers
Interactive Map: Embedded map with all office locations
FAQ Section: Expandable accordion
Social Links: Footer with social icons

Responsive Behavior

Desktop (above 1024px): Form left, info right, side-by-side
Tablet (768-1024px): Form left, info right, stacked map
Mobile (below 768px): All sections stacked vertically

Customization

Custom Form Fields

<ContactUsScreen
  formFields={[
    { name: 'name', type: 'text', label: 'Name', required: true },
    { name: 'email', type: 'email', label: 'Email', required: true },
    { name: 'department', type: 'select', label: 'Department', options: [
      { value: 'sales', label: 'Sales' },
      { value: 'support', label: 'Support' },
    ]},
    { name: 'message', type: 'textarea', label: 'Message', required: true },
  ]}
/>

Custom Styling

<ContactUsScreen
  className="custom-contact"
  styles={{
    hero: { backgroundColor: '#f3f4f6' },
    form: { maxWidth: '800px' },
    map: { height: '500px' },
  }}
/>

Accessibility

Semantic HTML structure
ARIA labels for all interactive elements
Keyboard navigation support
Screen reader optimized
High contrast mode support

Platform Notes

Web

Responsive design with Flexbox/Grid
Google Maps integration
Form validation with HTML5 + JS

iOS

Native UITableView for office list
Apple Maps integration
Native form controls

Android

Material Design 3 components
Google Maps SDK
Input validation with TextInputLayout

Contact Form - Standalone form component
Map - Map component
Navigation - Header navigation
Dashboard - Other screen layout

Contact Us