34 lines
1.1 KiB
Plaintext
34 lines
1.1 KiB
Plaintext
---
|
|
const { props } = Astro.props;
|
|
import { Icon } from "astro-icon/components";
|
|
import Button from "./ui/Button.astro";
|
|
import Modal from "./Modal.astro";
|
|
const background = props.bgImage || props.bgColor;
|
|
|
|
---
|
|
<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">
|
|
{props.hasIcon && (
|
|
<div class="flex justify-start">
|
|
<Icon name="ph:minus" class={`w-12 h-12 ${props.titleColor}`} />
|
|
</div>
|
|
)}
|
|
<h2 class={`${props.titleColor} font-bold ${props.sizeTitle} `}>{props.title}</h2>
|
|
<p class={`${props.textColor} ${props.sizeText}`}>{props.copy}</p>
|
|
</div>
|
|
|
|
|
|
{props.hasButton && (
|
|
<div class=" flex self-start mt-3">
|
|
<Button class="px-6 py-3 uppercase" url={props.url} variant="primary" title={props.buttonLabel} />
|
|
</div>
|
|
)}
|
|
|
|
{props.hasInput && (
|
|
<div class="flex gap-2 w-full mt-5">
|
|
<Modal />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div> |