Skip to main content
Configuration File: config/shared/comparison.ts

​
Overview

The comparison table shows a side-by-side feature comparison between you and competitors:
  • Display up to 4 providers (you + 3 competitors)
  • Show feature checkmarks (✓) and crosses (✗)
  • Organize features into categories
  • Add migration CTA
Configuration file: config/shared/comparison.ts

​
Quick Start

1

Edit the config file

Open config/shared/comparison.ts:
export const comparisonConfig = {
  section: {
    title: "Compare & Decide",
    description: "See how we stack up",
  },
  providers: [
    { id: "latch", name: "Latch", highlight: true },
    { id: "competitor1", name: "Competitor A" },
  ],
  features: [
    // ...feature comparison
  ],
};
2

Add competitors and features

Update provider names and feature comparisons
3

Test it

npm run dev
View the comparison table on your homepage

​
Configuration Structure

​
Section Header

section: {
  title: "Compare & Decide",
  description: "See how we stack up against the competition",
}

​
CTA Message

cta: {
  message: "With a competitor and want to move?",
  highlight: "Get Free Migration",     // Highlighted part
}
This appears below the comparison table with “Get Free Migration” highlighted.

​
Providers

providers: [
  { id: "latch", name: "Latch", highlight: true },      // Your company
  { id: "competitor1", name: "Competitor A" },
  { id: "competitor2", name: "Competitor B" },
  { id: "competitor3", name: "Competitor C" }
]
Important:
  • First provider with highlight: true is shown as “You”
  • Maximum 4 providers (you + 3 competitors)
  • id must match field names in features array
  • Use real competitor names or generic names

​
Features

features: [
  {
    category: "Key Features",
    items: [
      {
        name: "AMD Ryzen 9 7950X Processors",
        latch: true,           // You have it ✓
        competitor1: false,    // They don't ✗
        competitor2: false,
        competitor3: false
      },
      {
        name: "DDR5 RAM",
        latch: true,
        competitor1: false,
        competitor2: false,
        competitor3: true      // They have it ✓
      },
      {
        name: "Instant Setup (<60s)",
        latch: true,
        competitor1: false,
        competitor2: true,
        competitor3: false
      },
    ]
  }
]
Fields:
  • category - Group name (e.g., “Key Features”, “Support”, “Hardware”)
  • items - Array of features to compare
  • name - Feature name (be specific)
  • Provider IDs - true = has feature, false = doesn’t have feature

​
Complete Example

export const comparisonConfig = {
  section: {
    title: "Why Choose Us?",
    description: "We beat the competition where it matters",
  },
  
  cta: {
    message: "Ready to switch from your current provider?",
    highlight: "We'll Migrate You For Free",
  },
  
  providers: [
    { id: "us", name: "YourBrand", highlight: true },
    { id: "hostA", name: "HostA" },
    { id: "hostB", name: "HostB" },
  ],
  
  features: [
    {
      category: "Hardware",
      items: [
        { name: "AMD Ryzen 9 7950X", us: true, hostA: false, hostB: false },
        { name: "DDR5 RAM", us: true, hostA: false, hostB: true },
        { name: "NVMe SSD Storage", us: true, hostA: true, hostB: true },
        { name: "10Gbps Network", us: true, hostA: false, hostB: false },
      ]
    },
    {
      category: "Features",
      items: [
        { name: "Instant Setup", us: true, hostA: false, hostB: true },
        { name: "Free Backups", us: true, hostA: false, hostB: false },
        { name: "DDoS Protection", us: true, hostA: true, hostB: true },
        { name: "Free Migration", us: true, hostA: false, hostB: false },
      ]
    },
    {
      category: "Support",
      items: [
        { name: "24/7 Live Chat", us: true, hostA: true, hostB: false },
        { name: "<5min Response Time", us: true, hostA: false, hostB: false },
        { name: "Discord Community", us: true, hostA: false, hostB: false },
      ]
    },
  ],
};

​
Formatting Tips

​
Using HTML Entities

For special characters in feature names, use HTML entities: 
name: "&lt;60s Setup Time"        // < symbol
name: "99.9% Uptime"              // % works as-is
name: "Starts at $9.99/mo"        // $ works as-is

​
Special Characters

You can add special characters and symbols to feature names: 
name: "Lightning Fast"
name: "Ultra Secure"
name: "Premium Support"

​
Multiple Categories

Organize features into logical groups: 
features: [
  { category: "Hardware", items: [...] },
  { category: "Features", items: [...] },
  { category: "Support", items: [...] },
  { category: "Pricing", items: [...] },
]

​
Troubleshooting

​
Provider ID mismatch error

Ensure provider id matches the field names in features: 
providers: [
  { id: "latch", name: "Latch", highlight: true },
  { id: "competitor1", name: "CompA" },
]

features: [{
  category: "...",
  items: [
    { name: "...", latch: true, competitor1: false }
    //              ^^^^^        ^^^^^^^^^^^^
    //              Must match provider IDs
  ]
}]

​
Table not showing

Check:
  1. At least 2 providers defined
  2. At least 1 feature category
  3. All provider IDs match in features
  4. No syntax errors (missing commas, brackets)

​
“You” label not showing

The first provider with highlight: true becomes “You”: 
providers: [
  { id: "yourcompany", name: "YourName", highlight: true },
  //                                     ^^^^^^^^^^^^^^^
]

​
Features misaligned

Ensure every feature has all provider IDs: 
// If you have 3 providers (you + 2 competitors)
{ name: "...", latch: true, comp1: false, comp2: false }
//             ^^^^^^^^^^^^  ^^^^^^^^^^^^  ^^^^^^^^^^^^
//             All 3 required