# Gitt One Pages — content tags of the www engine

A page is a file articles/<page>/index.<locale>.mdx: front matter (title,
description) and then a sequence of sections — one typed tag per slide of the
page, top to bottom. Only the tags listed here exist. Sub-blocks (Feature, Step,
Question, Plan, …) go inside their parent tag and never stand alone.

Rules that hold for every tag:
- Pictures are file names in images/ of the content repository: image="team.jpg",
  image="logos/acme.png". Files to download live in assets/ and are linked as
  "/assets/<file>". The build resizes pictures; never inline a URL.
- Icons are Heroicons: import at the top of the file
  (import BoltIcon from 'astro-heroicons/outline/Bolt.astro';) and pass the
  import as Icon={BoltIcon}. Names are the Heroicons outline set.
- A prop with a string value is written title="…"; numbers, booleans and arrays
  are written in braces: columns={3}, open, overlapNext={false},
  bullets={['a', 'b']}.
- "Children: markdown" means the text between the opening and closing tag is
  rendered as markdown (paragraphs, lists, emphasis, links). "Children: <X>
  tags" means only those tags belong inside; free text there is dropped.
- theme values: "light" white; "muted" light grey; "dark" a stone band with
  white text; "brand" the brand gradient with white text; "brand-dark" the deep
  flat brand tone. Every colour derives from brandColor in pages.config.js.
