about gold page/contact page

components/section/about-gold-page/AboutGoldImpact.vue

@@ -0,0 +1,119 @@
+<template>
+    <UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
+        <div class="space-25-55-75">
+            <div class="grid sm:grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
+                <h2 class="sm:col-start-2 sm:col-end-8 md:col-end-5 xl:col-start-2 h2-bold-bounded">
+                    {{ component.section_lang_data.section_1.title }}
+                </h2>
+            </div>
+            <div class="space-y-[40px] sm:space-55-75">
+                <div v-for="(item, index) in component.section_lang_data.section_1
+                    .text_blocks" :key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
+                    <div class="flex gap-[200px]">
+                        <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
+                        <h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap">
+                            {{ item.block_title }}
+                        </h4>
+                    </div>
+                    <div class="col-start-2 col-end-8 md:col-end-5 space-y-[25px] sm:space-y-[45px] md:space-y-[55px]">
+                        <h4 class="xl:hidden h4-uppercase-bold-inter w-full whitespace-nowrap">
+                            {{ item.block_title }}
+                        </h4>
+                        <p>{{ item.block_text }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="space-25-55-75">
+            <h2 class="h2-bold-bounded">
+                {{ component.section_lang_data.section_2.title }}
+            </h2>
+            <div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-[30px] auto-cols-fr auto-rows-fr">
+                <div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]" v-for="(item, index) in component.section_lang_data.section_2
+                    .text_blocks" :key="index">
+                    <div>
+                        <h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
+                        <h4 class="h4-uppercase-bold-inter">{{ item.block_title }}</h4>
+                    </div>
+                    <p>{{ item.block_text }}</p>
+                </div>
+                <div
+                    class="row-end-4 sm:row-end-3 col-start-1 col-end-2 xl:row-end-1 xl:col-start-3 xl:col-end-4 flex flex-col gap-[10px] md:gap-[30px]">
+                    <div class="w-full h-full md:h-[211px] rounded-2xl" :style="{
+                        backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                    <div class="w-full h-full md:h-[211px] rounded-2xl" :style="{
+                        backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                </div>
+            </div>
+        </div>
+        <div class="grid space-25-55 xl:grid-cols-2">
+            <h2 class="h2-bold-bounded">
+                {{ component.section_lang_data.section_3.title }}
+            </h2>
+            <div class="flex flex-col space-25-55">
+                <p v-for="(item, index) in component.section_lang_data.section_3
+                    .text_blocks" :key="index">
+                    {{ item }}
+                </p>
+            </div>
+        </div>
+        <div class="grid xl:space-25-55 grid-cols-1 xl:grid-cols-2 xl:gap-[30px]">
+            <div class="flex flex-col gap-[25px] sm:gap-[55px] md:gap-[75px] xl:justify-between">
+                <h2 class="h2-bold-bounded">
+                    {{ component.section_lang_data.section_4.title }}
+                </h2>
+                <p>{{ component.section_lang_data.section_4.description }}</p>
+            </div>
+            <div class="mb-[25px] mt-5 md:mb-[55px] xl:m-0 w-full h-[222px] sm:h-[371px] rounded-2xl" :style="{
+                backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }" />
+            <p class="xl:col-start-2 xl:col-end-3">{{ component.section_lang_data.section_4.description_second }}</p>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        section_1: {
+            title: string;
+            text_blocks: [
+                {
+                    block_title: string;
+                    block_text: string;
+                }
+            ];
+        };
+        section_2: {
+            title: string;
+            text_blocks: [
+                {
+                    block_title: string;
+                    block_text: string;
+                }
+            ];
+        };
+        section_3: {
+            title: string;
+            text_blocks: [];
+        };
+        section_4: {
+            title: string;
+            description: string;
+            description_second: string;
+        };
+    };
+};
+</script>

components/section/about-gold-page/AboutGoldMain.vue

