Logo Clouds Components in Filytreck library

<section class="py-24 md:py-40 bg-black">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-white">They trusted us</h2>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-normal">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                <a href="#" class="inline-flex justify-center items-center text-center h-18 py-8 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Get started</a>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <div class="flex flex-wrap justify-center -m-8">
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/spotify.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/slack.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 46px;" src="fily-assets/brands/figma.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 52px;" src="fily-assets/brands/apple.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 37px;" src="fily-assets/brands/mastercard.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 41px;" src="fily-assets/brands/microsoft.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 26px;" src="fily-assets/brands/visa.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img style="height: 32px;" src="fily-assets/brands/brand.svg" alt="">
                            </div>
                        </div>
                        <div class="w-auto p-8">
                            <div class="p-8 flex justify-center items-center bg-white bg-opacity-5 rounded-2xl" style="width: 120px; height: 120px;">
                                <img class="height: 52px;" src="fily-assets/brands/opera.svg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-5 mb-16 mb-lg-0">
          <div>
            <h3 class="font-heading text-white mb-10">They trusted us</h3>
            <p class="fs-6 text-light-dark fw-medium mb-14">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p><a class="btn btn-primary" href="#">Read more</a>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="d-flex flex-column align-items-center align-items-lg-end">
            <div class="d-flex flex-column flex-sm-row mb-8 mb-lg-12 mb-xl-16 gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/spotify.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/slack.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/figma.svg" alt=""></div>
            </div>
            <div class="d-flex flex-column flex-sm-row mb-8 mb-lg-12 mb-xl-16 gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/apple.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/mastercard.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/microsoft.svg" alt=""></div>
            </div>
            <div class="d-flex flex-column flex-sm-row gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/visa.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/brand.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/opera.svg" alt=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>