84 lines
2.3 KiB
Plaintext
84 lines
2.3 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
import Image from '@components/ui/images/Image.astro';
|
|
import { getDirectusImageURL } from '@lib/directusFunctions';
|
|
|
|
interface Props {
|
|
title: string;
|
|
subTitle: string;
|
|
url: string;
|
|
single?: boolean;
|
|
imgOne: any;
|
|
imgOneAlt: any;
|
|
imgTwo?: any;
|
|
imgTwoAlt?: any;
|
|
}
|
|
|
|
const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
|
|
---
|
|
|
|
<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
|
|
<a
|
|
class="md:card-base-hidden group flex flex-col-reverse md:items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
|
|
href={url}
|
|
data-astro-prefetch
|
|
>
|
|
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
|
|
<h2 class="card-text-header mb-2">
|
|
{title}
|
|
</h2>
|
|
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
|
|
{subTitle}
|
|
</p>
|
|
<div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
|
|
<div class="button-text-title flex relative items-center text-center">
|
|
<span class="mr-2">
|
|
Read More
|
|
</span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="button-hover-arrow"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{single ? (
|
|
<div>
|
|
<Image
|
|
class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
|
|
src={getDirectusImageURL(imgOne)}
|
|
alt={imgOneAlt}
|
|
format="webp"
|
|
loading="lazy"
|
|
width="850"
|
|
height="420"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<Image
|
|
class="rounded-xl w-full"
|
|
src={getDirectusImageURL(imgOne)}
|
|
alt={imgOneAlt}
|
|
draggable="false"
|
|
format="webp"
|
|
loading="lazy"
|
|
width="400"
|
|
height="230"
|
|
/>
|
|
<Image
|
|
class="rounded-xl w-full mt-4 lg:mt-10"
|
|
src={getDirectusImageURL(imgTwo)}
|
|
alt={imgTwoAlt}
|
|
draggable="false"
|
|
format="webp"
|
|
loading="lazy"
|
|
width="400"
|
|
height="230"
|
|
/>
|
|
</div>
|
|
)}
|
|
</a>
|
|
</div>
|