About UI Components – Filytreck Library

<section class="py-24 md:py-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8 xl:-m-16 xl:mb-14">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <div class="relative overflow-hidden rounded-3xl" style="height: 496px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic.jpg" alt="">
                </div>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <h3 class="mb-10 font-heading text-3xl font-medium leading-tight">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</h3>
                <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">The easy way to work faster: Effortless Time Tracking for Enhanced Productivity. Streamline your tasks and optimize your work process, all while gaining valuable insights into your time management.</p>
                <div class="flex">
                    <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">Read more</a>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-8 xl:-m-16">
            <div class="w-full md:w-5/12 p-8 xl:p-16">
                <h3 class="mb-16 font-heading text-4xl md:text-5xl font-bold leading-tight">The easy way to work faster</h3>
                <ul>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Streamline tasks effortlessly</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Boost productivity with simplicity</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Accelerate your work pace</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-2">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Effortless speed and efficiency</span>
                        </div>
                    </li>
                    <li class="flex items-center -m-2 mb-0">
                        <div class="w-auto p-2">
                            <div class="flex items-center justify-center w-7 h-7 bg-gray-50 rounded-full">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <path d="M3.87459 10.3313C3.53396 10.3315 3.20728 10.1961 2.96662 9.95501L0.22153 7.21093C-0.0738435 6.91546 -0.0738435 6.43651 0.22153 6.14104C0.516999 5.84567 0.995953 5.84567 1.29142 6.14104L3.87459 8.72422L10.7086 1.89023C11.004 1.59486 11.483 1.59486 11.7785 1.89023C12.0738 2.1857 12.0738 2.66465 11.7785 2.96012L4.78256 9.95501C4.5419 10.1961 4.21523 10.3315 3.87459 10.3313Z" fill="#273ACF"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="w-auto p-2">
                            <span class="text-lg font-medium">Work smarter, not harder</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="w-full md:w-7/12 p-8 xl:p-16">
                <div class="relative overflow-hidden rounded-3xl" style="height: 512px;">
                    <img class="absolute top-0 left-0 w-full h-full object-cover transform hover:scale-105 rounded-3xl transition duration-200" src="fily-assets/about/pic2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 overflow-hidden">
  <div class="container">
    <div class="row mb-24">
      <div class="col-lg-5 mb-10"><img class="img-fluid d-block w-100 mw-sm h-100 rounded-3" src="fily-assets/about/pic.jpg" alt=""></div>
      <div class="col-lg-7">
        <div class="mw-3xl ms-lg-auto">
          <h4 class="font-heading mb-10 fw-medium">Discover the convenient route to turbocharge your productivity effortlessly, allowing you to accomplish tasks faster and more efficiently, all while maintaining precision and accuracy in your work.</h4>
          <p class="fs-6 text-light-dark fw-medium mb-14">Picture yourself at the helm, steering a team to a triumphant product launch - on time, within budget, and delighting clients. Project management is the conduit from vision to achievement.</p><a class="btn btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-5 mb-10">
        <div>
          <h2 class="font-heading mb-14">The easy way to work faster</h2>
          <ul class="list-unstyled mb-0">
            <li class="d-flex align-items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="28" height="28" rx="14" fill="#F5F6F8"></rect>
                <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
              </svg><span class="ms-4 fs-7 fw-medium">Streamline tasks effortlessly</span>
            </li>
            <li class="d-flex align-items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="28" height="28" rx="14" fill="#F5F6F8"></rect>
                <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
              </svg><span class="ms-4 fs-7 fw-medium">Boost productivity with simplicity</span>
            </li>
            <li class="d-flex align-items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="28" height="28" rx="14" fill="#F5F6F8"></rect>
                <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
              </svg><span class="ms-4 fs-7 fw-medium">Accelerate your work pace</span>
            </li>
            <li class="d-flex align-items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="28" height="28" rx="14" fill="#F5F6F8"></rect>
                <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
              </svg><span class="ms-4 fs-7 fw-medium">Effortless speed and efficiency</span>
            </li>
            <li class="d-flex align-items-center">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="28" height="28" rx="14" fill="#F5F6F8"></rect>
                <path d="M11.8746 18.3313C11.534 18.3315 11.2073 18.1961 10.9666 17.955L8.22153 15.2109C7.92616 14.9155 7.92616 14.4365 8.22153 14.141C8.517 13.8457 8.99595 13.8457 9.29142 14.141L11.8746 16.7242L18.7086 9.89023C19.004 9.59486 19.483 9.59486 19.7785 9.89023C20.0738 10.1857 20.0738 10.6647 19.7785 10.9601L12.7826 17.955C12.5419 18.1961 12.2152 18.3315 11.8746 18.3313Z" fill="#273ACF"></path>
              </svg><span class="ms-4 fs-7 fw-medium">Work smarter, not harder</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="mw-3xl ms-lg-auto"><img class="img-fluid d-block rounded-3" src="fily-assets/about/pic2.jpg" alt=""></div>
      </div>
    </div>
  </div>
</section>