From 261fdd16ceec4fd7218086b237aa052769464604 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Tue, 10 Jun 2025 15:56:43 +0200
Subject: [PATCH] businnes page

---
 .../about-us-page/AboutUsDifferent.vue        |   5 +-
 .../section/about-us-page/AboutUsHistory.vue  |   2 -
 .../section/business-page/BusinessMain.vue    | 132 +++++++++++
 .../section/business-page/BusinessReasons.vue | 217 ++++++++++++++++++
 .../investment-page/InvestmentZone.vue        |   6 +-
 components/section/main-page/MainBlocks.vue   |  14 +-
 components/section/main-page/MainHero.vue     |   2 +-
 components/section/main-page/MainProducts.vue |   2 +-
 components/ui/ButtonArrow.vue                 |  14 +-
 9 files changed, 374 insertions(+), 20 deletions(-)
 create mode 100644 components/section/business-page/BusinessMain.vue
 create mode 100644 components/section/business-page/BusinessReasons.vue

diff --git a/components/section/about-us-page/AboutUsDifferent.vue b/components/section/about-us-page/AboutUsDifferent.vue
index e421fa5..d877a5a 100644
--- a/components/section/about-us-page/AboutUsDifferent.vue
+++ b/components/section/about-us-page/AboutUsDifferent.vue
@@ -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"
diff --git a/components/section/about-us-page/AboutUsHistory.vue b/components/section/about-us-page/AboutUsHistory.vue
index 95ebc86..c40255d 100644
--- a/components/section/about-us-page/AboutUsHistory.vue
+++ b/components/section/about-us-page/AboutUsHistory.vue
@@ -103,8 +103,6 @@
 </template>
 
 <script lang="ts" setup>
-import { UiButtonArrow } from "#components";
-
 const props = defineProps<{ component: Component }>();
 interface ContentSection {
   title: string;
diff --git a/components/section/business-page/BusinessMain.vue b/components/section/business-page/BusinessMain.vue
new file mode 100644
index 0000000..a145684
--- /dev/null
+++ b/components/section/business-page/BusinessMain.vue
@@ -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>
diff --git a/components/section/business-page/BusinessReasons.vue b/components/section/business-page/BusinessReasons.vue
new file mode 100644
index 0000000..042caa3
--- /dev/null
+++ b/components/section/business-page/BusinessReasons.vue
@@ -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>
diff --git a/components/section/investment-page/InvestmentZone.vue b/components/section/investment-page/InvestmentZone.vue
index d73069d..8ae1db3 100644
--- a/components/section/investment-page/InvestmentZone.vue
+++ b/components/section/investment-page/InvestmentZone.vue
@@ -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>
diff --git a/components/section/main-page/MainBlocks.vue b/components/section/main-page/MainBlocks.vue
index 6bd0ed0..3be0813 100644
--- a/components/section/main-page/MainBlocks.vue
+++ b/components/section/main-page/MainBlocks.vue
@@ -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">
diff --git a/components/section/main-page/MainHero.vue b/components/section/main-page/MainHero.vue
index cfa7e59..1905b6f 100644
--- a/components/section/main-page/MainHero.vue
+++ b/components/section/main-page/MainHero.vue
@@ -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>
diff --git a/components/section/main-page/MainProducts.vue b/components/section/main-page/MainProducts.vue
index ce60ac8..26ff2fd 100644
--- a/components/section/main-page/MainProducts.vue
+++ b/components/section/main-page/MainProducts.vue
@@ -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>
diff --git a/components/ui/ButtonArrow.vue b/components/ui/ButtonArrow.vue
index 277b5b8..39a0c79 100644
--- a/components/ui/ButtonArrow.vue
+++ b/components/ui/ButtonArrow.vue
@@ -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>