nuxt-layer-core 1.1.0 → 1.1.2

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

@@ -1,193 +1,256 @@
-<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/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>
-
-      <nav class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
-        <template v-for="link in navLinks" :key="link.id">
-          <template v-if="link.path">
-            <NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" :class="[
-              'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
-              activeSection === link.id
-                ? 'text-[#004AC6] font-bold border-[#004AC6]'
-                : 'border-transparent hover:text-[#004AC6]'
-            ]">
-              {{ link.label }}
-            </NuxtLink>
-            <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]'
-                : 'border-transparent hover:text-[#004AC6]'
-            ]">
-              {{ link.label }}
-            </a>
-          </template>
-          <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]'
-              : 'border-transparent hover:text-[#004AC6]'
-          ]">
-            {{ link.label }}
-          </a>
-        </template>
-      </nav>
-
-      <!-- Logged in -->
-      <div v-if="user" class="relative">
-        <button @click="showMenu = !showMenu"
-          class="flex items-center gap-2.5 text-sm font-medium text-slate-700 hover:text-[#004AC6] transition-colors">
-          <span
-            class="w-8 h-8 rounded-[10px] bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] flex items-center justify-center text-white text-xs font-bold">
-            {{ avatarInitial }}
-          </span>
-          <span class="hidden sm:block">Xin chào, <strong>{{ user.fullName || user.username }}</strong></span>
-          <Icon name="lucide:chevron-down" class="text-[14px] text-slate-400" />
-        </button>
-
-        <!-- Dropdown -->
-        <Transition enter-active-class="transition ease-out duration-100" enter-from-class="opacity-0 scale-95"
-          enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
-          leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-          <div v-if="showMenu"
-            class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200/80 py-1.5 z-50">
-            <button @click="logout"
-              class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-colors">
-              <Icon name="lucide:log-out" class="text-[15px]" />
-              Đăng xuất
-            </button>
-          </div>
-        </Transition>
-      </div>
-
-      <!-- Not logged in -->
-      <div v-else class="flex items-center gap-3">
-        <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>
-        <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]" />
-        </a>
-      </div>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  targetCTA: { type: String, default: '' },
-  slug: { type: String, default: '' },
-})
-
-const isConsultant = computed(() => props.targetCTA === 'CONSULTANT')
-
-const { getCookie, deleteCookie } = useCookieHelper()
-const { getUserByToken } = useAuthApi()
-const { isLoggedIn, userName, setUser, clearUser } = useAuthState()
-const config = useRuntimeConfig()
-const router = useRouter()
-const route = useRoute()
-
-const tokenKey = config.public.ACCESSTOKEN_NAME as string
-
-const navLinks = computed(() => [
-  { 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ì' },
-])
-
-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)
-
-function handleNavClick(e: Event, link: any) {
-  if (route.path === link.path) {
-    e.preventDefault()
-    scrollTo(link.id)
-  }
-}
-
-function handleAnchorClick(link: any) {
-  const el = document.getElementById(link.id)
-  if (el) {
-    scrollTo(link.id)
-  } else {
-    router.push(`/giai-phap-proxmox/${props.slug}#${link.id}`)
-  }
-}
-
-const avatarInitial = computed(() => {
-  const name = user.value?.fullName || user.value?.username || ''
-  return name.charAt(0).toUpperCase() || '?'
-})
-
-async function loadUser() {
-  const token = getCookie(tokenKey)
-  if (!token) return
-
-  try {
-    const res = await getUserByToken(token)
-    if (res) {
-      user.value = {
-        fullName: res.fullName,
-        username: res.username || res.userLoginId,
-      }
-      setUser(res.fullName || res.username || '')
-    }
-  } catch {
-    deleteCookie(tokenKey)
-    clearUser()
-  }
-}
-
-// Watch auth state changes (when login/register updates state)
-watch(isLoggedIn, (loggedIn) => {
-  if (loggedIn && userName.value) {
-    user.value = {
-      fullName: userName.value,
-      username: userName.value,
-    }
-  } else if (!loggedIn) {
-    user.value = null
-  }
-})
-
-function logout() {
-  deleteCookie(tokenKey)
-  user.value = null
-  clearUser()
-  showMenu.value = false
-  router.push('/giai-phap-proxmox')
-}
-
-// Close menu on outside click
-function onClickOutside(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  if (!target.closest('.relative')) {
-    showMenu.value = false
-  }
-}
-
-onMounted(() => {
-  loadUser()
-  document.addEventListener('click', onClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', onClickOutside)
-})
+<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/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>
+
+      <nav class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
+        <template v-for="link in navLinks" :key="link.id">
+          <template v-if="link.path">
+            <NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" :class="[
+              'pb-1 border-b-2 transition-all duration-200 cursor-pointer',
+              activeSection === link.id
+                ? 'text-[#004AC6] font-bold border-[#004AC6]'
+                : 'border-transparent hover:text-[#004AC6]'
+            ]">
+              {{ link.label }}
+            </NuxtLink>
+            <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]'
+                : 'border-transparent hover:text-[#004AC6]'
+            ]">
+              {{ link.label }}
+            </a>
+          </template>
+          <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]'
+              : 'border-transparent hover:text-[#004AC6]'
+          ]">
+            {{ link.label }}
+          </a>
+        </template>
+      </nav>
+
+      <!-- Logged in -->
+      <div v-if="user" class="relative hidden md:block">
+        <button @click="showMenu = !showMenu"
+          class="flex items-center gap-2.5 text-sm font-medium text-slate-700 hover:text-[#004AC6] transition-colors">
+          <span
+            class="w-8 h-8 rounded-[10px] bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] flex items-center justify-center text-white text-xs font-bold">
+            {{ avatarInitial }}
+          </span>
+          <span class="hidden sm:block">Xin chào, <strong>{{ user.fullName || user.username }}</strong></span>
+          <Icon name="lucide:chevron-down" class="text-[14px] text-slate-400" />
+        </button>
+
+        <!-- Dropdown -->
+        <Transition enter-active-class="transition ease-out duration-100" enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
+          leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+          <div v-if="showMenu"
+            class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200/80 py-1.5 z-50">
+            <button @click="logout"
+              class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-colors">
+              <Icon name="lucide:log-out" class="text-[15px]" />
+              Đăng xuất
+            </button>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Not logged in -->
+      <div v-else class="hidden md:flex items-center gap-3">
+        <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>
+        <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]" />
+        </a>
+      </div>
+
+      <!-- Mobile menu toggle -->
+      <button type="button" class="md:hidden flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-600 hover:bg-slate-100 transition-colors"
+        :aria-expanded="showMobileMenu" aria-label="Mở menu"
+        @click="showMobileMenu = !showMobileMenu">
+        <Icon :name="showMobileMenu ? 'lucide:x' : 'lucide:menu'" class="text-[22px]" />
+      </button>
+    </div>
+
+    <!-- Mobile menu panel -->
+    <Transition enter-active-class="transition ease-out duration-150" enter-from-class="opacity-0 -translate-y-1"
+      enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-1">
+      <div v-if="showMobileMenu" class="md:hidden border-t border-slate-200/70 bg-white px-6 py-4">
+        <nav class="flex flex-col gap-1 text-sm font-medium text-slate-600">
+          <template v-for="link in navLinks" :key="link.id">
+            <NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" class="rounded-[10px] px-3 py-2.5 transition-colors"
+              :class="activeSection === link.id ? 'bg-blue-50 text-[#004AC6] font-bold' : 'hover:bg-slate-50'"
+              @click="showMobileMenu = false">
+              {{ link.label }}
+            </NuxtLink>
+            <a v-else :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#${link.id}`" class="rounded-[10px] px-3 py-2.5 transition-colors"
+              :class="activeSection === link.id ? 'bg-blue-50 text-[#004AC6] font-bold' : 'hover:bg-slate-50'"
+              @click.prevent="handleAnchorClick(link); showMobileMenu = false">
+              {{ link.label }}
+            </a>
+          </template>
+        </nav>
+
+        <div class="mt-4 flex flex-col gap-3 border-t border-slate-100 pt-4">
+          <template v-if="user">
+            <div class="flex items-center gap-2.5 px-3 text-sm text-slate-700">
+              <span class="w-8 h-8 rounded-[10px] bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] flex items-center justify-center text-white text-xs font-bold">
+                {{ avatarInitial }}
+              </span>
+              Xin chào, <strong>{{ user.fullName || user.username }}</strong>
+            </div>
+            <button @click="logout(); showMobileMenu = false"
+              class="flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-[10px] text-sm font-bold text-red-500 border border-red-200 hover:bg-red-50 transition-colors">
+              <Icon name="lucide:log-out" class="text-[15px]" />
+              Đăng xuất
+            </button>
+          </template>
+          <template v-else>
+            <a v-if="isConsultant" :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#lien-he`"
+              @click.prevent="scrollTo('lien-he'); showMobileMenu = false"
+              class="inline-flex items-center justify-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 cursor-pointer">
+              Liên hệ tư vấn
+              <Icon name="lucide:headset" class="text-[16px]" />
+            </a>
+            <a :href="loginHref"
+              class="inline-flex items-center justify-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] bg-[#004AC6] text-white hover:bg-[#1D4ED8] transition-all shadow-sm shadow-blue-600/20">
+              Đăng nhập
+              <Icon name="lucide:log-in" class="text-[16px]" />
+            </a>
+          </template>
+        </div>
+      </div>
+    </Transition>
+  </header>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  targetCTA: { type: String, default: '' },
+  slug: { type: String, default: '' },
+})
+
+const isConsultant = computed(() => props.targetCTA === 'CONSULTANT')
+
+const { getCookie, deleteCookie } = useCookieHelper()
+const { getUserByToken } = useAuthApi()
+const { isLoggedIn, userName, setUser, clearUser } = useAuthState()
+const config = useRuntimeConfig()
+const router = useRouter()
+const route = useRoute()
+
+const tokenKey = config.public.ACCESSTOKEN_NAME as string
+
+const navLinks = computed(() => [
+  { 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ì' },
+])
+
+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)
+const showMobileMenu = ref(false)
+
+watch(() => route.fullPath, () => {
+  showMobileMenu.value = false
+})
+
+function handleNavClick(e: Event, link: any) {
+  if (route.path === link.path) {
+    e.preventDefault()
+    scrollTo(link.id)
+  }
+}
+
+function handleAnchorClick(link: any) {
+  const el = document.getElementById(link.id)
+  if (el) {
+    scrollTo(link.id)
+  } else {
+    router.push(`/giai-phap-proxmox/${props.slug}#${link.id}`)
+  }
+}
+
+const avatarInitial = computed(() => {
+  const name = user.value?.fullName || user.value?.username || ''
+  return name.charAt(0).toUpperCase() || '?'
+})
+
+async function loadUser() {
+  const token = getCookie(tokenKey)
+  if (!token) return
+
+  try {
+    const res = await getUserByToken(token)
+    if (res) {
+      user.value = {
+        fullName: res.fullName,
+        username: res.username || res.userLoginId,
+      }
+      setUser(res.fullName || res.username || '')
+    }
+  } catch {
+    deleteCookie(tokenKey)
+    clearUser()
+  }
+}
+
+// Watch auth state changes (when login/register updates state)
+watch(isLoggedIn, (loggedIn) => {
+  if (loggedIn && userName.value) {
+    user.value = {
+      fullName: userName.value,
+      username: userName.value,
+    }
+  } else if (!loggedIn) {
+    user.value = null
+  }
+})
+
+function logout() {
+  deleteCookie(tokenKey)
+  user.value = null
+  clearUser()
+  showMenu.value = false
+  router.push('/giai-phap-proxmox')
+}
+
+// Close menu on outside click
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.relative')) {
+    showMenu.value = false
+  }
+}
+
+onMounted(() => {
+  loadUser()
+  document.addEventListener('click', onClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside)
+})
 </script>

