Skip to main content
Configuration File: config/pages/contact.ts

​
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

1

Edit the config file

Open config/pages/contact.ts:
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: "<5min", label: "Response Time" },
      { value: "24/7", label: "Support Available" },
      { value: "98%", label: "Satisfaction Rate" },
    ],
  },
  // ... more config
};
2

Add your contact information

Update email, phone, and address
3

Test it

npm run dev
Visit: http://localhost:3000/contact

​
Configuration Structure

​
Hero Section

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: "<5min", label: "Response Time" },
    { value: "24/7", label: "Support Available" },
    { value: "98%", label: "Satisfaction Rate" },
  ],
}

​
Contact Information

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

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: "< 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

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: "<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: "< 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 are defined in config/branding.ts: 
export const brandingConfig = {
  socialLinks: {
    discord: "https://discord.gg/...",
    twitter: "https://twitter.com/...",
    // ...
  }
}
Ensure proper format: 
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: 
address: {
  line1: "123 Main St",
  line2: "Suite 100",
  city: "New York",
  state: "NY",
  zip: "10001"
}