nuxt-layer-core 1.0.1

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/TestimonialsSection.vue

@@ -0,0 +1,58 @@
+<template>
+  <section id="khach-hang" class="py-24 bg-white border-t border-slate-200">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8">
+      <div class="text-center mb-16">
+        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Học viên nói gì</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900">
+          Được tư vấn đúng khóa, học đúng thứ cần dùng
+        </h3>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <blockquote
+          v-for="(t, i) in testimonials"
+          :key="t.name"
+          :data-delay="i * 150"
+          class="testimonial-card bg-white p-8 rounded-xl border border-slate-200 relative hover:shadow-lg transition-shadow"
+        >
+          <Icon name="lucide:quote" class="text-blue-100 text-4xl absolute top-6 right-6" />
+          <p class="text-slate-700 leading-relaxed mb-6 relative z-10">{{ t.quote }}</p>
+          <footer class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-[10px] bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center text-xs font-bold text-white">
+              {{ t.initials }}
+            </div>
+            <div class="text-sm">
+              <p class="font-bold text-slate-900">{{ t.name }}</p>
+              <p class="text-slate-500">{{ t.role }}</p>
+            </div>
+          </footer>
+        </blockquote>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.testimonial-card', 'slide-left')
+
+const testimonials = [
+  {
+    initials: 'TH',
+    name: 'Trần Hải',
+    role: 'IT Manager, chuỗi bán lẻ 20 chi nhánh',
+    quote: 'Ban đầu định đăng ký gói cao nhất, nhưng buổi tư vấn cho thấy đội em chỉ cần gói Nền tảng. Tiết kiệm được kha khá chi phí mà vẫn đạt mục tiêu.'
+  },
+  {
+    initials: 'NL',
+    name: 'Nguyễn Lâm',
+    role: 'DevOps Lead, công ty fintech',
+    quote: 'Người tư vấn hỏi rất kỹ về hạ tầng hiện tại trước khi gợi ý khóa học, nên nội dung học sát với công việc thật, không lan man.'
+  },
+  {
+    initials: 'PA',
+    name: 'Phạm Anh',
+    role: 'CTO, startup logistics',
+    quote: 'Nhờ được tư vấn đúng lộ trình, công ty chuyển từ VMware sang cluster HCI trên Proxmox và cắt gần 60% chi phí license hàng năm.'
+  }
+]
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <footer class="bg-white border-t border-slate-200 pt-16 pb-10">
+    <div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-10">
+      <div class="space-y-4">
+        <div class="flex items-center">
+          <img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
+        </div>
+        <p class="text-slate-500 text-sm leading-relaxed">
+          Tư vấn và đào tạo hạ tầng siêu hội tụ Proxmox. Đồng hành cùng bạn chọn đúng khóa học,
+          đúng lộ trình nghề nghiệp.
+        </p>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Khóa học</h5>
+        <ul class="space-y-3">
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Proxmox nền tảng</NuxtLink></li>
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Vận hành production</NuxtLink></li>
+          <li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đào tạo doanh nghiệp</NuxtLink></li>
+        </ul>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Tư vấn</h5>
+        <ul class="space-y-3">
+          <li><NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Quy trình tư vấn</NuxtLink></li>
+          <li><NuxtLink to="#khach-hang" @click.prevent="scrollTo('khach-hang')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Học viên nói gì</NuxtLink></li>
+          <li><NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đặt lịch tư vấn</NuxtLink></li>
+        </ul>
+      </div>
+
+      <div>
+        <h5 class="font-bold text-slate-900 mb-5 text-sm">Liên hệ</h5>
+        <ul class="space-y-3 text-sm text-slate-500">
+          <li class="flex items-center gap-2">
+            <Icon name="lucide:mail" class="text-[16px] text-[#004AC6]" />
+            tuvan@longvan.net
+          </li>
+          <li class="flex items-center gap-2">
+            <Icon name="lucide:phone" class="text-[16px] text-[#004AC6]" />
+            1800 6070
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="max-w-7xl mx-auto px-6 lg:px-8 mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <p class="text-slate-400 text-xs">© {{ year }} Long Vân Cloud Solution. Bảo lưu mọi quyền.</p>
+      <div class="flex gap-6 text-xs text-slate-500">
+        <NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="hover:text-[#004AC6] transition-colors">Vì sao chọn chúng tôi</NuxtLink>
+        <NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="hover:text-[#004AC6] transition-colors">Khóa học</NuxtLink>
+        <NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="hover:text-[#004AC6] transition-colors">Tư vấn</NuxtLink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+const { scrollTo } = useScrollToSection()
+const year = new Date().getFullYear()
+</script>

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

