WithWithout

Confronto “prima / dopo” su due colonne: a sinistra un box rosso con i dolori di chi non usa il tuo prodotto, a destra un box verde con come li risolvi. Ogni riga di sinistra dovrebbe avere la sua gemella a destra — è quello che rende il confronto leggibile a colpo d'occhio. Server component, nessuno stato.

File

components/WithWithout.tsx

Uso base

Non è montato in app/page.tsx: lo aggiungi tu, di solito subito dopo Problem e prima del pricing.

import WithWithout from "@/components/WithWithout";

<WithWithout />

Personalizzare

• Headline: l'<h2> in cima alla sezione (di default “Tired of managing Stripe invoices?”). Fai una domanda che il tuo utente si sta già facendo.
• Le due liste: sono due array di stringhe scritti inline dentro il JSX, non costanti in cima al file. Il primo sta dentro il div bg-error/20, il secondo dentro bg-success/20. Tieni lo stesso numero di righe nei due array.
• Titoli delle colonne: i due <h3> (“… without” / “… +”). Metti il nome del tuo prodotto al posto di quello di esempio.
• Colori: rosso e verde arrivano da --color-error e --color-success in app/globals.css, già tarati sulla palette cream/ink di ZeroToShip.
• Icone: la ✕ e la ✓ sono due SVG inline dentro i <li>. Se le cambi, cambiale in entrambe le colonne.

{[
  "Manually create invoices",
  "Or pay up to $2 per invoice",
  "Waste hours in customer support",
].map((item, index) => (
  <li key={index} className="flex gap-2 items-center">
    {/* icona ✕ */}
    {item}
  </li>
))}