Comparison Table Configuration

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

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
  ],
};

Add competitors and features

Update provider names and feature comparisons

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 (&lt;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: "&lt;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:

At least 2 providers defined
At least 1 feature category
All provider IDs match in features
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

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Comparison Table Configuration

Overview

Quick Start

Configuration Structure

Section Header

CTA Message

Providers

Features

Complete Example

Formatting Tips

Using HTML Entities

Special Characters

Multiple Categories

Troubleshooting

Provider ID mismatch error

Table not showing

“You” label not showing

Features misaligned

​Overview

​Quick Start

​Configuration Structure

​Section Header

​CTA Message

​Providers

​Features

​Complete Example

​Formatting Tips

​Using HTML Entities

​Special Characters

​Multiple Categories

​Troubleshooting

​Provider ID mismatch error

​Table not showing

​“You” label not showing

​Features misaligned

Overview

Quick Start

Configuration Structure

Section Header

CTA Message

Providers

Features

Complete Example

Formatting Tips

Using HTML Entities

Special Characters

Multiple Categories

Troubleshooting

Provider ID mismatch error

Table not showing

“You” label not showing

Features misaligned