nuxt-layer-core 2.0.1 → 2.0.3

package/app/layers/solution/app/components/RegistrationSection.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  plans: Array<{
+    id: string
+    name: string
+    level: string
+    duration: string
+    icon: string
+  }>
+  selectedPlanId?: string
+}>()
+</script>
+
+<template>
+  <div class="min-h-screen bg-[#f4f5f9] px-6 py-[7rem] font-sans text-slate-900">
+    <div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6 md:grid-cols-[340px_1fr]">
+      <!-- Left column -->
+      <RegistrationSidebar />
+
+      <!-- Right column: form -->
+      <RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
+    </div>
+  </div>
+</template>

package/app/layers/solution/app/components/RegistrationSidebar.vue

@@ -0,0 +1,70 @@
+<template>
+  <aside class="flex flex-col gap-4">
+    <div class="rounded-2xl border border-[#e7e9f0] bg-white p-7">
+      <h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
+      <ul class="flex flex-col gap-[22px]">
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
+              từng học viên.</span>
+          </span>
+        </li>
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 10 12 5 2 10l10 5 10-5Z" />
+              <path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
+              chỉ lý thuyết.</span>
+          </span>
+        </li>
+        <li class="flex items-start gap-3">
+          <span
+            class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
+            <svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+              stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
+          </span>
+          <span class="flex flex-col gap-[3px]">
+            <span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
+            <span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
+              sau khóa học.</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-6 py-[22px]">
+      <p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
+        <svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M23 7 16 12l7 5V7Z" />
+          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+        </svg>
+        Khai giảng linh hoạt
+      </p>
+      <p class="text-[13px] leading-relaxed text-gray-600">
+        Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
+      </p>
+    </div>
+  </aside>
+</template>

package/app/layers/solution/app/components/TheHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-200/70 shadow-sm">
     <div class="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between h-16">
-      <NuxtLink :to="`/giai-phap-proxmox/${slug}`" class="flex items-center gap-2.5">
+      <NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex items-center gap-2.5">
         <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
       </NuxtLink>
 
@@ -16,7 +16,7 @@
             ]">
               {{ link.label }}
             </NuxtLink>
-            <a v-else :href="`/giai-phap-proxmox/${slug}#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
+            <a v-else :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
               'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
               activeSection === link.id
                 ? 'text-[#004AC6] font-bold border-[#004AC6]'
@@ -25,7 +25,7 @@
               {{ link.label }}
             </a>
           </template>
-          <a v-else :href="`/giai-phap-proxmox/${slug}#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
+          <a v-else :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#${link.id}`" @click.prevent="handleAnchorClick(link)" :class="[
             'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
             activeSection === link.id
               ? 'text-[#004AC6] font-bold border-[#004AC6]'
@@ -65,16 +65,16 @@
 
       <!-- Not logged in -->
       <div v-else class="flex items-center gap-3">
-        <a v-if="isConsultant" :href="`/giai-phap-proxmox/${slug}#lien-he`" @click.prevent="scrollTo('lien-he')"
+        <a v-if="isConsultant" :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#lien-he`" @click.prevent="scrollTo('lien-he')"
           class="inline-flex items-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] border border-[#004AC6] text-[#004AC6] hover:bg-blue-50 transition-all active:scale-95 cursor-pointer">
           Liên hệ tư vấn
           <Icon name="lucide:headset" class="text-[16px]" />
         </a>
-        <NuxtLink to="/dang-nhap"
+        <a :href="loginHref"
           class="inline-flex items-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] bg-[#004AC6] text-white hover:bg-[#1D4ED8] transition-all active:scale-95 shadow-sm shadow-blue-600/20">
           Đăng nhập
           <Icon name="lucide:log-in" class="text-[16px]" />
-        </NuxtLink>
+        </a>
       </div>
     </div>
   </header>
