Features UI Components – Filytreck Library

<section class="py-24 md:py-40 bg-black" x-data="{ showContent: false }">
    <div class="container mx-auto px-4">
        <h2 class="mb-6 font-heading text-4xl md:text-5xl text-white font-bold">Features</h2>
        <p class="mb-16 text-xl text-gray-500 font-medium">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
        <div class="flex flex-wrap -m-3">
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/app.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Everything in one app</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Increase in the productivity</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Efficient contact with the client</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Everything in one app</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-orange-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/app.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Analytics Snapshot</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-blue-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/chat-arrow.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Secure Payments</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-purple-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/comments.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Integrated Calendar</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
            <div :class="{'hidden': !showContent}" class="hidden w-full md:w-1/2 xl:w-1/4 p-3">
                <div class="py-14 px-10 h-full bg-white bg-opacity-5 rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-8">
                        <div class="w-auto p-2.5">
                            <div class="flex items-center justify-center w-14 h-14 bg-green-500 rounded-xl">
                                <img class="h-6" src="fily-assets/features/clock.svg" alt="">
                            </div>
                        </div>
                        <div class="flex-1 p-2.5">
                            <h3 class="font-heading text-xl text-white font-medium leading-snug">Task Manager</h3>
                        </div>
                    </div>
                    <p class="font-medium text-gray-500 leading-relaxed">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
                </div>
            </div>
        </div>
        <a href="#" x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" class="inline-flex justify-center items-center text-center h-18 mt-16 p-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 border border-gray-500 focus:ring-4 focus:ring-gray-700 transition duration-200">See all features</a>
    </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark">
  <div class="container">
    <div class="mb-16">
      <h2 class="font-heading text-white mb-4">Features</h2>
      <p class="text-secondary mb-0">Explore the powerful features that make FilyTreck stand out in the realm of task management.</p>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-6 col-xl-3 mb-6 mb-xl-0">
        <div class="h-100 px-6 ps-sm-10 pe-sm-8 py-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-flex align-items-center mb-10">
            <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-warning rounded" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_108_145)">
                  <path d="M7 0H4C2.93913 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4L0 7C0 8.06087 0.421427 9.07828 1.17157 9.82843C1.92172 10.5786 2.93913 11 4 11H7C8.06087 11 9.07828 10.5786 9.82843 9.82843C10.5786 9.07828 11 8.06087 11 7V4C11 2.93913 10.5786 1.92172 9.82843 1.17157C9.07828 0.421427 8.06087 0 7 0ZM9 7C9 7.53043 8.78929 8.03914 8.41421 8.41421C8.03914 8.78929 7.53043 9 7 9H4C3.46957 9 2.96086 8.78929 2.58579 8.41421C2.21071 8.03914 2 7.53043 2 7V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H7C7.53043 2 8.03914 2.21071 8.41421 2.58579C8.78929 2.96086 9 3.46957 9 4V7Z" fill="white"></path>
                  <path d="M20 0H17C15.9391 0 14.9217 0.421427 14.1716 1.17157C13.4214 1.92172 13 2.93913 13 4V7C13 8.06087 13.4214 9.07828 14.1716 9.82843C14.9217 10.5786 15.9391 11 17 11H20C21.0609 11 22.0783 10.5786 22.8284 9.82843C23.5786 9.07828 24 8.06087 24 7V4C24 2.93913 23.5786 1.92172 22.8284 1.17157C22.0783 0.421427 21.0609 0 20 0ZM22 7C22 7.53043 21.7893 8.03914 21.4142 8.41421C21.0391 8.78929 20.5304 9 20 9H17C16.4696 9 15.9609 8.78929 15.5858 8.41421C15.2107 8.03914 15 7.53043 15 7V4C15 3.46957 15.2107 2.96086 15.5858 2.58579C15.9609 2.21071 16.4696 2 17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V7Z" fill="white"></path>
                  <path d="M7 13H4C2.93913 13 1.92172 13.4214 1.17157 14.1716C0.421427 14.9217 0 15.9391 0 17L0 20C0 21.0609 0.421427 22.0783 1.17157 22.8284C1.92172 23.5786 2.93913 24 4 24H7C8.06087 24 9.07828 23.5786 9.82843 22.8284C10.5786 22.0783 11 21.0609 11 20V17C11 15.9391 10.5786 14.9217 9.82843 14.1716C9.07828 13.4214 8.06087 13 7 13ZM9 20C9 20.5304 8.78929 21.0391 8.41421 21.4142C8.03914 21.7893 7.53043 22 7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V17C2 16.4696 2.21071 15.9609 2.58579 15.5858C2.96086 15.2107 3.46957 15 4 15H7C7.53043 15 8.03914 15.2107 8.41421 15.5858C8.78929 15.9609 9 16.4696 9 17V20Z" fill="white"></path>
                  <path d="M20 13H17C15.9391 13 14.9217 13.4214 14.1716 14.1716C13.4214 14.9217 13 15.9391 13 17V20C13 21.0609 13.4214 22.0783 14.1716 22.8284C14.9217 23.5786 15.9391 24 17 24H20C21.0609 24 22.0783 23.5786 22.8284 22.8284C23.5786 22.0783 24 21.0609 24 20V17C24 15.9391 23.5786 14.9217 22.8284 14.1716C22.0783 13.4214 21.0609 13 20 13ZM22 20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0391 21.7893 20.5304 22 20 22H17C16.4696 22 15.9609 21.7893 15.5858 21.4142C15.2107 21.0391 15 20.5304 15 20V17C15 16.4696 15.2107 15.9609 15.5858 15.5858C15.9609 15.2107 16.4696 15 17 15H20C20.5304 15 21.0391 15.2107 21.4142 15.5858C21.7893 15.9609 22 16.4696 22 17V20Z" fill="white"></path>
                </g>
              </svg>
            </div>
            <div>
              <h6 class="font-heading fs-7 fw-medium text-white mb-0"><span class="d-block">Everything in</span><span>one app</span></h6>
            </div>
          </div>
          <p class="mw-xs pe-5 fw-medium text-light-dark mb-0">Streamlining Your Tasks, Time, and Goals. Experience the ultimate convenience of having all your task management.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3 mb-6 mb-xl-0">
        <div class="h-100 px-6 ps-sm-10 pe-sm-8 py-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-flex align-items-center mb-10">
            <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-primary rounded" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_108_156)">
                  <path d="M22.5002 3.97601H19.4142C19.2165 3.97606 19.0232 4.03473 18.8588 4.14461C18.6943 4.2545 18.5662 4.41066 18.4905 4.59336C18.4149 4.77606 18.3951 4.97709 18.4336 5.17104C18.4722 5.365 18.5674 5.54316 18.7072 5.68301L19.7932 6.76901L16.2072 10.354C16.0167 10.5361 15.7633 10.6377 15.4997 10.6377C15.2362 10.6377 14.9827 10.5361 14.7922 10.354L14.6222 10.183C14.0508 9.63708 13.291 9.33244 12.5007 9.33244C11.7104 9.33244 10.9506 9.63708 10.3792 10.183L5.27921 15.283C5.09131 15.4715 4.98595 15.7268 4.98633 15.9929C4.9867 16.259 5.09278 16.5141 5.28121 16.702C5.46965 16.8899 5.72501 16.9953 5.99113 16.9949C6.25724 16.9945 6.51231 16.8885 6.70021 16.7L11.8002 11.6C11.9906 11.4177 12.2441 11.3159 12.5077 11.3159C12.7713 11.3159 13.0248 11.4177 13.2152 11.6L13.3852 11.771C13.9568 12.3165 14.7166 12.6208 15.5067 12.6208C16.2968 12.6208 17.0566 12.3165 17.6282 11.771L21.2142 8.18501L22.3002 9.27101C22.4405 9.40856 22.6183 9.50172 22.8112 9.53886C23.0042 9.576 23.2038 9.55547 23.3852 9.47983C23.5665 9.4042 23.7216 9.27681 23.8309 9.11358C23.9403 8.95035 23.9992 8.75851 24.0002 8.56201V5.47601C24.0002 5.07819 23.8422 4.69666 23.5609 4.41535C23.2796 4.13405 22.898 3.97601 22.5002 3.97601Z" fill="white"></path>
                  <path d="M23 21.976H5C4.20435 21.976 3.44129 21.6599 2.87868 21.0973C2.31607 20.5347 2 19.7716 2 18.976V1C2 0.734784 1.89464 0.48043 1.70711 0.292893C1.51957 0.105357 1.26522 0 1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1L0 18.976C0.00158786 20.3016 0.528882 21.5724 1.46622 22.5098C2.40356 23.4471 3.67441 23.9744 5 23.976H23C23.2652 23.976 23.5196 23.8706 23.7071 23.6831C23.8946 23.4956 24 23.2412 24 22.976C24 22.7108 23.8946 22.4564 23.7071 22.2689C23.5196 22.0814 23.2652 21.976 23 21.976Z" fill="white"></path>
                </g>
              </svg>
            </div>
            <div>
              <h6 class="font-heading fs-7 fw-medium text-white mb-0"><span class="d-block">Increase in</span><span>the productivity</span></h6>
            </div>
          </div>
          <p class="mw-xs pe-5 fw-medium text-light-dark mb-0">Experience a substantial boost in productivity with our streamlined approach, optimizing your workflow and time management.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3 mb-6 mb-md-0">
        <div class="h-100 px-6 ps-sm-10 pe-sm-8 py-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-flex align-items-center mb-10">
            <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-info rounded" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_108_163)">
                  <path d="M24 16V21C24 21.7957 23.6839 22.5588 23.1213 23.1214C22.5587 23.684 21.7956 24 21 24H16C14.5971 23.9986 13.2192 23.6283 12.0047 22.9262C10.7901 22.2241 9.78145 21.215 9.08 20C9.83387 19.9946 10.5852 19.9115 11.322 19.752C11.8832 20.4537 12.595 21.0201 13.4048 21.4092C14.2146 21.7984 15.1016 22.0003 16 22H21C21.2652 22 21.5196 21.8947 21.7071 21.7072C21.8946 21.5196 22 21.2653 22 21V16C21.9998 15.1013 21.7972 14.2141 21.4074 13.4043C21.0175 12.5945 20.4504 11.8828 19.748 11.322C19.9088 10.5854 19.9933 9.83405 20 9.08004C21.215 9.78149 22.2241 10.7901 22.9262 12.0047C23.6282 13.2193 23.9986 14.5971 24 16ZM17.977 9.65104C18.0705 8.36268 17.8856 7.06928 17.4348 5.85874C16.9841 4.64819 16.278 3.54887 15.3646 2.63546C14.4512 1.72205 13.3518 1.01597 12.1413 0.565199C10.9308 0.114423 9.63736 -0.0704842 8.349 0.0230415C6.06592 0.283774 3.95693 1.37022 2.41918 3.07778C0.881427 4.78535 0.0210272 6.99621 0 9.29404L0 14.334C0 16.866 1.507 18 3 18H8.7C10.9988 17.9803 13.211 17.1204 14.9198 15.5826C16.6286 14.0447 17.7159 11.9351 17.977 9.65104ZM13.95 4.05104C14.6599 4.76255 15.2088 5.61824 15.5593 6.56023C15.9099 7.50222 16.054 8.50852 15.982 9.51104C15.7686 11.2947 14.9105 12.9389 13.5693 14.134C12.2282 15.3291 10.4964 15.9928 8.7 16H3C2.072 16 2 14.725 2 14.334V9.29404C2.00834 7.49842 2.67265 5.76775 3.86792 4.42772C5.06319 3.08769 6.70699 2.23071 8.49 2.01804C8.656 2.00604 8.822 2.00004 8.988 2.00004C9.90927 1.99918 10.8217 2.17988 11.6731 2.5318C12.5245 2.88372 13.2982 3.39997 13.95 4.05104Z" fill="white"></path>
                </g>
              </svg>
            </div>
            <div>
              <h6 class="font-heading fs-7 fw-medium text-white mb-0"><span class="d-block">Efficient contact</span><span>with the client</span></h6>
            </div>
          </div>
          <p class="mw-xs pe-5 fw-medium text-light-dark mb-0">Facilitate seamless communication and effortless engagement with clients through our efficient features.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3">
        <div class="h-100 px-6 ps-sm-10 pe-sm-8 py-14 bg-light-dark bg-opacity-10 rounded-2">
          <div class="d-flex align-items-center mb-10">
            <div class="d-flex flex-shrink-0 me-5 align-items-center justify-content-center bg-success rounded" style="width: 56px; height: 56px;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_108_170)">
                  <path d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21509 0.913451 7.4078C0.00519943 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.8071 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0866C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6935 24 14.3734 24 12C23.9966 8.81846 22.7312 5.76821 20.4815 3.51852C18.2318 1.26883 15.1815 0.00344108 12 0ZM12 22C10.0222 22 8.08879 21.4135 6.4443 20.3147C4.79981 19.2159 3.51809 17.6541 2.76121 15.8268C2.00433 13.9996 1.8063 11.9889 2.19215 10.0491C2.578 8.10929 3.53041 6.32746 4.92894 4.92893C6.32746 3.53041 8.10929 2.578 10.0491 2.19215C11.9889 1.8063 13.9996 2.00433 15.8268 2.7612C17.6541 3.51808 19.2159 4.79981 20.3147 6.4443C21.4135 8.08879 22 10.0222 22 12C21.9971 14.6513 20.9426 17.1931 19.0679 19.0679C17.1931 20.9426 14.6513 21.9971 12 22Z" fill="white"></path>
                  <path d="M12.0004 6C11.7352 6 11.4809 6.10536 11.2933 6.29289C11.1058 6.48043 11.0004 6.73478 11.0004 7V11.325L7.62943 13.437C7.404 13.5778 7.24374 13.8024 7.18392 14.0614C7.1241 14.3204 7.1696 14.5926 7.31043 14.818C7.45126 15.0434 7.67588 15.2037 7.93487 15.2635C8.19386 15.3233 8.466 15.2778 8.69143 15.137L12.5314 12.737C12.6765 12.6461 12.7958 12.5195 12.878 12.3692C12.9601 12.219 13.0022 12.0502 13.0004 11.879V7C13.0004 6.73478 12.8951 6.48043 12.7075 6.29289C12.52 6.10536 12.2657 6 12.0004 6Z" fill="white"></path>
                </g>
              </svg>
            </div>
            <div>
              <h6 class="font-heading fs-7 fw-medium text-white mb-0"><span class="d-block">Take charge </span><span>of your time</span></h6>
            </div>
          </div>
          <p class="mw-xs pe-5 fw-medium text-light-dark mb-0">Effortless Time Management for Optimal Productivity. Discover effective strategies and tools to manage your time efficiently.</p>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-outline-light" href="#">See all features</a></div>
  </div>
</section>