Merge branch 'feature/202501107-all' into feature/20251031_cl_gnb

layers/components/widgets/FixMainTitle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+const props = defineProps<{
+  title: string
+  resourcesData: PageDataResourceGroup
+}>()
+
+const { getCurrentSrc } = useResponsiveSrc()
+
+const resPath = computed(() => props.resourcesData?.res_path)
+const imageSrc = computed(() => {
+  return getCurrentSrc(resPath.value)
+})
+</script>
+
+<template>
+  <div
+    class="flex justify-center items-center w-full h-[120px] bg-center px-[20px] bg-no-repeat bg-cover sm:px-[40px] md:h-[180px]"
+    :style="{ backgroundImage: `url(${imageSrc})` }"
+  >
+    <h2
+      class="flex justify-center items-center w-full max-w-full md:justify-start md:max-w-[1300px]"
+    >
+      <span
+        class="flex justify-center items-center text-white text-[20px] font-bold tracking-[-0.6px] leading-[30px] md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
+      >
+        {{ props.title }}
+      </span>
+    </h2>
+  </div>
+</template>

layers/components/widgets/FixSubTitle.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description?: string
+  link?: string
+  target?: '_self' | '_blank'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  target: '_blank',
+})
+
+const componentTag = computed((): string => {
+  switch (props.target) {
+    case '_self':
+      return 'AtomsLocaleLink'
+    case '_blank':
+      return 'a'
+    default:
+      return 'a'
+  }
+})
+
+const componentProps = computed(() => {
+  if (props.target === '_self') {
+    return {
+      to: props.link,
+    }
+  }
+
+  if (props.target === '_blank') {
+    return {
+      href: props.link,
+      target: props.target,
+      rel: 'noopener noreferrer',
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap items-end justify-between">
+    <h3
+      class="text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+    >
+      <span>{{ props.title }}</span>
+    </h3>
+    <div class="flex items-center justify-between">
+      <slot />
+      <p
+        v-if="props.description && !props.link"
+        class="text-[#666666] text-[13px] font-[400] leading-[22px] tracking-[-0.325px] md:text-[14px] md:leading-[24px] md:tracking-[-0.421px]"
+      >
+        {{ props.description }}
+      </p>
+      <component
+        :is="componentTag"
+        v-else-if="props.description && props.link"
+        v-bind="componentProps"
+        class="relative flex items-center justify-center gap-[4px] w-auto h-auto text-[#3C75FF] text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-0 before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+      >
+        <span>{{ props.description }}</span>
+        <AtomsIconsWebLinkLine
+          v-if="props.target === '_blank'"
+          :size="20"
+          color="#3C75FF"
+          class="icon"
+        />
+      </component>
+    </div>
+  </div>
+</template>