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

fix: fix links

Browse Source
This commit is contained in:
Marek Goc
2025-07-04 12:26:32 +02:00
parent f80bc3e3ba
commit de4518367b
9 changed files with 146 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/section/AboutGoldMain.vue
View File

@ -2,9 +2,7 @@
<UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-[10px] sm:gap-[30px]">
<div class="flex flex-col gap-[10px] sm:gap-[30px]">
<div
class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between"
>
<div class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between">
<div>
<h1 class="h1-big text-accent-green-light mb-6 md:mb-10">
{{ component.front_section_lang[0].data.title }}
@ -13,108 +11,52 @@
{{ component.front_section_lang[0].data.description }}
</p>
</div>
<UiButtonArrow type="fill"
:arrow="true"
>
{{ $t("buy_gold") }}
</UiButtonArrow>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow type="fill" :arrow="true">
{{ $t("buy_gold") }}
</UiButtonArrow>
</nuxt-link>
</div>
<div class="flex gap-[10px] sm:gap-[30px]">
<div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
<div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{ backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`, backgroundSize: 'cover' }" />
<div
class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full"
:style="{
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div
class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full"
:style="{
backgroundImage: `url('/api/public/file/${component.img[2]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div
class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
:style="{
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block" :style="{ backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
</div>
</div>
<div
class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
:style="{
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block" :style="{ backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
</div>
<div
class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]"
>
<div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]">
<div class="space-25-55-75">
<h2 class="h2-bold-bounded">
{{ component.front_section_lang[0].data.section_2.title }}
</h2>
<div class="space-y-[40px] sm:space-y-[50px]">
<p
v-for="(item, index) in component.front_section_lang[0].data
.section_2.text_blocks"
:key="index"
>
<p v-for="(item, index) in component.front_section_lang[0].data .section_2.text_blocks" :key="index">
{{ item }}
</p>
</div>
</div>
<div
class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]"
:style="{
backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{ backgroundImage: `url('/api/public/file/${component.img[3]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]"
>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
<h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">
{{ component.front_section_lang[0].data.section_3.title }}
</h2>
<div
v-for="(item, index) in component.front_section_lang[0].data.section_3
.text_blocks"
:key="index"
class="flex flex-col justify-between space-25-55"
>
<div v-for="(item, index) in component.front_section_lang[0].data.section_3 .text_blocks" :key="index" class="flex flex-col justify-between space-25-55">
<p class="md:px-4 xl:p-0">
{{ item }}
</p>
<div
class="rounded-2xl h-[227px] sm:h-[281px]"
:style="{
backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="rounded-2xl h-[227px] sm:h-[281px]" :style="{ backgroundImage: `url('/api/public/file/${component.img[index + 4]}_l.webp')`, backgroundSize: 'cover', backgroundPosition: 'center' }" />
</div>
<div
class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end"
>
<UiButtonArrow type="fill"
:arrow="true"
>
{{
$t("buy_gold")
}}
</UiButtonArrow>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow type="fill" :arrow="true">
{{ $t("buy_gold") }}
</UiButtonArrow>
</nuxt-link>
</div>
</div>
</UiContainer>
@ -147,4 +89,6 @@ defineProps<{
}[]
}
}>()
const menuStore = useMenuStore()
</script>