@@ -0,0 +1,193 @@
+<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)
+})
+</script>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  class?: string
+}>()
+
+const paths: Record<string, string> = {
+  cpu: "M9 3v2M15 3v2M9 19v2M15 19v2M3 9h2M3 15h2M19 9h2M19 15h2M7 7h10v10H7z M10 10h4v4h-4z",
+  database:
+    "M12 5c4.418 0 8-1.12 8-2.5S16.418 0 12 0 4 1.12 4 2.5 7.582 5 12 5zM4 2.5V19.5C4 20.88 7.582 22 12 22s8-1.12 8-2.5V2.5M4 8.5C4 9.88 7.582 11 12 11s8-1.12 8-2.5M4 14.5c0 1.38 3.582 2.5 8 2.5s8-1.12 8-2.5",
+  share: "M6 12a3 3 0 100-6 3 3 0 000 6zM18 6a3 3 0 100-6 3 3 0 000 6zM18 24a3 3 0 100-6 3 3 0 000 6zM8.5 10.5l7-4M8.5 13.5l7 4",
+  cluster: "M6 9a3 3 0 100-6 3 3 0 000 6zM18 9a3 3 0 100-6 3 3 0 000 6zM12 21a3 3 0 100-6 3 3 0 000 6zM6 9v3a3 3 0 003 3M18 9v3a3 3 0 01-3 3",
+  shield: "M12 2l8 3.5v5.5c0 5-3.4 8.9-8 11-4.6-2.1-8-6-8-11V5.5L12 2z",
+  bolt: "M13 2L3 14h7l-1 8 11-14h-8l1-6z",
+  chart: "M4 20V10M10 20V4M16 20v-7M22 20H2",
+  layers: "M12 2l9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5",
+  book: "M4 4.5A2.5 2.5 0 016.5 2H20v17H6.5A2.5 2.5 0 004 21.5V4.5zM4 19.5A2.5 2.5 0 016.5 17H20",
+  users: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
+  trending: "M23 6l-9.5 9.5-5-5L1 18M17 6h6v6",
+  award: "M12 15a6 6 0 100-12 6 6 0 000 12zM8.21 13.89L7 23l5-3 5 3-1.21-9.12",
+  globe: "M12 22a10 10 0 100-20 10 10 0 000 20zM2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z",
+  activity: "M22 12h-4l-3 9L9 3l-3 9H2",
+  check: "M20 6L9 17l-5-5",
+  x: "M18 6L6 18M6 6l12 12",
+  star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+  cap: "M22 10L12 5 2 10l10 5 10-5zM6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5",
+  calendar: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z",
+  arrowRight: "M5 12h14M12 5l7 7-7 7",
+  chevronDown: "M6 9l6 6 6-6"
+}
+</script>
+
+<template>
+  <svg
+    :class="$props.class"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path :d="paths[name] ?? paths.check" />
+  </svg>
+</template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { comparisonRows } from "../../data/proxmox-content"
+</script>
+
+<template>
+  <section 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">
+          So sánh
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          <span class="text-slate-400">Proxmox HCI vs</span>
+          Hạ tầng truyền thống
+        </h2>
+        <p v-reveal="{ delay: 120 }" class="mt-5 leading-relaxed text-slate-600">
+          Đặt lên bàn cân để thấy sự khác biệt về hiệu quả đầu tư và khả năng vận hành lâu dài.
+        </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">
+          <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>
+            </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">
+                <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">
+                <span
+                  class="mx-auto flex w-fit items-center gap-1.5 font-medium"
+                  :class="row.legacyOk ? 'text-emerald-600' : 'text-rose-500'"
+                >
+                  <ProxmoxAppIcon :name="row.legacyOk ? 'check' : 'x'" class="h-4 w-4 rounded-full p-0.5" :class="row.legacyOk ? 'bg-emerald-50' : 'bg-rose-50'" />
+                  {{ row.legacy }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { faqItems } from "../../data/proxmox-content"
+
+const openIndex = ref<number | null>(0)
+
+function toggle(i: number) {
+  openIndex.value = openIndex.value === i ? null : i
+}
+</script>
+
+<template>
+  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+    <div class="mx-auto max-w-3xl 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">
+          FAQ
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Câu hỏi thường gặp
+        </h2>
+      </div>
+
+      <div class="mt-12 space-y-3">
+        <div
+          v-for="(item, i) in faqItems"
+          :key="item.question"
+          v-reveal="{ delay: 80 + i * 60 }"
+          class="overflow-hidden rounded-xl border border-slate-200 bg-white"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-4 px-6 py-4 text-left text-[15px] font-semibold text-slate-800"
+            :aria-expanded="openIndex === i"
+            @click="toggle(i)"
+          >
+            {{ item.question }}
+            <ProxmoxAppIcon
+              name="chevronDown"
+              class="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-300"
+              :class="{ 'rotate-180 text-blue-600': openIndex === i }"
+            />
+          </button>
+
+          <div
+            class="grid transition-all duration-300 ease-in-out"
+            :style="{ gridTemplateRows: openIndex === i ? '1fr' : '0fr' }"
+          >
+            <div class="overflow-hidden">
+              <p class="px-6 pb-5 text-sm leading-relaxed text-slate-500">
+                {{ item.answer }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { hciOverviewCards } from "../../data/proxmox-content"
+</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">
+          HCI là gì?
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Proxmox HCI — Hạ tầng hội tụ
+          <span class="text-blue-600">dựa trên Proxmox VE</span>
+        </h2>
+        <p v-reveal="{ delay: 120 }" class="mt-5 leading-relaxed text-slate-600">
+          HCI (Hyper-Converged Infrastructure) hợp nhất compute, storage và network vào một platform phần mềm duy nhất — loại bỏ SAN riêng biệt, đơn giản hóa vận hành và giảm chi phí đáng kể.
+        </p>
+      </div>
+
+      <div class="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="(card, i) in hciOverviewCards"
+          :key="card.title"
+          v-reveal="{ delay: 100 + i * 70 }"
+          class="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"
+        >
+          <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
+            <ProxmoxAppIcon :name="card.icon" class="h-5 w-5" />
+          </span>
+          <p class="mt-4 font-semibold text-slate-900">{{ card.title }}</p>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">{{ card.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>