init
This commit is contained in:
14
components/ButtonArrow.vue
Normal file
14
components/ButtonArrow.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<button :class="['text-inter text-lg h-[65px] px-[42px] rounded-[15px]', type === 'fill' ? 'bg-button text-text-dark' : 'border border-button text-button']">
|
||||
<slot />
|
||||
</button>
|
||||
<div class=""></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,57 +1,58 @@
|
||||
<template>
|
||||
<div class="container mx-auto h-[120px] border-b border-border">
|
||||
<div class="w-full h-full flex items-center justify-between">
|
||||
<ul class="flex items-center gap-20 whitespace-nowrap">
|
||||
<li
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
<div class="border-b border-border">
|
||||
<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="w-full hidden xl:flex items-center justify-between h-[120px]">
|
||||
<ul class="flex items-center gap-20 whitespace-nowrap">
|
||||
<li
|
||||
v-for="(item, index) in menu.items"
|
||||
:key="index"
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-lg"
|
||||
>
|
||||
0{{ index + 1 }} <br />
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<img src="./../public/logo.png" alt="Frame" />
|
||||
<div class="flex items-center gap-7">
|
||||
<UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
|
||||
<UIcon
|
||||
class="w-8 h-8 cursor-pointer"
|
||||
name="i-heroicons-shopping-cart"
|
||||
/>
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<button
|
||||
class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
|
||||
>
|
||||
01 <br />
|
||||
Investice
|
||||
</li>
|
||||
<li
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
>
|
||||
02 <br />
|
||||
O zlotě
|
||||
</li>
|
||||
<li
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
>
|
||||
03 <br />
|
||||
Podnikání
|
||||
</li>
|
||||
<li
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
>
|
||||
04 <br />
|
||||
O Nás
|
||||
</li>
|
||||
<li
|
||||
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
|
||||
>
|
||||
05 <br />
|
||||
Kontakt
|
||||
</li>
|
||||
</ul>
|
||||
<img src="./../public/Frame 1321315773.png" alt="Frame" />
|
||||
<div class="flex items-center gap-7">
|
||||
<UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
|
||||
<UIcon
|
||||
class="w-8 h-8 cursor-pointer"
|
||||
name="i-heroicons-shopping-cart"
|
||||
/>
|
||||
E-shop
|
||||
</button>
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<button
|
||||
class="cursor-pointer hover:bg-brown/80 transition-all bg-brown py-3 px-6 font-medium text-white rounded-xl"
|
||||
<div
|
||||
class="w-full hidden md:flex xl:hidden items-center justify-between h-[120px]"
|
||||
>
|
||||
E-shop
|
||||
</button>
|
||||
</div>
|
||||
<img src="./../public/logo.png" alt="Frame" />
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-7">
|
||||
<UIcon class="w-8 h-8 cursor-pointer" name="i-heroicons-user" />
|
||||
<UIcon
|
||||
class="w-8 h-8 cursor-pointer"
|
||||
name="i-heroicons-shopping-cart"
|
||||
/>
|
||||
</div>
|
||||
<ThemeSwitcher />
|
||||
<button
|
||||
class="cursor-pointer hover:bg-button-hover transition-all bg-button py-3 px-6 font-medium text-white rounded-xl"
|
||||
>
|
||||
E-shop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// function nested object
|
||||
const menu = {
|
||||
items: [
|
||||
{
|
||||
@ -67,7 +68,79 @@ const menu = {
|
||||
link_title: "",
|
||||
meta_description: "",
|
||||
meta_title: "",
|
||||
name: "top",
|
||||
name: "Investice",
|
||||
page_name: "",
|
||||
position_id: 0,
|
||||
updated: "2025-05-09 08:34:06.650Z",
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
created: "2025-04-29 14:21:16.980Z",
|
||||
id: "l10y982y139ep7u",
|
||||
id_lang: "en",
|
||||
id_page: "",
|
||||
id_parent: "",
|
||||
is_default: false,
|
||||
is_root: true,
|
||||
link_rewrite: "",
|
||||
link_title: "",
|
||||
meta_description: "",
|
||||
meta_title: "",
|
||||
name: "O zlotě",
|
||||
page_name: "",
|
||||
position_id: 0,
|
||||
updated: "2025-05-09 08:34:06.650Z",
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
created: "2025-04-29 14:21:16.980Z",
|
||||
id: "l10y982y139ep7u",
|
||||
id_lang: "en",
|
||||
id_page: "",
|
||||
id_parent: "",
|
||||
is_default: false,
|
||||
is_root: true,
|
||||
link_rewrite: "",
|
||||
link_title: "",
|
||||
meta_description: "",
|
||||
meta_title: "",
|
||||
name: "Podnikání",
|
||||
page_name: "",
|
||||
position_id: 0,
|
||||
updated: "2025-05-09 08:34:06.650Z",
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
created: "2025-04-29 14:21:16.980Z",
|
||||
id: "l10y982y139ep7u",
|
||||
id_lang: "en",
|
||||
id_page: "",
|
||||
id_parent: "",
|
||||
is_default: false,
|
||||
is_root: true,
|
||||
link_rewrite: "",
|
||||
link_title: "",
|
||||
meta_description: "",
|
||||
meta_title: "",
|
||||
name: "O Nás",
|
||||
page_name: "",
|
||||
position_id: 0,
|
||||
updated: "2025-05-09 08:34:06.650Z",
|
||||
},
|
||||
{
|
||||
active: true,
|
||||
created: "2025-04-29 14:21:16.980Z",
|
||||
id: "l10y982y139ep7u",
|
||||
id_lang: "en",
|
||||
id_page: "",
|
||||
id_parent: "",
|
||||
is_default: false,
|
||||
is_root: true,
|
||||
link_rewrite: "",
|
||||
link_title: "",
|
||||
meta_description: "",
|
||||
meta_title: "",
|
||||
name: "Kontakt",
|
||||
page_name: "",
|
||||
position_id: 0,
|
||||
updated: "2025-05-09 08:34:06.650Z",
|
||||
|
||||
40
components/sections/main-page/HeaderHero.vue
Normal file
40
components/sections/main-page/HeaderHero.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user