- Links: primaryHref / href take a site path ("/contacts/"), an anchor on the
  home page ("/#contacts" — the contact form's default id) or an absolute URL.
- A button or link is shown only when its text prop is given.
- Header and footer are not tags: they come from pages.config.js (title,
  navigation, defaultPhone, defaultEmail, footerLines, logoImage, brandColor).
- An editor working through chat cannot add binary files. When a page needs a
  picture, a logo or a PDF that is not in images/ or assets/ yet, write the tag
  with the file name you chose and ask the user to upload the file under that
  name (GitLab: Repository → Upload file, on the branch being edited).
- "Ask the user:" in a tag's reference names what only a person can do —
  accounts, keys, addresses, files, decisions. Do your part, never invent or
  copy such values, and end the reply with a numbered list of what the user
  has to do.

The HTML gallery with rendered samples: https://pages.gitt.one/components/

## Hero

The first screen: title, pitch, picture, buttons.

### HeroCover (popular)

HeroCover — the first screen: a full-width photo under the brand gradient, the title, pitch and buttons centered on top of it.

Use for: a landing that opens with a wide, atmospheric photo (a landscape, a workplace, a team) and one short promise.
Not for: a product shot that must stay whole (<HeroSplit imageFit="contain">); a page that opens with words alone (<HeroText>).
Children: optional markdown between the tags, rendered under the description and above the buttons. No sub-block tags.
Picture: LANDSCAPE. It is cropped to fill the section and tinted with the brand colour, so it must not carry text or a logo. Without `image` the section is a plain brand-coloured band.
Follow-up: by default the bottom keeps room for a <FeatureCards overlap> row that hangs over the edge. Set overlapNext={false} when the next section is anything else, or the hero ends with an empty band.
Buttons: a button appears only when its text is given; primary is the solid brand button, secondary the translucent one.

Props:
- title (string, required) — the headline, one line
- highlight (string) — a second line of the headline, painted with the brand gradient
- description (string) — the pitch under the headline, one or two sentences
- image (string) — file name in images/, landscape; cropped to fill the section
- overlapNext (boolean, default true) — keep room at the bottom for a <FeatureCards overlap> row; false when nothing hangs over
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button, e.g. "/contacts/" or "#contacts"
- secondaryText (string) — text of the second, translucent button
- secondaryHref (string, default '#') — link of the secondary button

Example 1:
```mdx
<HeroCover
  title="Weather that pays off"
  highlight="in the field, not on a grid cell"
  description="A station you install in an hour and forget about for a season. Frost, wind and leaf wetness measured inside the crop, not at the airport twenty kilometres away."
  image="photo-wide-01.jpg"
  primaryText="Order a station"
  primaryHref="/stations/"
  secondaryText="How it works"
  secondaryHref="/how-it-works/"
/>
```

Example 2:
```mdx
<HeroCover
  title="Every field on one screen"
  description="One dashboard for one orchard or forty. No buttons you will never press."
  image="photo-wide-02.jpg"
  overlapNext={false}
  primaryText="Book a demo"
  primaryHref="/demo/"
/>
```

### HeroSplit (popular)

HeroSplit — the first screen with the text on one side and the picture on the other.

Use for: a product with a picture worth half the screen — a device, a packshot, a screenshot.
Not for: a wide photo as a backdrop (<HeroCover>); no picture at all (<HeroText>).
Children: optional markdown between the tags, rendered under the description and above the buttons. No sub-block tags.
Picture: `imageFit` decides how it looks.
imageFit="contain" (default) shows the picture whole, hugging the bottom edge of its half. Only a PORTRAIT or square picture looks right; a landscape one sinks into the bottom corner and leaves the top of its half empty. Product shots on a transparent or white background work best.
imageFit="cover" fills the picture half edge to edge, cropped, with a diagonal that hands the text band over to the photo. Use it for a LANDSCAPE photo.
Theme: "light" (white) or "dark" (stone band with white text). imageSide puts the picture left or right.
Buttons: a button appears only when its text is given.

Props:
- title (string, required) — the headline, one line
- highlight (string) — a second line of the headline, painted with the brand gradient
- description (string) — the pitch under the headline, one or two sentences
- image (string, required) — file name in images/; portrait for imageFit="contain", landscape for "cover"
- imageSide ('left' | 'right', default 'right') — which side the picture takes
- theme ('light' | 'dark', default 'light') — "light" white, "dark" stone band
- imageFit ('cover' | 'contain', default 'contain') — "contain" shows the picture whole (portrait shots); "cover" crops it to fill the half (landscape photos)
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button

Example 1:
```mdx
<HeroSplit
  title="Nordvind Station N3"
  highlight="Two-year battery, one bolt"
  description="Sensors come calibrated and swap in the field without tools. The housing survives the winter outdoors, and the radio reaches the gateway from four kilometres away."
  image="photo-tall-02.jpg"
  primaryText="See the models"
  primaryHref="/stations/"
  secondaryText="Datasheet"
  secondaryHref="/downloads/"
/>
```

Example 2:
```mdx
<HeroSplit
  theme="dark"
  imageFit="cover"
  imageSide="left"
  title="The season, recorded"
  highlight="from the first frost to the last harvest"
  description="Everything the stations measure is stored from day one, so the season you are having can be compared with the season you had."
  image="photo-tall-01.jpg"
  primaryText="Open the dashboard"
  primaryHref="/dashboard/"
/>
```

### HeroText

HeroText — the first screen without a picture: title, pitch and buttons, centered in a reading column.

Use for: a page that opens with words alone — a service, a consultancy, a documentation landing, an inner page.
Not for: a page that has a good picture — use <HeroSplit> or <HeroCover>; a mid-page call to action — use a <Cta…> section, this one renders an <h1>.
Children: optional markdown between the tags, rendered under the description and above the buttons. No sub-block tags.
Theme: "light" (white) or "dark" (stone band with white text).
Buttons: a button appears only when its text is given.

Props:
- title (string, required) — the headline, one line
- highlight (string) — a second line of the headline, painted with the brand gradient
- description (string) — the pitch under the headline, one or two sentences
- theme ('light' | 'dark', default 'light') — "light" white, "dark" stone band
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button

Example:
```mdx
<HeroText
  title="Frost alerts that arrive in time"
  highlight="not a forecast — a measurement"
  description="Set a threshold once and the alert finds you by SMS, e-mail or in the app, early enough to start the fans."
  primaryText="Talk to us"
  primaryHref="/contact/"
  secondaryText="Coverage map"
  secondaryHref="/coverage/"
/>
```

## Features & lists

Grids and lists of benefits, services, steps, products, checklists.

### FeatureCards (popular)

Sub-blocks: <Feature>.

FeatureCards — a grid of cards, one <Feature> per card: services, benefits, reasons to choose, audiences.

Use for: three to six parallel items of equal weight, each with an icon or a picture and a sentence or two. The most used section of the library.
Not for: a dense list of many short points (<FeatureList>, no cards); one topic explained in several points beside a heading (<FeatureAside>); a numbered process (<Steps>); a choice between two or three things (<Compare>).
Children: <Feature> tags only, three or more. Content written directly between the tags is not rendered.
Layout: `columns` 1–4 (default 3); the cards wrap to one column on phones. `overlap` pulls the grid up over the previous section — pair it with a <HeroCover> right above (its default overlapNext keeps the room). `heading="left"` or a `kicker` moves the heading out of the centre.
Look: `icons="soft"` paints the icon squares in a pale tint instead of the brand gradient; `decor="dots"` adds the decorative dot grid; on theme="brand" the cards turn translucent white on the gradient.
Link: `linkText` + `href` add one centered button under the grid.

Props:
- id (string) — anchor of the section, e.g. "services" → /#services
- kicker (string) — short uppercase line above the title, painted with the brand gradient
- title (string) — the section heading
- description (string) — one or two sentences under the heading
- columns (1 | 2 | 3 | 4, default 3) — cards per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section
- decor ('none' | 'dots' | 'dots-left', default 'none') — decorative dot grid behind the content
- overlap (boolean, default false) — hang the cards over the bottom edge of the section above (a <HeroCover>)
- heading ('center' | 'left', default 'center') — where the heading sits
- icons ('brand' | 'soft', default 'brand') — "brand" gradient squares behind the icons, "soft" a pale tint
- linkText (string) — text of one centered button under the grid; shown only with href
- href (string) — link of that button
- class (string) — escape hatch for compositions: extra classes for the section shell

Example 1:
```mdx
import BoltIcon from 'astro-heroicons/outline/Bolt.astro';
import SignalIcon from 'astro-heroicons/outline/Signal.astro';
import CloudIcon from 'astro-heroicons/outline/Cloud.astro';

<FeatureCards kicker="WHY NORDVIND" title="What the station actually changes" columns={3}>
  <Feature title="Frost alerts" description="Threshold, rate of fall and dew point, checked every minute inside the crop." Icon={BoltIcon} />
  <Feature title="Leaf wetness" description="Tells you whether the spray will hold before you fill the tank." Icon={CloudIcon} />
  <Feature title="Offline buffer" description="The gateway keeps a week of readings when the uplink drops." Icon={SignalIcon} />
</FeatureCards>
```

Example 2:
```mdx
<FeatureCards theme="dark" icons="soft" columns={4} heading="left" title="Built to be left alone">
  <Feature number="1" title="One battery" description="A full season on a single charge." />
  <Feature number="2" title="One bolt" description="Mounts on any standard post." />
  <Feature number="3" title="No tools" description="Sensors swap by hand, in the field." />
  <Feature number="4" title="No visits" description="Firmware arrives over the air." />
</FeatureCards>
```

Example 3:
```mdx
import SignalIcon from 'astro-heroicons/outline/Signal.astro';
import ShieldIcon from 'astro-heroicons/outline/ShieldCheck.astro';
import BatteryIcon from 'astro-heroicons/outline/Battery50.astro';

<FeatureCards overlap columns={3} title="Three things growers ask us first" decor="dots">
  <Feature title="Does it work without coverage?" description="Yes — the gateway buffers and syncs when the network returns." Icon={SignalIcon} bullets={['A week of storage', 'No lost readings']} />
  <Feature title="Can I export the data?" description="CSV, PDF and an open API. The readings belong to the farm." Icon={ShieldIcon} />
  <Feature title="What if a sensor fails?" description="You hear it from us before you notice it, and the spare fits in a pocket." Icon={BatteryIcon} linkText="Warranty" href="/warranty/" />
</FeatureCards>
```

### Feature (popular)

Sub-block of <FeatureCards>.

Feature — one item of <FeatureCards>, <FeatureAside> or <FeatureList>: a badge (icon or number), a title, a description, optional bullets, optional markdown and an optional link.

Parent: never on its own; always inside one of the three Feature… sections, which decide whether it is a card, a plain block or an aside row.
Badge: `Icon` is a Heroicon imported at the top of the file — `import BoltIcon from 'astro-heroicons/outline/Bolt.astro';` then `Icon={BoltIcon}`; `number` puts an ordinal in the badge instead. Without either there is no badge.
Children: markdown between the tags is rendered under the description (paragraphs, lists, emphasis, links).
Picture: `image` (file name in images/) is shown full width above the title — for a screenshot or an illustration instead of an icon.
Link: `linkText` + `href` render an arrow link at the bottom of the item.

Props:
- title (string, required) — the item heading
- kicker (string) — a short mono label beside the badge, e.g. a product code or a version
- description (string) — one or two sentences
- Icon (any) — a Heroicon component imported in the article, e.g. Icon={BoltIcon}
- image (string) — file name in images/, shown above the title
- number (string | number) — an ordinal shown in the badge instead of an icon
- bullets (string[], default []) — short points listed under the description
- linkText (string) — text of the arrow link at the bottom; shown only with href
- href (string) — link target

### FeatureAside (popular)

FeatureAside — the heading, a paragraph and an optional picture on the left; a dense icon-and-text list of <Feature> on the right.

Use for: one subject explained in several points — "how we work", "what is included", "why it matters" — where the points support the heading rather than compete with it.
Not for: parallel offers of equal weight (<FeatureCards>); a numbered sequence (<Steps>).
Children: <Feature> tags, three to six. The icon of each sits to the left of its text.
Picture: `image` is placed under the heading text on the left; any proportions, shown whole.
Link: `linkText` + `href` add one centered button under the block.

Props:
- id (string) — anchor of the section
- kicker (string) — short uppercase line above the title
- title (string) — the section heading, left column
- description (string) — a paragraph under the heading, left column
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section
- decor ('none' | 'dots' | 'dots-left', default 'none') — decorative dot grid behind the content
- image (string) — file name in images/, shown under the heading text
- linkText (string) — text of one centered button under the block; shown only with href
- href (string) — link of that button
- class (string) — escape hatch for compositions: extra classes for the section shell

Example:
```mdx
import BoltIcon from 'astro-heroicons/outline/Bolt.astro';
import SignalIcon from 'astro-heroicons/outline/Signal.astro';
import ShieldIcon from 'astro-heroicons/outline/ShieldCheck.astro';

<FeatureAside
  theme="muted"
  kicker="IN THE FIELD"
  title="Small enough to forget, stubborn enough to trust"
  description="The parts that matter are the ones you never think about: the seal, the mount and the radio."
  image="photo-01.jpg"
>
  <Feature title="Sealed to IP67" description="Rain, dust and a pressure washer at the end of the season." Icon={ShieldIcon} />
  <Feature title="Four kilometres" description="Line of sight to the gateway, on a licence-free band." Icon={SignalIcon} />
  <Feature title="Field calibration" description="Swap a sensor and the station recognises it by itself." Icon={BoltIcon} />
</FeatureAside>
```

### FeatureList

FeatureList — the <Feature> items without cards: the icon and the text straight on the section's background.

Use for: many short points — six, eight, twelve — where a card around every line would be noise: a feature matrix, "what you get", a capabilities list.
Not for: three to six items that deserve a card each (<FeatureCards>).
Children: <Feature> tags only.
Layout: `columns` 1–4 (default 3); `heading="left"` or a `kicker` moves the heading out of the centre.
Link: `linkText` + `href` add one centered button under the list.

Props:
- id (string) — anchor of the section
- kicker (string) — short uppercase line above the title
- title (string) — the section heading
- description (string) — one or two sentences under the heading
- columns (1 | 2 | 3 | 4, default 3) — items per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section
- decor ('none' | 'dots' | 'dots-left', default 'none') — decorative dot grid behind the content
- heading ('center' | 'left', default 'center') — where the heading sits
- icons ('brand' | 'soft', default 'brand') — "brand" gradient squares behind the icons, "soft" a pale tint
- linkText (string) — text of one centered button under the list; shown only with href
- href (string) — link of that button
- class (string) — escape hatch for compositions: extra classes for the section shell

Example:
```mdx
import BoltIcon from 'astro-heroicons/outline/Bolt.astro';
import CloudIcon from 'astro-heroicons/outline/Cloud.astro';
import MapIcon from 'astro-heroicons/outline/MapPin.astro';

<FeatureList kicker="WHAT YOU GET" title="Everything a station needs, nothing it does not" heading="left" columns={3}>
  <Feature title="Readings every minute" description="Air and soil temperature, humidity, wind, rain and leaf wetness." Icon={CloudIcon} />
  <Feature title="Alerts that reach a person" description="Rules per field, per crop and per shift — not one address for everything." Icon={BoltIcon} />
  <Feature title="A map that means something" description="Stations, gateways and the last time each of them spoke." Icon={MapIcon} />
</FeatureList>
```

### FeatureSection

Sub-blocks: <FeatureItem>.

FeatureSection — a wrapper for one or more <FeatureItem> rows: big split blocks, each with a headline, a paragraph, a button and a large picture bleeding to the edge of the screen.

Use for: one or two flagship features that deserve a screen each — a dashboard screenshot, a device photo — presented editorially rather than as a grid.
Not for: a grid of several equal features (<FeatureCards>); a picture beside plain text (<Prose> with an image or <StatsSplit>).
Children: <FeatureItem> tags only; each is a full-width row.
Look: white background with a soft grey gradient at the top; the design is an author block kept from one of the fleet's sites and has no theme or columns props.

Props: none — a wrapper around its children.

Example:
```mdx
<FeatureSection>
  <FeatureItem
    title="Own the readings, not a subscription to them"
    description="Export the season as CSV, hand it to your agronomist, or pipe it into the tools you already run. Nothing is locked behind our dashboard."
    imgPath="photo-05.jpg"
    btnText="Read the API docs"
    btnPath="/api/"
  />
</FeatureSection>
```

### FeatureItem

Sub-block of <FeatureSection>.

FeatureItem — one row of <FeatureSection>: an icon badge, a headline, a paragraph and a gradient button on the left, a big picture on the right bleeding past the container.

Parent: <FeatureSection> only.
Children: none; the text comes from `description`. All five props are required.
Picture: `imgPath` (file name in images/) is a LANDSCAPE screenshot or photo; it keeps its proportions and is cropped only on very wide screens. The icon in the badge is fixed (an inbox).

Props:
- title (string, required) — the headline of the row
- description (string, required) — the paragraph under the headline
- btnText (string, required) — text of the gradient button
- btnPath (string, required) — link of the button
- imgPath (string, required) — file name in images/, a landscape screenshot or photo

### ChecklistSection (popular)

Sub-blocks: <ChecklistItem>.

ChecklistSection — a heading on the left and a three-column grid of check-marked points (<ChecklistItem>) on a light grey band.

Use for: requirements, "what you need before you start", compliance points, a checklist of what is included — items that read as "yes, done" rather than as features to sell.
Not for: benefits with icons (<FeatureCards>, <FeatureList>); an ordered process (<Steps>).
Children: <ChecklistItem> tags only, usually three to nine.
Look: an author block kept from one of the fleet's sites — always the grey band, always three columns on desktop; the heading has a gradient `subTitle` above it.

Props:
- id (string) — anchor of the section, e.g. "features"
- subTitle (string) — short uppercase line above the title, painted with the brand gradient
- title (string, required) — the section heading
- description (string) — a paragraph under the heading

Example:
```mdx
<ChecklistSection title="Before the first frost night" description="Twenty minutes of preparation that decide how the night goes.">
  <ChecklistItem title="Check the battery level" description="The dashboard shows it per station; anything under a fifth gets a replacement." />
  <ChecklistItem title="Set the threshold per field" description="The lower field freezes first — give it its own rule." />
  <ChecklistItem title="Name the people on duty" description="An alert that reaches everyone reaches nobody." />
  <ChecklistItem title="Test the siren" description="One button in the app, once a season." />
</ChecklistSection>
```

### ChecklistItem (popular)

Sub-block of <ChecklistSection>.

ChecklistItem — one point of <ChecklistSection>: a brand-coloured check mark, a bold title and a line of text.

Parent: <ChecklistSection> only. Children: none, both props are plain strings.

Props:
- title (string, required) — the point, bold
- description (string, required) — one sentence under it

### Steps

Sub-blocks: <Step>.

Steps — a numbered how-it-works list: circle badges numbered automatically, a title and a short text under each (<Step>).

Use for: a process in three to six steps — "how it works", "how to order", onboarding.
Not for: a horizontal chain of one-word stages on a dark band (<Workflow>); unordered points (<FeatureList>).
Children: <Step> tags only; the numbering follows their order.
Layout: `columns` 2–4 (default 4). The heading is left-aligned by design (this block came into the library as it was).

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (2 | 3 | 4, default 4) — steps per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<Steps title="From the box to the first reading" description="About an hour, most of it walking to the field.">
  <Step title="Mount" description="One bolt on a standard post, antenna up." />
  <Step title="Scan" description="The code on the housing pairs the station with the farm." />
  <Step title="Set the rules" description="Pick the thresholds that matter for this crop." />
  <Step title="Forget it" description="The next thing you hear from it is an alert." />
</Steps>
```

### Step

Sub-block of <Steps>.

Step — one item of <Steps>: the numbered circle, a title and a description. The number is automatic.

Parent: <Steps> only.
Children: optional markdown between the tags, rendered under the description.

Props:
- title (string, required) — the step heading
- description (string) — one or two sentences

### Workflow

Sub-blocks: <WorkflowStep>.

Workflow — a horizontal process chain on a dark stone band: numbered circles joined by arrows, one short label each (<WorkflowStep>).

Use for: a pipeline or lifecycle in one-word or few-word stages — "Order → Build → Test → Deploy" — as a compact divider between bigger sections.
Not for: steps that need a sentence of explanation each (<Steps>).
Children: <WorkflowStep> tags only; three or six fit a row best (six per row on desktop, three on tablets). Numbering and arrows are automatic.

Props:
- id (string) — anchor of the section
- title (string) — a heading centered above the chain

Example:
```mdx
<Workflow title="How a reading reaches you" description="Four hops, none of which need your attention.">
  <WorkflowStep title="Station" description="Measures inside the crop, every minute." />
  <WorkflowStep title="Gateway" description="Collects, buffers and forwards." />
  <WorkflowStep title="Cloud" description="Stores, compares and predicts." />
  <WorkflowStep title="You" description="An alert, only when it changes a decision." />
</Workflow>
```

### WorkflowStep

Sub-block of <Workflow>.

WorkflowStep — one link of the <Workflow> chain: the number and a short label. Parent: <Workflow> only. No children.

Props:
- title (string, required) — the stage label, a few words

## Compare

Things side by side with equal weight: products, builder images, code samples.

### Compare (popular)

Sub-blocks: <CompareItem>.

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.

Props:
- 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, default 2) — cards per row on desktop
- heading ('center' | 'left', default 'center') — where the heading sits
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the section (default "muted")
- decor ('none' | 'dots' | 'dots-left', default 'none') — decorative dot grid behind the content

Example 1:
```mdx
<Compare columns={2} kicker="TWO WAYS TO RUN IT" title="Cloud or your own server" description="The stations do not care; the data can live where your policy says it should.">
  <CompareItem title="Nordvind Cloud" description="We keep the servers, the backups and the forecasts up to date." bullets={['Nothing to install', 'Forecasts included', 'Updates on the day they ship']} image="screen-01.png" />
  <CompareItem title="On your own server" description="The same software inside your network, on your hardware." bullets={['Data never leaves the farm', 'Your backup policy', 'Yearly licence']} image="screen-02.png" />
</Compare>
```

Example 2:
```mdx
<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>
```

### CompareItem (popular)

Sub-block of <Compare>.

CompareItem — one column of <Compare>: a white card with an optional picture on top, an icon or a mono label, a title, paragraphs, bullets, a code sample and markdown.

Parent: <Compare> only.
Text: `description` is one paragraph or an array of paragraphs; words between *asterisks* inside it are painted in the brand colour.
Code: `code` renders a dark code block at the bottom of the card, `file` its file-name caption — for comparing two configurations or snippets.
Children: markdown between the tags is rendered at the end of the card.
Picture: `image` (file name in images/) is shown whole in a fixed-height box above the text — a product shot or a logo, not a wide photo.

Props:
- title (string, required) — the card heading
- kicker (string) — a short mono label beside the icon, e.g. a version or a code
- description (string | string[]) — one paragraph, or several as an array; *emphasis* is painted in the brand colour
- image (string) — file name in images/, shown whole above the text
- Icon (any) — a Heroicon component imported in the article, e.g. Icon={BoltIcon}
- bullets (string[], default []) — short points listed under the description
- code (string) — a code sample rendered in a dark block
- file (string) — file name shown as the caption of the code block

## Text & prose

Words rather than grids: mission, about, certification texts, questions and answers.

### Prose (popular)

Sub-blocks: <ProseAside>, <ProseItem>.

Prose — a text section: kicker, title and lead, then markdown in a reading column. The section for anything that is words rather than a grid.

Use for: mission, about us, a certification text, terms, a long explanation, a page that is mostly paragraphs.
Not for: a first screen (<HeroText>); a list of parallel points (<FeatureList>); questions and answers (<Faq>).
Children: markdown between the tags — paragraphs, headings, lists, links, emphasis, tables, code. Also the sub-block tags <ProseItem> (a titled sub-section) and <ProseAside> (a card floated beside the text).
Layout: align="center" (default) centers the heading and the text; align="left" is the shape for long reading. `width="text"` keeps a comfortable reading measure, `width="wide"` uses the whole print zone — use "wide" together with a <ProseAside>. `heading` aligns the heading independently (a centered heading over a left-aligned body is the certification-page shape).
Picture: `image` (file name in images/) is shown under the text — a certificate scan, a schema.
Links: `linkText` + `href` render an arrow link; primary/secondary buttons follow under the text.

Props:
- id (string) — anchor of the section
- kicker (string) — short uppercase line above the title, painted with the brand gradient
- title (string) — the section heading
- description (string) — the lead paragraph, larger than the body
- align ('center' | 'left', default 'center') — alignment of heading and text
- width ('text' | 'wide', default 'text') — 'text' keeps the reading measure; 'wide' uses the whole print zone — what a section with a <ProseAside> wants
- heading ('center' | 'left') — header alignment; defaults to `align`
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section
- decor ('none' | 'dots' | 'dots-left', default 'none') — decorative dot grid behind the content
- image (string) — file name in images/, shown under the text
- linkText (string) — text of an arrow link under the text; shown only with href
- href (string) — target of that link
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button
- class (string) — escape hatch for compositions: extra classes for the section shell

Example 1:
```mdx
<Prose kicker="WHY WE BUILT IT" title="A thermometer is not a decision">
Growers used to choose between a thermometer that told them nothing and a research mast nobody could afford.

Nordvind sits in between: the sensors that change a decision, and none of the ones that only look good on a datasheet.

* Frost, wind, rain and leaf wetness — inside the crop
* One battery per season, one bolt per station
* Readings exported as CSV, PDF or through the API
</Prose>
```

Example 2:
```mdx
<Prose width="wide" title="What we promise, and what we do not" heading="left" decor="dots">
We promise that a station keeps measuring when the network is down, that a sensor can be replaced by the person who found the problem, and that the data leaves with you if you leave us.

We do not promise a forecast that is right every time. Nobody can. What we can do is tell you what is happening in your field right now, minutes after it starts happening.

<ProseAside>
  <Quote quote="Measure where the crop is, alert the person on duty, keep the history." name="Anna Lindqvist" role="Head of agronomy, Almara Farms" avatar="avatar-01.jpg" />
</ProseAside>
</Prose>
```

### ProseAside

Sub-block of <Prose>.

ProseAside — a card floated beside the text of a <Prose>: a quote, a picture, a callout. The text flows around it.

Parent: <Prose> only — put it right after the opening <Prose> tag and give the section width="wide", or the pair will not fit.
Children: what the card holds — typically one <Quote …/>, or markdown (a paragraph, a picture written as markdown).
Side: right by default; side="left" floats it left.

Why a tag and not a named slot: `slot="aside"` does not reach `Astro.slots.has()` from MDX, so content written by hand could never turn the two-column shape on. A tag works from MDX and from Astro alike.

Props:
- side ('right' | 'left', default 'right') — which side of the text the card floats to

### ProseItem

Sub-block of <Prose>.

ProseItem — a titled sub-section inside <Prose>: a subheading, markdown, an optional picture and an optional button. Several of them stack inside ONE section with a normal vertical rhythm.

Use for: an "about" page with three themes, a certification page with one block per certificate, a services description — anything that would otherwise become a run of separate sections.
Parent: <Prose> only (usually <Prose heading="left">).
Children: markdown between the tags.
Picture: `image` (file name in images/) is shown under the text of this item.

Props:
- title (string) — the subheading
- image (string) — file name in images/, shown under the text
- linkText (string) — text of a button under the item; shown only with href
- href (string) — link of that button

Example:
```mdx
<Prose title="How a season is put together" heading="left">
  <ProseItem title="Before the season">
Stations go up while the ground is still hard: one bolt, one scan, and the thresholds from last year are already there.
  </ProseItem>
  <ProseItem title="During the season">
The dashboard is quiet on purpose. It speaks when a field crosses a line you drew, and stays out of the way otherwise.
  </ProseItem>
  <ProseItem title="After the harvest">
The season is exported in one click and compared with the ones before it. The stations stay where they are.
  </ProseItem>
</Prose>
```

### Faq (popular)

Sub-blocks: <Question>.

Faq — questions and answers as an accordion (native <details>, no JavaScript), on a rounded grey panel under the section heading.

Use for: FAQ, "common questions", objections handled one by one.
Children: <Question q="…">markdown answer</Question> tags; or the `items` prop with plain-text pairs when the answers need no markdown. Both may be combined — `items` render first.

Props:
- id (string) — anchor of the section, e.g. "faq"
- title (string) — the section heading
- description (string) — a paragraph under the heading
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section
- items ({ question: string; answer: string; open?: boolean }[], default []) — plain-text pairs instead of <Question> children; `open` expands one by default

Example:
```mdx
<Faq title="Questions growers ask first" description="If yours is not here, write to us — we answer in a day.">
  <Question q="Does it work without mobile coverage?" open>
    Yes. The station talks to a gateway on a licence-free band, and the gateway keeps a week of readings when the uplink drops. Nothing is lost while the network is away.
  </Question>
  <Question q="How long does the battery last?">
    A full season. The station reports its own battery level, and we send a replacement before it becomes your problem.
  </Question>
  <Question q="Can I take the data with me?">
    Always. Export as CSV or PDF, or read it through the API. The readings belong to the farm, not to us.
  </Question>
  <Question q="What happens if a sensor breaks?">
    You hear about it from us first. The spare fits in a pocket and swaps by hand — no tools, no service visit.
  </Question>
</Faq>
```

### Question (popular)

Sub-block of <Faq>.

Question — one item of <Faq>: the question in the summary line, the answer as markdown between the tags. `open` expands it on page load.

Props:
- q (string, required) — the question, one line
- open (boolean, default false) — expanded on page load

## Call to action

Banners that ask for the next step.

### CtaBanner

CtaBanner — the wide call to action: the title (with an optional brand-gradient line) on the left, the buttons on the right, on a full-width band.

Use for: the closing prompt of a landing page, or the prompt between two content blocks — "Ready to start? Contact us".
Not for: a short one-line invitation (<CtaCentered>); a prompt with a picture (<CtaSplit>, <CtaPanel>); a price (<CtaPrice>).
Children: none.
Theme: "light" (default), "muted", "dark", "brand" or "brand-dark" — dark themes turn the text white.
Buttons: a button appears only when its text is given.

Props:
- id (string) — anchor of the section
- title (string, required) — the prompt, one line
- highlight (string) — a second line under the title, painted with the brand gradient
- description (string) — a sentence under the title
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the band
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button, e.g. "/contacts/"
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button

Example 1:
```mdx
<CtaBanner
  title="Ready to put a station in the field?"
  highlight="We ship within a week."
  description="Tell us the crop and the field, and we will tell you which sensors are worth the money."
  primaryText="Order a station"
  primaryHref="/stations/"
  secondaryText="Talk to us"
  secondaryHref="/contact/"
/>
```

Example 2:
```mdx
<CtaBanner
  theme="dark"
  title="Frost season starts in six weeks"
  description="Stations installed before it starts pay for themselves in the first cold night."
  primaryText="Book an installation"
  primaryHref="/install/"
/>
```

### CtaCentered (popular)

CtaCentered — a short centered prompt with the buttons under it. Without a `title` it is a quiet one-line invitation: muted text and one button.

Use for: a modest prompt between sections, or the last line of a page — "Questions? Write to us".
Not for: the big closing banner (<CtaBanner>); anything with a picture (<CtaSplit>, <CtaPanel>).
Children: none.
Buttons: a button appears only when its text is given.

Props:
- id (string) — anchor of the section
- title (string) — the prompt; omit for the quiet one-line form
- highlight (string) — a second line under the title, in a lighter weight
- description (string) — a sentence under the title (or the whole text when there is no title)
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the band
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button

Example 1:
```mdx
<CtaCentered
  title="Not sure which station fits?"
  description="Send us the field and the crop — we answer with a plan, not a quote."
  primaryText="Ask us"
  primaryHref="/contact/"
/>
```

Example 2:
```mdx
<CtaCentered
  description="Every station ships with a two-year warranty and a spare sensor."
  primaryText="See what is in the box"
  primaryHref="/box/"
/>
```

### CtaSplit

CtaSplit — a call to action with a picture beside it: the hero's shape used mid-page, asking for the next step rather than opening the site.

Use for: a prompt that has a picture worth showing — the product, the app, the team — typically on a dark band near the end of the page.
Not for: the first screen (<HeroSplit>, which renders the page <h1>); a prompt without a picture (<CtaBanner>).
Children: none.
Picture: `image` (file name in images/) is shown whole, capped in height — a product shot or a screenshot; a wide photo gets small.
Theme: "dark" by default; "light" and "muted" turn the text dark.

Props:
- id (string) — anchor of the section
- title (string, required) — the prompt
- highlight (string) — a second line under the title, painted with the brand gradient
- description (string) — a sentence or two under the title
- image (string) — file name in images/, shown whole beside the text
- imageSide ('left' | 'right', default 'right') — which side the picture takes
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'dark') — background of the band (default "dark")
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string, default '#') — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string, default '#') — link of the secondary button

Example:
```mdx
<CtaSplit
  title="Try it for one season"
  highlight="Send it back if it does not earn its place."
  description="One station, one gateway, the full dashboard. No installation fee and no contract for the first season."
  image="product-02.jpg"
  primaryText="Start the season"
  primaryHref="/trial/"
  secondaryText="What it costs"
  secondaryHref="/pricing/"
/>
```

### CtaPrice

CtaPrice — a single rate as a call to action: one white price card with a big figure, a note, a line of text and one button, on a muted band.

Use for: "from €39 a month — start today", a hosting fee, a subscription — when the price is the argument for the next step.
Not for: a real price list (<PricingCards>, <PricingWide>, <PricingSingle> with <Plan>); a prompt without a price (<CtaBanner>).
Children: none.

Props:
- id (string) — anchor of the section
- title (string, required) — what the price is for, one line above the figure
- description (string) — a sentence under the figure
- price (string, required) — the figure, e.g. "€39"
- priceNote (string) — the unit beside the figure, e.g. "per month"
- linkText (string) — text of a small underlined link under the description; shown only with href
- href (string) — target of that link
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the band (default "muted")
- primaryText (string) — text of the button; omit to hide it
- primaryHref (string, default '#') — link of the button

Example:
```mdx
<CtaPrice
  title="A station, a gateway and the dashboard"
  price="€39"
  priceNote="per month"
  description="Everything included: hardware, replacements, forecasts and support."
  linkText="What is included"
  href="/pricing/"
  primaryText="Start the season"
  primaryHref="/trial/"
/>
```

### CtaPanel

CtaPanel — a call to action inside a rounded brand-coloured panel, with a picture filling its left edge. Louder than <CtaBanner>: the whole block is the brand colour.

Use for: a recruitment or partnership prompt, "join us", "become a distributor" — a block that should stand out from the page.
Not for: a quiet prompt (<CtaCentered>); the closing banner (<CtaBanner>).
Children: none.
Picture: `image` (file name in images/) is cropped to a square on desktop and to 2:1 on phones — a photo of people or a place, not a logo. Without it the panel is text only.
Buttons: both render white on the brand colour; a button appears only when its text is given.

Props:
- id (string) — anchor of the section
- title (string, required) — the prompt
- highlight (string) — a lead line under the title
- description (string) — a paragraph under the lead
- image (string) — file name in images/, cropped to fill the left part of the panel
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section around the panel
- primaryText (string) — text of the first button; omit to hide it
- primaryHref (string, default '#') — link of the first button
- secondaryText (string) — text of the second button
- secondaryHref (string, default '#') — link of the second button

Example:
```mdx
<CtaPanel
  title="Bring the network to your co-op"
  highlight="Ten farms, one gateway, one bill."
  description="Members share the gateway and the forecasts; each farm keeps its own data and its own alerts."
  image="photo-03.jpg"
  primaryText="Talk to us"
  primaryHref="/contact/"
  secondaryText="How sharing works"
  secondaryHref="/coop/"
/>
```

### CtaBrandPanel

CtaBrandPanel — a call to action as a brand-coloured panel with a picture card overlapping its left edge, dotted decoration and up to two white buttons.

Use for: the same job as <CtaPanel> — "join the team", "talk to us" — in the older, more decorated shape. An author block kept from one of the fleet's sites: fixed layout, no theme prop.
Not for: pages that already use <CtaPanel>; mixing the two shapes on one site looks like two sites.
Children: none. All texts are props; `subtitle` is required and is the lead line.
Picture: `imageName` (file name in images/) is cropped to a square on desktop and to 2:1 on phones.

Props:
- title (string, required, default 'Join our team') — the prompt
- subtitle (string, required, default 'Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.') — the lead line under the title
- description (string) — a paragraph under the lead
- imageName (string, required) — file name in images/, cropped to fill the picture card
- buttonTitle (string, required, default 'Explore open positions') — text of the first white button
- buttonLink (string, required, default '/') — link of the first button
- secondButtonTitle (string) — text of the second white button; shown only with its link
- secondButtonLink (string) — link of the second button

Example:
```mdx
<CtaBrandPanel
  title="Operating bands and protocols"
  subtitle="The station speaks the radio protocols your other equipment already uses, and switches between them with a setting."
  description="Licence-free bands as standard; the gateway bridges to Ethernet, Wi-Fi or a SIM. Everything can be changed in the field, with the software we hand out for free."
  imageName="screen-02.png"
  buttonTitle="Talk to us"
  buttonLink="/contact/"
  secondButtonTitle="Open the models"
  secondButtonLink="/stations/"
/>
```

## Stats

Big numbers.

### StatsBanner

Sub-blocks: <Stat>.

StatsBanner — numbers on a wide dark band: kicker, title and text on the left, the figures in two columns under them (<Stat>), a photo fading in across the right half.

Use for: the "in numbers" band of a landing page — years, installations, customers, uptime — with a photo that sets the scene.
Not for: numbers beside a picture card on a light background (<StatsSplit>); three figures in a plain white card (<StatsRow>).
Children: <Stat> tags, two to six (they fill two columns).
Picture: `image` (file name in images/) is a LANDSCAPE photo; it is darkened and faded into the band, so it needs no detail.
Buttons: a button appears only when its text is given.

Props:
- id (string) — anchor of the section
- kicker (string) — short uppercase line above the title
- title (string) — the section heading
- description (string | string[]) — one paragraph, or several as an array
- image (string) — file name in images/, a landscape photo faded into the band
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string) — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string) — link of the secondary button

Example:
```mdx
<StatsBanner
  kicker="IN NUMBERS"
  title="Measured, not estimated"
  description="Every figure below comes from stations that are running right now, in orchards, greenhouses and open fields."
  image="photo-wide-03.jpg"
  primaryText="See the coverage"
  primaryHref="/coverage/"
>
  <Stat value=">3 000" label="stations installed" detail="from a single greenhouse to a forty-field estate" />
  <Stat value="99,4%" label="uptime last season" detail="counted per station, not per network" />
  <Stat value="8 yrs" label="of readings" detail="the oldest station still reporting today" />
  <Stat value="14" label="countries" detail="wherever the crop and the frost meet" />
</StatsBanner>
```

### Stat (popular)

Sub-block of <StatsBanner>.

Stat — one number of <StatsBanner>, <StatsSplit> or <StatsRow>: the value, its label and an optional detail line. The look follows the parent. No children.

Props:
- value (string, required) — the figure, as text: "12", "99.9%", "300+"
- label (string, required) — what the figure is, a few words
- detail (string) — a smaller line under the label

### StatsSplit

StatsSplit — kicker, title, text and the numbers (<Stat>) on the left, the picture as a rounded card on the right.

Use for: a company-in-numbers block on a light page, "about us" with figures, a product with a photo and its key parameters.
Not for: the dark full-width band (<StatsBanner>); a bare row of figures (<StatsRow>).
Children: <Stat> tags, two to four (they fill two columns).
Picture: `image` (file name in images/) is cropped to fill the card — a photo, not a logo.
Buttons: a button appears only when its text is given.

Props:
- id (string) — anchor of the section
- kicker (string) — short uppercase line above the title
- title (string) — the section heading
- description (string | string[]) — one paragraph, or several as an array
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark') — background of the section
- image (string) — file name in images/, cropped to fill the card on the right
- primaryText (string) — text of the solid brand button; omit to hide the button
- primaryHref (string) — link of the primary button
- secondaryText (string) — text of the second, outlined button
- secondaryHref (string) — link of the secondary button

Example:
```mdx
<StatsSplit
  kicker="THE SEASON SO FAR"
  title="What the network noticed this spring"
  description={[
    'Frost nights arrive earlier and end later than the regional forecast suggests — and they differ between two fields a kilometre apart.',
    'The figures below are the ones growers quote back to us most often.',
  ]}
  image="photo-02.jpg"
  primaryText="Read the report"
  primaryHref="/report/"
>
  <Stat value="41" label="frost nights" detail="across the network, March to May" />
  <Stat value="2,3 °C" label="between neighbours" detail="typical difference between two nearby fields" />
</StatsSplit>
```

### StatsRow

StatsRow — a white card with the numbers in a row (<Stat>), on a muted band under a centered heading.

Use for: three headline figures — "12 years, 300 projects, 40 people" — as a light divider between sections.
Not for: figures that need a story or a photo beside them (<StatsSplit>, <StatsBanner>).
Children: <Stat> tags; THREE fit the card (it has three columns on desktop), fewer leave it uneven.

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the band (default "muted")

Example:
```mdx
<StatsRow title="A season in three numbers" description="What one estate recorded with eleven stations.">
  <Stat value="11" label="stations" />
  <Stat value="1,2 M" label="readings" />
  <Stat value="19" label="alerts that mattered" />
</StatsRow>
```

## Dynamic content

The only sections that are not static: the form posts to a receiver behind Turnstile, the portfolio pulls its projects from Redmine at build time.

### ContactForm (popular)

ContactForm — the contact form with the site's phone and e-mail beside it: name, e-mail, phone and message fields, a send button, a success message.

Use for: the contacts page, or the last section of a landing. Its default id is "contacts", so menu entries and buttons can point at "#contacts" / "/#contacts".
Shapes: theme="plain" (default) — a muted panel with the title, phone and e-mail on the left, the fields on the right with their labels as placeholders; theme="panel" — the same inside a raised card, the left part painted with the brand gradient and the fields carrying real labels.
Children: none.
Where it sends: the form posts to `contactFormReceiverURL` from pages.config.js, protected by Cloudflare Turnstile (`turnstileSiteKey`); with both empty it renders but cannot send. On preview hosts it shows a note instead of sending.
Texts: phone and e-mail default to `defaultPhone` / `defaultEmail` of pages.config.js; the labels, the button and the success texts are content — translate them per locale.
Ask the user: the two config values are issued by the Gitt One Pages team, who register the receiver (requests land in the site's Telegram group) and the Turnstile pair. Write the tag and its texts; leave `contactFormReceiverURL` and `turnstileSiteKey` as they are and never invent or copy them. When they are empty, end the reply with what the user has to do: ask the team to connect the form, naming the Telegram group that should receive requests, then put the two values into pages.config.js or paste them into the chat. Instructions for people: https://docs.pages.gitt.one/setup/contact-form-and-portfolio/

Props:
- id (string, default 'contacts') — anchor of the section (default "contacts")
- theme ('plain' | 'panel', default 'plain') — "plain" muted panel, "panel" raised card with the brand gradient
- title (string, required) — the heading beside the form
- description (string) — a paragraph under the heading
- email (string) — e-mail shown beside the form; defaults to pages.config defaultEmail
- phone (string) — phone shown beside the form; defaults to pages.config defaultPhone
- nameLabel (string, default 'Full name') — label of the name field
- emailLabel (string, default 'Email') — label of the e-mail field
- phoneLabel (string, default 'Phone') — label of the phone field
- messageLabel (string, default 'Message') — label of the message field
- submitText (string, default 'Submit') — text of the send button
- subject (string, default 'Request from Contacts') — subject line of the message the receiver gets
- successTitle (string, default 'Thank you!') — heading of the message shown after a successful send
- successText (string, default 'We`ve received your message. Someone from our team will contact you soon') — text under that heading

Example 1:
```mdx
<ContactForm
  title="Talk to someone who has stood in a cold field"
  description="Tell us the crop and the field. We answer with a plan, not a quote."
  email="hello@nordvind.example"
  phone="+46 8 123 45 67"
  nameLabel="Full name"
  emailLabel="Email"
  phoneLabel="Phone"
  messageLabel="What are you growing?"
  submitText="Send"
  successTitle="Thank you!"
  successText="We have your message — someone from the team will be in touch shortly."
/>
```

Example 2:
```mdx
<ContactForm
  theme="panel"
  title="Contact us"
  description="Sales, support and the people who build the stations."
  email="hello@nordvind.example"
  phone="+46 8 123 45 67"
  submitText="Send the request"
/>
```

### PortfolioSection (popular)

PortfolioSection — project cards pulled from the mgmt.tools portfolio at build time: picture, title, description and a source link per project.

Use for: "our work", "recent installations", a case-study list — where the projects are maintained as Redmine issues rather than in the content repo.
Not for: a hand-written list of projects (<Gallery> with <GalleryItem>, or <FeatureCards>).
Children: none. The cards come from the API: `issuesId` names the Redmine issues, in the order they should appear.
Shapes: default — a dark strip with a heading and the cards; page={true} — a full page with a big title on a dark band and the cards on white.
Setup: needs `portfolioUrl` and `portfolioBearer` in pages.config.js; without them the section renders nothing and the build logs a warning. The cards show what the issues held at the last build — editing an issue needs a rebuild.
Ask the user: the portfolio is a Redmine project hosted by the Gitt One Pages team, who also issue the two config values. Write the tag with the issue ids the user gives; never invent ids, URLs or tokens, and never copy `portfolioBearer` from another site. When the values or the ids are missing, end the reply with what the user has to do: ask the team for a portfolio, put `portfolioUrl` and `portfolioBearer` into pages.config.js themselves, and send the issue ids in the order the cards should appear. Instructions for people: https://docs.pages.gitt.one/setup/contact-form-and-portfolio/

Props:
- title (string, required) — the heading
- description (string) — a paragraph under the heading; page shape only
- issuesId (string, required) — comma-separated Redmine issue ids, in display order, e.g. "101, 102, 103"
- sourceChangedTitle (Record<string, string>) — per-project override of the source link text, keyed by issue id
- showMoreText (string) — text of the button under the cards; omit to hide it
- showMorePath (string, default '/portfolio/') — link of that button
- page (boolean, default false) — full-page shape (big title on a dark band, cards on white) instead of the dark strip

Example:
```mdx
<PortfolioSection
  title="Recent installations"
  showMoreText="See more"
  showMorePath="/portfolio/"
  issuesId=""
/>
```

## Pricing

Price cards and plans.

### PricingCards

Sub-blocks: <Plan>.

PricingCards — plans side by side, one <Plan> card per column, under a left-aligned heading.

Use for: a price list with two to four tariffs to choose from.
Not for: one rate only (<PricingSingle>); one plan that needs a long feature list (<PricingWide>); a price as a prompt for the next step (<CtaPrice>).
Children: <Plan> tags, two to four; mark one `recommended` to highlight it.
Layout: `columns` 2–4 (default 3). Default id is "pricing", so links can point at "/#pricing".

Props:
- id (string, default 'pricing') — anchor of the section (default "pricing")
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (2 | 3 | 4, default 3) — cards per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<PricingCards title="What a season costs" description="Hardware included; cancel at the end of any season.">
  <Plan name="One field" price="€19" priceNote="per month" description="A single station, the essentials." features={['One station', 'Air and soil sensors', 'SMS alerts']} primaryText="Start" />
  <Plan name="Estate" price="€39" priceNote="per month" recommended description="Up to ten stations and a gateway." features={['Ten stations', 'Leaf wetness and wind', 'Shared forecasts', 'Priority replacement']} primaryText="Start" />
  <Plan name="Co-op" price="€79" priceNote="per month" description="Several farms behind one gateway." features={['Unlimited stations', 'Per-farm access', 'API and exports', 'Named support']} primaryText="Talk to us" />
</PricingCards>
```

### Plan

Sub-block of <PricingCards>.

Plan — one tariff of <PricingCards>, <PricingWide> or <PricingSingle>: name, description, a check-marked feature list, the price with its note, a button and an optional small link.

Parent: one of the three Pricing… sections; the parent decides the shape (card, wide row, single).
Highlight: `recommended` frames the card in the brand colour and shows the `badge` label ("Most popular" by default); the button of a recommended plan is solid, of the others outlined — override with `cta`.
Children: optional markdown between the tags, rendered after the feature list.
Button: `primaryText` shows the button; its link defaults to "/#contacts".

Props:
- name (string, required) — the tariff name
- price (string, required) — the figure, e.g. "€49" or "from 900 kr"
- priceNote (string) — the unit beside the figure, e.g. "/month"
- description (string) — a sentence under the name
- features (string[], default []) — what is included, one line each
- featuresTitle (string) — a small uppercase heading above the feature list
- recommended (boolean, default false) — frame the card in the brand colour and show the badge
- badge (string, default 'Most popular') — the badge text of a recommended plan
- primaryText (string) — text of the button; omit to hide it
- cta ('primary' | 'secondary') — the button's weight; a lone plan carries the primary action
- primaryHref (string, default '/#contacts') — link of the button (default "/#contacts")
- linkText (string) — text of a small underlined link under the price; shown only with href
- href (string) — target of that link

### PricingWide

PricingWide — one wide <Plan>: what is included on the left (the features in two columns), the price and the button on the right.

Use for: a single offer with a long list of what is included — a membership, a support package, an all-inclusive rate.
Not for: several tariffs (<PricingCards>); a compact single rate (<PricingSingle>).
Children: exactly one <Plan>.

Props:
- id (string, default 'pricing') — anchor of the section (default "pricing")
- title (string) — the section heading
- description (string) — a paragraph under the heading
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<PricingWide title="The full season, one line">
  <Plan
    name="Season pass"
    description="Everything a grower needs from the first frost to the last harvest."
    featuresTitle="Included"
    features={['Stations and gateway', 'Replacements within 48 hours', 'Forecasts and alerts', 'Exports and API']}
    price="€349"
    priceNote="per season"
    linkText="How we bill"
    href="/pricing/"
    primaryText="Start the season"
    primaryHref="/trial/"
    cta="primary"
  />
</PricingWide>
```

### PricingSingle

PricingSingle — a single rate on a muted band: one centered <Plan> with the price and one button. A price is pricing, not a call to action.

Use for: "one product, one price" — a licence, an hourly rate, a flat fee.
Not for: a price meant as the argument for a button (<CtaPrice>); several tariffs (<PricingCards>).
Children: exactly one <Plan>; give it cta="primary" so the lone button carries the action.

Props:
- id (string, default 'pricing') — anchor of the section (default "pricing")
- title (string) — the section heading
- description (string) — a paragraph under the heading
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the band (default "muted")

Example:
```mdx
<PricingSingle>
  <Plan name="Extra station" price="€12" priceNote="per month" primaryText="Add a station" primaryHref="/stations/" cta="primary" />
</PricingSingle>
```

## Dividers

Narrow visual bands between the big sections, whatever they carry: client logos, trust marks, a single line of text.

### Logos (popular)

Sub-blocks: <Logo>.

Logos — a row of client, partner or certification logos (<Logo>) on a muted band, under a small uppercase title.

Use for: "trusted by", "our partners", "certified by" — recognition, not contact.
Not for: partners the reader should contact (<LogoCards>).
Children: <Logo image title href /> tags. Logos are shown at one height (48px) and kept in proportion; on a dark or brand band they are turned white automatically, so dark marks on transparent backgrounds work best.
Layout: `columns` 3–6 (default 5) on desktop; two per row on phones.

Props:
- id (string) — anchor of the section
- title (string) — a small uppercase line above the row, e.g. "Trusted by"
- description (string) — a sentence under that line
- columns (3 | 4 | 5 | 6, default 5) — logos per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the band (default "muted")

Example 1:
```mdx
<Logos title="TRUSTED BY GROWERS ACROSS THE REGION" columns={5}>
  <Logo image="logo-01.png" title="Nordvind" />
  <Logo image="logo-02.png" title="Almara" />
  <Logo image="logo-03.png" title="Kestrel" />
  <Logo image="logo-04.png" title="Vinland" />
  <Logo image="logo-05.png" title="Orsa" />
</Logos>
```

Example 2:
```mdx
<Logos theme="dark" title="PART OF THE OPEN WEATHER DATA NETWORK" columns={3}>
  <Logo image="logo-06.png" title="Björk" href="https://example.com/" />
  <Logo image="logo-07.png" title="Havsbris" href="https://example.com/" />
  <Logo image="logo-08.png" title="Tyra" href="https://example.com/" />
</Logos>
```

### Logo (popular)

Sub-block of <Logos>.

Logo — one item of <Logos> (a bare logo in a row) or of <LogoCards> (a card with a name and contacts).

Parent: <Logos> or <LogoCards>. The shape follows the props: with `email` or `phone` it becomes a card, otherwise it is a logo only.
Picture: `image` (file name in images/) — a logo file, ideally SVG or PNG with a transparent background; on a dark band it is painted white.
Link: `href` wraps the logo in a link.

Props:
- image (string) — file name in images/, the logo
- title (string) — the company name: the alt text of the logo, the heading of a card
- href (string) — a link the logo leads to
- email (string) — e-mail, shown on a card with an icon
- phone (string) — phone, shown on a card with an icon

### LogoCards

LogoCards — logos as white cards with a name and contacts under them (<Logo image title email phone />).

Use for: distributors, resellers, partner offices — where the reader is meant to get in touch, not just recognise a brand.
Not for: a plain logo row (<Logos>).
Children: <Logo> tags with `title` and at least `email` or `phone`; a <Logo> without contacts renders as a bare logo in the grid.
Layout: `columns` 2–4 (default 3).

Props:
- id (string) — anchor of the section
- title (string) — a small uppercase line above the grid
- description (string) — a sentence under that line
- columns (2 | 3 | 4, default 3) — cards per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'muted') — background of the section (default "muted")

