Comparepopular

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

Compare — things side by side with equal weight (<CompareItem>): old vs new product, two builder images, two code samples. Not a feature grid — the reader is choosing between the columns.

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
kicker	string
title	string
description	string
columns	2 \| 3	2
heading	'center' \| 'left'	'center'
theme	Theme	'muted'
decor	'none' \| 'dots' \| 'dots-left'	'none'	decorative dot grid behind the content

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

---
/**
 * Compare — things side by side with equal weight (<CompareItem>): old vs
 * new product, two builder images, two code samples. Not a feature grid —
 * the reader is choosing between the columns.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  kicker?: string;
  title?: string;
  description?: string;
  columns?: 2 | 3;
  heading?: 'center' | 'left';
  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>