const listItems = [
  {
    illustration: 'https://s.ccdn.es/images/motivation-search.svg',
    title: 'Publica con total seguridad',
    text:
      'Te damos todas las herramientas para un proceso de venta seguro'
  },
  {
    illustration: 'https://s.ccdn.es/images/motivation-trust.svg',
    title: 'Gestiona tu anuncio según tus necesidades',
    text: 'Edita y renueva tu anuncio tantas veces como necesites'
  },
  {
    illustration: 'https://s.ccdn.es/images/motivation-security.svg',
    title: 'Chatea con los compradores potenciales',
    text:
      'Resuelve rápidamente las dudas de los interesados en tu anuncio en el chat'
  }
]

const listNumbersItems = [
  {
    illustration: '70%',
    title: '',
    text: 'de los compradores sólo visita coches.net'
  },
  {
    illustration: '+18M',
    title: '',
    text: 'visitas mensuales a las que impactar'
  },
  {
    illustration: 'x18',
    title: '',
    text: 'veces más tiempo de uso frente a otros portales'
  }
]

return (
  <div>
    <div style={{marginBottom: "80px", padding: "20px"}}>
      <h2 style={{marginBottom: "20px"}}>Standard</h2>
      <ListBullet listItems={listItems}/>
    </div>
    
    <div style={{marginBottom: "80px", padding: "20px"}}>
      <h2 style={{marginBottom: "20px"}}>Responsive</h2>
      <ListBullet listItems={listItems} responsive='responsive' />
    </div>
    
    <div style={{marginBottom: "80px", padding: "20px"}}>
      <h2 style={{marginBottom: "20px"}}>Responsive Block</h2>
      <ListBullet listItems={listNumbersItems} as='h3' isString responsive='responsiveBlock' />
    </div>
    
  </div>
)
