{{ template "headersMenu.html" . }}

<section class="overflow-hidden relative pt-36 pb-2 md:pt-44 md:pb-24">

    <div class="container">
        <div class="grid md:grid-cols-2 grid-cols-1 items-center gap-[30px]">

            <div class="">
                <p class="text-xl font-bold md:text-3xl">{{ "Plutôt que d'essayer de vous convaincre, nous laissons nos utilisateurs s'exprimer." | t }}</p>
                <ul class="mt-4 list-none">
                    <li class="flex mb-1"><i class="text-xl uil uil-check-circle text-slate-400 ltr:mr-2 rtl:ml-2"></i> {{ "avis clients contrôlés pour professionnels" | t }}</li>
                    <li class="flex mb-1"><i class="text-xl uil uil-check-circle text-slate-400 ltr:mr-2 rtl:ml-2"></i> {{ "processus certifié" | t }} ISO20252</li>
                </ul>

                <div class="mt-4">
                    <a href="#list" class="text-indigo-600 duration-500 ease-in-out btn btn-link hover:text-indigo-600 after:bg-indigo-600">{{ "Voir la liste" | t }} <i class="align-middle uil uil-angle-right-b"></i></a>
                </div>
            </div>

            <div class="hidden relative md:block">
                <a href="https://www.opinionsystem.fr/fr-fr/certificate/3602"><img src="https://cdn.card.pm/partenaire/umwhru6z0b4c8cg88.png" class="mx-auto" width="196" alt=""></a>

                <div class="absolute bottom-1/2 p-4 m-3 w-52 bg-white rounded-lg shadow-md translate-y-1/2 ltr:lg:-right-7 ltr:-right-5 rtl:lg:-left-7 rtl:-left-5 dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="flex">
                        <div class="text-center min-w-[75px]">
                            <span class="text-2xl font-bold">4.5</span>
                            <ul class="mb-0 text-xs list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                            </ul>
                            <span class="text-xs font-semibold text-slate-400">226 {{ "avis" | t }}</span>
                        </div>

                        <span class="font-bold ltr:ml-3 rtl:mr-3">{{ "Utilisé par" | t }} <big>40900</big> {{ "personnes" | t }}</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="container mt-16 md:mt-24" id="list">

        <div class="grid grid-cols-1 mt-8">
            <div class="tiny-three-item">

                {{ range .reviews }}
                {{ if gt (len .Comment) 0 }}
                {{ if gt .Rating 90 }}
                <div class="text-center tiny-slide" style="user-select: none">
                    <div class="customer-testi">
                        <div class="relative p-6 m-2 bg-white rounded shadow content dark:shadow-gray-800 dark:bg-slate-900">
                            <i class="text-indigo-600 mdi mdi-format-quote-open mdi-48px"></i>
                            <p class="text-lg">"{{ .Comment }}"</p>
                            <ul class="mt-3 mb-0 list-none text-amber-400">
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                {{ if gt .Rating 20  }}
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                {{ end }}
                                {{ if gt .Rating 40  }}
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                {{ end }}
                                {{ if gt .Rating 60  }}
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                {{ end }}
                                {{ if gt .Rating 80  }}
                                <li class="inline"><i class="mdi mdi-star"></i></li>
                                {{ end }}
                            </ul>
                        </div>
                        
                        <div class="mt-5 text-center">
                            <h6 class="mt-2 font-semibold">{{ .Name }}</h6>
                            <span class="text-sm text-slate-400">{{ .InvoiceDetail }}</span>
                        </div>
                    </div>
                </div>
                {{ end }}
                {{ end }}
                {{ end }}
            </div>
        </div>
    </div>
</section>

{{ template "footerMenuDetails.html" . }}