LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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
This commit is contained in:
Esteban Paz 2026-02-12 20:01:55 -05:00
parent b314b5cb05
commit 3b88537f61
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/cards/GridCard.astro
View File

@ -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="" />

8
src/components/section/FooterSection.astro
View File

@ -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: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><a href="#"><Icon name="ph:youtube-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="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="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank"><Icon name="ph:facebook-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

9
src/components/section/GridSection.astro
View File

@ -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'
},
];