yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

businnes page

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-10 15:56:43 +02:00
parent 902e2db011
commit 261fdd16ce
9 changed files with 374 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
components/section/business-page/BusinessMain.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<UiContainer class="space-y-[55px] md:space-y-[75px] xl:space-y-[100px]">
<div class="space-y-10 sm:space-y-[55px] md:space-y-14">
<h1 class="h1 text-center">
<span
v-for="(item, index) in component.section_lang_data.title"
:key="index"
:class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]"
>
{{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1">
</span>
</span>
</h1>
<div
class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="md:w-full xl:w-[70%] space-y-14">
<p>{{ component.section_lang_data.main_description }}</p>
<h4 class="h4-uppercase-bold-inter">
{{ component.section_lang_data.secondary_description }}
</h4>
</div>
</div>
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_1_title }}
</h2>
<p v-html="component.section_lang_data.section_1_description"></p>
</div>
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
<h2 class="h2-bold-bounded">
<span
v-for="(item, index) in component.section_lang_data.section_2_title"
:key="index"
:class="[
item.highlight
? 'text-accent-green-light dark:text-accent-green-dark'
: '',
'inline',
]"
>
{{ item.text }}
<span v-if="index !== component.section_lang_data.title.length - 1">
</span>
</span>
</h2>
<p v-html="component.section_lang_data.section_2_description"></p>
</div>
<div class="space-25-75">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_3_title }}
</h2>
<div
class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2"
>
<div class="space-y-[25px] sm:space-y-[45px]">
<p>{{ component.section_lang_data.section_3_description }}</p>
<div class="">
<p
v-for="(item, index) in component.section_lang_data
.section_3_items"
:key="index"
>
{{ index + 1 }}.
{{ item }}
</p>
</div>
</div>
<div
class="h-[315px] xl:h-full rounded-2xl"
:style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2">
<div class="col-start-2 col-end-3 space-25-75 xl:space-0">
<h2 class="h2-bold-bounded">
{{ component.section_lang_data.section_4_title }}
</h2>
<p v-html="component.section_lang_data.section_4_description"></p>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
title: [
{
text: string;
highlight: boolean;
}
];
main_description: string;
secondary_description: string;
section_1_title: string;
section_1_description: string;
section_2_title: [
{
text: string;
highlight: boolean;
}
];
section_2_description: string;
section_3_title: string;
section_3_description: string;
section_3_items: [];
section_4_title: string;
section_4_description: string;
};
};
</script>