Example:
```mdx
<LogoCards title="DISTRIBUTORS" columns={3}>
  <Logo image="logo-02.png" title="Almara Agri" email="hello@almara.example" phone="+46 8 123 45 67" />
  <Logo image="logo-03.png" title="Kestrel Supply" email="sales@kestrel.example" phone="+47 22 12 34 56" />
  <Logo image="logo-04.png" title="Vinland Tools" email="post@vinland.example" phone="+45 33 11 22 33" />
</LogoCards>
```

### Strip

Strip — a narrow brand-coloured band with one line of uppercase text: the welcome line under the hero, a slogan between sections.

Use for: separating and branding — one sentence the page should say out loud.
Not for: anything with a button (<CtaCentered>); it is not a call to action, there is nothing to click.
Children: none.
Theme: "brand" (default) the primary gradient; "dark" a stone band.

Props:
- title (string, required) — the line of text
- theme ('brand' | 'dark', default 'brand') — "brand" gradient, "dark" stone

Example:
```mdx
<Strip title="FROST WARNINGS FOR GROWERS — MEASURED IN THE CROP, NOT AT THE AIRPORT" />
```

### BannerImage

BannerImage — a full-width band of one photo, or of several photos cross-fading into each other.

Use for: a visual pause between sections — a workshop, a landscape, a product line — with no text on it.
Not for: a first screen with a title (<HeroCover>); a photo with a caption (<Gallery>).
Children: none.
Pictures: `imageName` is one file name in images/ or an array of them; use WIDE photos (the default band is about 4.4:1, `aspect` changes it as a Tailwind aspect class such as "aspect-[3/1]"). Several photos rotate every `interval` seconds, and stay still for visitors who prefer reduced motion.

