feat(ui): add text color support to grid cards and update social media links

- Add dynamic textColor prop to GridCard component for customizable text styling
- Update FooterSection social links with actual URLs and target="_blank" for external navigation
- Configure proper text colors for grid section cards
- Replace placeholder links with real social media profiles for Centro del Reinon

src/components/cards/GridCard.astro

@@ -30,7 +30,7 @@ const imageUrl = props.image || ''
         <div class="grid grid-cols-1 gap-0 p-8 font-bold">
             <div class="px-12 py-10">
                 <Icon name={props.icon} class="text-3xl" />
-                <p class="font-primary text-xl">{props.text}</p>
+                <p class={`font-primary text-xl text-[${textColor}]`}>{props.text}</p>
             </div>
                 <div class="object-cover aspect-square flex">
                 <img class="w-full h-auto object-cover" src={props.image} alt="" />

src/components/section/FooterSection.astro

@@ -32,10 +32,10 @@ import jbp from "../../assets/DRJBP-1.webp";
 
             <div class="flex flex-row justify-between">
                 <ul class="flex flex-row gap-2">
-                    <li class="border-r-1 pr-2"><a href="#"><Icon name="ph:linkedin-logo-thin" class="text-3xl" /></a></li>
+                    <!-- <li class="border-r-1 pr-2"><a href="#"><Icon name="ph:linkedin-logo-thin" class="text-3xl" /></a></li> -->
-                    <li class="border-r-1 pr-2"><a href="#"><Icon name="ph:instagram-logo-thin" class="text-3xl" /></a></li>
+                    <li class="border-r-1 pr-2"><a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank"><Icon name="ph:instagram-logo-thin" class="text-3xl" /></a></li>
-                    <li class="border-r-1 pr-2"><a href="#"><Icon name="ph:facebook-logo-thin" class="text-3xl" /></a></li>
+                    <li class="border-r-1 pr-2"><a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank"><Icon name="ph:facebook-logo-thin" class="text-3xl" /></a></li>
-                    <li><a href="#"><Icon name="ph:youtube-logo-thin" class="text-3xl" /></a></li>
+                    <li><a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank"><Icon name="ph:youtube-logo-thin" class="text-3xl" /></a></li>
                 </ul>
                 <button class="bg-[#003421] px-4 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition">
                     Enviar

src/components/section/GridSection.astro

@@ -6,7 +6,8 @@ const cards = [
         type: 'text',
         icon: 'ph:arrow-circle-down-thin',
         text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
-        bgColor: '#EBE5D0'
+        bgColor: '#EBE5D0',
+        textColor: '#003421'
     },
     {
         type: 'image',
@@ -16,6 +17,7 @@ const cards = [
         type: 'text',
         icon: 'ph:arrow-circle-right-thin',
         text: 'Participación activa en escenarios internacionales.',
+        textColor: '#003421',
         bgColor: '#BEA48D'
     },
     {
@@ -29,7 +31,7 @@ const cards = [
     {
         type: 'text',
         icon: 'ph:arrow-circle-up-thin',
-        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
+        text: 'Enseñanza bíblica aplicada al análisis del mundo contemporáneo.',
         textColor: '#EBE5D0',
         bgColor: '#003421'
     },
@@ -40,7 +42,8 @@ const cards = [
     {
         type: 'text',
         icon: 'ph:arrow-circle-left-thin',
-        text: 'Participación activa en escenarios internacionales.',
+        text: 'Compromiso público en la defensa de Israel, la justicia y la paz.',
+        textColor: '#003421',
         bgColor: '#EBE5D0'
     },
 ];