{% capture quotes_svg %}
  <svg class="opinion-quotes" width="26" height="23" viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 10C23.6818 11.3796 23.346 12.8476 22.9924 14.4041C22.6742 15.9605 22.3737 17.4816 22.0909 18.9673C21.8081 20.4177 21.5783 21.7619 21.4015 23L14.1364 23L13.7652 22.4163C14.0833 21.1429 14.4899 19.7986 14.9848 18.3837C15.4798 16.9687 16.0101 15.5361 16.5758 14.0857C17.1768 12.6354 17.7601 11.2735 18.3258 10L24 10ZM12.2348 10C11.9167 11.3796 11.5808 12.8476 11.2273 14.4041C10.9091 15.9605 10.6086 17.4816 10.3258 18.9673C10.0429 20.4177 9.81313 21.7619 9.63636 23L2.37121 23L2 22.4163C2.31818 21.1429 2.72475 19.7986 3.2197 18.3837C3.71465 16.9687 4.24495 15.5361 4.81061 14.0857C5.41162 12.6354 5.99495 11.2735 6.56061 10L12.2348 10Z" fill="var(--green)"/>
  </svg>
{% endcapture %}
<div class="opinions-wrapper">
  <div class="opinions container width-limit">
    <h2 class="opinions-title strong">
      <span class="lang-en">Trusted by over 100,000 sales teams around the world</span>
      <span class="lang-de">Mehr als 100.000 Vertriebsteams weltweit vertrauen Pipedrive!</span>
      <span class="lang-es">Tenemos la confianza de más de 100,000 equipos de ventas en todo el mundo</span>
      <span class="lang-fr">Le CRM de référence pour plus de 100 000 équipes dans le monde</span>
      <span class="lang-br">Mais de 100 000 equipes de vendas em todo o mundo confiam em nós</span>
    </h2>
    <div class="opinions-list row">
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">It has made our sales department more effective and efficient. It’s easy to use and it’s constantly updated.  It’s easy to use and it’s constantly updated.</span>
          <span class="lang-de">Unsere Vertriebsabteilung ist nun effektiver und effizienter. Pipedrive ist benutzerfreundlich und wird regelmäßig aktualisiert.</span>
          <span class="lang-es">Ha hecho que nuestro departamento de ventas sea más eficaz y eficiente. Es fácil de usar y se actualiza constantemente. Es fácil de usar y se actualiza constantemente</span>
          <span class="lang-fr">Avec Pipedrive, nos équipes commerciales ont gagné en efficacité et en productivité. L’outil est facile à utiliser et constamment mis à jour.</span>
          <span class="lang-br">Nosso departamento de vendas se tornou muito mais eficiente. O Pipedrive é muito fácil de usar e é atualizado constantemente.</span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-1.webp">
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Ana Rinck
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Operations Manager</span>
              <span class="lang-de">Betriebsleiter</span>
              <span class="lang-es">Director de operaciones</span>
              <span class="lang-fr">Responsable des opérations</span>
              <span class="lang-br">Gerente de operações</span>
              <span>, BAKERpedia</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">Easy to use, reasonably priced, and ensures I don’t drop the ball on following up with my leads!</span>
          <span class="lang-de">Benutzerfreundlichkeit, angemessener Preis und es sorgt dafür, dass ich bei meinen Leads am Ball bleibe.</span>
          <span class="lang-es">¡Fácil de usar, a un precio razonable y me asegura que no perderé la oportunidad de darle seguimiento a mis prospectos!</span>
          <span class="lang-fr">Facile à prendre en main, bon marché, avec ce logiciel CRM, je suis sûre de ne jamais oublier une seule relance avec mes prospects !</span>
          <span class="lang-br">Fácil de usar, preço justo e garante que eu nunca me esqueça de fazer o follow up com os leads!</span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-2.webp">
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Christine Luken
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Author and Speaker</span>
              <span class="lang-de">Autor und Redner</span>
              <span class="lang-es">Autor y conferenciante</span>
              <span class="lang-fr">Auteur(e) et conférencier(e)</span>
              <span class="lang-br">Autor(a) e palestrante</span>
              <span>, Financial Lifeguard</span>
            </div>
          </div>
        </div>
      </div>
  
      <div class="opinion-card col-12 col-md-4">
        <div class="opinion-text">
          {{ quotes_svg }}
          <span class="lang-en">The best thing we love about Pipedrive is it does two-way sync with Google Apps. It has helped us to better organise and keep everything on track.</span>
          <span class="lang-de">Was wir an Pipedrive am meisten lieben, ist die 2-Wege-Synchronisation mit Google Apps. Dadurch können wir uns besser organisieren und den Überblick behalten.</span>
          <span class="lang-es">Lo que más nos encanta de Pipedrive es que se sincroniza bidireccionalmente con Google Apps. Nos ha ayudado a organizarnos mejor y a mantener todo en orden.</span>
          <span class="lang-fr">Ce que Pipedrive fait de mieux à notre avis, c’est la synchronisation bidirectionnelle avec les applis Google. Cela nous a permis de mieux nous organiser et de tenir notre feuille de route.</span>
          <span class="lang-br">A coisa que mais gostamos no Pipedrive é a sincronização bilateral com os aplicativos do Google. Isso nos ajudou na organização e no ritmo de trabalho.</span>
        </div>
        <div class="opinion-person">
          <div class="opinion-person-image-wrapper">
            <div class="opinion-person-image-wrapper">
              <img class="opinion-person-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/opinions-3.webp">
            </div>
          </div>
          <div class="body-s opinion-person-info">
            <div class="opinion-person-info-name">
              Nirmal Gyanwali
            </div>
            <div class="opinion-person-info-title">
              <span class="lang-en">Managing Director</span>
              <span class="lang-de">Managing Director</span>
              <span class="lang-es">Director general</span>
              <span class="lang-fr">Directeu(rice) général(e)</span>
              <span class="lang-br">Diretor(a) administrativo(a)</span>
              <span>, Nirmal Web Studio</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .opinions-wrapper {
    padding: 60px 0 20px;
  }
  .opinions-title {
    margin-bottom: 30px;
  }
  .opinions-list {
    margin: auto;
  }
  .opinion-card {
    padding-bottom: 40px;
  }
  .opinion-text {
    padding-bottom: 10px;
  }
  .opinion-person {
    display: flex;
  }
  .opinion-person-info {
    align-self: center;
    margin-left: 20px;
  }
  .opinion-person-image {
    border-radius: 50%;
    height: 60px;
    width: 60px;
  }
  .opinion-person-info-name {
    font-weight: 700;
  }
  .opinion-person-info-title {
    display: flex;
  }
  .opinion-person-info-title > span {
    white-space: nowrap;
  }
  @media only screen and (min-width: 768px) {
    .opinions-wrapper {
      padding: 80px 0;
    }
    .opinions-title {
      margin-bottom: 40px;
    }
    .opinion-card {
      padding-bottom: 0;
    }
  }
</style>