package/app/layers/solution/app/components/proxmox/ComparisonSection.vue

@@ -3,7 +3,7 @@ import { comparisonRows } from "../../data/proxmox-content"
 </script>
 
 <template>
-  <section class="bg-white py-20 sm:py-28">
+  <section id="so-sanh" class="bg-white py-20 sm:py-28">
     <div class="mx-auto max-w-4xl px-6 lg:px-8">
       <div class="text-center">
         <div v-reveal class="inline-flex items-center rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-600 ring-1 ring-inset ring-blue-100">
@@ -18,25 +18,25 @@ import { comparisonRows } from "../../data/proxmox-content"
         </p>
       </div>
 
-      <div v-reveal="{ delay: 180 }" class="mt-12 overflow-hidden rounded-2xl border border-slate-200 shadow-sm">
-        <table class="w-full border-collapse text-left text-sm">
+      <div v-reveal="{ delay: 180 }" class="mt-12 overflow-x-auto rounded-2xl border border-slate-200 shadow-sm">
+        <table class="w-full min-w-[520px] border-collapse text-left text-sm">
           <thead>
             <tr class="bg-blue-600 text-white">
-              <th class="px-6 py-4 font-semibold">Tiêu chí</th>
-              <th class="px-6 py-4 text-center font-semibold">Proxmox HCI</th>
-              <th class="px-6 py-4 text-center font-semibold">Hạ tầng truyền thống</th>
+              <th class="px-4 py-4 font-semibold sm:px-6">Tiêu chí</th>
+              <th class="px-4 py-4 text-center font-semibold sm:px-6">Proxmox HCI</th>
+              <th class="px-4 py-4 text-center font-semibold sm:px-6">Hạ tầng truyền thống</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-slate-200 bg-white">
             <tr v-for="row in comparisonRows" :key="row.label">
