70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<template>
|
|
<UiContainer class="space-25-55-75">
|
|
<div class="grid xl:grid-cols-2">
|
|
<div class="space-25-75 xl:col-start-2">
|
|
<h2 class="h2-bold-bounded">
|
|
{{ component.section_lang_data.title }}
|
|
</h2>
|
|
<p>{{ component.section_lang_data.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8"
|
|
>
|
|
<div
|
|
v-for="(item, index) in component.section_lang_data.feature_blocks"
|
|
:key="index"
|
|
:class="[
|
|
'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4',
|
|
index === 0 && 'bg-block dark:text-bg-dark',
|
|
index === 1 && 'xl:col-start-2 xl:col-end-3',
|
|
index === 2 && 'xl:col-start-4 xl:col-end-5',
|
|
index === 3 &&
|
|
'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4',
|
|
]"
|
|
>
|
|
<h4 class="h4-uppercase-bold-inter">
|
|
<span>0{{ index + 1 }} <br></span
|
|
>{{ item.block_title }}
|
|
</h4>
|
|
<p>{{ item.block_description }}</p>
|
|
</div>
|
|
<div
|
|
class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end"
|
|
>
|
|
<UiButtonArrow type="fill">Zakoupit zlato</UiButtonArrow>
|
|
</div>
|
|
<div
|
|
class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
|
|
:style="{
|
|
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'top',
|
|
}"
|
|
/>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UiButtonArrow } from "#components";
|
|
|
|
const props = defineProps<{ component: Component }>();
|
|
type Component = {
|
|
image_collection: string;
|
|
section_id: string;
|
|
section_img: string;
|
|
section_lang_data: {
|
|
title: string;
|
|
description: string;
|
|
feature_blocks: [
|
|
{
|
|
block_title: string;
|
|
block_description: string;
|
|
fill: boolean;
|
|
}
|
|
];
|
|
};
|
|
};
|
|
</script>
|