Props:
- imageName (string | string[], required) — one file name in images/, or several to cross-fade between
- alt (string, default '') — alt text, only when the photo carries meaning; a decorative band stays silent
- interval (number, default 6) — seconds each photo stays up; ignored for a single photo
- aspect (string, default 'aspect-[3840/880]') — the band's proportions, as a Tailwind aspect class, e.g. "aspect-[3/1]"

Example:
```mdx
<BannerImage imageName={["photo-wide-01.jpg", "photo-wide-02.jpg", "photo-wide-03.jpg"]} />
```

## Testimonials

Quotes with a face and a role.

### Testimonials

Sub-blocks: <Testimonial>.

Testimonials — quotes with a face and a role: cards with a round photo, the name, the role and the words, on a dark brand band by default (<Testimonial>).

Use for: customer reviews, team voices, "what our clients say" — two to six short quotes.
Not for: one or two long pull quotes on a light page (<Quotes>).
Children: <Testimonial> tags.
Layout: `columns` 1–3 (default 2).

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (1 | 2 | 3, default 2) — cards per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'dark') — background of the section (default "dark")

Example:
```mdx
<Testimonials title="The people who run them" columns={2}>
  <Testimonial name="Anna Lindqvist" role="Head of agronomy, Almara Farms" avatar="avatar-01.jpg" quote="The first frost night paid for the whole installation." />
  <Testimonial name="Marco Ferreira" role="Orchard manager, Kestrel" avatar="avatar-02.jpg" quote="I stopped driving out at three in the morning to check a thermometer." />
</Testimonials>
```

