E-Commerce (Products) Components in Filytreck library

<section class="py-24 md:py-36 bg-gray-50" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Categories</h2>
        <p class="mb-24 text-xl text-gray-500 font-medium leading-relaxed text-center">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
        <div class="flex flex-wrap -m-5">
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-blue-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Time tracker</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-pink-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/notebook.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Timesheets &amp; reports</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-orange-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/stopwatch.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Real-time active timers</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online invoicing</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Task comments</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Client profitability</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-green-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/file-invoice-dollar.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Online meeting</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-purple-50 rounded-full">
                                <img class="h-6" src="fily-assets/categories/list-check.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Jobs</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/3 p-5">
                <div class="p-8 bg-white rounded-3xl">
                    <div class="flex flex-wrap items-center -m-3">
                        <div class="w-auto p-3">
                            <div class="flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full">
                                <img class="h-6" src="fily-assets/categories/user.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <h3 class="font-heading text-2xl font-bold">Support</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'hidden': showContent}" class="flex justify-center mt-18">
            <a href="#" x-on:click.prevent="showContent = true" 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-black hover:bg-gray-800 focus:bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">Show more</a>
        </div>
    </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-24">
      <h2 class="font-heading mb-10">Categories</h2>
      <p class="fs-6 text-light-dark fw-medium">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt</p>
    </div>
    <div class="mw-xs mw-md-3xl mw-xl-6xl mx-auto">
      <div class="row mb-n8">
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#E9EBFA"></rect>
                <g clip-path="url(#clip0_527_184)">
                  <path d="M32 20C29.6266 20 27.3066 20.7038 25.3332 22.0224C23.3598 23.3409 21.8217 25.2151 20.9135 27.4078C20.0052 29.6005 19.7676 32.0133 20.2306 34.3411C20.6936 36.6689 21.8365 38.8071 23.5147 40.4853C25.193 42.1635 27.3312 43.3064 29.6589 43.7694C31.9867 44.2324 34.3995 43.9948 36.5922 43.0866C38.7849 42.1783 40.6591 40.6402 41.9776 38.6668C43.2962 36.6935 44 34.3734 44 32C43.9966 28.8185 42.7312 25.7682 40.4815 23.5185C38.2318 21.2688 35.1815 20.0034 32 20ZM32 42C30.0222 42 28.0888 41.4135 26.4443 40.3147C24.7998 39.2159 23.5181 37.6541 22.7612 35.8268C22.0043 33.9996 21.8063 31.9889 22.1922 30.0491C22.578 28.1093 23.5304 26.3275 24.9289 24.9289C26.3275 23.5304 28.1093 22.578 30.0491 22.1921C31.9889 21.8063 33.9996 22.0043 35.8268 22.7612C37.6541 23.5181 39.2159 24.7998 40.3147 26.4443C41.4135 28.0888 42 30.0222 42 32C41.9971 34.6513 40.9426 37.1931 39.0679 39.0679C37.1931 40.9426 34.6513 41.9971 32 42Z" fill="#273ACF"></path>
                  <path d="M31.9985 26C31.7333 26 31.4789 26.1054 31.2914 26.2929C31.1038 26.4804 30.9985 26.7348 30.9985 27V31.325L27.6275 33.437C27.402 33.5778 27.2418 33.8024 27.182 34.0614C27.1221 34.3204 27.1677 34.5926 27.3085 34.818C27.4493 35.0434 27.6739 35.2037 27.9329 35.2635C28.1919 35.3233 28.464 35.2778 28.6895 35.137L32.5295 32.737C32.6746 32.6461 32.7939 32.5195 32.876 32.3692C32.9581 32.219 33.0003 32.0502 32.9985 31.879V27C32.9985 26.7348 32.8931 26.4804 32.7056 26.2929C32.5181 26.1054 32.2637 26 31.9985 26Z" fill="#273ACF"></path>
                </g>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Time</span><span>tracker</span></h5>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#FFE6F4"></rect>
                <path d="M39 23.022C39 23.014 39 23.008 39 23V21C39 20.7348 38.8946 20.4804 38.7071 20.2929C38.5196 20.1054 38.2652 20 38 20C37.7348 20 37.4804 20.1054 37.2929 20.2929C37.1054 20.4804 37 20.7348 37 21V22.1C36.6709 22.0332 36.3358 21.9997 36 22H35V21C35 20.7348 34.8946 20.4804 34.7071 20.2929C34.5196 20.1054 34.2652 20 34 20C33.7348 20 33.4804 20.1054 33.2929 20.2929C33.1054 20.4804 33 20.7348 33 21V22H31V21C31 20.7348 30.8946 20.4804 30.7071 20.2929C30.5196 20.1054 30.2652 20 30 20C29.7348 20 29.4804 20.1054 29.2929 20.2929C29.1054 20.4804 29 20.7348 29 21V22H28C27.6642 21.9997 27.3291 22.0332 27 22.1V21C27 20.7348 26.8946 20.4804 26.7071 20.2929C26.5196 20.1054 26.2652 20 26 20C25.7348 20 25.4804 20.1054 25.2929 20.2929C25.1054 20.4804 25 20.7348 25 21V23V23.022C24.3808 23.4844 23.8777 24.0845 23.5306 24.775C23.1834 25.4654 23.0018 26.2272 23 27V39C23.0016 40.3256 23.5289 41.5964 24.4662 42.5338C25.4036 43.4711 26.6744 43.9984 28 44H36C37.3256 43.9984 38.5964 43.4711 39.5338 42.5338C40.4711 41.5964 40.9984 40.3256 41 39V27C40.9982 26.2272 40.8166 25.4654 40.4694 24.775C40.1223 24.0845 39.6192 23.4844 39 23.022ZM39 39C39 39.7956 38.6839 40.5587 38.1213 41.1213C37.5587 41.6839 36.7956 42 36 42H28C27.2044 42 26.4413 41.6839 25.8787 41.1213C25.3161 40.5587 25 39.7956 25 39V27C25 26.2044 25.3161 25.4413 25.8787 24.8787C26.4413 24.3161 27.2044 24 28 24H36C36.7956 24 37.5587 24.3161 38.1213 24.8787C38.6839 25.4413 39 26.2044 39 27V39ZM37 28C37 28.2652 36.8946 28.5196 36.7071 28.7071C36.5196 28.8946 36.2652 29 36 29H28C27.7348 29 27.4804 28.8946 27.2929 28.7071C27.1054 28.5196 27 28.2652 27 28C27 27.7348 27.1054 27.4804 27.2929 27.2929C27.4804 27.1054 27.7348 27 28 27H36C36.2652 27 36.5196 27.1054 36.7071 27.2929C36.8946 27.4804 37 27.7348 37 28ZM37 32C37 32.2652 36.8946 32.5196 36.7071 32.7071C36.5196 32.8946 36.2652 33 36 33H28C27.7348 33 27.4804 32.8946 27.2929 32.7071C27.1054 32.5196 27 32.2652 27 32C27 31.7348 27.1054 31.4804 27.2929 31.2929C27.4804 31.1054 27.7348 31 28 31H36C36.2652 31 36.5196 31.1054 36.7071 31.2929C36.8946 31.4804 37 31.7348 37 32ZM33 36C33 36.2652 32.8946 36.5196 32.7071 36.7071C32.5196 36.8946 32.2652 37 32 37H28C27.7348 37 27.4804 36.8946 27.2929 36.7071C27.1054 36.5196 27 36.2652 27 36C27 35.7348 27.1054 35.4804 27.2929 35.2929C27.4804 35.1054 27.7348 35 28 35H32C32.2652 35 32.5196 35.1054 32.7071 35.2929C32.8946 35.4804 33 35.7348 33 36Z" fill="#FF008F"></path>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Timesheets</span><span>&amp; reports</span></h5>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#FFF5E6"></rect>
                <g clip-path="url(#clip0_550_107)">
                  <path d="M34 33C34.0016 33.3515 33.9105 33.6971 33.736 34.0022C33.5615 34.3072 33.3097 34.5609 33.0059 34.7377C32.7021 34.9144 32.3571 35.008 32.0057 35.009C31.6542 35.01 31.3087 34.9184 31.004 34.7434C30.6992 34.5683 30.4459 34.3161 30.2697 34.012C30.0934 33.7079 30.0004 33.3628 30 33.0113C29.9996 32.6599 30.0918 32.3145 30.2674 32.01C30.443 31.7056 30.6956 31.4527 31 31.277V27C31 26.7348 31.1054 26.4804 31.2929 26.2929C31.4804 26.1054 31.7348 26 32 26C32.2652 26 32.5196 26.1054 32.7071 26.2929C32.8946 26.4804 33 26.7348 33 27V31.277C33.3031 31.4513 33.5551 31.7023 33.7306 32.0047C33.9061 32.3071 33.999 32.6503 34 33ZM40.06 25.539C41.517 27.1078 42.4845 29.0677 42.8439 31.1783C43.2033 33.2889 42.9389 35.4586 42.0832 37.4212C41.2275 39.3837 39.8177 41.0539 38.0266 42.2269C36.2355 43.3999 34.141 44.0247 32 44.0247C29.859 44.0247 27.7645 43.3999 25.9734 42.2269C24.1823 41.0539 22.7725 39.3837 21.9168 37.4212C21.0611 35.4586 20.7967 33.2889 21.1561 31.1783C21.5155 29.0677 22.483 27.1078 23.94 25.539L23.268 24.792C22.8608 24.9353 22.4316 25.0057 22 25C21.7348 25 21.4804 24.8946 21.2929 24.7071C21.1054 24.5196 21 24.2652 21 24C21 23.7348 21.1054 23.4804 21.2929 23.2929C21.4804 23.1054 21.7348 23 22 23C22.785 23 23 22.785 23 22C23 21.7348 23.1054 21.4804 23.2929 21.2929C23.4804 21.1054 23.7348 21 24 21C24.2652 21 24.5196 21.1054 24.7071 21.2929C24.8946 21.4804 25 21.7348 25 22C25.0058 22.4866 24.9105 22.9692 24.72 23.417L25.426 24.201C27.0481 22.9803 28.9783 22.2358 31 22.051V21C31 20.7348 31.1054 20.4804 31.2929 20.2929C31.4804 20.1054 31.7348 20 32 20C32.2652 20 32.5196 20.1054 32.7071 20.2929C32.8946 20.4804 33 20.7348 33 21V22.051C35.0216 22.2355 36.9518 22.9796 38.574 24.2L39.28 23.416C39.0897 22.9685 38.9943 22.4863 39 22C39 21.7348 39.1054 21.4804 39.2929 21.2929C39.4804 21.1054 39.7348 21 40 21C40.2652 21 40.5196 21.1054 40.7071 21.2929C40.8946 21.4804 41 21.7348 41 22C41 22.785 41.215 23 42 23C42.2652 23 42.5196 23.1054 42.7071 23.2929C42.8946 23.4804 43 23.7348 43 24C43 24.2652 42.8946 24.5196 42.7071 24.7071C42.5196 24.8946 42.2652 25 42 25C41.5684 25.0057 41.1392 24.9353 40.732 24.792L40.06 25.539ZM41 33C41 31.22 40.4722 29.4799 39.4832 27.9999C38.4943 26.5198 37.0887 25.3663 35.4442 24.6851C33.7996 24.0039 31.99 23.8257 30.2442 24.1729C28.4984 24.5202 26.8947 25.3774 25.636 26.636C24.3774 27.8947 23.5202 29.4984 23.1729 31.2442C22.8257 32.99 23.0039 34.7996 23.6851 36.4442C24.3663 38.0887 25.5198 39.4943 26.9999 40.4832C28.4799 41.4722 30.22 42 32 42C34.3861 41.9974 36.6738 41.0483 38.361 39.361C40.0483 37.6738 40.9974 35.3861 41 33Z" fill="#FF9900"></path>
                </g>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Real-time</span><span>active timers</span></h5>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#E9F8EA"></rect>
                <g clip-path="url(#clip0_550_120)">
                  <path d="M36 43C36 43.552 35.553 44 35 44H26C23.243 44 21 41.757 21 39V25C21 22.243 23.243 20 26 20H30.515C32.384 20 34.142 20.728 35.465 22.05L38.949 25.536C39.22 25.807 39.472 26.104 39.697 26.419C40.018 26.868 39.914 27.493 39.465 27.814C39.016 28.134 38.39 28.031 38.07 27.581C37.909 27.356 37.729 27.143 37.536 26.951L34.051 23.465C33.733 23.147 33.38 22.878 33 22.66V27C33 27.551 33.448 28 34 28H37C37.553 28 38 28.448 38 29C38 29.552 37.553 30 37 30H34C32.346 30 31 28.654 31 27V22.023C30.84 22.008 30.678 22 30.515 22H26C24.346 22 23 23.346 23 25V39C23 40.654 24.346 42 26 42H35C35.553 42 36 42.448 36 43ZM41.685 36.267L38.644 35.76C38.271 35.698 38 35.378 38 35C38 34.449 38.448 34 39 34H41.268C41.624 34 41.956 34.192 42.135 34.5C42.41 34.978 43.02 35.141 43.501 34.865C43.979 34.588 44.143 33.977 43.865 33.499C43.331 32.574 42.335 31.999 41.267 31.999H40.999V30.999C40.999 30.447 40.552 29.999 39.999 29.999C39.446 29.999 38.999 30.447 38.999 30.999V31.999C37.345 31.999 35.999 33.345 35.999 34.999C35.999 36.359 36.973 37.509 38.314 37.732L41.355 38.239C41.728 38.301 41.999 38.621 41.999 38.999C41.999 39.55 41.551 39.999 40.999 39.999H38.731C38.375 39.999 38.043 39.807 37.864 39.499C37.589 39.02 36.978 38.857 36.498 39.134C36.02 39.411 35.856 40.022 36.134 40.5C36.668 41.425 37.664 41.999 38.732 41.999H39V42.999C39 43.551 39.447 43.999 40 43.999C40.553 43.999 41 43.551 41 42.999V41.999C42.654 41.999 44 40.653 44 38.999C44 37.639 43.026 36.49 41.685 36.267ZM27.5 35H33C33.553 35 34 34.552 34 34C34 33.448 33.553 33 33 33H27.5C26.122 33 25 34.122 25 35.5V37.5C25 38.878 26.122 40 27.5 40H33C33.553 40 34 39.552 34 39C34 38.448 33.553 38 33 38H27.5C27.224 38 27 37.776 27 37.5V35.5C27 35.224 27.224 35 27.5 35ZM26 31H28C28.552 31 29 30.552 29 30C29 29.448 28.552 29 28 29H26C25.448 29 25 29.448 25 30C25 30.552 25.448 31 26 31ZM26 27H28C28.552 27 29 26.552 29 26C29 25.448 28.552 25 28 25H26C25.448 25 25 25.448 25 26C25 26.552 25.448 27 26 27Z" fill="#24B428"></path>
                </g>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Online</span><span>invoicing</span></h5>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#EEEAFB"></rect>
                <g clip-path="url(#clip0_550_131)">
                  <path d="M24.0008 26C23.6065 26.001 23.216 25.9239 22.8518 25.773C22.4875 25.6221 22.1568 25.4005 21.8788 25.121L20.3348 23.747C20.1367 23.5704 20.0168 23.3223 20.0016 23.0573C19.9865 22.7923 20.0771 22.5321 20.2538 22.334C20.4304 22.1359 20.6785 22.016 20.9435 22.0009C21.2085 21.9857 21.4687 22.0764 21.6668 22.253L23.2518 23.667C23.3425 23.7689 23.4531 23.8511 23.5769 23.9087C23.7006 23.9662 23.8348 23.9978 23.9711 24.0016C24.1075 24.0053 24.2432 23.9811 24.3699 23.9305C24.4966 23.8798 24.6116 23.8038 24.7078 23.707L28.3118 20.276C28.5056 20.1035 28.7588 20.013 29.0181 20.0237C29.2773 20.0345 29.5223 20.1456 29.7011 20.3335C29.88 20.5215 29.9788 20.7716 29.9767 21.031C29.9746 21.2905 29.8717 21.539 29.6898 21.724L26.1008 25.138C25.8246 25.4126 25.4969 25.6301 25.1366 25.778C24.7762 25.9259 24.3903 26.0013 24.0008 26ZM44.0008 24C44.0008 23.7348 43.8954 23.4804 43.7079 23.2929C43.5204 23.1054 43.266 23 43.0008 23H33.0008C32.7356 23 32.4812 23.1054 32.2937 23.2929C32.1061 23.4804 32.0008 23.7348 32.0008 24C32.0008 24.2652 32.1061 24.5196 32.2937 24.7071C32.4812 24.8946 32.7356 25 33.0008 25H43.0008C43.266 25 43.5204 24.8946 43.7079 24.7071C43.8954 24.5196 44.0008 24.2652 44.0008 24ZM26.1008 33.138L29.6898 29.724C29.79 29.6348 29.8712 29.5264 29.9286 29.4052C29.986 29.284 30.0184 29.1525 30.024 29.0185C30.0295 28.8845 30.0081 28.7507 29.9609 28.6252C29.9137 28.4996 29.8417 28.3849 29.7492 28.2877C29.6568 28.1906 29.5457 28.113 29.4227 28.0596C29.2996 28.0063 29.1671 27.9782 29.033 27.9771C28.8989 27.976 28.7659 28.0019 28.642 28.0533C28.5181 28.1046 28.4058 28.1804 28.3118 28.276L24.7118 31.707C24.5214 31.889 24.2682 31.9906 24.0048 31.9906C23.7414 31.9906 23.4882 31.889 23.2978 31.707L21.7078 30.122C21.5192 29.9398 21.2666 29.839 21.0044 29.8413C20.7422 29.8436 20.4914 29.9488 20.306 30.1342C20.1206 30.3196 20.0154 30.5704 20.0131 30.8326C20.0108 31.0948 20.1116 31.3474 20.2938 31.536L21.8788 33.121C22.4385 33.6808 23.1967 33.9967 23.9883 33.9999C24.7799 34.0031 25.5406 33.6933 26.1048 33.138H26.1008ZM44.0008 32C44.0008 31.7348 43.8954 31.4804 43.7079 31.2929C43.5204 31.1054 43.266 31 43.0008 31H33.0008C32.7356 31 32.4812 31.1054 32.2937 31.2929C32.1061 31.4804 32.0008 31.7348 32.0008 32C32.0008 32.2652 32.1061 32.5196 32.2937 32.7071C32.4812 32.8946 32.7356 33 33.0008 33H43.0008C43.266 33 43.5204 32.8946 43.7079 32.7071C43.8954 32.5196 44.0008 32.2652 44.0008 32ZM26.1008 41.138L29.6858 37.724C29.786 37.6348 29.8672 37.5264 29.9246 37.4052C29.982 37.284 30.0144 37.1525 30.02 37.0185C30.0255 36.8845 30.0041 36.7507 29.9569 36.6252C29.9097 36.4996 29.8377 36.3849 29.7452 36.2877C29.6528 36.1906 29.5417 36.113 29.4187 36.0596C29.2956 36.0063 29.1631 35.9782 29.029 35.9771C28.8949 35.976 28.7619 36.0019 28.638 36.0533C28.5141 36.1046 28.4018 36.1804 28.3078 36.276L24.7078 39.707C24.6116 39.8038 24.4966 39.8798 24.3699 39.9305C24.2432 39.9811 24.1075 40.0053 23.9711 40.0016C23.8348 39.9978 23.7006 39.9662 23.5769 39.9087C23.4531 39.8511 23.3425 39.7689 23.2518 39.667L21.6668 38.253C21.4687 38.0764 21.2085 37.9857 20.9435 38.0009C20.6785 38.016 20.4304 38.1359 20.2538 38.334C20.0771 38.5321 19.9865 38.7923 20.0016 39.0573C20.0168 39.3223 20.1367 39.5704 20.3348 39.747L21.8788 41.121C22.4385 41.6808 23.1967 41.9967 23.9883 41.9999C24.7799 42.0031 25.5406 41.6933 26.1048 41.138H26.1008ZM44.0008 40C44.0008 39.7348 43.8954 39.4804 43.7079 39.2929C43.5204 39.1054 43.266 39 43.0008 39H33.0008C32.7356 39 32.4812 39.1054 32.2937 39.2929C32.1061 39.4804 32.0008 39.7348 32.0008 40C32.0008 40.2652 32.1061 40.5196 32.2937 40.7071C32.4812 40.8946 32.7356 41 33.0008 41H43.0008C43.266 41 43.5204 40.8946 43.7079 40.7071C43.8954 40.5196 44.0008 40.2652 44.0008 40Z" fill="#5729D6"></path>
                </g>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Task</span><span>comments</span></h5>
          </div>
        </div>
        <div class="col-md-6 col-xl-4 mb-8">
          <div class="d-flex align-items-center p-8 bg-white rounded-3">
            <div class="flex-shrink-0">
              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="32" fill="#E1E2E6"></rect>
                <g clip-path="url(#clip0_550_137)">
                  <path d="M32 32C33.1867 32 34.3467 31.6481 35.3334 30.9888C36.3201 30.3295 37.0892 29.3925 37.5433 28.2961C37.9974 27.1997 38.1162 25.9933 37.8847 24.8295C37.6532 23.6656 37.0818 22.5965 36.2426 21.7574C35.4035 20.9182 34.3344 20.3468 33.1705 20.1153C32.0067 19.8838 30.8003 20.0026 29.7039 20.4567C28.6075 20.9109 27.6705 21.6799 27.0112 22.6666C26.3519 23.6533 26 24.8133 26 26C26.0016 27.5908 26.6342 29.116 27.7591 30.2409C28.884 31.3658 30.4092 31.9984 32 32ZM32 22C32.7911 22 33.5645 22.2346 34.2223 22.6741C34.8801 23.1136 35.3928 23.7384 35.6955 24.4693C35.9983 25.2002 36.0775 26.0044 35.9231 26.7804C35.7688 27.5563 35.3878 28.269 34.8284 28.8284C34.269 29.3878 33.5563 29.7688 32.7804 29.9231C32.0044 30.0775 31.2002 29.9983 30.4693 29.6955C29.7384 29.3928 29.1136 28.8801 28.6741 28.2223C28.2346 27.5645 28 26.7911 28 26C28 24.9391 28.4214 23.9217 29.1716 23.1716C29.9217 22.4214 30.9391 22 32 22Z" fill="#696D81"></path>
                  <path d="M32 34C29.6139 34.0026 27.3262 34.9517 25.639 36.639C23.9517 38.3262 23.0026 40.6139 23 43C23 43.2652 23.1054 43.5196 23.2929 43.7071C23.4804 43.8946 23.7348 44 24 44C24.2652 44 24.5196 43.8946 24.7071 43.7071C24.8946 43.5196 25 43.2652 25 43C25 41.1435 25.7375 39.363 27.0503 38.0503C28.363 36.7375 30.1435 36 32 36C33.8565 36 35.637 36.7375 36.9497 38.0503C38.2625 39.363 39 41.1435 39 43C39 43.2652 39.1054 43.5196 39.2929 43.7071C39.4804 43.8946 39.7348 44 40 44C40.2652 44 40.5196 43.8946 40.7071 43.7071C40.8946 43.5196 41 43.2652 41 43C40.9974 40.6139 40.0483 38.3262 38.361 36.639C36.6738 34.9517 34.3861 34.0026 32 34Z" fill="#696D81"></path>
                </g>
              </svg>
            </div>
            <h5 class="ms-6 mb-0"><span class="d-block">Client</span><span>profitability</span></h5>
          </div>
        </div>
      </div>
      <div class="text-center mt-20"><a class="btn btn-dark" href="#">Show more</a></div>
    </div>
  </div>
</section>