Steps

import { CtaButton, Icon, Image, Prose, Step } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Step
        image={
          <Image
            data-image-size='step-image'
            src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
          />
        }
        imageAlignment='right'
        heading='Preparation of the Leather Surfaces'
        headingLevel={5}
        count='Step 01.'
        copy={
          <Prose>
            <p>
              Before you begin cleaning and caring for your leather seats,
              proper preparation is key. A clean surface and protected
              surroundings ensure the best possible results and help prevent
              unwanted residue.
            </p>
            <ul>
              <li>
                Thoroughly vacuum the seats to remove loose dirt and coarse
                debris.
              </li>
              <li>
                Cover adjacent non-leather surfaces that could come into contact
                with the product.
              </li>
            </ul>
          </Prose>
        }
        action={
          <CtaButton icon={<Icon i={IconArrowRight} />}>
            Discover more
          </CtaButton>
        }
      />
      <Step
        image={
          <Image
            data-image-size='step-image'
            src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
          />
        }
        imageAlignment='left'
        heading='Frost Defense with Forest Sense.'
        headingLevel={5}
        count='Step 02.'
        copy={
          <Prose>
            <p>
              Before you begin cleaning and caring for your leather seats,
              proper preparation is key. A clean surface and protected
              surroundings ensure the best possible results and help prevent
              unwanted residue.
            </p>
            <ul>
              <li>
                Thoroughly vacuum the seats to remove loose dirt and coarse
                debris.
              </li>
              <li>
                Cover adjacent non-leather surfaces that could come into contact
                with the product.
              </li>
            </ul>
          </Prose>
        }
        action={
          <CtaButton icon={<Icon i={IconArrowRight} />}>
            Discover more
          </CtaButton>
        }
      />
      <Step
        heading='Frost Defense with Forest Sense.'
        headingLevel={5}
        count='Step 03.'
        copy={
          <Prose>
            <p>
              Before you begin cleaning and caring for your leather seats,
              proper preparation is key. A clean surface and protected
              surroundings ensure the best possible results and help prevent
              unwanted residue.
            </p>
            <ul>
              <li>
                Thoroughly vacuum the seats to remove loose dirt and coarse
                debris.
              </li>
              <li>
                Cover adjacent non-leather surfaces that could come into contact
                with the product.
              </li>
            </ul>
          </Prose>
        }
        action={
          <CtaButton icon={<Icon i={IconArrowRight} />}>
            Discover more
          </CtaButton>
        }
      />
    </div>
  )
}

export default Demo