44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<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="mt-[75px] space-y-[30px] sm:space-y-[53px]">
|
|
<h1 class="h1">
|
|
{{ 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%]">
|
|
{{ data.title_second }}
|
|
</h3>
|
|
<div class="flex w-full items-start justify-center sm:justify-end">
|
|
<ButtonArrow type="fill">Začít investovat</ButtonArrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const data = {
|
|
title: "INVESTUJTE CHYTŘE. CHRAŇTE SVÉ PENÍZE ZLATEM",
|
|
button: "Začít investovat",
|
|
title_second:
|
|
"Spoření i jednorázová investice do zlata jednoduše a bezpečně s YourGold",
|
|
};
|
|
</script> |