PricingWide

apps/www/src/sections/PricingWide.astro · 23 lines · group Pricing

PricingWide — one wide <Plan>: what is included on the left, the price and the button on the right.

In the fleet

Not used by any site yet.

Samples 1

sample

The full season, one line

Season pass

Everything a grower needs from the first frost to the last harvest.

Included

Stations and gateway
Replacements within 48 hours
Forecasts and alerts
Exports and API

€349per season

How we bill

Start the season

MDX of this sample

<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>

Props

Name	Type	Default
id	string	'pricing'
title	string
description	string
theme	Theme	'light'

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

---
/**
 * PricingWide — one wide <Plan>: what is included on the left, the price and
 * the button on the right.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  theme?: Theme;
}
const { id = 'pricing', title, description, theme = 'light' } = Astro.props;
---

<Section id={id} title={title} description={description} theme={theme} heading="left">
  <div class="mx-auto grid max-w-5xl grid-cols-1 gap-8" data-variant="wide">
    <slot />
  </div>
</Section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.