Stage

import { CtaButton, Stage } from 'marketing-ui'

function Demo() {
  return (
    <Stage
      headline={<h1 className='h2'>Passion for Coatings</h1>}
      copy={
        <p className='small'>
          <strong>From pioneering ceramic coatings to redefining</strong>
          {` what's possible beyond varnish, we've set the standards others follow. Today, that journey continues.`}
        </p>
      }
      actions={<CtaButton>Discover Products</CtaButton>}
    />
  )
}

export default Demo

import { CtaButton, Image, Stage } from 'marketing-ui'

function Demo() {
  return (
    <Stage
      variant='background'
      backgroundImage={
        <Image
          data-image-size='stage-background-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      headline={<h1 className='h2'>Passion for Coatings</h1>}
      copy={
        <p className='small'>
          <strong>From pioneering ceramic coatings to redefining</strong>
          {` what's possible beyond varnish, we've set the standards others follow. Today, that journey continues.`}
        </p>
      }
      actions={<CtaButton variant='white'>Discover Products</CtaButton>}
    />
  )
}

export default Demo

import { CtaButton, Stage } from 'marketing-ui'

function Demo() {
  return (
    <Stage
      variant='hero'
      headline={<h1 className='h2'>Passion for Coatings</h1>}
      copy={
        <p className='small'>
          <strong>From pioneering ceramic coatings to redefining</strong>
          {` what's possible beyond varnish, we've set the standards others follow. Today, that journey continues.`}
        </p>
      }
      actions={<CtaButton variant='white'>Discover Products</CtaButton>}
    />
  )
}

export default Demo

import { Stage } from 'marketing-ui'

function Demo() {
  return <Stage variant='small' />
}

export default Demo