Repository: mermaid-js/mermaid
File: packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue (Vue)

Code before:
        </div>
        <header class="mb-6 w-full text-start space-y-1">
          <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
            {{ column.title }}
          </p>
          <p class="text-sm text-gray-600">
            {{ column.description }}
          </p>
        </header>
        <a
          :href="column.redirectUrl"
          target="_blank"
          class="mb-6 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white hover:shadow-md"
          :class="
            column.highlighted
              ? 'bg-[#1e1a2e] text-[#BEDDE3] hover:text-[#5CA3B4]'
              : 'bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E]'
          "
        >
          Start free
        </a>
        <a
          v-if="column.proTrialUrl"
          :href="column.proTrialUrl"
          target="_blank"
          class="mb-6 flex h-10 w-full text-white items-center justify-center rounded-xl bg-[#E0095F] hover:shadow-md"
        >
          Start Pro trial
        </a>
        <div class="h-px w-full bg-[#bedde3] mb-6"></div>
        <ul class="w-full space-y-2">
          <li
            v-for="{ iconUrl, featureName } in column.features"
            :key="featureName"
            class="flex items-center gap-2"
          >
            <img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
            <span>{{ featureName }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


Review comment (suggestion):
```suggestion
          class="mb-6 flex h-10 w-full text-white items-center justify-center rounded-xl bg-[#E0095F] hover:bg-[#B0134A]"
```

Code after:
      >
        <div
          v-if="column.highlighted"
          class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center"
        >
          <p class="text-lg font-semibold text-white">Best for collaboration</p>
        </div>
        <header class="mb-6 w-full text-start space-y-1">
          <p class="text-2xl font-medium text-[#1E1A2E]">
            {{ column.title }}
          </p>
          <p class="text-sm text-gray-600">
            {{ column.description }}
          </p>
        </header>
        <a
          :href="column.redirectUrl"
          target="_blank"
          class="flex h-10 w-full bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E] items-center justify-center rounded-xl hover:text-white hover:shadow-md"
          :class="column.highlighted ? 'mb-6' : 'mb-[88px]'"
        >
          {{ column.buttonText }}
        </a>
        <a
          v-if="column.proTrialUrl"
          :href="column.proTrialUrl"
          target="_blank"
          class="mb-6 flex h-10 w-full text-white items-center justify-center rounded-xl bg-[#E0095F] hover:bg-[#B0134A]"
        >
          Start Pro trial
        </a>
        <div class="h-px w-full bg-[#bedde3] mb-6"></div>
        <ul class="w-full space-y-2">
          <li
            v-for="{ iconUrl, featureName } in column.features"
            :key="featureName"
            class="flex items-center gap-2"
          >
            <img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
            <span>{{ featureName }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>