Compare commits
No commits in common. "1d669a0d31ded356a29f72c5e8c66a3870f50a02" and "4ea56c9ab2b6a96e3d80e1b343c6cc029e71bf20" have entirely different histories.
1d669a0d31
...
4ea56c9ab2
|
|
@ -3,30 +3,13 @@ import { Icon } from "astro-icon/components";
|
|||
|
||||
const { props } = Astro.props;
|
||||
|
||||
const imageUrl = props.image || ''
|
||||
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
|
||||
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-between h-full bg-[${props.bgColor}]`}>
|
||||
<div class="aspect-square">
|
||||
<div class={`flex flex-col justify-between h-full p-16 ${bgClass}`}>
|
||||
{ props.type === 'text' && (
|
||||
<div class="p-16">
|
||||
<Icon name={props.icon} class="text-8xl" />
|
||||
<p>{props.text}</p>
|
||||
</div>
|
||||
)}
|
||||
{ props.type === 'image' && (
|
||||
<div class="object-cover aspect-square flex">
|
||||
<img src={props.image} alt="" />
|
||||
</div>
|
||||
<Icon name={props.icon} class="text-8xl" />
|
||||
<p>{props.text}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style define:vars={{ imageUrl }}>
|
||||
.gridcard {
|
||||
/* Use the CSS variable in the background-image property */
|
||||
background-image: url(var(--imageUrl));
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const { props } = Astro.props;
|
||||
---
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-2 min-h-[400px]">
|
||||
<div class="bg-[#EBE5D0] p-24 grid grid-cols-2">
|
||||
<div class="leftcol flex justify-between flex-col min-h-full">
|
||||
<h2 class="text-5xl font-secondary font-bold">Justicia</h2>
|
||||
<p >Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
|
||||
</div>
|
||||
<div class="rightcol flex justify-end align-bottom min-h-full ">
|
||||
<Icon name="ph:scales-thin" class="text-9xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#003421] p-24 grid grid-cols-2">
|
||||
<div class="leftcol flex justify-between flex-col min-h-full">
|
||||
<h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">Integridad</h2>
|
||||
<p class="text-[#CBA16A]">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
|
||||
</div>
|
||||
<div class="rightcol flex justify-end align-bottom min-h-full ">
|
||||
<Icon name="ph:brain-thin" class="text-[#EBE5D0] text-9xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="bg-[#003421] p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2>
|
||||
<p class="text-xl text-[#EBE5D0]">Vocación de acompa- ñamiento y acción orientada a objetivos claros y trascendentes.</p>
|
||||
</div>
|
||||
<div class="bg-[#BEA48D] p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-[#003421]">Excelencia</h2>
|
||||
<p class="text-xl text-[#003421]">Rigor intelectual, profe- sionalismo y mejora constante en todas las áreas de trabajo.</p>
|
||||
</div>
|
||||
<div class="bg-[#22523F] p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-[#003421]">Diálogo Estratégico</h2>
|
||||
<p>Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,7 @@ const cards = [
|
|||
},
|
||||
{
|
||||
type: 'image',
|
||||
image: 'https://ik.imagekit.io/crpy/grid_image_1.webp',
|
||||
image: 'https://picsum.photos/600/600?random=1&grayscale',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
|
|
@ -20,11 +20,11 @@ const cards = [
|
|||
},
|
||||
{
|
||||
type: 'image',
|
||||
image: 'https://ik.imagekit.io/crpy/grid_image_2.webp',
|
||||
image: 'https://picsum.photos/600/600?random=1&grayscale',
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
image: 'https://ik.imagekit.io/crpy/grid_image_3.webp',
|
||||
image: 'https://picsum.photos/600/600?random=1&grayscale',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
|
|
@ -34,7 +34,7 @@ const cards = [
|
|||
},
|
||||
{
|
||||
type: 'image',
|
||||
image: 'https://ik.imagekit.io/crpy/grid_image_4.webp',
|
||||
image: 'https://picsum.photos/600/600?random=1&grayscale',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
|
|
@ -48,7 +48,7 @@ const cards = [
|
|||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-4">
|
||||
{
|
||||
cards.map(card =>(
|
||||
cards.map((card)=>(
|
||||
<GridCard props={card} />
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import { infoboxes } from "../data/content/infosection.js";
|
|||
import ColorSection from "../components/section/ColorSection.astro";
|
||||
import TitleSection from "../components/section/TitleSection.astro";
|
||||
import GridSection from "../components/section/GridSection.astro";
|
||||
import ColumnsSection from "../components/section/ColumnsSection.astro";
|
||||
|
||||
const carouselImages2 = [
|
||||
"https://picsum.photos/1920/800?random=1&grayscale",
|
||||
|
|
@ -43,10 +42,12 @@ El CPyJ nace con una misión clara: tender puentes entre la fe y la acción en
|
|||
|
||||
Su mirada es estratégica, internacional y orientada al futuro, consciente de los conflictos emergentes, las tensiones culturales, los desafíos geopolíticos y la necesidad de liderazgos sólidos capaces de actuar con claridad en tiempos de transformación global.` />
|
||||
|
||||
<TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
|
||||
<CarouselSection images={carouselImages2} />
|
||||
|
||||
<GridSection />
|
||||
|
||||
<TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
|
||||
|
||||
<ColorSection
|
||||
bgColor="#22523F"
|
||||
titleColor="text-[#ffffff]"
|
||||
|
|
@ -63,14 +64,10 @@ Su mirada es estratégica, internacional y orientada al futuro, consciente de lo
|
|||
|
||||
<TitleSection title="Valores Intitucionales" />
|
||||
|
||||
<ColumnsSection />
|
||||
|
||||
<!-- Diplomacia -->
|
||||
|
||||
<!-- Formacion -->
|
||||
|
||||
<CarouselSection images={carouselImages2} />
|
||||
|
||||
|
||||
|
||||
<NewsSection />
|
||||
|
||||
<ParticipateSection />
|
||||
|
|
|
|||
Loading…
Reference in New Issue