### Testimonial

Sub-block of <Testimonials>.

Testimonial — one card of <Testimonials>: a round photo, the name, the role and the quote.

Parent: <Testimonials> only.
Text: `quote` is the text; markdown between the tags is rendered after it (or instead of it).
Picture: `avatar` (file name in images/) is cropped to a circle — a portrait, face centered.

Props:
- name (string, required) — who is speaking
- role (string) — their role or company
- quote (string) — the words; markdown children are an alternative
- avatar (string) — file name in images/, a portrait cropped to a circle
- logo (string) — file name in images/; accepted for symmetry with <Quote>, not shown in this shape

### Quotes

Sub-blocks: <Quote>.

Quotes — one or two big pull quotes side by side, each a white <Quote> card with the speaker's name and photo in a brand-coloured footer.

Use for: a strong statement from a customer or a partner on a light page, with the company logo if there is one.
Not for: many short reviews on a dark band (<Testimonials>).
Children: <Quote> tags, one (centered) or two (side by side).

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (1 | 2, default 1) — one centered card, or two side by side
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<Quotes title="What they told us after the season" columns={2}>
  <Quote quote="We used to argue about whether it was colder in the lower field. Now we know, and we plan the night around it." name="Jakub Novak" role="Farm owner, Orsa Berry" />
  <Quote quote="The alert names the field. That one detail is why the crew trusts it." name="Sara Adeyemi" role="Operations lead, Vinland Greens" />
</Quotes>
```

### Quote

Sub-block of <Quotes>.

Quote — a single quote CARD: an optional logo, the words with a large quotation mark, and a brand-coloured footer with the author's face, name and role.

Parent: <Quotes> for a section of its own; also the natural content of a <ProseAside> inside <Prose>, where it sits beside the text without a background of its own.
Text: `quote` is the text; markdown between the tags is the alternative.
Pictures: `avatar` (file name in images/) is cropped to a circle; `logo` is shown small above the words.
The card is a flex column: when several stand side by side and one has fewer words, the footer still sits on the bottom edge of every card.

Props:
- name (string) — who is speaking
- role (string) — their role or company
- quote (string) — the words; markdown children are an alternative
- avatar (string) — file name in images/, a portrait cropped to a circle
- logo (string) — file name in images/, a company logo shown above the words

## Models (product catalog)

A product catalog and its model pages. The control-unit product card (ModelPageSection and its sub-blocks) is one block from the designer, kept verbatim: it is compact, and the other sections do not fit inside it (Kirill, 2026-08-26).

### ProductCards

ProductCards — the catalog teaser: a heading on a dark band and the <Product> cards straddling its lower edge onto the white below.

Use for: the product overview on a home page — two to four models, each with a picture, a name and a link to its own page.
Not for: the full catalog with a paragraph and a feature list per product (<ProductList>); services that are not products (<FeatureCards>).
Children: <Product> tags, two to four.
Layout: without `columns` the cards share the row equally; set `columns` 2–4 when there are more cards than fit one row.

Props:
- id (string) — anchor of the section, e.g. "models"
- kicker (string) — short uppercase line above the title
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (2 | 3 | 4) — cards per row on desktop; by default all cards share one row

Example:
```mdx
<ProductCards kicker="THE STATIONS" title="Pick the one that matches the field" description="All three speak to the same gateway and the same dashboard.">
  <Product name="Station N1" description="One field, one crop, the essentials." href="/stations/n1/" linkText="Know more" />
  <Product name="Station N3" description="Several fields, extra sensors and leaf wetness." href="/stations/n3/" linkText="Know more" />
  <Product name="Gateway G2" description="The link every station in range talks through." href="/stations/g2/" linkText="Know more" />
