Prices

---
import Prices from 'fulldev-ui/blocks/Prices.astro'
---

<Prices
  variant="subtle"
  heading="Choose the plan that suits you"
  text="Our plans are designed to meet the requirements of both beginners and advanced users."
  cards={[
    {
      heading: 'Free',
      text: 'A free plan to help you get started',
      price: 10,
      list: ['1 GB of space', 'Support at $0', '1 email', '1 domain'],
      buttons: [{ text: 'Get started', variant: 'secondary' }],
    },
    {
      label: 'Best value',
      color: 'brand',
      heading: 'Premium',
      text: 'Suitable for small to medium businesses with a larger team',
      price: 25,
      list: ['10 GB of space', 'Support at $29', '10 email', '10 domain'],
      buttons: [{ text: 'Get started' }],
    },
    {
      heading: 'Enterprise',
      text: 'Our best plan for large companies with larger teams',
      price: 100,
      list: ['100 GB of space', 'Support at $99', '100 email', '100 domain'],
      buttons: [{ text: 'Get started', variant: 'secondary' }],
    },
  ]}
/>

---
import Prices from 'fulldev-ui/blocks/Prices.astro'
---

<Prices
  rating={{
    value: 5,
    label: '100+ happy customers',
    avatars: [
      '/images/avatars/1.jpeg',
      '/images/avatars/2.jpeg',
      '/images/avatars/3.jpeg',
      '/images/avatars/4.jpeg',
    ],
  }}
  heading="Flexible Pricing Options"
  text="Choose between monthly or annual billing. Switch anytime."
  cards={[
    {
      heading: 'Basic',
      text: 'Essential features for small teams',
      price: 15,
      list: ['5 projects', '10 GB storage', 'Basic reporting'],
      button: { text: 'Get started', variant: 'primary', contrast: true },
    },
    {
      heading: 'Pro',
      text: 'Advanced features for growing businesses',
      price: 49,
      list: [
        'Unlimited projects',
        '100 GB storage',
        'Advanced reporting',
        'Team collaboration',
      ],
      button: { text: 'Get started', variant: 'primary', contrast: true },
    },
  ]}
/>

---
import Prices from 'fulldev-ui/blocks/Prices.astro'
---

<Prices
  heading="Flexible Pricing Options"
  text="Choose between monthly or annual billing. Switch anytime."
  cards={[
    {
      heading: 'Basic',
      text: 'Essential features for small teams',
      price: 15,
      list: ['5 projects', '10 GB storage', 'Basic reporting'],
      button: { text: 'Get started', variant: 'primary', contrast: true },
    },
    {
      heading: 'Pro',
      text: 'Advanced features for growing businesses',
      price: 49,
      list: [
        'Unlimited projects',
        '100 GB storage',
        'Advanced reporting',
        'Team collaboration',
      ],
      button: { text: 'Get started', variant: 'primary', contrast: true },
    },
  ]}
  table={{
    header: ['Features', 'Basic', 'Pro'],
    body: [
      ['Amount of storage', '10 GB', '100 GB'],
      ['Amount of projects', '5', 'Unlimited'],
      ['Advanced reporting', 'No', 'Yes'],
      ['Team collaboration', 'No', 'Yes'],
    ],
  }}
/>