<script lang="ts">
  export let className = '';
</script>

<div class="block-aso {className}">
  <h2>ASO</h2>
  <p>
    Except for performance marketing tools, you can also utilize App Store Optimization to promote your broker app
    effectively. Here is a checklist to follow:
  </p>

  <div class="{className}Table block-aso__table">
    <table>
      <tbody>
        <tr>
          <td>Keyword Research</td>
          <td>
            <ul>
              <li>Identify relevant keywords related to forex trading, finance, and investment.</li>
              <li>
                Use ASO tools like App Annie, Sensor Tower, or Google Keyword Planner to research keyword popularity and
                competitiveness.
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>App Description</td>
          <td>
            <ul>
              <li>
                Write a compelling description highlighting key features, benefits, and unique selling points of your
                app.
              </li>
              <li>Incorporate relevant keywords naturally throughout the description.</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>Keywords Field</td>
          <td>
            <ul>
              <li>Utilize the keywords field in the app store's metadata to include additional relevant keywords.</li>
              <li>Avoid keyword stuffing and use each keyword only once.</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>App Icon</td>
          <td>
            <ul>
              <li>
                Design a visually appealing and recognizable app icon that reflects your brand and stands out in search
                results.
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>Screenshots and Videos</td>
          <td>
            <ul>
              <li>
                Use high-quality screenshots and videos showcasing the app's user interface, features, and benefits.
              </li>
              <li>Highlight key functionalities and benefits to attract users' attention.</li>
              <li>Show off promo codes and bonuses to highlight the extra value users can get.</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>App Ratings and Reviews</td>
          <td>
            <ul>
              <li>Encourage satisfied users to leave positive reviews and ratings on the app store.</li>
              <li>
                Respond promptly to user feedback and address any issues or concerns to maintain a positive reputation.
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>App Localization</td>
          <td>
            <ul>
              <li>
                Translate the app title, description, and keywords into multiple languages to target international
                markets.
              </li>
              <li>
                Adapt screenshots and videos to cater to the preferences of different language-speaking audiences.
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>App Updates</td>
          <td>
            <ul>
              <li>
                Regularly update the app with new features, bug fixes, and performance improvements to keep users
                engaged and attract new downloads.
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>Competitor Analysis</td>
          <td>
            <ul>
              <li>
                Analyze competitor apps to identify successful strategies and incorporate best practices into your ASO
                strategy.
              </li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<style lang="scss">
  @import '/src/scss/media';
  @import '/src/scss/mixins';
  @import '/src/scss/variables';

  .block-aso {
    &__table {
      margin-bottom: 10px;
      padding: 40px 0 40px 0;

      &::-webkit-scrollbar {
        width: 0;
        opacity: 0;
        display: none;
      }

      > table {
        width: 100%;
        table-layout: fixed;
        border: none;
        border-collapse: collapse;

        tr {
          @include smallDefault;

          width: 30%;

          &:nth-child(2n + 0) {
            background-color: $techBlue2 !important;
          }

          &:nth-child(2n + 1) {
            background-color: transparent !important;
          }
        }

        td {
          border: none;
          vertical-align: top;
          padding: 16px 0 16px 24px;

          &:first-of-type {
            @include baseTitle;

            width: 25%;

            @include breakpoint-down('deskL') {
              width: 34%;
            }
          }

          &:last-of-type {
            width: 75%;

            @include breakpoint-down('deskL') {
              width: 66%;
            }
          }
        }
      }
    }
  }
</style>