{% set person_references = [
{
author: {
name: "Petr Hruboš",
role: "CEO Taškahned.cz"
},
company: {
name: "Zbozí.cz",
},
rating: 4.2,
rating_text: 'Nejčastěji od nás odebírají reklamní agentury, firemní zákazníci, obchody, lékárny, restaurace, rozvozy. Je to klientela, která při jednorázové akci využije i několik stovek tašek nebo restaurace a rozvozy'
},
{
author: {
img: {
src: "https://i.imgur.com/5cvZzqk.jpeg"
},
name: "Irena Maková",
role: "CEO pilulka.cz"
},
company: {
name: "Google",
logo: {
src: "https://i.imgur.com/1N8Nlv0.png"
}
},
rating: 4.2,
rating_text: 'Nejčastěji od nás odebírají reklamní agentury, firemní zákazníci, obchody, lékárny, restaurace, rozvozy. Je to klientela, která při jednorázové akci využije i několik stovek tašek nebo restaurace a rozvozy'
}
] %}
{% set person_testimonials = {
group: {
items: testimonial_sample,
variant: "infinite",
},
} %}
{% set person_references_section = {
header: {
heading: {
title: "Spokojení zákazníci"
},
perex: "V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev rozměrů.",
},
references: person_references,
gallery: {
gallery_id: "reference",
photos: gallery_items[:4]
},
testimonials: person_testimonials
} %}
{% include "@Components/sections/person-references-section/person-references-section.twig" with {props: person_references_section} %}
<section class="base-section s-company-references">
<div class="base-section__container container">
<header class="base-header d-flex flex-column gap-3 text-center align-items-center">
<h2 class="base-heading mb-0 u-fw-700 u-h2">
Spokojení zákazníci
</h2>
<div class="base-header__description entry-content mb-0">V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev rozměrů.</div>
</header>
<div class="g-references row gx-2 gy-2">
<div class="col-lg-6">
<div class="i-person-reference w-100 h-100 p-3 d-flex flex-column u-border u-border--tertiary-500 u-rounded-3">
<div class="i-rating-item d-flex gap-2 align-items-center flex-wrap mb-2">
<div class="i-rating__stars d-flex column-gap-1">
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90712)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Zm-12 7.9L7.1 19.77l.935-5.345-3.941-3.766 5.448-.776L12 5.003l2.458 4.881 5.448.776-3.94 3.766.935 5.345L12 17.246Z"/></g><defs><clipPath id="clip0_3547_90712"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
</div>
</div>
<div class="i-person-reference__text u-fw-500">
Nejčastěji od nás odebírají reklamní agentury, firemní zákazníci, obchody, lékárny, restaurace, rozvozy. Je to klientela, která při jednorázové akci využije i několik stovek tašek nebo restaurace a rozvozy
</div>
<div class="d-flex flex-wrap align-items-center justify-content-between flex-column flex-sm-row gap-2 mt-3">
<div class="i-support u-posr d-flex align-items-center gap-2">
<div class="i-support__img u-rounded-full u-posr flex-shrink-0 d-flex align-items-center justify-content-center --placeholder i-person-reference__author">
<span class="icon d-flex align-items-center justify-content-center --xl">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M19.5 22h-1.667v-4.202a2.467 2.467 0 0 0-2.464-2.465H8.631a2.467 2.467 0 0 0-2.464 2.465V22H4.5v-4.202a4.136 4.136 0 0 1 4.13-4.131h6.74a4.136 4.136 0 0 1 4.13 4.13V22ZM12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-8.333a3.333 3.333 0 1 0 0 6.666 3.333 3.333 0 0 0 0-6.666Z"/></svg> </span>
</div>
<div class="i-support__text d-flex flex-column">
<div class="i-support__title u-fw-600 u-fz-lg">Petr Hruboš</div>
<div class="i-support__perex u-fw-600 u-fz-sm u-color-text-400">CEO Taškahned.cz</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="i-person-reference w-100 h-100 p-3 d-flex flex-column u-border u-border--tertiary-500 u-rounded-3">
<div class="i-rating-item d-flex gap-2 align-items-center flex-wrap mb-2">
<div class="i-rating__stars d-flex column-gap-1">
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90711)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Z"/></g><defs><clipPath id="clip0_3547_90711"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --lg i-rating__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g clip-path="url(#clip0_3547_90712)"><path fill="#FACA9D" d="m24 9.346-8.306-1.183L12 .827 8.306 8.163 0 9.346l6.012 5.744-1.414 8.083L12 19.358l7.402 3.815-1.414-8.083L24 9.346Zm-12 7.9L7.1 19.77l.935-5.345-3.941-3.766 5.448-.776L12 5.003l2.458 4.881 5.448.776-3.94 3.766.935 5.345L12 17.246Z"/></g><defs><clipPath id="clip0_3547_90712"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg> </span>
</div>
</div>
<div class="i-person-reference__text u-fw-500">
Nejčastěji od nás odebírají reklamní agentury, firemní zákazníci, obchody, lékárny, restaurace, rozvozy. Je to klientela, která při jednorázové akci využije i několik stovek tašek nebo restaurace a rozvozy
</div>
<div class="d-flex flex-wrap align-items-center justify-content-between flex-column flex-sm-row gap-2 mt-3">
<div class="i-support u-posr d-flex align-items-center gap-2">
<div class="i-support__img u-rounded-full u-posr flex-shrink-0 d-flex align-items-center justify-content-center i-person-reference__author">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 u-rounded-full">
<picture>
<img src="https://i.imgur.com/5cvZzqk.jpeg" alt="Irena Maková" width="64" height="64" loading="lazy" draggable="false">
</picture>
</div>
</div>
<div class="i-support__text d-flex flex-column">
<div class="i-support__title u-fw-600 u-fz-lg">Irena Maková</div>
<div class="i-support__perex u-fw-600 u-fz-sm u-color-text-400">CEO pilulka.cz</div>
</div>
</div>
<div class="px-3 py-2">
<div class="img u-posr overflow-hidden d-flex align-items-center">
<picture>
<img src="https://i.imgur.com/1N8Nlv0.png" alt="Google" width="100" height="50" loading="lazy" draggable="false">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-photogallery u-posr mt-2">
<div class="row c-photogallery__row g-2">
<div class="c-photogallery__col col-6 col-md-3">
<div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --video h-100 u-rounded-3" data-fancybox="reference" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
<picture>
<img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
</picture>
</div>
<div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
<span class="icon d-flex align-items-center justify-content-center --colored --conversion">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg> </span>
</div>
</div>
</div>
<div class="c-photogallery__col col-6 col-md-3">
<div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover h-100 u-rounded-3" data-fancybox="reference" data-src="https://i.imgur.com/5cvZzqk.jpeg">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
<picture>
<img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
</picture>
</div>
</div>
</div>
<div class="c-photogallery__col col-6 col-md-3">
<div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover h-100 u-rounded-3" data-fancybox="reference" data-src="https://placehold.co/1600x900">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
<picture>
<img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
</picture>
</div>
</div>
</div>
<div class="c-photogallery__col col-6 col-md-3">
<div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover h-100 u-rounded-3" data-fancybox="reference" data-src="https://i.imgur.com/5cvZzqk.jpeg">
<div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
<picture>
<img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
</picture>
</div>
</div>
</div>
</div>
</div>
<div class="g-testimonials --infinite mt-7">
<div class="g-testimonials__wrapper overflow-hidden">
<div class="g-testimonials__inner d-grid d-sm-flex gap-sm-5 flex-sm-nowrap">
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/pilulka.svg" alt="Arrange" width="100" height="26" loading="lazy" draggable="false">
</picture>
</div>
</a>
<span class="i-testimonial d-flex align-items-center justify-content-center">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/dobrovsky.svg" alt="Arrange" width="114" height="26" loading="lazy" draggable="false">
</picture>
</div>
</span>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/rohlik.svg" alt="Arrange" width="90" height="46" loading="lazy" draggable="false">
</picture>
</div>
</a>
<span class="i-testimonial d-flex align-items-center justify-content-center">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/astratex.svg" alt="Arrange" width="105" height="16" loading="lazy" draggable="false">
</picture>
</div>
</span>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/alkohol-cz.svg" alt="Arrange" width="129" height="30" loading="lazy" draggable="false">
</picture>
</div>
</a>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/cerstve-utrzeno.svg" alt="Arrange" width="73" height="72" loading="lazy" draggable="false">
</picture>
</div>
</a>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/vivantis.svg" alt="Arrange" width="91" height="20" loading="lazy" draggable="false">
</picture>
</div>
</a>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/dr-oetker.svg" alt="Arrange" width="86" height="56" loading="lazy" draggable="false">
</picture>
</div>
</a>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/harfasport.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
</picture>
</div>
</a>
<a class="i-testimonial d-flex align-items-center justify-content-center" href="https://example.com" title="Arrange">
<div class="img u-posr overflow-hidden i-testimonial__image" tabindex="-1">
<picture>
<img src="images/clients/represent.svg" alt="Arrange" width="157" height="32" loading="lazy" draggable="false">
</picture>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
Irena MakováCEO pilulka.cz
