investment page/curency switcher

components/section/investment-page/InvestmentWhy.vue

@@ -0,0 +1,43 @@
+<template>
+  <UiContainer>
+    <div class="space-25-55-75 max-w-[1000px] mx-auto">
+      <h1 class="h2-bold-bounded">
+        <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>
+      <h4 class="h4-uppercase-bold-inter">
+        {{ component.section_lang_data.description }}
+      </h4>
+    </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;
+      }
+    ];
+    description: string;
+  };
+};
+</script>