businnes page
This commit is contained in:
@ -24,15 +24,14 @@
|
||||
]"
|
||||
>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
<span>0{{ index + 1 }} <br></span
|
||||
>{{ item.block_title }}
|
||||
<span>0{{ index + 1 }} <br /></span>{{ item.block_title }}
|
||||
</h4>
|
||||
<p>{{ item.block_description }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end"
|
||||
>
|
||||
<UiButtonArrow type="fill">Zakoupit zlato</UiButtonArrow>
|
||||
<UiButtonArrow :arrow="true" type="fill">Zakoupit zlato</UiButtonArrow>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
|
||||
|
||||
@ -103,8 +103,6 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UiButtonArrow } from "#components";
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
interface ContentSection {
|
||||
title: string;
|
||||
|
||||
132
components/section/business-page/BusinessMain.vue
Normal file
132
components/section/business-page/BusinessMain.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<UiContainer class="space-y-[55px] md:space-y-[75px] xl:space-y-[100px]">
|
||||
<div class="space-y-10 sm:space-y-[55px] md:space-y-14">
|
||||
<h1 class="h1 text-center">
|
||||
<span
|
||||
v-for="(item, index) in component.section_lang_data.title"
|
||||
:key="index"
|
||||
:class="[
|
||||
item.highlight
|
||||
? 'text-accent-green-light dark:text-accent-green-dark'
|
||||
: '',
|
||||
'inline',
|
||||
]"
|
||||
>
|
||||
{{ item.text }}
|
||||
<span v-if="index !== component.section_lang_data.title.length - 1">
|
||||
</span>
|
||||
</span>
|
||||
</h1>
|
||||
<div
|
||||
class="h-[180px] sm:h-[330px] md:h-[500px] rounded-2xl"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div class="md:w-full xl:w-[70%] space-y-14">
|
||||
<p>{{ component.section_lang_data.main_description }}</p>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.secondary_description }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.section_1_title }}
|
||||
</h2>
|
||||
<p v-html="component.section_lang_data.section_1_description"></p>
|
||||
</div>
|
||||
<div class="grid space-25-75 xl:space-0 grid-cols-1 xl:grid-cols-2">
|
||||
<h2 class="h2-bold-bounded">
|
||||
<span
|
||||
v-for="(item, index) in component.section_lang_data.section_2_title"
|
||||
:key="index"
|
||||
:class="[
|
||||
item.highlight
|
||||
? 'text-accent-green-light dark:text-accent-green-dark'
|
||||
: '',
|
||||
'inline',
|
||||
]"
|
||||
>
|
||||
{{ item.text }}
|
||||
<span v-if="index !== component.section_lang_data.title.length - 1">
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<p v-html="component.section_lang_data.section_2_description"></p>
|
||||
</div>
|
||||
<div class="space-25-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.section_3_title }}
|
||||
</h2>
|
||||
<div
|
||||
class="grid grid-cols-1 space-25-55 md:space-0 xl:gap-2 md:grid-cols-2"
|
||||
>
|
||||
<div class="space-y-[25px] sm:space-y-[45px]">
|
||||
<p>{{ component.section_lang_data.section_3_description }}</p>
|
||||
<div class="">
|
||||
<p
|
||||
v-for="(item, index) in component.section_lang_data
|
||||
.section_3_items"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}.
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="h-[315px] xl:h-full rounded-2xl"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2">
|
||||
<div class="col-start-2 col-end-3 space-25-75 xl:space-0">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.section_4_title }}
|
||||
</h2>
|
||||
<p v-html="component.section_lang_data.section_4_description"></p>
|
||||
</div>
|
||||
</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: [
|
||||
{
|
||||
text: string;
|
||||
highlight: boolean;
|
||||
}
|
||||
];
|
||||
main_description: string;
|
||||
secondary_description: string;
|
||||
section_1_title: string;
|
||||
section_1_description: string;
|
||||
section_2_title: [
|
||||
{
|
||||
text: string;
|
||||
highlight: boolean;
|
||||
}
|
||||
];
|
||||
section_2_description: string;
|
||||
section_3_title: string;
|
||||
section_3_description: string;
|
||||
section_3_items: [];
|
||||
section_4_title: string;
|
||||
section_4_description: string;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
217
components/section/business-page/BusinessReasons.vue
Normal file
217
components/section/business-page/BusinessReasons.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<UiContainer class="space-55-75 xl:space-y-[100px]">
|
||||
<div class="space-25-75">
|
||||
<h2 class="h2-bold-bounded max-w-[95%]">
|
||||
<span
|
||||
v-for="(item, index) in component.section_lang_data
|
||||
.reasons_section_title"
|
||||
:key="index"
|
||||
:class="[
|
||||
item.highlight
|
||||
? 'text-accent-green-light dark:text-accent-green-dark'
|
||||
: '',
|
||||
'inline',
|
||||
]"
|
||||
>
|
||||
{{ item.text }}
|
||||
<span
|
||||
v-if="
|
||||
index !==
|
||||
component.section_lang_data.reasons_section_title.length - 1
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 md:px-10 xl:p-0 gap-8"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in component.section_lang_data.reason_blocks"
|
||||
:key="index"
|
||||
:class="[
|
||||
'p-[25px] rounded-2xl border border-block flex flex-col justify-between gap-20',
|
||||
index === 1 && 'xl:col-start-2 xl:col-end-3',
|
||||
index === 2 && 'xl:col-start-4 xl:col-end-5',
|
||||
index === 3 && 'xl:col-start-2 xl:col-end-3',
|
||||
]"
|
||||
>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
<span>0{{ index + 1 }} <br /></span>{{ item.title }}
|
||||
</h4>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row-end-6 sm:row-auto rounded-2xl border border-block flex items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="w-full h-full rounded-2xl"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'top',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-25-55">
|
||||
<div>
|
||||
<div class="space-25-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.cta_section_title }}
|
||||
</h2>
|
||||
<div class="hidden xl:grid grid-cols-2 gap-6">
|
||||
<div class="flex flex-col gap-20">
|
||||
<p>{{ component.section_lang_data.cta_description_intro }}</p>
|
||||
<p>{{ component.section_lang_data.cta_description_details }}</p>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.main_call_to_action_statement }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="xl:hidden space-25-55">
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 md:gap-[55px] space-25-55"
|
||||
>
|
||||
<p>{{ component.section_lang_data.cta_description_intro }}</p>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.main_call_to_action_statement }}
|
||||
</h4>
|
||||
</div>
|
||||
<p>{{ component.section_lang_data.cta_description_details }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[45px]">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.form_section_title }}
|
||||
</h4>
|
||||
<div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
|
||||
<div
|
||||
class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]"
|
||||
>
|
||||
<div class="flex gap-[30px]">
|
||||
<input
|
||||
placeholder="Křestní jméno"
|
||||
type="text"
|
||||
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full"
|
||||
/>
|
||||
<input
|
||||
placeholder="E-mail"
|
||||
type="text"
|
||||
class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full"
|
||||
/>
|
||||
</div>
|
||||
<textarea
|
||||
placeholder="Neváhejte se na cokoli zeptat"
|
||||
class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full"
|
||||
></textarea>
|
||||
<div class="w-full flex justify-center sm:justify-start">
|
||||
<UiButtonArrow>Odeslat přihlášku</UiButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-[30px] xl:px-[50px]">
|
||||
<h4 class="h4-uppercase-bold-inter">Kontaktní informace</h4>
|
||||
<div class="flex flex-col sm:flex-row md:flex-col justify-between px-10">
|
||||
<div>
|
||||
<p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
|
||||
<p>+420 608 428 782</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[#6B6B6B]">{{ $t("email") }}</p>
|
||||
<p>web@yourgold.cz</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[#6B6B6B]">{{ $t("office_address") }}</p>
|
||||
<p>
|
||||
Floriána Nováka 3 <br />
|
||||
796 01 Prostějov <br />
|
||||
Czech Republic <br />
|
||||
CZ 08435456
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col xl:flex-row xl:h-[130px] gap-[45px]">
|
||||
<div
|
||||
class="w-full xl:w-[560px] h-[130px] xl:h-full rounded-2xl"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="flex flex-col h-full justify-between items-stretch space-y-[25px] sm:space-y-[55px] xl:space-y-0"
|
||||
>
|
||||
<p>{{ component.section_lang_data.closing_inspirational_block }}</p>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
<span
|
||||
v-for="(item, index) in component.section_lang_data.title"
|
||||
:key="index"
|
||||
:class="[
|
||||
item.highlight
|
||||
? 'text-accent-green-light dark:text-accent-green-dark'
|
||||
: '',
|
||||
'inline',
|
||||
]"
|
||||
>
|
||||
{{ item.text }}
|
||||
<span
|
||||
v-if="
|
||||
index !==
|
||||
component.section_lang_data.reasons_section_title.length - 1
|
||||
"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</h4>
|
||||
<p>{{ component.section_lang_data.final_tagline }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</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: {
|
||||
reasons_section_title: [
|
||||
{
|
||||
text: string;
|
||||
highlight: boolean;
|
||||
}
|
||||
];
|
||||
reason_blocks: [
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
];
|
||||
|
||||
cta_section_title: string;
|
||||
cta_description_intro: string;
|
||||
cta_description_details: string;
|
||||
main_call_to_action_statement: string;
|
||||
|
||||
form_section_title: string;
|
||||
form_contact_info_subtitle: string;
|
||||
closing_inspirational_block: string;
|
||||
title: [
|
||||
{
|
||||
text: string;
|
||||
highlight: boolean;
|
||||
}
|
||||
];
|
||||
final_tagline: string;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
@ -71,7 +71,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UiButtonArrow class="mx-auto" type="fill">E-shop</UiButtonArrow>
|
||||
<UiButtonArrow :arrow="true" class="mx-auto" type="fill"
|
||||
>E-shop</UiButtonArrow
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- calculator-block -->
|
||||
@ -147,7 +149,7 @@
|
||||
€ {{ store.totalInvestment }}
|
||||
</h2>
|
||||
</div>
|
||||
<UiButtonArrow type="fill" class="mx-auto sm:m-0">{{
|
||||
<UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">{{
|
||||
component.section_lang_data.button
|
||||
}}</UiButtonArrow>
|
||||
</div>
|
||||
|
||||
@ -34,15 +34,21 @@
|
||||
<div
|
||||
class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
|
||||
>
|
||||
<UiButtonArrow>{{ item.title }}</UiButtonArrow>
|
||||
<UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
<UiButtonArrow class="sm:hidden mx-auto">{{ item.title }}</UiButtonArrow>
|
||||
<UiButtonArrow :arrow="true" class="sm:hidden mx-auto">{{
|
||||
item.title
|
||||
}}</UiButtonArrow>
|
||||
</div>
|
||||
|
||||
<!-- Map block with same layout rules -->
|
||||
<div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
|
||||
<h1 class="text-sm sm:text-xl uppercase">Jsme tu pro vás napříč Evropou</h1>
|
||||
<div
|
||||
class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center"
|
||||
>
|
||||
<h1 class="text-sm sm:text-xl uppercase">
|
||||
Jsme tu pro vás napříč Evropou
|
||||
</h1>
|
||||
<MapBlock />
|
||||
<div class="flex items-center gap-4 w-full justify-end">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
{{ component.section_lang_data.title_second }}
|
||||
</h3>
|
||||
<div class="flex w-full items-start justify-center sm:justify-end">
|
||||
<UiButtonArrow type="fill">{{
|
||||
<UiButtonArrow :arrow="true" type="fill">{{
|
||||
component.section_lang_data.button
|
||||
}}</UiButtonArrow>
|
||||
</div>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
Zlato je jistota, která nepodléhá času. Udělejte dnes rozhodnutí, které
|
||||
vás ochrání zítra
|
||||
</h3>
|
||||
<UiButtonArrow type="fill">E-shop</UiButtonArrow>
|
||||
<UiButtonArrow type="fill" :arrow="true">E-shop</UiButtonArrow>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
|
||||
<div
|
||||
class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
'h-[40px] cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]',
|
||||
type === 'fill'
|
||||
? 'bg-button text-text-dark group-hover:bg-button-hover'
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
<div
|
||||
v-if="arrow"
|
||||
:class="[
|
||||
'flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px]',
|
||||
type === 'fill'
|
||||
@ -19,11 +21,6 @@
|
||||
: 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
|
||||
]"
|
||||
>
|
||||
<!-- <UIcon
|
||||
class="w-10 h-10 block"
|
||||
name="i-heroicons-arrow-up-right"
|
||||
/> -->
|
||||
<!-- <img src="/icons/ArrowCorner.svg" alt="" class="text-black" /> -->
|
||||
<svg
|
||||
class=""
|
||||
width="26"
|
||||
@ -46,5 +43,8 @@ defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user