feat: add RecommendationListCard and RoutePlanCard components with styles and mocks

- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges.
- Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle.
- Added ScenicImageCard component for showcasing images with optional captions.
- Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements.
- Introduced SCSS styles for all new components and updated existing styles for consistency.
- Created test page to preview and interact with all components using mock data.
- Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.

src/pages/ChatModule/PoiDetailCard/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <CardShell class="poi-detail-card" variant="soft">
+    <view class="poi-detail-card__hero">
+      <MediaFrame class="poi-detail-card__media h-164" :src="data.cover" />
+      <view class="poi-detail-card__tag">
+        <BadgePill :label="data.category" tone="green" />
+      </view>
+    </view>
+    <view class="poi-detail-card__body p-16">
+      <view class="poi-detail-card__title color-1E293B font-size-18 font-900">{{ data.title }}</view>
+      <view class="poi-detail-card__desc color-64748B font-size-12 font-700">{{ data.description }}</view>
+      <view class="poi-detail-card__facts flex mt-16 rounded-18 bg-F8FAFC">
+        <view v-for="fact in facts" :key="fact.label" class="poi-detail-card__fact flex-full px-8 py-12 text-center">
+          <view class="poi-detail-card__fact-value color-0F172A font-size-14 font-900">{{ fact.value }}</view>
+          <view class="poi-detail-card__fact-label color-94A3B8 font-size-10 font-700">{{ fact.label }}</view>
+        </view>
+      </view>
+      <view class="poi-detail-card__chips flex flex-wrap gap-8 mt-14">
+        <BadgePill v-for="tag in tags" :key="tag" :label="tag" tone="slate" />
+      </view>
+    </view>
+    <view class="poi-detail-card__action px-12 pb-12">
+      <ActionRow
+        :title="data.actionTitle"
+        :subtitle="data.actionSubtitle"
+        icon="⌖"
+        tone="green"
+        :disabled="disabled"
+        :payload="data"
+        @action="$emit('action', $event)"
+      />
+    </view>
+  </CardShell>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import CardShell from "../SharedVisual/CardShell.vue";
+import MediaFrame from "../SharedVisual/MediaFrame.vue";
+import BadgePill from "../SharedVisual/BadgePill.vue";
+import ActionRow from "../SharedVisual/ActionRow.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(["select", "action"]);
+
+const facts = computed(() => props.data.facts || []);
+const tags = computed(() => props.data.tags || []);
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>