fix: add p-4 padding to all w-12 h-12 icon containers

Updated 9 files to include consistent padding on icon containers:
- CallToAction, SectionHeader, ChannelCard
- about.astro (values section)
- join-us.astro (contact section)
- contact.astro (contact methods section)

Author: marco-souza

src/components/ui/CallToAction.astro

@@ -15,7 +15,7 @@ const { icon, title, description, class: className = '' } = Astro.props;
   <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"></div>
 
   <div class="relative mx-auto max-w-4xl px-4 text-center">
-    <div class="w-12 h-12 md:w-16 md:h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-4 md:mb-6">
+    <div class="w-12 h-12 p-4 md:w-16 md:h-16 md:p-4 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-4 md:mb-6">
       <Icon name={icon} class="w-6 h-6 md:w-8 md:h-8 text-primary-content" />
     </div>
     <h2 class="text-xl md:text-2xl lg:text-3xl font-bold mb-3 md:mb-4">{title}</h2>

src/components/ui/ChannelCard.astro

@@ -39,7 +39,7 @@ const c = COLORS[color];
 <li class="group relative grid">
   <div class={`absolute inset-0 bg-gradient-to-br ${c.from} ${c.to} rounded-2xl transform rotate-1 group-hover:rotate-2 transition-transform duration-300`}></div>
   <div class={`relative bg-base-100 rounded-2xl border border-base-300 p-6 ${c.border} hover:shadow-lg transition-all duration-300 grid grid-rows-[auto_auto_1fr]`}>
-    <div class={`w-12 h-12 rounded-xl bg-gradient-to-br ${c.from} ${c.text} 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-gradient-to-br ${c.from} ${c.text} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
       <Icon name={icon} class="w-6 h-6" />
     </div>
     <h3 class="text-xl font-semibold mb-2 group-hover:text-primary transition-colors">{title}</h3>

src/components/ui/IconCard.astro

@@ -53,7 +53,7 @@ const colors = colorPairs[color];
 <li class={`relative group grid ${className}`}>
   <div class={`absolute inset-0 bg-gradient-to-br ${colors.from} ${colors.to} rounded-2xl transform rotate-1 group-hover:rotate-2 transition-transform duration-300`}></div>
   <div class={`relative bg-base-100 rounded-2xl border border-base-300 p-6 text-center hover:shadow-lg ${colors.hoverBorder} ${colors.hoverShadow} transition-all duration-300 grid grid-rows-[1fr_auto]`}>
-    <div class={`text-4xl font-bold bg-gradient-to-br ${colors.gradientFrom} ${colors.gradientTo} bg-clip-text text-transparent mb-2 self-center`}>
+    <div class={`text-4xl p-4 font-bold bg-gradient-to-br ${colors.gradientFrom} ${colors.gradientTo} bg-clip-text text-transparent mb-2 self-center`}>
       {value}
     </div>
     <div class="text-sm text-base-content/70">{label}</div>

src/components/ui/SectionHeader.astro

@@ -20,7 +20,7 @@ const colorGradients = {
 ---
 
 <div class={`flex items-center gap-3 md:gap-4 ${className}`}>
-  <div class={`w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
+  <div class={`w-12 h-12 p-4 md:w-14 md:h-14 md:p-4 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
     <Icon name={icon} class="w-6 h-6 md:w-7 md:h-7 text-primary-content" />
   </div>
   <div>

src/pages/about.astro

@@ -73,7 +73,7 @@ const description = t('about.hero.subtitle');
             <li class="relative group grid">
               <div class={`absolute inset-0 bg-gradient-to-br ${c.from} ${c.to} rounded-2xl transform rotate-1 group-hover:rotate-2 transition-transform duration-300`}></div>
               <div class={`relative bg-base-100 rounded-2xl border border-base-300 p-6 ${c.border} hover:shadow-lg transition-all duration-300 grid grid-rows-[auto_auto_1fr]`}>
-                <div class={`w-12 h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center mb-4`}>
+                <div class={`w-12 h-12 p-4 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center mb-4`}>
                   <Icon name={c.icon} class="w-6 h-6 text-white" />
                 </div>
                 <h3 class="text-xl font-bold mb-2">{t(value.titleKey)}</h3>

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>