Testimonials Components in Filytreck library

Testimonials from FilyTreck

<section class="py-24 md:py-36 bg-gray-50" x-data="{ activeSlide: 1, slideCount: 2 }">
    <div class="container mx-auto px-4">
        <h2 class="mb-12 md:mb-20 font-heading text-4xl md:text-5xl text-center font-bold">What others say about us</h2>
        <div class="md:hidden flex flex-wrap justify-center mb-16">
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
            <div class="w-auto p-4">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div class="flex items-center px-4 -m-10">
            <div class="hidden md:block w-auto p-10">
                <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                    <div class="flex-shrink-0 w-full px-6">
                        <div class="flex flex-wrap -m-5">
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Natasha Adams</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <span class="font-medium">4.9</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic2.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Stephen Leblanc</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star-half.svg" alt="">
                                                        <span class="font-medium">4.3</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-shrink-0 w-full px-6">
                        <div class="flex flex-wrap -m-5">
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Lily Johnson</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <span class="font-medium">4.9</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/2 p-5">
                                <div class="bg-white overflow-hidden rounded-3xl">
                                    <div style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
                                        <div class="py-6 px-10">
                                            <div class="flex flex-wrap -m-2">
                                                <div class="w-full md:flex-1 p-2">
                                                    <div class="flex flex-wrap items-center -m-3">
                                                        <div class="w-auto p-3">
                                                            <img class="h-18 obejct-cover rounded-2xl" src="fily-assets/testimonials/pic2.jpg" alt="">
                                                        </div>
                                                        <div class="w-auto p-3">
                                                            <h3 class="font-heading text-xl text-white font-bold">Gareth Leblanc</h3>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="w-full md:w-auto p-2">
                                                    <div class="inline-flex items-center px-2.5 h-8 bg-white rounded-xl gap-1">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5" src="fily-assets/testimonials/star.svg" alt="">
                                                        <img class="h-5 mr-1.5" src="fily-assets/testimonials/star-half.svg" alt="">
                                                        <span class="font-medium">4.3</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="py-14 px-10">
                                        <p class="mb-12 text-xl font-medium leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p>
                                        <div class="mb-3 p-8 bg-green-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Advantages</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/plus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Cras sit amet nulla vel nulla euismod gravida </p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="p-8 bg-gray-50 rounded-3xl">
                                            <h3 class="mb-6 font-heading text-xl font-bold">Defects</h3>
                                            <ul>
                                                <li class="flex flex-wrap gap-3 mb-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Class aptent taciti sociosqu ad litora torquent</p>
                                                    </div>
                                                </li>
                                                <li class="flex flex-wrap gap-3">
                                                    <div class="w-auto">
                                                        <img class="relative top-0.5 h-5" src="fily-assets/testimonials/minus.svg" alt="">
                                                    </div>
                                                    <div class="flex-1">
                                                        <p class="text-gray-500 font-medium">Proin condimentum orci tortor, faucibus auctor</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:block w-auto p-10">
                <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

Testimonials from FilyTreck

