> ## 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.

# Comparison Table Configuration

> Configure feature comparison table to showcase how you stack up against competitors

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

## 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

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

    ```typescript theme={null}
    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
      ],
    };
    ```
  </Step>

  <Step title="Add competitors and features">
    Update provider names and feature comparisons
  </Step>

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

    View the comparison table on your homepage
  </Step>
</Steps>

***

## Configuration Structure

### Section Header

```typescript theme={null}
section: {
  title: "Compare & Decide",
  description: "See how we stack up against the competition",
}
```

### CTA Message

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
name: "Lightning Fast"
name: "Ultra Secure"
name: "Premium Support"
```

### Multiple Categories

Organize features into logical groups:

```typescript theme={null}
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:

```typescript theme={null}
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":

```typescript theme={null}
providers: [
  { id: "yourcompany", name: "YourName", highlight: true },
  //                                     ^^^^^^^^^^^^^^^
]
```

### Features misaligned

Ensure every feature has all provider IDs:

```typescript theme={null}
// If you have 3 providers (you + 2 competitors)
{ name: "...", latch: true, comp1: false, comp2: false }
//             ^^^^^^^^^^^^  ^^^^^^^^^^^^  ^^^^^^^^^^^^
//             All 3 required
```

***