about us page

components/section/about-us-page/AboutUsDifferent.vue

@@ -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>