</ProductCards>
```

### ProductList

Sub-blocks: <Product>.

ProductList — the catalog itself: one <Product> per row, the name, text and button on the left, the check-marked feature list and the picture on the right.

Use for: a models page, a service catalog where every item deserves a paragraph and a list.
Not for: the compact card teaser (<ProductCards>).
Children: <Product> tags, one per row, divided by rules.

Props:
- 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
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<ProductList>
  <Product
    kicker="ENTRY"
    name="Station N1"
    description="For a single field"
    href="/stations/n1/"
    linkText="Read more"
    features={['Air and soil temperature', 'One season on a battery', 'Mounts on a standard post', 'SMS and e-mail alerts']}
    image="product-01.jpg"
  />
  <Product
    name="Station N3"
    description="For several fields and a demanding crop"
    href="/stations/n3/"
    linkText="Read more"
    features={['Leaf wetness and wind', 'Expansion port for extra sensors', 'Four kilometres to the gateway', 'Field-swappable sensors']}
    image="product-02.jpg"
  />
</ProductList>
```

### Product

Sub-block of <ProductList>.

Product — one item of <ProductCards> (a bordered card: picture, kicker, name, description, features, button) or of <ProductList> (a row: text left, features and picture right).

Parent: <ProductCards> or <ProductList>; the parent decides the shape.
Children: optional markdown between the tags, rendered after the description (row) or after the features (card).
Picture: `image` (file name in images/) is cropped to fill — a product shot with some margin around it survives the crop best.
Link: `href` + `linkText` render the button; in a card it spans the full width.

Props:
- name (string, required) — the product name
- kicker (string) — short uppercase line above the name, e.g. a category
- description (string) — a sentence or two
- features (string[], default []) — key points, one line each, with check marks
- image (string) — file name in images/, cropped to fill
- href (string) — link to the product page; shown as a button only with linkText
- linkText (string) — text of that button

### ProductPromo

ProductPromo — a product promo block: a photo with a customer citation over it on the left; a heading, paragraphs, a grid of figures and two buttons on the right.

Use for: one flagship product presented with proof — a quote and numbers — on a home page. An author block kept from one of the fleet's sites, one fixed shape.
Not for: plain numbers (<StatsSplit>); a plain call to action (<CtaSplit>).
Children: none; everything is props.
Text: `text` is one paragraph or an array — the first paragraph is set larger and centered as a lead.
Buttons: ALWAYS set both button titles and links; the defaults are the original site's Swedish texts. `linkTitle` renders an arrow link under the figures that has no target of its own.
Picture: `imageName` (file name in images/) is cropped to fill the tall card behind the citation.

Props:
- stats (StatisticItem[], required, default []) — the figures under the text: [{ label, value }]
- title (string, required) — the heading
- text (string | string[], required) — one paragraph or several; the first one is the lead
- linkTitle (string, required) — text of the arrow link under the figures
- imageName (string, required) — file name in images/, cropped to fill the card behind the citation
- citation (string, required) — the customer quote shown over the photo
- citationSource (string) — who said it
- primaryButtonTitle (string, default 'Kontakta oss') — text of the solid button — set it, the default is site-specific
- primaryButtonLink (string, default '/contacts/') — link of the solid button
- secondaryButtonTitle (string, default 'Buffertenhet') — text of the white button — set it, the default is site-specific
- secondaryButtonLink (string, default '/models/buffering-unit/') — link of the white button

Example:
```mdx
<ProductPromo
  title="Introducing the N3 generation"
  text={[
    'The third generation measures leaf wetness as standard, doubles the radio range and holds a week of readings when the network is away.',
  ]}
  imageName="photo-04.jpg"
  citation="We swapped eleven stations in one morning and did not open the manual once."
  citationSource="Tomas Berg, Björk & Sons"
  stats={[
    { label: 'range to the gateway', value: '4 km' },
    { label: 'readings buffered', value: '7 days' },
  ]}
  primaryButtonTitle="See the models"
  primaryButtonLink="/stations/"
  secondaryButtonTitle="Datasheet"
  secondaryButtonLink="/downloads/"
/>
```

### ModelPageSection

Sub-blocks: <AttachmentItem>, <AttachmentsSection>, <DistributorItem>, <DistributorsSection>, <ErrorCodesSection>, <HighlightItem>, <HighlightsSection>.

ModelPageSection — a whole product page in one tag: the picture and the title with a description, then a certification tab with paragraphs and certificate scans, a technical-specification block, an FAQ list, and the sub-blocks placed under the description.

Use for: the page of one model of a certified device — a control unit, an instrument — where the certificate and the spec sheet are the content. An author block kept from one of the fleet's sites, kept verbatim: it is compact and nothing else fits inside it.
Not for: a general product page (compose <HeroSplit>, <FeatureList>, <Downloads>, <Faq> instead).
Children: the sub-block tags, in any order, rendered under the description in the right column: <AttachmentsSection> (files), <ErrorCodesSection> (a link line), <HighlightsSection> (icon cards), <DistributorsSection> (contact cards). Plain markdown is rendered there too.
Pictures: `modelImgName` is the product shot (cropped to fill a rounded box); `certificateImgNames` and `techSpecImgNames` are scans shown in a two-column grid.