-              <td class="px-6 py-4 font-medium text-slate-700">{{ row.label }}</td>
-              <td class="px-6 py-4">
+              <td class="px-4 py-4 font-medium text-slate-700 sm:px-6">{{ row.label }}</td>
+              <td class="px-4 py-4 sm:px-6">
                 <span class="mx-auto flex w-fit items-center gap-1.5 font-medium text-emerald-600">
                   <ProxmoxAppIcon name="check" class="h-4 w-4 rounded-full bg-emerald-50 p-0.5" />
                   {{ row.hci }}
                 </span>
               </td>
-              <td class="px-6 py-4">
+              <td class="px-4 py-4 sm:px-6">
                 <span
                   class="mx-auto flex w-fit items-center gap-1.5 font-medium"
                   :class="row.legacyOk ? 'text-emerald-600' : 'text-rose-500'"

package/app/layers/solution/app/components/proxmox/HciOverviewSection.vue

@@ -3,7 +3,7 @@ import { hciOverviewCards } from "../../data/proxmox-content"
 </script>
 
 <template>
-  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+  <section id="hci-la-gi" class="bg-[#F7F9FB] py-20 sm:py-28">
     <div class="mx-auto max-w-6xl px-6 lg:px-8">
       <div class="mx-auto max-w-3xl text-center">
         <div v-reveal class="inline-flex items-center rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-600 ring-1 ring-inset ring-blue-100">

