80 lines
2.3 KiB
Vue
80 lines
2.3 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.front_section_lang[0].data.title }}
|
|
</h2>
|
|
<p>{{ component.front_section_lang[0].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.front_section_lang[0].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 :arrow="true"
|
|
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/public/file/${component.img[0]}_l.webp')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'top',
|
|
}"
|
|
/>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UiButtonArrow } from '#components'
|
|
|
|
defineProps<{
|
|
component: {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
front_section_lang: {
|
|
data: {
|
|
title: string
|
|
description: string
|
|
feature_blocks: {
|
|
block_title: string
|
|
block_description: string
|
|
fill?: boolean
|
|
}[]
|
|
}
|
|
id_front_section: number
|
|
id_lang: number
|
|
}[]
|
|
}
|
|
}>()
|
|
</script>
|