@@ -98,7 +98,7 @@ const route = useRoute()
 const tokenKey = config.public.ACCESSTOKEN_NAME as string
 
 const navLinks = computed(() => [
-  { id: 'san-pham', label: 'Sản phẩm', path: `/giai-phap-proxmox/${props.slug}/proxmox-hci` },
+  { id: 'san-pham', label: 'Sản phẩm', path: `/gioi-thieu-san-pham/proxmox-hci` },
   { id: 'giai-phap', label: 'Vì sao chọn chúng tôi' },
   { id: 'chi-phi', label: 'Học phí' },
   { id: 'khach-hang', label: 'Học viên nói gì' },
@@ -106,6 +106,10 @@ const navLinks = computed(() => [
 
 const { scrollTo } = useScrollToSection()
 
+// route.fullPath gồm cả query hiện tại (vd ?plan=...&name=...) để sau khi đăng nhập quay lại đúng chỗ
+// Trang đăng nhập nằm ở domain LONGVAN_WEB (vd https://dev.longvan.net), không phải app này
+const loginHref = computed(() => `${config.public.LONGVAN_WEB}/dang-nhap?redirectUrl=${encodeURIComponent(route.fullPath)}`)
+
 const activeSection = useActiveSection(navLinks.value.map(l => l.id))
 const user = ref<{ fullName?: string; username?: string } | null>(null)
 const showMenu = ref(false)

package/app/layers/solution/app/composables/useConsultationRequest.ts

@@ -0,0 +1,8 @@
+export type ConsultationRequest = {
+  category: 'hci' | 'workshop' | 'training'
+  planId: string
+  planName: string
+} | null
+
+export const useConsultationRequest = () =>
+  useState<ConsultationRequest>('consultation-request', () => null)

package/app/layers/solution/app/composables/usePlanNormalizer.ts

@@ -0,0 +1,45 @@
+// Chuẩn hoá 1 item CMS (đến từ item_id_0M_groups_0N của CoursesSection hoặc PricingPlansSection)
+// về cùng 1 shape, để mọi nơi tiêu thụ (CtaSection, PricingPlansSection...) không phải đoán field theo từng nguồn.
+export interface NormalizedPlanItem {
+  id: string
+  name: string
+  level: string
+  duration: string
+  description: string
+  features: string[]
+  price?: number
+  prices?: Record<string, number>
+  priceLabel: string
+  priceNote: string
+  highlight: boolean
+  url?: string
+  icon: string
+}
+
+export const normalizePlanItem = (item: any): NormalizedPlanItem | null => {
+  if (!item || typeof item !== 'object') return null
+
+  const features = Array.isArray(item.config_product)
+    ? item.config_product
+    : typeof item.config_product === 'string' && item.config_product
+      ? [item.config_product]
+      : Array.isArray(item.features)
+        ? item.features
+        : []
+
+  return {
+    id: String(item.productId ?? item.id ?? item.title ?? item.name ?? ''),
+    name: item.title || item.name || '',
+    level: item.level || '',
+    duration: item.time || item.unit || '',
+    description: item.short_description || item.desc || '',
+    features,
+    price: item.price,
+    prices: item.prices,
+    priceLabel: item.priceLabel || '',
+    priceNote: item.priceNote || '',
+    highlight: !!item.highlight,
+    url: item.url,
+    icon: item.icon || 'lucide:server',
+  }
+}

package/app/layers/solution/app/composables/useSolutionApi.ts

@@ -28,6 +28,23 @@ export const useSolutionApi = () => {
         return data
     }
 
+    // Tạm thời: dò slug path theo cấp bất kỳ (slug/slug2/slug3), lấy object đầu tiên rồi gọi resume theo profileId
+    const getSlugData = async (slug: string) => {
+        const list = await handleGetSlugPathView(slug, 'giai-phap')
+        console.log("🚀 ~ getSlugData ~ list:", list)
+
+        const first = list?.[0]
+        console.log("🚀 ~ getSlugData ~ first:", first)
+
+        const profileId = first?.profileId
+        if (!profileId) return { productData: first, resumeData: null }
+
+        const resumeData = await getResumeByIdData(profileId)   
+        console.log("🚀 ~ getSlugData ~ resumeData:", resumeData)
+
+        return { productData: first, resumeData }
+    }
+
     const getSolutionDetail = async (slug: string, type: string) => {
         const productData = await handleGetSlugPathView(slug, type)
 
@@ -51,5 +68,6 @@ export const useSolutionApi = () => {
         getPublicProductDynamic,
         getResumeByIdData,
         getSolutionDetail,
+        getSlugData,
     }
 }

package/app/layers/solution/app/data/pricingPlans.ts

@@ -0,0 +1,150 @@
+export const hciPlans = [
+  {
+    id: 'hci-2',
+    name: 'HCI2 - 3 NODE, 120 CORE, 384GB RAM, 2.88TB NVME',
+    desc: 'Cụm 3 node cho doanh nghiệp vừa và nhỏ',
+    unit: '/tháng',
+    priceLabel: '',
+    prices: { 12: 8540000, 24: 8038000, 36: 7535000 },
+    tags: ['3 node x86', 'Ceph 3 bản sao', '10 GbE nội cụm', '~20 TB khả dụng'],
+    features: [
+      'Không chi phí đầu tư thiết bị ban đầu',
+      'Triển khai, tinh chỉnh và bật High Availability',
+      'Bảo hành, thay thế phần cứng trong suốt thời gian thuê',
+      'Đào tạo vận hành 1 buổi cho đội IT',
+    ],
+    highlight: false,
+    url: 'https://dev.longvan.net/san-pham/hci2',
+  },
+  {
+    id: 'hci-3',
+    name: 'HCI3 - 8 NODE, 160 CORE, 1024GB RAM, 7.68TB NVME',
+    desc: 'Cụm mở rộng cho hệ thống production',
+    unit: '/tháng',
+    priceLabel: '',
+    prices: { 12: 17847000, 24: 16844000, 36: 15791000 },
+    tags: ['5 node NVMe', 'Ceph RBD + CephFS', '25 GbE dự phòng', '~60 TB khả dụng'],
+    features: [
+      'Proxmox Backup Server riêng đi kèm',
+      'SDN, firewall phân tầng cho từng VM',
+      'Giám sát, cảnh báo toàn cụm 24/7',
+      'Nâng cấp cấu hình giữa kỳ không phát sinh phí ký lại',
+    ],
+    highlight: true,
+    url: 'https://dev.longvan.net/san-pham/hci3',
+  },
+  {
+    id: 'hci-4',
+    name: 'HCI4 - 8 NODE, 320 CORE, 1024GB RAM, 7.68TB NVME',
+    desc: 'Cụm mở rộng cho hệ thống production',
+    unit: '/tháng',
+    priceLabel: '',
+    prices: { 12: 22773000, 24: 21433000, 36: 20094000 },
+    tags: ['Từ 8 node', 'Ceph đa pool', 'Mạng lõi 100 GbE', 'Dung lượng theo yêu cầu'],
+    features: [
+      'Nhân bản chéo hai trung tâm dữ liệu',
+      'Kịch bản DR và diễn tập định kỳ',
+      'Tự động hóa qua API/Terraform',
+      'Kỹ sư trực onsite theo SLA cam kết',
+    ],
+    highlight: false,
+    url: 'https://dev.longvan.net/san-pham/hci4',
+  },
+]
+
+export const workshopPlans = [
+  {
+    id: 'workshop-online',
+    name: 'Workshop Trực tuyến',
+    desc: 'Tham gia từ xa · lab riêng trên cloud',
+    unit: '/học viên',
+    priceLabel: '',
+    price: 2900000,
+    priceNote: '',
+    tags: ['1 ngày · 8 giờ', 'Trực tuyến', 'Lab cloud riêng'],
+    features: [
+      'Cài đặt Proxmox VE từ số 0',
+      'Dựng cụm HCI với Ceph, bật High Availability',
+      'Ghi hình buổi học để xem lại 30 ngày',
+      'Checklist triển khai dùng ngay',
+    ],
+    highlight: false,
+  },
+  {
+    id: 'workshop-onsite',
+    name: 'Workshop Tại lớp',
+    desc: 'Học trực tiếp cùng giảng viên',
+    unit: '/học viên',
+    priceLabel: '',
+    price: 3900000,
+    priceNote: '',
+    tags: ['1 ngày · 8 giờ', 'Tại lớp', 'Thiết bị thật tại lab'],
+    features: [
+      'Thao tác trực tiếp trên cụm nhiều node',
+      'Mô phỏng sự cố node và tự phục hồi',
+      'Hỏi đáp 1-1 với giảng viên',
+      'Suất ăn trưa và tài liệu in kèm',
+    ],
+    highlight: true,
+  },
+  {
+    id: 'workshop-enterprise',
+    name: 'Workshop Nội bộ doanh nghiệp',
+    desc: 'Tổ chức riêng cho đội IT của bạn',
+    unit: '/lớp tối đa 15 người',
+    priceLabel: 'Từ ',
+    price: 39000000,
+    priceNote: '',
+    tags: ['1-2 ngày', 'Tại doanh nghiệp', 'Nội dung tùy chỉnh'],
+    features: [
+      'Nội dung thiết kế theo hạ tầng hiện có',
+      'Giảng viên và thiết bị lab tới tận nơi',
+      'Đánh giá năng lực đội IT sau workshop',
+      'Ưu đãi khi kết hợp gói thuê HCI',
+    ],
+    highlight: false,
+  },
+]
+
+export const trainingPlans = [
+  {
+    id: 'training-deploy',
+    name: 'Deployment & Management',
+    desc: 'Nền tảng · máy chủ đơn',
+    unit: '/học viên',
+    priceLabel: 'Từ ',
+    price: 9900000,
+    priceNote: '',
+    tags: ['14 giờ · 2 buổi', 'Trực tuyến hoặc tại lớp', 'Lab thực hành riêng'],
+    features: ['Cài đặt, mạng, lưu trữ, VM/LXC', 'Backup, phân quyền, tường lửa', 'Chứng nhận hoàn thành Proxmox'],
+    highlight: false,
+  },
+  {
+    id: 'training-cluster',
+    name: 'Clustering & Shared Storage',
+    desc: 'Chuyên sâu · cụm và Ceph',
+    unit: '/học viên',
+    priceLabel: 'Từ ',
+    price: 11900000,
+    priceNote: '',
+    tags: ['14 giờ · 2 buổi', 'Trực tuyến hoặc tại lớp', 'Lab cụm nhiều node'],
+    features: ['Cluster, pmxcfs, Corosync, SDN', 'Ceph HCI, ZFS replication, HA', 'Kịch bản sự cố thực chiến'],
+    highlight: true,
+  },
+  {
+    id: 'training-bundle',
+    name: 'Proxmox VE Bundle',
+    desc: 'Trọn gói cả hai khóa · tiết kiệm hơn',
+    unit: '/học viên',
+    priceLabel: 'Từ ',
+    price: 19900000,
+    priceNote: '',
+    tags: ['28 giờ · 4-5 buổi', 'Trực tuyến hoặc tại lớp', 'Lộ trình liền mạch'],
+    features: [
+      'Gồm đủ Module 1 và Module 2',
+      'Ưu đãi khi đăng ký theo nhóm',
+      'Hỗ trợ hỏi đáp sau khóa học',
+    ],
+    highlight: false,
+  },
+]

package/app/layers/solution/app/nuxt.config.ts

@@ -6,4 +6,10 @@ export default defineNuxtConfig({
       "types",
     ],
   },
+  components: [
+    {
+      path: "./components",
+      global: true,
+    },
+  ],
 })

package/app/layers/solution/app/pages/[slug]/[slug2]/[slug3]/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug3 = computed(() => route.params.slug3 as string)
+
+const { data } = await useAsyncData(
+  `slug3-${slug3.value}`,
+  () => getSlugData(slug3.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug3"
+  />
+</template>

package/app/layers/solution/app/pages/[slug]/[slug2]/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug2 = computed(() => route.params.slug2 as string)
+
+const { data } = await useAsyncData(
+  `slug2-${slug2.value}`,
+  () => getSlugData(slug2.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug2"
+  />
+  <!-- {{ data }} -->
+</template>

package/app/layers/solution/app/pages/[slug]/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSlugData } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+const { data } = await useAsyncData(
+  `slug-${slug.value}`,
+  () => getSlugData(slug.value),
+  { server: true }
+)
+</script>
+
+<template>
+  <DynamicPageSections
+    :field-resumes="data?.resumeData?.fieldResumes"
+    :target-c-t-a="data?.productData?.targetCTA"
+    :slug="data?.productData?.slug || slug"
+  />
+</template>

package/app/layers/solution/app/pages/dang-ky-tu-van/khoa-hoc-proxmox.vue.disabled

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+
+// Gói cần tư vấn được mang theo qua query từ CoursesSection (không fetch lại API)
+const selectedPlan = computed(() => {
+  const id = route.query.plan
+  if (!id) return null
+
+  return {
+    id: String(id),
+    name: String(route.query.name || ''),
+    level: String(route.query.level || ''),
+    duration: String(route.query.duration || ''),
+    price: String(route.query.price || ''),
+    description: String(route.query.description || ''),
+    icon: 'lucide:server',
+  }
+})
+
+const plans = computed(() => (selectedPlan.value ? [selectedPlan.value] : []))
+
+useHead({
+  title: computed(() =>
+    selectedPlan.value?.name ? `Đăng ký tư vấn - ${selectedPlan.value.name}` : 'Đăng ký tư vấn khóa học Proxmox'
+  ),
+})
+</script>
+
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader />
+
+    <RegistrationSection :plans="plans" :selected-plan-id="selectedPlan?.id" />
+
+    <TheFooter />
+  </div>
+</template>

package/app/layers/solution/app/pages/giai-phap-proxmox/dang-ky-khoa-hoc/[slug].vue.disabled

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+const route = useRoute()
+const { getSolutionDetail } = useSolutionApi()
+
+const slug = computed(() => route.params.slug as string)
+
+// SSR data fetch
+const { data, error } = await useAsyncData(
+  `dang-ky-${slug.value}`,
+  () => getSolutionDetail(slug.value, 'giai-phap'),
+  { server: true }
+)
+
+if (error.value || !data.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Không tìm thấy khóa học', fatal: true })
+}
+
+// Format plans from resumeData
+const formatPlans = (resumeData: any) => {
+  const fieldResumes = resumeData?.fieldResumes || []
+  return fieldResumes
+    ?.filter((group: any) => group?.type === 'FIELD_GROUP' && Array.isArray(group?.children))
+    ?.map((group: any) => {
+      const fields = Object.fromEntries(
+        group.children?.map((field: any) => [field?.fieldName?.split('@')?.pop(), field?.value]) || []
+      )
+      return {
+        id: fields.productid || group.fieldName,
+        name: fields.title || '',
+        level: fields.level || '',
+        duration: fields.time || '',
+        icon: fields.icon || 'lucide:server',
+      }
+    }) || []
+}
+
+const plans = computed(() => formatPlans(data.value?.resumeData))
+const targetCTA = computed(() => data.value?.productData?.[0]?.targetCTA || '')
+const selectedPlanId = computed(() => (route.query.plan as string) || '')
+
+useHead({
+  title: computed(() => `Đăng ký khóa học - ${data.value?.productData?.[0]?.product?.title || 'Proxmox HCI'}`),
+})
+</script>
+
+<template>
+  <div class="bg-ink text-cloud font-body antialiased">
+    <TheHeader :target-c-t-a="targetCTA" :slug="slug" />
+
+    <RegistrationSection :plans="plans" :selected-plan-id="selectedPlanId" />
+
+    <TheFooter />
+  </div>
+</template>

package/app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 // import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/index.vue'
-import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+// import GiaiPhapPage from '../layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue'
+import GiaiPhapPage from '../layers/solution/app/pages/[slug]/[slug2]/index.vue'
 </script>
 
 <template>

package/nuxt.config.ts

@@ -80,6 +80,7 @@ export default defineNuxtConfig({
       STORE_ID: process.env.STORE_ID,
       ENVIROMENT: process.env.ENVIROMENT,
       ACCESSTOKEN_NAME: process.env.ACCESSTOKEN_NAME || 'accessToken',
+      LONGVAN_WEB: process.env.LONGVAN_WEB
     },
   },
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-layer-core",
   "type": "module",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.0.3",
   "scripts": {
     "build": "env-cmd -f .env nuxt build",
     "dev": "env-cmd -f .env nuxt dev"