init

components/sections/main-page/HeaderHero.vue

@@ -0,0 +1,40 @@
+<template>
+  <UContainer
+    class="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] mx-auto"
+  >
+    <div class="">
+      <div class="mt-[75px] space-y-[30px] sm:space-y-[53px]">
+        <h1 class="h1 text-[24px] md:text-[48px] xl:text-[64px] uppercase">
+          {{ data.title }}
+        </h1>
+        <div
+          class="hidden xl:block h-[509px] w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105 rounded-[20px]"
+          :style="{
+            backgroundImage: `url('/header-hero-desc.png')`,
+          }"
+        />
+        <div
+          class="xl:hidden h-[465px] sm:h-[509px] w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105 rounded-[20px]"
+          :style="{
+            backgroundImage: `url('/header-hero.png')`,
+          }"
+        />
+      </div>
+      <div class="">
+        <h3 class="h4-uppercase text-[24px]">
+          {{ data.title_second }}
+        </h3>
+        <ButtonArrow type="fill">Začít investovat</ButtonArrow>
+      </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>