about us page
This commit is contained in:
69
components/section/about-us-page/AboutUsDifferent.vue
Normal file
69
components/section/about-us-page/AboutUsDifferent.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<UiContainer class="space-25-55-75">
|
||||
<div class="grid xl:grid-cols-2">
|
||||
<div class="space-25-75 xl:col-start-2">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.title }}
|
||||
</h2>
|
||||
<p>{{ component.section_lang_data.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in component.section_lang_data.feature_blocks"
|
||||
:key="index"
|
||||
:class="[
|
||||
'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4',
|
||||
index === 0 && 'bg-block dark:text-bg-dark',
|
||||
index === 1 && 'xl:col-start-2 xl:col-end-3',
|
||||
index === 2 && 'xl:col-start-4 xl:col-end-5',
|
||||
index === 3 &&
|
||||
'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4',
|
||||
]"
|
||||
>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
<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>
|
||||
</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"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'top',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UiButtonArrow } from "#components";
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: {
|
||||
title: string;
|
||||
description: string;
|
||||
feature_blocks: [
|
||||
{
|
||||
block_title: string;
|
||||
block_description: string;
|
||||
fill: boolean;
|
||||
}
|
||||
];
|
||||
};
|
||||
};
|
||||
</script>
|
||||
128
components/section/about-us-page/AboutUsHistory.vue
Normal file
128
components/section/about-us-page/AboutUsHistory.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<UiContainer class="space-55-75">
|
||||
<div class="space-25-55-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.section_1.title }}
|
||||
</h2>
|
||||
<div class="flex flex-col xl:flex-row gap-12">
|
||||
<div
|
||||
class="rounded-2xl h-[255px] sm:h-[435px] md:h-[500px] w-full xl:min-w-[700px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'bottom',
|
||||
}"
|
||||
/>
|
||||
<div class="flex flex-col justify-between space-25-55">
|
||||
<div class="flex flex-col gap-4">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.section_1.sub_title }}
|
||||
</h4>
|
||||
<div class="flex flex-col">
|
||||
<p
|
||||
v-for="item in component.section_lang_data.section_1
|
||||
.sub_description"
|
||||
>
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.section_1.sub_title_second }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-25-55-75">
|
||||
<h2 class="h2-bold-bounded sm:text-center">
|
||||
{{ component.section_lang_data.section_2.title }}
|
||||
</h2>
|
||||
<div class="space-25-55">
|
||||
<div class="flex flex-col w-full xl:w-[55%]">
|
||||
<p v-for="item in component.section_lang_data.section_2.description">
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full md:ml-10 xl:m-0 xl:grid xl:grid-cols-2">
|
||||
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.section_3.title }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col xl:flex-row gap-12">
|
||||
<div class="flex flex-col sm:flex-row gap-3 min-w-[60%]">
|
||||
<div
|
||||
class="rounded-2xl h-[230px] sm:h-[300px] w-full xl:h-[770px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="rounded-2xl xl:hidden w-full h-[230px] sm:h-[300px] xl:w-full xl:h-[328px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between space-25-55 xl:w-[70%]">
|
||||
<div
|
||||
class="hidden xl:block rounded-2xl max-full min-h-[330px]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div class="h-full flex flex-col gap-5 xl:gap-0 justify-between">
|
||||
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.section_4.title }}
|
||||
</h4>
|
||||
<div class="flex flex-col">
|
||||
<p
|
||||
v-if="component.section_lang_data.section_4.description"
|
||||
v-html="component.section_lang_data.section_4.description[0]"
|
||||
></p>
|
||||
<br />
|
||||
<p
|
||||
v-if="component.section_lang_data.section_4.description"
|
||||
v-html="component.section_lang_data.section_4.description[1]"
|
||||
></p>
|
||||
</div>
|
||||
<h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.section_5.title }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { UiButtonArrow } from "#components";
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
interface ContentSection {
|
||||
title: string;
|
||||
sub_title?: string;
|
||||
sub_title_second?: string;
|
||||
sub_description?: string[];
|
||||
description?: string[];
|
||||
}
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: {
|
||||
section_1: ContentSection;
|
||||
section_2: ContentSection;
|
||||
section_3: ContentSection;
|
||||
section_4: ContentSection;
|
||||
section_5: ContentSection;
|
||||
};
|
||||
};
|
||||
</script>
|
||||
82
components/section/about-us-page/AboutUsMain.vue
Normal file
82
components/section/about-us-page/AboutUsMain.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<UiContainer class="space-y-[55px] sm:space-y-[75px] xl:space-y-[100px]">
|
||||
<div class="w-full flex flex-col md:flex-row justify-between gap-7">
|
||||
<div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
|
||||
<div class="space-y-[25px]">
|
||||
<h1 class="h1-big text-accent-green-light dark:text-accent-green-dark">
|
||||
{{ component.section_lang_data.main_title }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ component.section_lang_data.main_description }}
|
||||
</p>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.main_subtitle }}
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-25-55-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.story_title }}
|
||||
</h2>
|
||||
<div class="flex flex-col-reverse md:flex-row w-full gap-6">
|
||||
<div
|
||||
class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<p v-for="(item, index) in component.section_lang_data.story_description">
|
||||
{{ item }}
|
||||
<div v-if="index < component.section_lang_data.story_description.length-1">
|
||||
<br>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-6">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.story_subtitle }}
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between xl:max-w-[70%]">
|
||||
<p v-for="(el, indexEl) in component.section_lang_data.story_sub_description">
|
||||
{{ el }}
|
||||
<div v-if="indexEl < component.section_lang_data.story_sub_description.length-1">
|
||||
<br>
|
||||
</div>
|
||||
</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: {
|
||||
main_title: string;
|
||||
main_description: string;
|
||||
main_subtitle: string;
|
||||
story_title: string;
|
||||
story_description: [];
|
||||
story_subtitle: string;
|
||||
story_sub_description: [];
|
||||
};
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user