> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuvrajverma.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Contact Page Configuration

> Configure your contact page with support options and contact information

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration File:** `config/pages/contact.ts`</Callout>

## Overview

The contact page allows you to:

* Display contact information (email, phone, address)
* Showcase multiple support channels
* Highlight response times
* Link to other resources (docs, chat, etc.)

Configuration file: `config/pages/contact.ts`

## Quick Start

<Steps>
  <Step title="Edit the config file">
    Open `config/pages/contact.ts`:

    ```typescript theme={null}
    export const contactConfig = {
      hero: {
        title: "We're here to",
        highlight: "help you succeed",
        subtitle: "Have a question? Need support? Our team is ready to assist you 24/7.",
        backgroundImage: "https://images.pexels.com/photos/1181467.jpeg",
        stats: [
          { value: "&lt;5min", label: "Response Time" },
          { value: "24/7", label: "Support Available" },
          { value: "98%", label: "Satisfaction Rate" },
        ],
      },
      // ... more config
    };
    ```
  </Step>

  <Step title="Add your contact information">
    Update email, phone, and address
  </Step>

  <Step title="Test it">
    ```bash theme={null}
    npm run dev
    ```

    Visit: [http://localhost:3000/contact](http://localhost:3000/contact)
  </Step>
</Steps>

***

## Configuration Structure

### Hero Section

```typescript theme={null}
hero: {
  title: "We're here to",
  highlight: "help you succeed",     // Highlighted part
  subtitle: "Have a question? Need support? Want to learn more about our services? Our team is ready to assist you 24/7.",
  backgroundImage: "https://images.pexels.com/photos/1181467.jpeg",
  stats: [
    { value: "&lt;5min", label: "Response Time" },
    { value: "24/7", label: "Support Available" },
    { value: "98%", label: "Satisfaction Rate" },
  ],
}
```

### Contact Information

```typescript theme={null}
contactInfo: {
  email: "support@latch.gg",
  phone: "+1 (555) 123-4567",
  address: {
    line1: "123 Hosting Avenue",
    line2: "Suite 500",
    city: "San Francisco",
    state: "CA",
    zip: "94105",
  },
}
```

**Note**: Social links are managed centrally in `config/branding.ts` (socialLinks) and appear automatically on the contact page.

### Support Options

```typescript theme={null}
supportOptions: [
  {
    title: "Live Chat",
    description: "Get instant help from our support team",
    icon: "message",
    available: "24/7",
    cta: "Start Chat",
    href: "#",
  },
  {
    title: "Email Support",
    description: "Send us an email and we'll respond within 1 hour",
    icon: "mail",
    available: "&lt; 1hr response",
    cta: "Send Email",
    href: "mailto:support@latch.gg",
  },
  {
    title: "Knowledge Base",
    description: "Find answers to common questions",
    icon: "book",
    available: "100+ articles",
    cta: "Browse Docs",
    href: "/knowledgebase",
  },
  {
    title: "Sales Inquiry",
    description: "Need a custom solution? Talk to our sales team",
    icon: "briefcase",
    available: "Business hours",
    cta: "Contact Sales",
    href: "mailto:sales@latch.gg",
  },
]
```

**Available icons**: message, mail, book, briefcase, phone, headphones

**href options**:

* External URL: `"https://example.com"`
* Internal route: `"/knowledgebase"`
* Email: `"mailto:support@example.com"`
* Chat widget: `"#"` (opens chat)

***

## Complete Example

```typescript theme={null}
export const contactConfig = {
  hero: {
    title: "We're here to",
    highlight: "help you succeed",
    subtitle: "Get in touch with our team 24/7",
    backgroundImage: "https://images.pexels.com/photos/1181467.jpeg",
    stats: [
      { value: "&lt;5min", label: "Response Time" },
      { value: "24/7", label: "Support Available" },
      { value: "98%", label: "Satisfaction Rate" },
    ],
  },
  
  contactInfo: {
    email: "support@yourbrand.com",
    phone: "+1 (555) 123-4567",
    address: {
      line1: "123 Main Street",
      line2: "Suite 100",
      city: "New York",
      state: "NY",
      zip: "10001",
    },
  },
  
  supportOptions: [
    {
      title: "Live Chat",
      description: "Instant support from our team",
      icon: "message",
      available: "24/7",
      cta: "Start Chat",
      href: "#",
    },
    {
      title: "Email Support",
      description: "We respond within 1 hour",
      icon: "mail",
      available: "&lt; 1hr response",
      cta: "Send Email",
      href: "mailto:support@yourbrand.com",
    },
    {
      title: "Knowledge Base",
      description: "Self-service help articles",
      icon: "book",
      available: "100+ articles",
      cta: "Browse Docs",
      href: "/knowledgebase",
    },
    {
      title: "Sales Team",
      description: "Talk to our sales team",
      icon: "briefcase",
      available: "9am-5pm EST",
      cta: "Contact Sales",
      href: "mailto:sales@yourbrand.com",
    },
  ],
};
```

***

## Best Practices

### Contact Information

1. **Real details** - Use actual contact info, not placeholders
2. **Multiple channels** - Offer email, phone, and chat
3. **Response times** - Set clear expectations ("under 5min", "1 hour")
4. **Business hours** - Specify availability for non-24/7 channels

### Support Options

1. **4-6 options** - Cover main support channels
2. **Clear CTAs** - "Start Chat" not "Click Here"
3. **Availability** - Show when each option is available
4. **Hierarchy** - Put fastest/best options first

### Hero Stats

1. **Service metrics** - Response time, availability, satisfaction
2. **Realistic** - Don't promise what you can't deliver
3. **Updated** - Keep satisfaction rates current

***

## Troubleshooting

### Social links not showing

Social links are defined in `config/branding.ts`:

```typescript theme={null}
export const brandingConfig = {
  socialLinks: {
    discord: "https://discord.gg/...",
    twitter: "https://twitter.com/...",
    // ...
  }
}
```

### mailto links not working

Ensure proper format:

```typescript theme={null}
href: "mailto:support@example.com"
```

### Support option icons not displaying

Use lowercase Lucide icon names: message, mail, book, briefcase, phone, headphones

### Address formatting issues

All address fields must be strings:

```typescript theme={null}
address: {
  line1: "123 Main St",
  line2: "Suite 100",
  city: "New York",
  state: "NY",
  zip: "10001"
}
```

***