With / Without

What it does

WithWithout renders a two-column layout. The left column lists negatives (without your product) and the right column lists positives (with it). Each row is a comparison point with a checkmark or cross icon.

Usage

import WithWithout from "@/components/WithWithout";

<WithWithout />

Customizing

Open src/components/WithWithout.tsx. At the top of the file you will find two arrays: without (the pain points on the left) and withList (the benefits on the right). Each entry is a plain string — edit them directly.

const without = [
  "Juggling five tools that don't talk to each other",
  "Losing time to repetitive manual work every week",
  // add or remove items as needed
];

const withList = [
  "One place for everything that matters to your business",
  "Workflows that run automatically so your team stays focused",
  // mirror the number of items in the without array
];