<div class="pb-16">
  <div class="w-full">
    <!--Section title-->
    <div class="w-full max-w-md mb-5">
      <h2
        class="
          font-heading font-semibold
          text-3xl text-muted-800
          dark:text-white
          mb-4
        "
      >
        Features
      </h2>
      <p class="font-sans text-muted-500 dark:text-muted-400">
        Mistral ships with a lot of features to make your developer and customer
        experiences as nice as possible, without the hassle and unecessary
        effort.
      </p>
    </div>

    <!--Features-->
    <div class="w-full mt-8">
      <div class="grid md:grid-cols-3 lg:grid-cols-3 gap-x-4 gap-y-8">
        <!--Feature-->
        <div>
          <i
            class="iconify w-8 h-8 text-primary-500 mb-2"
            data-icon="ph:circles-three-duotone"
          ></i>
          <h3
            class="
              font-heading font-semibold
              text-lg text-muted-800
              dark:text-muted-100
              mb-1
            "
          >
            Modern UI
          </h3>
          <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
            A clean, well designed and well integrated UI for your app.
          </p>
        </div>

        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:terminal-window-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Clean code
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              A clean code structure is there to help you with your workflow.
            </p>
          </div>
        </div>

        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:moon-stars-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Native dark mode
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              Mistral uses native CSS variables and makes theming super easy.
            </p>
          </div>
        </div>
        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:globe-hemisphere-west-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              RTL support
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              Mistral supports RTL based layouts, just switch the stylesheet.
            </p>
          </div>
        </div>
        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:github-logo-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              GitHub access
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              We grant you access to the private GitHub repo for live updates.
            </p>
          </div>
        </div>
        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:clock-clockwise-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Lifetime updates
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              You're entitled to receive lifetime updates for this product.
            </p>
          </div>
        </div>
        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:books-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Documentation
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              An extensive documentation helps you setting up everything.
            </p>
          </div>
        </div>
        <!--Feature-->
        <div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:parachute-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Support
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              A dedicated customer support portal to post your requests.
            </p>
          </div>
        </div>
        <!--Feature-->
        <!--div class="column is-4">
          <div>
            <i
              class="iconify w-8 h-8 text-primary-500 mb-2"
              data-icon="ph:figma-logo-duotone"
            ></i>
            <h3
              class="
                font-heading font-semibold
                text-lg text-muted-800
                dark:text-muted-100
                mb-1
              "
            >
              Design files
            </h3>
            <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
              A free and minimal XD/Figma UI kit to help with your mockups.
            </p>
          </div>
        </div-->
      </div>
    </div>
  </div>
</div>