Props:
- modelTitle (string, required) — the model name, the page <h1>
- modelDescription (string, required) — the paragraph under the name
- modelImgName (string, required) — file name in images/, the product shot
- faqs (FAQ[], default []) — questions and answers rendered as a plain list at the bottom
- licenseSectionTitle (string, required) — the label of the certification tab
- licenseTitles (string[], required, default []) — [heading of the certificate block, heading of the technical-specification block]
- licenseContent (string[], required, default []) — paragraphs of the certificate block
- certificatesText (string[], required) — [text before the link, text of the link] of the "full list of certificates" line
- certificatesUrl (string, required) — target of that link
- certificateImgNames (string[], required, default []) — file names in images/, certificate scans
- techSpecContent (string[], required, default []) — paragraphs of the technical-specification block
- techSpecImgNames (string[], required, default []) — file names in images/, specification scans

Example:
```mdx
import BoltIcon from 'astro-heroicons/outline/Bolt.astro';
import SignalIcon from 'astro-heroicons/outline/Signal.astro';
import CloudIcon from 'astro-heroicons/outline/Cloud.astro';

<ModelPageSection
  modelTitle="Station N3 — for several fields"
  modelDescription="The station that carries leaf wetness, wind and an expansion port, and still runs a full season on one battery. Mounts on a standard post with a single bolt."
  modelImgName="product-01.jpg"
  certificatesText={['For the full list of certificates click', 'here']}
  certificatesUrl="https://example.com/"
  licenseSectionTitle="Certification"
  licenseTitles={['Certificate of conformity']}
  licenseContent={[
    'Every station carries a label with the certificate that applies to it. An example is shown here; the full list is published by the certification body.',
  ]}
  certificateImgNames={["document-01.png", "document-02.png"]}
  techSpecContent={[
    'The technical specification lists the sensors, the ranges and the accuracy of each channel, together with the radio bands the station is approved for.',
  ]}
  techSpecImgNames={["document-03.png"]}
>
  <AttachmentsSection title="Attachments">
    <AttachmentItem fileName="Certificate" file="/downloads/certificate.pdf" downloadText="Download" />
    <AttachmentItem fileName="Technical specification" file="/downloads/spec.pdf" downloadText="Download" />
  </AttachmentsSection>
  <AttachmentsSection title="Communication protocol">
    <AttachmentItem fileName="Radio protocol" file="/downloads/protocol.pdf" downloadText="Download" />
  </AttachmentsSection>

  <ErrorCodesSection
    title="Error codes"
    clickText={['For the full list of error codes and what they mean, click ', 'here']}
    linkPath="/api/#error-codes"
  />

  <HighlightsSection title="Highlights">
    <HighlightItem name="Cloud or your own server" description="The same software, either in our cloud or inside your network." IconImg={CloudIcon} />
    <HighlightItem name="A week of buffer" description="The gateway keeps reporting when the uplink is away." IconImg={SignalIcon} />
    <HighlightItem name="Field-swappable" description="Sensors change by hand, with no tools and no service visit." IconImg={BoltIcon} />
  </HighlightsSection>

  <DistributorsSection title="Distributors">
    <DistributorItem title="Almara Agri" email="hello@almara.example" phone="+46 8 123 45 67" imageName="logo-02.png" />
    <DistributorItem title="Kestrel Supply" email="sales@kestrel.example" phone="+47 22 12 34 56" imageName="logo-03.png" />
  </DistributorsSection>
</ModelPageSection>
```

### AttachmentItem

Sub-block of <ModelPageSection>.

AttachmentItem — one file row of <AttachmentsSection>: a paper-clip icon, the file name and a download link. Parent: <AttachmentsSection> only. No children.

Props:
- fileName (string, required) — the name shown in the row
- file (string, required) — the file to download, e.g. "/assets/manual.pdf"
- downloadText (string, required) — text of the link, e.g. "Download"

### AttachmentsSection

Sub-block of <ModelPageSection>.

AttachmentsSection — a titled list of downloadable files (<AttachmentItem>) inside <ModelPageSection>.

Parent: <ModelPageSection> only; several may follow each other ("Attachments", "Protocols"). Outside a product page use <Downloads>.
Children: <AttachmentItem> tags.

Props:
- title (string, required) — the small heading above the list

### DistributorItem

Sub-block of <ModelPageSection>.

DistributorItem — one contact card of <DistributorsSection>: a logo, the name, an e-mail and a phone with icons. Parent: <DistributorsSection> only. No children.

Props:
- imageName (string) — file name in images/, the distributor's logo
- title (string, required) — the distributor's name
- email (string, required) — e-mail, rendered as a mailto link
- phone (string, required) — phone, rendered as a tel link

### DistributorsSection

Sub-block of <ModelPageSection>.

DistributorsSection — a titled two-column grid of contact cards (<DistributorItem>) inside <ModelPageSection>.

Parent: <ModelPageSection> only. Outside a product page use <LogoCards> with <Logo email phone>.
Children: <DistributorItem> tags.

Props:
- title (string, required) — the small heading above the grid

### ErrorCodesSection

Sub-block of <ModelPageSection>.

ErrorCodesSection — a titled paragraph ending in a link, inside <ModelPageSection>: "for the full list of error codes click here".

Parent: <ModelPageSection> only. No children.
Text: `clickText` is a pair — the text before the link and the text of the link; `linkPath` is where it leads.

Props:
- title (string, required) — the small heading
- description (string) — a paragraph above the link line
- clickText (string[], required) — [text before the link, text of the link]
- linkPath (string, required) — target of the link

### HighlightItem

Sub-block of <ModelPageSection>.

HighlightItem — one card of <HighlightsSection>: an icon in a dark square, a name and a line of text.

Parent: <HighlightsSection> only. No children.
Icon: `IconImg` is a Heroicon imported at the top of the file — `import CloudIcon from 'astro-heroicons/outline/Cloud.astro';` then IconImg={CloudIcon}.

Props:
- name (string, required) — the card heading
- IconImg (any) — a Heroicon component imported in the article
- description (string, required) — one sentence

### HighlightsSection

Sub-block of <ModelPageSection>.

HighlightsSection — a titled two-column grid of grey icon cards (<HighlightItem>) inside <ModelPageSection>: the model's selling points.

Parent: <ModelPageSection> only. Outside a product page use <FeatureCards>.
Children: <HighlightItem> tags.

Props:
- title (string, required) — the small heading above the grid

## Gallery & files

Pictures with captions, attachments.

### Gallery

Sub-blocks: <GalleryItem>.

Gallery — pictures with captions in a grid (<GalleryItem>): team photos, certificates, product shots, references.

Use for: a set of pictures that each need a caption, optionally linking somewhere.
Not for: a decorative photo band (<BannerImage>); files without pictures (<Downloads>).
Children: <GalleryItem> tags.
Layout: `columns` 2–4 (default 3).

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- columns (2 | 3 | 4, default 3) — pictures per row on desktop
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example 1:
```mdx
<Gallery title="Where the stations stand" description="Orchards, greenhouses and open fields, in the season they were photographed.">
  <GalleryItem title="In the orchard" image="photo-01.jpg" photo />
  <GalleryItem title="Under glass" image="photo-02.jpg" photo />
  <GalleryItem title="Open field" image="photo-03.jpg" photo />
</Gallery>
```

Example 2:
```mdx
<Gallery title="What is in the box" columns={4}>
  <GalleryItem title="Station N3" image="product-01.jpg" description="Sealed housing, one bolt." />
  <GalleryItem title="Gateway G2" image="product-02.jpg" description="Four kilometres of range." />
  <GalleryItem title="Spare sensor" image="product-03.jpg" description="Swaps by hand." />
  <GalleryItem title="Dashboard" image="screen-01.png" description="The same view on every device." href="/dashboard/" />
</Gallery>
```

### GalleryItem

Sub-block of <Gallery>.

GalleryItem — one item of <Gallery>: a picture with a caption and an optional line of text; the whole item links to `href` when given. Without a picture it renders as a file row (paper clip, name, download link).

Parent: <Gallery> only. No children.
Picture: `image` (file name in images/). By default the picture sits in a fixed-height box and is shown whole, so a row of icons, logos or product shots lines up; set photo={true} for photographs, which then keep their own proportions and are never cropped to a letterbox.

Props:
- title (string, required) — the caption under the picture, or the file name of a file row
- image (string) — file name in images/; omit for a file row
- description (string) — a line of text under the caption
- href (string) — link of the whole item; for a file row the file to download
- linkText (string) — text of the download link of a file row (default "Download")
- photo (boolean, default false) — a photo keeps its proportions; icons and product shots sit in a fixed box so a row of them lines up

### Downloads

Sub-blocks: <DownloadItem>.

Downloads — a narrow column of file rows (<DownloadItem>): certificates, specifications, protocols, price lists. Not a grid.

Use for: a list of documents to download on a landing page. Put the files in assets/ and link them as "/assets/<file>".
Not for: files inside a <ModelPageSection> (<AttachmentsSection>).
Children: <DownloadItem> tags.

Props:
- id (string) — anchor of the section
- title (string) — the section heading
- description (string) — a paragraph under the heading
- theme ('light' | 'muted' | 'dark' | 'brand' | 'brand-dark', default 'light') — background of the section

Example:
```mdx
<Downloads title="Documents" description="Everything a buyer or an inspector asks for.">
  <DownloadItem title="Station N3 datasheet" href="/downloads/datasheet.pdf" />
  <DownloadItem title="Mounting guide" href="/downloads/mounting.pdf" />
  <DownloadItem title="Certificate of conformity" href="/downloads/certificate.pdf" />
  <DownloadItem title="API reference" href="/downloads/api.pdf" linkText="Open" />
</Downloads>
```

### DownloadItem

Sub-block of <Downloads>.

DownloadItem — one file row of <Downloads>: a paper-clip icon, the name and a download link. Parent: <Downloads> only. No children.

Props:
- title (string, required) — the name shown in the row
- href (string, required) — the file to download, e.g. "/assets/spec.pdf"
- linkText (string, default 'Download') — text of the link (default "Download")

Generated from the www engine at commit 7b6863883d9b1cca0e9394a17b1e9d21518c7912.