<section class="py-12 py-lg-24 py-xl-32 bg-light-light"> <div class="container"> <h2 class="font-heading text-center mb-20">What others say about us</h2> </div> <div class="mw-4xl mw-xl-8xl mx-auto px-5"> <div class="d-flex align-items-center"><a class="d-none d-md-flex btn flex-shrink-0 me-8 me-xl-14 align-items-center justify-content-center bg-white p-0" href="#" style="width: 56px; height: 56px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path> </svg></a> <div class="px-5"> <div class="row"> <div class="col-xl-6 mb-8 mb-xl-0"> <div class="h-100 rounded-3 overflow-hidden"> <div class="py-6 px-10 position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-testimonials.jpg" alt=""> <div class="d-flex flex-column flex-sm-row gap-4 align-items-start align-items-sm-center position-relative"><img class="img-fluid rounded-2" src="fily-assets/testimonials/pic.jpg" alt=""><span class="me-auto fs-5 fw-bold text-white">Natasha Adams</span> <div class="d-flex flex-shrink-0 px-2 py-1 align-items-center bg-white rounded"><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star.svg" alt=""><span class="ms-2 fw-medium">4.9</span></div> </div> </div> <div class="px-8 px-sm-10 pt-14 pb-14 bg-white"> <p class="fs-6 fw-medium mb-12">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Morbi ac faucibus nisl. Vestibulum ante ipsum primis in faucibus orci.</p> <div class="mb-3 px-6 px-sm-8 py-8 bg-success-light rounded-3"><span class="d-block fs-6 fw-bold mb-6">Advantages</span> <ul class="list-unstyled mb-0"> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_675)"> <path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67317C0.0043329 8.50043 -0.193701 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3079C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C19.9971 7.84871 18.9426 5.30684 17.0679 3.4321C15.1932 1.55736 12.6513 0.502868 10 0.5ZM13.3333 11.3333H10.8333V13.8333C10.8333 14.0543 10.7455 14.2663 10.5893 14.4226C10.433 14.5789 10.221 14.6667 10 14.6667C9.77899 14.6667 9.56703 14.5789 9.41075 14.4226C9.25447 14.2663 9.16667 14.0543 9.16667 13.8333V11.3333H6.66667C6.44566 11.3333 6.2337 11.2455 6.07742 11.0893C5.92113 10.933 5.83334 10.721 5.83334 10.5C5.83334 10.279 5.92113 10.067 6.07742 9.91074C6.2337 9.75446 6.44566 9.66667 6.66667 9.66667H9.16667V7.16667C9.16667 6.94565 9.25447 6.73369 9.41075 6.57741C9.56703 6.42113 9.77899 6.33333 10 6.33333C10.221 6.33333 10.433 6.42113 10.5893 6.57741C10.7455 6.73369 10.8333 6.94565 10.8333 7.16667V9.66667H13.3333C13.5544 9.66667 13.7663 9.75446 13.9226 9.91074C14.0789 10.067 14.1667 10.279 14.1667 10.5C14.1667 10.721 14.0789 10.933 13.9226 11.0893C13.7663 11.2455 13.5544 11.3333 13.3333 11.3333Z" fill="#24B428"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Cras sit amet nulla vel nulla euismod gravida</span> </li> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_675)"> <path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67317C0.0043329 8.50043 -0.193701 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3079C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C19.9971 7.84871 18.9426 5.30684 17.0679 3.4321C15.1932 1.55736 12.6513 0.502868 10 0.5ZM13.3333 11.3333H10.8333V13.8333C10.8333 14.0543 10.7455 14.2663 10.5893 14.4226C10.433 14.5789 10.221 14.6667 10 14.6667C9.77899 14.6667 9.56703 14.5789 9.41075 14.4226C9.25447 14.2663 9.16667 14.0543 9.16667 13.8333V11.3333H6.66667C6.44566 11.3333 6.2337 11.2455 6.07742 11.0893C5.92113 10.933 5.83334 10.721 5.83334 10.5C5.83334 10.279 5.92113 10.067 6.07742 9.91074C6.2337 9.75446 6.44566 9.66667 6.66667 9.66667H9.16667V7.16667C9.16667 6.94565 9.25447 6.73369 9.41075 6.57741C9.56703 6.42113 9.77899 6.33333 10 6.33333C10.221 6.33333 10.433 6.42113 10.5893 6.57741C10.7455 6.73369 10.8333 6.94565 10.8333 7.16667V9.66667H13.3333C13.5544 9.66667 13.7663 9.75446 13.9226 9.91074C14.0789 10.067 14.1667 10.279 14.1667 10.5C14.1667 10.721 14.0789 10.933 13.9226 11.0893C13.7663 11.2455 13.5544 11.3333 13.3333 11.3333Z" fill="#24B428"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Phasellus faucibus leo vel dolor lacinia vel efficitur</span> </li> <li> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_675)"> <path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67317C0.0043329 8.50043 -0.193701 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3079C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C19.9971 7.84871 18.9426 5.30684 17.0679 3.4321C15.1932 1.55736 12.6513 0.502868 10 0.5ZM13.3333 11.3333H10.8333V13.8333C10.8333 14.0543 10.7455 14.2663 10.5893 14.4226C10.433 14.5789 10.221 14.6667 10 14.6667C9.77899 14.6667 9.56703 14.5789 9.41075 14.4226C9.25447 14.2663 9.16667 14.0543 9.16667 13.8333V11.3333H6.66667C6.44566 11.3333 6.2337 11.2455 6.07742 11.0893C5.92113 10.933 5.83334 10.721 5.83334 10.5C5.83334 10.279 5.92113 10.067 6.07742 9.91074C6.2337 9.75446 6.44566 9.66667 6.66667 9.66667H9.16667V7.16667C9.16667 6.94565 9.25447 6.73369 9.41075 6.57741C9.56703 6.42113 9.77899 6.33333 10 6.33333C10.221 6.33333 10.433 6.42113 10.5893 6.57741C10.7455 6.73369 10.8333 6.94565 10.8333 7.16667V9.66667H13.3333C13.5544 9.66667 13.7663 9.75446 13.9226 9.91074C14.0789 10.067 14.1667 10.279 14.1667 10.5C14.1667 10.721 14.0789 10.933 13.9226 11.0893C13.7663 11.2455 13.5544 11.3333 13.3333 11.3333Z" fill="#24B428"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Donec facilisis sapien vel aliquam fringilla</span> </li> </ul> </div> <div class="mb-3 px-6 px-sm-8 py-8 bg-light-light rounded-3"><span class="d-block fs-6 fw-bold mb-6">Defetcs</span> <ul class="list-unstyled mb-0"> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_692)"> <path d="M10 0.5C4.48583 0.5 0 4.98583 0 10.5C0 16.0142 4.48583 20.5 10 20.5C15.5142 20.5 20 16.0142 20 10.5C20 4.98583 15.5142 0.5 10 0.5ZM13.3333 11.3333H6.66667C6.20667 11.3333 5.83333 10.96 5.83333 10.5C5.83333 10.04 6.20667 9.66667 6.66667 9.66667H13.3333C13.7933 9.66667 14.1667 10.04 14.1667 10.5C14.1667 10.96 13.7933 11.3333 13.3333 11.3333Z" fill="#A5A7B3"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Class aptent taciti sociosqu ad litora torquent</span> </li> <li> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_692)"> <path d="M10 0.5C4.48583 0.5 0 4.98583 0 10.5C0 16.0142 4.48583 20.5 10 20.5C15.5142 20.5 20 16.0142 20 10.5C20 4.98583 15.5142 0.5 10 0.5ZM13.3333 11.3333H6.66667C6.20667 11.3333 5.83333 10.96 5.83333 10.5C5.83333 10.04 6.20667 9.66667 6.66667 9.66667H13.3333C13.7933 9.66667 14.1667 10.04 14.1667 10.5C14.1667 10.96 13.7933 11.3333 13.3333 11.3333Z" fill="#A5A7B3"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Proin condimentum orci tortor, faucibus auctor</span> </li> </ul> </div> </div> </div> </div> <div class="d-none d-xl-block col-xl-6"> <div class="h-100 rounded-3 overflow-hidden"> <div class="py-6 px-10 position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-testimonials.jpg" alt=""> <div class="d-flex align-items-center position-relative"><img class="img-fluid rounded-2" src="fily-assets/testimonials/pic2.jpg" alt=""><span class="ms-6 me-auto fs-5 fw-bold text-white">Stephen Leblanc</span> <div class="ms-4 flex-shrink-0 d-flex px-2 py-1 align-items-center bg-white rounded"><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid me-1" src="fily-assets/testimonials/star.svg" alt=""><img class="img-fluid" src="fily-assets/testimonials/star-half.svg" alt=""><span class="ms-2 fw-medium">4.3</span></div> </div> </div> <div class="h-100 px-10 pt-14 pb-14 bg-white"> <p class="fs-6 fw-medium mb-12">Praesent sollicitudin vehicula ultricies. Nulla diam ex, aliquet vel varius vitae, consequat quis arcu. Phasellus ac urna et massa semper commodo. Morbi rhoncus nec lacus sed blandit.</p> <div class="mb-3 p-8 bg-success-light rounded-3"><span class="d-block fs-6 fw-bold mb-6">Advantages</span> <ul class="list-unstyled mb-0"> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_675)"> <path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67317C0.0043329 8.50043 -0.193701 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3079C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C19.9971 7.84871 18.9426 5.30684 17.0679 3.4321C15.1932 1.55736 12.6513 0.502868 10 0.5ZM13.3333 11.3333H10.8333V13.8333C10.8333 14.0543 10.7455 14.2663 10.5893 14.4226C10.433 14.5789 10.221 14.6667 10 14.6667C9.77899 14.6667 9.56703 14.5789 9.41075 14.4226C9.25447 14.2663 9.16667 14.0543 9.16667 13.8333V11.3333H6.66667C6.44566 11.3333 6.2337 11.2455 6.07742 11.0893C5.92113 10.933 5.83334 10.721 5.83334 10.5C5.83334 10.279 5.92113 10.067 6.07742 9.91074C6.2337 9.75446 6.44566 9.66667 6.66667 9.66667H9.16667V7.16667C9.16667 6.94565 9.25447 6.73369 9.41075 6.57741C9.56703 6.42113 9.77899 6.33333 10 6.33333C10.221 6.33333 10.433 6.42113 10.5893 6.57741C10.7455 6.73369 10.8333 6.94565 10.8333 7.16667V9.66667H13.3333C13.5544 9.66667 13.7663 9.75446 13.9226 9.91074C14.0789 10.067 14.1667 10.279 14.1667 10.5C14.1667 10.721 14.0789 10.933 13.9226 11.0893C13.7663 11.2455 13.5544 11.3333 13.3333 11.3333Z" fill="#24B428"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Cras sit amet nulla vel nulla euismod gravida</span> </li> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_675)"> <path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67317C0.0043329 8.50043 -0.193701 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3079C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C19.9971 7.84871 18.9426 5.30684 17.0679 3.4321C15.1932 1.55736 12.6513 0.502868 10 0.5ZM13.3333 11.3333H10.8333V13.8333C10.8333 14.0543 10.7455 14.2663 10.5893 14.4226C10.433 14.5789 10.221 14.6667 10 14.6667C9.77899 14.6667 9.56703 14.5789 9.41075 14.4226C9.25447 14.2663 9.16667 14.0543 9.16667 13.8333V11.3333H6.66667C6.44566 11.3333 6.2337 11.2455 6.07742 11.0893C5.92113 10.933 5.83334 10.721 5.83334 10.5C5.83334 10.279 5.92113 10.067 6.07742 9.91074C6.2337 9.75446 6.44566 9.66667 6.66667 9.66667H9.16667V7.16667C9.16667 6.94565 9.25447 6.73369 9.41075 6.57741C9.56703 6.42113 9.77899 6.33333 10 6.33333C10.221 6.33333 10.433 6.42113 10.5893 6.57741C10.7455 6.73369 10.8333 6.94565 10.8333 7.16667V9.66667H13.3333C13.5544 9.66667 13.7663 9.75446 13.9226 9.91074C14.0789 10.067 14.1667 10.279 14.1667 10.5C14.1667 10.721 14.0789 10.933 13.9226 11.0893C13.7663 11.2455 13.5544 11.3333 13.3333 11.3333Z" fill="#24B428"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Phasellus faucibus leo vel dolor lacinia vel efficitur</span> </li> </ul> </div> <div class="mb-3 p-8 bg-light-light rounded-3"><span class="d-block fs-6 fw-bold mb-6">Defetcs</span> <ul class="list-unstyled mb-0"> <li class="mb-3"> <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_611_692)"> <path d="M10 0.5C4.48583 0.5 0 4.98583 0 10.5C0 16.0142 4.48583 20.5 10 20.5C15.5142 20.5 20 16.0142 20 10.5C20 4.98583 15.5142 0.5 10 0.5ZM13.3333 11.3333H6.66667C6.20667 11.3333 5.83333 10.96 5.83333 10.5C5.83333 10.04 6.20667 9.66667 6.66667 9.66667H13.3333C13.7933 9.66667 14.1667 10.04 14.1667 10.5C14.1667 10.96 13.7933 11.3333 13.3333 11.3333Z" fill="#A5A7B3"></path> </g> </svg><span class="ms-3 fw-medium text-secondary">Class aptent taciti sociosqu ad litora torquent</span> </li> </ul> </div> </div> </div> </div> </div> </div><a class="d-none d-md-flex btn flex-shrink-0 ms-8 ms-xl-14 align-items-center justify-content-center bg-primary p-0" href="#" style="width: 56px; height: 56px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path> </svg></a> </div> <div class="d-md-none d-flex align-items-center justify-content-center"><a class="d-flex me-6 btn flex-shrink-0 align-items-center justify-content-center bg-white p-0" href="#" style="width: 56px; height: 56px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path> </svg></a><a class="d-flex btn flex-shrink-0 align-items-center justify-content-center bg-primary p-0" href="#" style="width: 56px; height: 56px;"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path> </svg></a></div> </div> </section>

Testimonials Components by Shuffle

Choose from 10 variations of Testimonials UI components. Presented here are variants available in Filytreck library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Testimonials UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Testimonials UI Components – Filytreck Library

Framework

UI Library

Components

Testimonials from FilyTreck

Testimonial Cards with Pros and Cons Lists

Testimonials from FilyTreck

Testimonials Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Testimonials UI Components – Filytreck Library

Framework

UI Library

Components

Testimonials from FilyTreck

Testimonial Cards with Pros and Cons Lists

Testimonials from FilyTreck

Testimonials Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company