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

main pages/styles

Browse Source
This commit is contained in:
Arina Yakovenko
2025-06-02 16:03:54 +02:00
parent 9246f80857
commit 2ffd64da98
16 changed files with 301 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/section/main-page/MainHero.vue
View File

@ -1,37 +1,31 @@
<template>
<UContainer
class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
>
<div class="">
<div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
<h1 class="h1">
{{ component.section_lang_data.title }}
</h1>
<div
class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
:style="{
backgroundImage: `url('/header-hero-desc.png')`,
}"
/>
<div
class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
:style="{
backgroundImage: `url('/header-hero.png')`,
}"
/>
<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 sm:min-w-[45%]">
{{ component.section_lang_data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
</div>
<UiContainer>
<div class="space-y-[30px] sm:space-y-[53px] mb-[55px] sm:mb-[100px]">
<h1 class="h1">
{{ component.section_lang_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/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
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.section_lang_data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<ButtonArrow type="fill">{{
component.section_lang_data.button
}}</ButtonArrow>
</div>
</div>
</div>
</UContainer>
</UiContainer>
</template>
<script lang="ts" setup>
@ -46,4 +40,4 @@ type Component = {
button: string;
};
};
</script>
</script>