main pages/styles
This commit is contained in:
59
components/section/main-page/MainBlocks.vue
Normal file
59
components/section/main-page/MainBlocks.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<UiContainer
|
||||
class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px] mb-[55px] sm:mb-[100px]"
|
||||
>
|
||||
<div
|
||||
class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
|
||||
v-for="(item, index) in component.section_lang_data"
|
||||
:key="index"
|
||||
>
|
||||
<!-- xl -->
|
||||
<div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
|
||||
<div class="space-y-[55px]">
|
||||
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
|
||||
<p class="text-inter">{{ item.description }}</p>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
|
||||
</div>
|
||||
|
||||
<!-- sm/md -->
|
||||
<div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
|
||||
<h2 class="h2-bold-bounded">{{ item.title }}</h2>
|
||||
<p class="text-inter">{{ item.description }}</p>
|
||||
<h4 class="h4-uppercase-bold-inter">{{ item.sub_title }}</h4>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
|
||||
>
|
||||
<ButtonArrow>{{ item.title }}</ButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonArrow class="sm:hidden mx-auto">{{ item.title }}</ButtonArrow>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: [
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
sub_title: string;
|
||||
}
|
||||
];
|
||||
};
|
||||
</script>
|
||||
@ -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>
|
||||
|
||||
82
components/section/main-page/MainProducts.vue
Normal file
82
components/section/main-page/MainProducts.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<UiContainer class="space-y-[40px] sm:space-y-[55px] md:space-y-[75px]">
|
||||
<div
|
||||
:class="[
|
||||
'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-center',
|
||||
itemCount === 1 ? 'justify-center' : 'justify-between',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
v-for="item in itemCount"
|
||||
:key="item"
|
||||
class="w-[200px] sm:w-[260px] md:w-[290px] py-[15px] px-[10px] sm:py-5 sm:px-[14px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
|
||||
>
|
||||
<img src="/pics.png" alt="pics" class="max-w-[150px]" />
|
||||
<div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
|
||||
<h3 class="text-[13px] sm:text-[16px] text-xl font-bold">
|
||||
50g Zlatý slitek: PAMP Suisse
|
||||
</h3>
|
||||
<p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
|
||||
Osvobozená sazba DPH PL
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-accent-green text-bold-24">€ 4,825.44</p>
|
||||
<button
|
||||
class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
|
||||
>
|
||||
<i
|
||||
class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
|
||||
></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6 md:flex-row items-center justify-between">
|
||||
<h3
|
||||
class="h4-uppercase-bold-inter w-full text-center md:text-start xl:max-w-[50%]"
|
||||
>
|
||||
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
|
||||
vás ochrání zítra
|
||||
</h3>
|
||||
<ButtonArrow type="fill">E-shop</ButtonArrow>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: [
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
sub_title: string;
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const itemCount = ref(1);
|
||||
|
||||
function updateItemCount() {
|
||||
const width = window.innerWidth;
|
||||
if (width >= 1280) itemCount.value = 5;
|
||||
else if (width >= 768) itemCount.value = 3;
|
||||
else if (width >= 640) itemCount.value = 2;
|
||||
else itemCount.value = 1;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateItemCount();
|
||||
window.addEventListener("resize", updateItemCount);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", updateItemCount);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user