CategoryLinks

import { CategoryLinks, CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <CategoryLinks
      headline='Our official source for SONAX insights and media content.'
      copy={
        <p>
          The content on these pages is available for journalists and media
          representatives to download and use appropriately. Please note the
          different contacts for the various specialist areas: general press
          inquiries, car care, bicycle care, car wash systems, industry, trade,
          agriculture, and commercial vehicles.
        </p>
      }
      links={
        <>
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <CtaButton key={i} icon={<Icon i={IconArrowRight} />} size='small'>
              Link
            </CtaButton>
          ))}
        </>
      }
    />
  )
}

export default Demo

import { CategoryLinks, CtaButton, Icon } from 'marketing-ui'
import { IconArrowRight } from 'icons'

function Demo() {
  return (
    <CategoryLinks
      headline='Our official source for SONAX insights and media content.'
      variant='split'
      copy={
        <>
          <p>
            To ensure your leather seats remain soft, supple, and visually
            appealing over time, regular cleaning and conditioning are
            essential. Everyday use, temperature changes, and friction can
            gradually affect the surface if left untreated.
          </p>
          <p>
            Here, we guide you step by step through the complete leather
            cleaning and care process. You’ll discover practical tips and
            tricks, learn how to treat leather gently yet effectively.
          </p>
        </>
      }
      links={
        <>
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <CtaButton key={i} icon={<Icon i={IconArrowRight} />} size='small'>
              Link
            </CtaButton>
          ))}
        </>
      }
    />
  )
}

export default Demo

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

function Demo() {
  return (
    <CategoryLinks
      backgroundImage={
        <Image
          data-image-size='category-links-background-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      variant='split'
      copy={
        <>
          <p>
            To ensure your leather seats remain soft, supple, and visually
            appealing over time, regular cleaning and conditioning are
            essential.
          </p>
          <p>
            Here, we guide you step by step through the complete leather
            cleaning and care process.
          </p>
        </>
      }
      links={
        <>
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <CtaButton
              key={i}
              variant='white'
              icon={<Icon i={IconArrowRight} />}
              size='small'
            >
              Link
            </CtaButton>
          ))}
        </>
      }
    />
  )
}

export default Demo