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

Fixed css image positioning for grid

This commit is contained in:
Julio Ruiz 2026-02-11 23:16:21 -05:00
parent d9c0acb6b5
commit 9f3c03fd46
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,12 +7,13 @@ const textColor = props.textColor || ''
const imageUrl = props.image || ''
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
---
<div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
{props.type !== 'imgText' && (
<div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
{ props.type === 'text' && (
<div class="p-16 flex flex-col justify-between h-full">
<Icon name={props.icon} class={`text-[${textColor}] text-8xl`} />
<p class={`text-[${textColor}]`}>{props.text}</p>
<div class="p-16">
<Icon name={props.icon} class="text-8xl" />
<p>{props.text}</p>
</div>
)}
{ props.type === 'image' && (
@ -22,6 +23,7 @@ const imageUrl = props.image || ''
)}
</div>
</div>
)}
{ props.type === 'imgText' && (
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>

40
src/components/section/ProjectionSection.astro
View File

@ -9,9 +9,9 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
<div class="container mx-auto">
<div class="grid grid-cols-12 overflow-hidden bg-white w-full">
<div class="row-span-2 col-span-8 p-24 text-tertiary grid gap-8 ">
<div class="grid gap-5 md:text-lg">
<div class="grid grid-cols-3 bg-red-100 w-full">
<div class="row-span-2 col-span-2 p-24 text-tertiary">
<div class="flex flex-col gap-5 md:text-lg">
<h2 class="font-secondary text-5xl font-bold">{title}</h2>
<Icon name="ph:minus" class="text-tertiary text-4xl" />
<p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p>
@ -25,14 +25,14 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
<p>Esta proyección internacional posiciona al CPyJ como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p>
</div>
<div class="grid grid-cols-2 gap-16 mt-12">
<GridCard props={{
type: 'imgText',
bgColor: '#BEA48D',
icon: 'ph:minus',
image: '/src/assets/JBP-MBM.webp',
text: 'La vinculación con líderes políticos, académicos y sociales.'
<GridCard props={{
type: 'imgText',
bgColor: '#BEA48D',
icon: 'ph:minus',
image: '/src/assets/JBP-MBM.webp',
text: 'La vinculación con líderes políticos, académicos y sociales.'
}} />
}} />
<GridCard props={{
bgColor: '#BEA48D',
type: 'imgText',
@ -41,15 +41,19 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel'
}} />
</div>
</div>
<div class="col-span-4 over h-full bg-[#CBA16A]">
<BoxContainer props={{
bgImage: '../src/assets/dove-bg.webp',
bgColor: '#CBA16A',
}} />
<div class="col-span-1 py-38 px-24 flex items-start relative justify-center bg-[#22523F] h-full bg-[url('/src/assets/DRJBP-2.webp')] bg-no-repeat bg-center">
<img src="/src/assets/logo-ligth.webp" class="w-1/2" alt="Logo del CPyJ">
<div class="row-span-2 col-span-1 over bg-[#CBA16A] relative">
<div class="relative">
<BoxContainer props={{
bgImage: '../src/assets/dove-bg.webp',
bgColor: '#CBA16A',
}} />
<div class="absolute -bottom-[8rem] z-10 w-full">
<img src="/src/assets/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
</div>
</div>
<div class="bg-[#22523F] object-cover pt-64 justify-end flex">
<img src="/src/assets/DRJBP-2.webp" class="h-full object-cover" />
</div>
</div>