Comparepopular

apps/www/src/sections/Compare.astro · 54 lines · group Compare

Compare — two or three columns of equal weight, one <CompareItem> card each: old vs new, two products, two builder images, two code samples. Use for: a choice, where the reader is meant to look left and right — "on-premise or cloud", "before and after", "basic or pro". Not for: a list of features that are not alternatives (<FeatureCards>); prices (<PricingCards>). Children: <CompareItem> tags, two or three. Layout: `columns` 2 (default) or 3; three columns only from large screens — tablets get the stacked layout. `heading="left"` moves the heading out of the centre.

In the fleet

Used on 3 sites built with this engine.

Samples 2

sample

Which station for which field

N1

One field, one crop, the essentials.

Air and soil
One season on a battery

N3

Several fields, a gateway and room for extra sensors.

Leaf wetness
Wind and gusts
Expansion port

G2 Gateway

The link every station in range talks through.

Four kilometres
A week of buffer

MDX of this sample

<Compare columns={3} heading="left" title="Which station for which field" theme="muted">
  <CompareItem title="N1" description="*One field*, one crop, the essentials." bullets={['Air and soil', 'One season on a battery']} />
  <CompareItem title="N3" description="*Several fields*, a gateway and room for extra sensors." bullets={['Leaf wetness', 'Wind and gusts', 'Expansion port']} />
  <CompareItem title="G2 Gateway" description="*The link* every station in range talks through." bullets={['Four kilometres', 'A week of buffer']} />
</Compare>

Props

Name	Type	Default	Description
id	string		anchor of the section
kicker	string		short uppercase line above the title
title	string		the section heading
description	string		a paragraph under the heading
columns	2 \| 3	2	cards per row on desktop
heading	'center' \| 'left'	'center'	where the heading sits
theme	'light' \| 'muted' \| 'dark' \| 'brand' \| 'brand-dark'	'muted'	background of the section (default "muted")
decor	'none' \| 'dots' \| 'dots-left'	'none'	decorative dot grid behind the content

Source apps/www/src/sections/Compare.astro @ gitt.one

---
/**
 * Compare — two or three columns of equal weight, one <CompareItem> card each:
 *   old vs new, two products, two builder images, two code samples.
 *
 * Use for: a choice, where the reader is meant to look left and right —
 *   "on-premise or cloud", "before and after", "basic or pro".
 * Not for: a list of features that are not alternatives (<FeatureCards>);
 *   prices (<PricingCards>).
 * Children: <CompareItem> tags, two or three.
 * Layout: `columns` 2 (default) or 3; three columns only from large screens —
 *   tablets get the stacked layout. `heading="left"` moves the heading out of
 *   the centre.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** short uppercase line above the title */
  kicker?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** cards per row on desktop */
  columns?: 2 | 3;
  /** where the heading sits */
  heading?: 'center' | 'left';
  /** background of the section (default "muted") */
  theme?: Theme;
  /** decorative dot grid behind the content */
  decor?: 'none' | 'dots' | 'dots-left';
}
const { id, kicker, title, description, columns = 2, heading = 'center', theme = 'muted', decor = 'none' } = Astro.props;
// three columns only from lg: at 768 they squeeze into unreadable strips,
// so a tablet gets the stacked mobile layout (Kirill, 2026-08-26)
const cols = { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3' }[columns];
---

<Section id={id} theme={theme} heading="sr" decor={decor}>
  {(kicker || title || description) && (
    <div class:list={['max-w-3xl', heading === 'center' && 'mx-auto text-center']}>
      {kicker && <p class="text-sm font-semibold uppercase tracking-wide"><span class="bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent">{kicker}</span></p>}
      {title && <h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>}
      {description && <p class="mt-4 text-xl text-gray-500 [.bg-stone-800_&]:text-primary-100">{description}</p>}
    </div>
  )}
  <div class:list={['mx-auto mt-12 grid max-w-lg grid-cols-1 gap-10 lg:max-w-none', cols]}>
    <slot />
  </div>
</Section>