@@ -0,0 +1,94 @@
+<template>
+    <UiContainer class="space-y-[55px] sm:space-y-[75px] md:space-y-[100px]">
+        <div class="grid grid-cols-1 xl:grid-cols-2 gap-[10px] sm:gap-[30px]">
+            <div class="flex flex-col gap-[10px] sm:gap-[30px]">
+                <div
+                    class="h-[240px] sm:h-[400px] md:h-[490px] bg-block p-[25px] sm:p-[50px] rounded-2xl flex flex-col justify-between">
+                    <div>
+                        <h1 class="h1-big text-accent-green-light mb-6 md:mb-10">
+                            {{ component.section_lang_data.title }}
+                        </h1>
+                        <p class="text-text-light sm:text-xl md:text-2xl font-medium">{{
+                            component.section_lang_data.description }}</p>
+                    </div>
+                    <UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
+                </div>
+                <div class="flex gap-[10px] sm:gap-[30px]">
+                    <div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :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 h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
+                        backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                    }" />
+                    <div class="hidden sm:block xl:hidden h-[225px] md:h-[280px] rounded-2xl w-full border border-block"
+                        :style="{
+                            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                        }" />
+                </div>
+            </div>
+            <div class="sm:hidden xl:block h-[326px] md:h-auto min-w-[40%] xl:min-w-[60%] rounded-2xl border border-block"
+                :style="{
+                    backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }" />
+        </div>
+        <div class="grid md:grid-cols-1 xl:grid-cols-2 gap-[20px] md:auto-rows-fr sm:gap-[30px]">
+            <div class="space-25-55-75">
+                <h2 class="h2-bold-bounded">{{ component.section_lang_data.section_2.title }}</h2>
+                <div class="space-y-[40px] sm:space-y-[50px]">
+                    <p v-for="(item, index) in component.section_lang_data.section_2.text_blocks" :key="index">{{ item
+                        }}</p>
+                </div>
+            </div>
+            <div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{
+                backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[3]}?thumb=1200x0')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
+            <h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{ component.section_lang_data.section_3.title }}</h2>
+            <div v-for="(item, index) in component.section_lang_data.section_3.text_blocks" :key="index"
+                class="flex flex-col justify-between space-25-55">
+                <p class="md:px-4 xl:p-0">{{ item }}</p>
+                <div class=" rounded-2xl h-[227px] sm:h-[281px]" :style="{
+                    backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index + 4]}?thumb=1200x0')`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }" />
+            </div>
+            <div class="sm:col-start-1 sm:col-end-3 xl:col-start-3 xl:col-end-5 flex justify-center xl:items-end xl:justify-end">
+                <UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        title: string;
+        description: string;
+        button_label: string;
+        section_2: {
+            title: string;
+            text_blocks: []
+        },
+        section_3: {
+            title: string;
+            text_blocks: []
+        }
+    };
+};
+</script>

components/section/business-page/BusinessReasons.vue

@@ -1,58 +1,41 @@
 <template>
-  <UiContainer class="space-55-75 xl:space-y-[100px]">
+  <UiContainer class="space-55-75 xl:!space-y-[100px]">
     <div class="space-25-75">
       <h2 class="h2-bold-bounded max-w-[95%]">
-        <span
+        <span v-for="(item, index) in component.section_lang_data
-          v-for="(item, index) in component.section_lang_data
+          .reasons_section_title" :key="index" :class="[
-            .reasons_section_title"
-          :key="index"
-          :class="[
               item.highlight
                 ? 'text-accent-green-light dark:text-accent-green-dark'
                 : '',
               'inline',
-          ]"
+            ]">
-        >
           {{ item.text }}
-          <span
+          <span v-if="
-            v-if="
             index !==
             component.section_lang_data.reasons_section_title.length - 1
-            "
+          ">
-          >
           </span>
         </span>
       </h2>
