refactor: update Button component usage in bonus chapter for improved consistency

Author: ErwanDecoster

src/components/ui/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5 py-2 text-base font-medium text-[#1e1e1e] transition-all duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d] hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+    class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5! py-2 text-base font-medium text-[#1e1e1e]! transition-all duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d] hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
   >
     <slot />
   </button>

src/overview/helloWorld/5-bonusChapter.md

@@ -1,5 +1,6 @@
 <script setup>
 import CouponCode from '../../modules/helloWorld/CouponCode.vue';
+import Button from '../../components/ui/Button.vue';
 </script>
 
 # 🎉 Bonus chapter
@@ -44,9 +45,9 @@ import CouponCode from '../../modules/helloWorld/CouponCode.vue';
   </ClientOnly>
 </div>
 
-<a href="https://www.iex.ec/voucher" class="inline-block bg-[#fcd15a] hover:bg-[#ffb74d] text-[#1e1e1e] font-semibold rounded-lg px-6 py-3 text-base shadow transition-all duration-200 no-underline" target="_blank" data-track="claimVoucher">
+<Button as="a" href="https://www.iex.ec/voucher" target="_blank" data-track="claimVoucher">
   Claim your $20 voucher
-</a>
+</Button>
 
 <div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mt-8 mb-6">
   <p class="m-0!">Thank you for being part of the iExec journey! We can't wait to see what you'll build next! 🚀</p>