fixed dove background image in all boxes whit imagekit. fixed countr and nicedate function for newsCard whit a simple logic
This commit is contained in:
parent
5b1da2ce6d
commit
b6c9083895
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -6,7 +6,7 @@ import Modal from "./Modal.astro";
|
||||||
const background = props.bgImage || props.bgColor;
|
const background = props.bgImage || props.bgColor;
|
||||||
|
|
||||||
---
|
---
|
||||||
<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:680px;` : props.bgColor }} class={`aspect-auto xl:aspect-square py-8 px-8 xl:px-16 flex flex-col justify-evenly`}>
|
<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:contain;` : props.bgColor }} class={`aspect-auto xl:aspect-square py-8 px-8 xl:px-16 flex flex-col justify-evenl`}>
|
||||||
|
|
||||||
<div class="flex flex-col gap-6">
|
<div class="flex flex-col gap-6">
|
||||||
{props.hasIcon && (
|
{props.hasIcon && (
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,22 @@
|
||||||
---
|
---
|
||||||
import { Image } from "astro:assets"
|
import { Image } from "astro:assets"
|
||||||
import { Icon } from "astro-icon/components";
|
import { Icon } from "astro-icon/components";
|
||||||
|
import "dayjs/locale/es";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
|
const regionNames = new Intl.DisplayNames(['es'], { type: 'region' });
|
||||||
|
|
||||||
|
dayjs.locale("es");
|
||||||
|
|
||||||
const { data } = Astro.props;
|
const { data } = Astro.props;
|
||||||
const nicedate = dayjs(data.data.date).format("D MMMM YYYY");
|
const nicedate = dayjs(data.data.date).format("D MMMM YYYY");
|
||||||
|
const countryName = regionNames.of(data.data.country);
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="bg-[#EBE5D0] text-[#003421] p-10">
|
<div class="bg-[#EBE5D0] text-[#003421] p-10">
|
||||||
<Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
|
<Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
|
||||||
<p class="font-light text-2xl mb-8">
|
<p class="font-light text-2xl mb-8">
|
||||||
{data.data.city}, {data.data.country}<br />({nicedate}):
|
{data.data.city}, {countryName}<br />({nicedate}):
|
||||||
</p>
|
</p>
|
||||||
<h3 class="text-2xl font-bold mb-8"><a href={`/news/${data.id}`}>{data.data.title}</a></h3>
|
<h3 class="text-2xl font-bold mb-8"><a href={`/news/${data.id}`}>{data.data.title}</a></h3>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { Icon } from "astro-icon/components";
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y Área de Acción</h4>
|
<h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y Área de Acción</h4>
|
||||||
<h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
|
<h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
|
||||||
<p class="text-lg w-2/3 mx-auto mb-20 text-[#003421]">El <strong>Centro del Reino de Paz y Justicia (CRPJ) desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>
|
<p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify">El <strong>Centro del Reino de Paz y Justicia (CRPJ) desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>
|
||||||
|
|
||||||
<div class="grid xl:grid-cols-3 text-[#003421] gap-20">
|
<div class="grid xl:grid-cols-3 text-[#003421] gap-20">
|
||||||
<div class="bg-[#EBE5D0] p-12 relative pb-40">
|
<div class="bg-[#EBE5D0] p-12 relative pb-40">
|
||||||
|
|
@ -42,7 +42,7 @@ import { Icon } from "astro-icon/components";
|
||||||
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
|
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
|
||||||
<h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>
|
<h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>
|
||||||
|
|
||||||
<p class="text-lg">Desarrollo de iniciativas concretas en distintos territorios, orientadas a la formación, la prevención de conflictos y el fortalecimiento de lide- razgos locales con visión internacional.</p>
|
<p class="text-lg">Desarrollo de iniciativas concretas en distintos territorios, orientadas a la formación, la prevención de conflictos y el fortalecimiento de liderazgos locales con visión internacional.</p>
|
||||||
|
|
||||||
<div class="bottom-12 right-12 absolute">
|
<div class="bottom-12 right-12 absolute">
|
||||||
<Icon name="icon_formation_3" class="text-8xl" />
|
<Icon name="icon_formation_3" class="text-8xl" />
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
||||||
title: 'Misión, Visión y Valores Institucionales.',
|
title: 'Misión, Visión y Valores Institucionales.',
|
||||||
buttonLabel: 'LEER MÁS',
|
buttonLabel: 'LEER MÁS',
|
||||||
hasButton: true,
|
hasButton: true,
|
||||||
bgImage: 'https://ik.imagekit.io/crpy/dove-bg.webp',
|
bgImage: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
|
||||||
hasIcon: true,
|
hasIcon: true,
|
||||||
url:'#mision',
|
url:'#mision',
|
||||||
bgColor: '#CBA16A',
|
bgColor: '#CBA16A',
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<div class="bg-[#CBA16A] py-12 lg:py-20">
|
<div class="bg-[#CBA16A] py-12 lg:py-20">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">Participa | Colabora</h4>
|
<h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">Participa | Colabora</h4>
|
||||||
<h2 class="text-tertiary text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
|
<h2 class="text-tertiary text-3xl lg:text-5xl font-bold lg:text-center font-secondary mb-4 text-center">Sumarse es asumir un compromiso con propósito</h2>
|
||||||
|
|
||||||
<p class="text-tertiary pt-10 text-2xl px-12">La labor del <strong>Centro del Reino de Paz y Justicia</strong> se fortalece mediante la participación de personas e instituciones alineadas con sus valores y objetivos generales. Formas de participar:</p>
|
<p class="text-tertiary pt-10 text-2xl px-12 text-center">La labor del <strong>Centro del Reino de Paz y Justicia</strong> se fortalece mediante la participación de personas e instituciones alineadas con sus valores y objetivos generales. Formas de participar:</p>
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 w-3/4 justify-center mx-auto gap-20 my-20">
|
<div class="grid md:grid-cols-2 w-3/4 justify-center mx-auto gap-20 my-20">
|
||||||
<div class="border-1 border-white text-lg p-8 text-tertiary">
|
<div class="border-1 border-white text-lg p-8 text-tertiary">
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
||||||
<div class="hidden lg:block row-span-2 col-span-full lg:col-span-1 over bg-[#CBA16A] relative">
|
<div class="hidden lg:block row-span-2 col-span-full lg:col-span-1 over bg-[#CBA16A] relative">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<BoxContainer props={{
|
<BoxContainer props={{
|
||||||
bgImage: 'https://ik.imagekit.io/crpy/dove-bg.webp',
|
bgImage: 'https://ik.imagekit.io/crpy/tr:o-50/dove.webp?updatedAt=1770966556158',
|
||||||
bgColor: '#CBA16A',
|
bgColor: '#CBA16A',
|
||||||
}} />
|
}} />
|
||||||
<div class="absolute -bottom-[8rem] z-10 w-full">
|
<div class="absolute -bottom-[8rem] z-10 w-full">
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export const infoboxes = [
|
||||||
textColor: 'text-[#EDE9D9]',
|
textColor: 'text-[#EDE9D9]',
|
||||||
sizeText: 'text-xl',
|
sizeText: 'text-xl',
|
||||||
buttonLabel: 'Leer más',
|
buttonLabel: 'Leer más',
|
||||||
bgImage: 'https://ik.imagekit.io/crpy/dove-bg.webp',
|
bgImage: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
|
||||||
url:'#programs',
|
url:'#programs',
|
||||||
hasButton: true,
|
hasButton: true,
|
||||||
hasIcon: true,
|
hasIcon: true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue