fix: add p-4 padding to icon containers on contact and join-us pages

Author: marco-souza

src/pages/contact.astro

@@ -87,7 +87,7 @@ const inquiries = [
       <ul class="grid gap-6 md:grid-cols-3">
         <li>
           <a href={`mailto:${CONTACT_EMAIL}`} class="group block p-6 rounded-2xl border border-primary/20 bg-base-100 transition-all duration-300 hover:shadow-lg hover:border-primary/40 grid grid-rows-[auto_auto_1fr]">
-            <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 p-4 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
               <Icon name="lucide:mail" class="w-6 h-6 text-primary" />
             </div>
             <span class="block text-sm text-base-content/60 mb-1">{t('contact.email.label')}</span>
@@ -96,7 +96,7 @@ const inquiries = [
         </li>
         <li>
           <a href="#" class="group block p-6 rounded-2xl border border-violet-500/20 bg-base-100 transition-all duration-300 hover:shadow-lg hover:border-violet-500/40 grid grid-rows-[auto_auto_1fr]">
-            <div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 p-4 rounded-xl bg-violet-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
               <Icon name="lucide:message-circle" class="w-6 h-6 text-violet-500" />
             </div>
             <span class="block text-sm text-base-content/60 mb-1">{t('contact.discord.label')}</span>
@@ -105,7 +105,7 @@ const inquiries = [
         </li>
         <li>
           <a href="#" class="group block p-6 rounded-2xl border border-emerald-500/20 bg-base-100 transition-all duration-300 hover:shadow-lg hover:border-emerald-500/40 grid grid-rows-[auto_auto_1fr]">
-            <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 p-4 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
               <Icon name="lucide:calendar" class="w-6 h-6 text-emerald-500" />
             </div>
             <span class="block text-sm text-base-content/60 mb-1">{t('contact.events.label')}</span>

src/pages/join-us.astro

@@ -131,7 +131,7 @@ const channelStats = communicationChannels.length;
             href="/contact"
             class="group relative p-6 bg-base-100 rounded-2xl border border-base-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300 text-center"
           >
-            <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 p-4 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
               <Icon name="lucide:send" class="w-6 h-6 text-primary" />
             </div>
             <h3 class="font-semibold mb-2">{t('joinUs.contact.sendTitle')}</h3>
@@ -144,7 +144,7 @@ const channelStats = communicationChannels.length;
             rel="noopener noreferrer"
             class="group relative p-6 bg-base-100 rounded-2xl border border-base-300 hover:border-violet-500/30 hover:shadow-lg hover:shadow-violet-500/5 transition-all duration-300 text-center"
           >
-            <div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+            <div class="w-12 h-12 p-4 rounded-xl bg-violet-500/10 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
               <Icon name="lucide:message-square" class="w-6 h-6 text-violet-500" />
             </div>
             <h3 class="font-semibold mb-2">{t('joinUs.contact.discordTitle')}</h3>