package/app/layers/solution/app/components/proxmox/PainPointsSection.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { painPoints } from "../../data/proxmox-content"
+const { scrollTo } = useScrollToSection()
+</script>
+
+<template>
+  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+    <div class="mx-auto max-w-6xl px-6 lg:px-8">
+      <div class="mx-auto max-w-3xl text-center">
+        <div v-reveal class="inline-flex items-center rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-600 ring-1 ring-inset ring-blue-100">
+          Bài toán thường gặp
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Đâu là bài toán bạn
+          <span class="text-blue-600">đang cần giải quyết?</span>
+        </h2>
+      </div>
+
+      <div class="mt-14 flex flex-wrap justify-center gap-5">
+        <div
+          v-for="(item, i) in painPoints"
+          :key="item.question"
+          v-reveal="{ delay: 100 + i * 70 }"
+          class="flex w-full flex-col rounded-2xl border border-slate-200 bg-white p-7 transition hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg hover:shadow-blue-900/5 sm:w-[calc(50%-10px)] lg:w-[calc(33.333%-13.334px)]"
+        >
+          <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
+            <ProxmoxAppIcon :name="item.icon" class="h-5 w-5" />
+          </span>
+          <p class="mt-4 font-semibold text-slate-900">{{ item.question }}</p>
+          <p class="mt-2 flex-1 text-sm leading-relaxed text-slate-500">{{ item.answer }}</p>
+          <a
+            href="#"
+            class="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-700"
+            @click.prevent="scrollTo(item.anchor)"
+          >
+            {{ item.linkText }}
+            <ProxmoxAppIcon name="arrowRight" class="h-3.5 w-3.5" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/app/layers/solution/app/components/proxmox/TrainingBenefitsSection.vue

@@ -3,7 +3,7 @@ import { trainingBenefits } from "../../data/proxmox-content"
 </script>
 
 <template>
-  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+  <section id="loi-ich-dao-tao" class="bg-[#F7F9FB] py-20 sm:py-28">
     <div class="mx-auto max-w-6xl px-6 lg:px-8">
       <div class="mx-auto max-w-3xl text-center">
         <div v-reveal class="inline-flex items-center rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-600 ring-1 ring-inset ring-blue-100">