51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<UiContainer>
|
|
<div class="space-y-[30px] sm:space-y-[53px]">
|
|
<h1 class="h1">
|
|
{{ component.front_section_lang[0].data.title }}
|
|
</h1>
|
|
<div
|
|
class="h-[465px] sm:h-[509px] xl:h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
|
|
:style="{
|
|
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
/>
|
|
<div
|
|
class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
|
|
>
|
|
<h3 class="h4-uppercase-bold-inter sm:min-w-[45%]">
|
|
{{ component.front_section_lang[0].data.title_second }}
|
|
</h3>
|
|
<div class="flex w-full items-start justify-center sm:justify-end">
|
|
<UiButtonArrow :arrow="true" type="fill">{{
|
|
component.front_section_lang[0].data.button
|
|
}}</UiButtonArrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UiContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{ component: Component }>();
|
|
type Component = {
|
|
id: number
|
|
name: string
|
|
img: string[]
|
|
component_name: string
|
|
is_no_lang: boolean
|
|
page_name: string
|
|
front_section_lang: {
|
|
data: {
|
|
title: string
|
|
button: string
|
|
title_second: string
|
|
}
|
|
id_front_section: number
|
|
id_lang: number
|
|
}[]
|
|
};
|
|
</script>
|