-      <div
+      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 md:px-10 xl:p-0 gap-8 auto-rows-fr">
-        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="[
-      >
-        <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
+        <div class="row-end-7 sm:row-auto rounded-2xl flex items-center justify-center min-h-[200px]">
-          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="{
-        >
-          <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>
@@ -72,9 +55,7 @@
             </h4>
           </div>
           <div class="xl:hidden space-25-55">
-            <div
+            <div class="grid grid-cols-1 md:grid-cols-2 md:gap-[55px] space-25-55">
-              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 }}
@@ -89,32 +70,27 @@
           {{ 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
+          <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
-            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
+              <input :placeholder="$t('first_name')" type="text"
-                placeholder="Křestní jméno"
+                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
-                type="text"
+              <input :placeholder="$t('email')" type="text"
-                class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full"
+                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
+            <textarea :placeholder="$t('form_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" />
-              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>
+              <UiButtonArrow type="border">{{
+                $t("form_button")
+                }}</UiButtonArrow>
             </div>
           </div>
-          <div class="space-y-[30px] xl:px-[50px]">
+          <div class="space-y-[30px] xl:px-[50px] sm:px-10">
-            <h4 class="h4-uppercase-bold-inter">Kontaktní informace</h4>
+            <h4 class="h4-uppercase-bold-inter">
-            <div class="flex flex-col sm:flex-row md:flex-col justify-between px-10">
+              {{ $t('contact_info') }}
+            </h4>
+            <div class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
               <div>
                 <p class="text-[#6B6B6B]">{{ $t("phone") }}</p>
                 <p>+420 608 428 782</p>
@@ -137,36 +113,25 @@
         </div>
       </div>
       <div class="flex flex-col xl:flex-row xl:h-[130px] gap-[45px]">
-        <div
+        <div class="w-full xl:w-[560px] h-[130px] xl:h-full rounded-2xl" :style="{
-          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">
-        <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
+            <span v-for="(item, index) in component.section_lang_data.title" :key="index" :class="[
-              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
+              <span v-if="
-                v-if="
                 index !==
                 component.section_lang_data.reasons_section_title.length - 1
-                "
+              ">
-              >
               </span>
             </span>
           </h4>
@@ -203,7 +168,6 @@ type Component = {
     main_call_to_action_statement: string;
 
     form_section_title: string;
-    form_contact_info_subtitle: string;
     closing_inspirational_block: string;
     title: [
       {

components/section/contact-page/ContactMain.vue

@@ -0,0 +1,63 @@
+<template>
+    <UiContainer class="space-y-[45px]">
+        <div class="w-[50%] space-y-[25px]">
+            <h1 class="h1">{{ component.section_lang_data.title }}</h1>
+            <p class="">{{ component.section_lang_data.description }}</p>
+        </div>
+        <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="$t('first_name')" type="text"
+                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                    <input :placeholder="$t('email')" type="text"
+                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+                </div>
+                <textarea :placeholder="$t('form_textarea')"
+                    class="border h-[145px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full" />
+
+                <div class="w-full flex justify-center sm:justify-start">
+                    <UiButtonArrow type="border">{{
+                        $t("form_button")
+                    }}</UiButtonArrow>
+                </div>
+            </div>
+            <div class="space-y-[30px] xl:px-[50px] sm:px-10">
+                <h4 class="h4-uppercase-bold-inter">
+                    {{ $t('contact_info') }}
+                </h4>
+                <div
+                    class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[30px]">
+                    <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>
+    </UiContainer>
+</template>
+<script setup lang="ts">
+defineProps<{ component: Component }>();
+type Component = {
+    image_collection: string;
+    section_id: string;
+    section_img: string;
+    section_lang_data: {
+        title: string;
+        description: string;
+    };
+};
+</script>

components/ui/ButtonArrow.vue

@@ -7,6 +7,8 @@
         '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'
+          : type === 'border'
+          ? 'border-button text-button group-hover:border-button-hover group-hover:text-button-hover border'
           : 'border-button text-button dark:border-block dark:text-block group-hover:border-button-hover group-hover:text-button-hover border',
       ]"
     >