cdrdpyj/src/components/section/ProjectionSection.astro

54 lines
2.3 KiB
Plaintext

---
import GridCard from "../cards/GridCard.astro";
import BoxContainer from "../BoxContainer.astro";
import { Icon } from "astro-icon/components";
import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
---
<div class="container mx-auto">
<div id="projection" class="grid lg:grid-cols-3 bg-white w-full">
<div class="row-span-2 lg:col-span-2 p-12 lg:p-24">
<div class="flex flex-col gap-5 md:text-lg text-tertiary text-justify prose-p:mb-4 prose-ul:text-tertiary prose-p:text-tertiary prose-strong:text-tertiary prose-strong:font-bold ">
<h2 class="font-secondary text-3xl lg:text-5xl font-bold">{tl('projection.title')}</h2>
<Icon name="ph:minus" class="text-tertiary text-4xl" />
<div class="prose" set:html={tl('projection.text')}></div>
</div>
<div class="grid xl:grid-cols-2 gap-16 mt-12">
<GridCard props={{
type: 'imgText',
bgColor: '#BEA48D',
icon: 'ph:minus',
image: 'https://ik.imagekit.io/crpy/JBP-MBM.webp',
text: tl("projection.card1")
}} />
<GridCard props={{
bgColor: '#BEA48D',
type: 'imgText',
image: 'https://ik.imagekit.io/crpy/pueblo-judio.webp',
icon: 'ph:minus',
text: tl("projection.card2")
}} />
</div>
</div>
<div class="hidden lg:block row-span-2 col-span-full lg:col-span-1 over bg-[#CBA16A] relative">
<div class="relative">
<BoxContainer props={{
bgImage: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
bgColor: '#CBA16A',
}} />
<div class="absolute -bottom-[8rem] z-10 w-full">
<img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del Centro del Reino de Paz y Justicia (CRPJ)">
</div>
</div>
<div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">
<img src="/img/DRJBP-1.webp" class="h-full object-cover" />
</div>
</div>
</div>
</div>