nuxt-layer-core 2.0.1

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

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+const props = defineProps<{
+  plans: Array<{
+    id: string
+    name: string
+    level: string
+    duration: string
+    icon: string
+  }>
+  selectedPlanId?: string
+}>()
+
+const { addOpportunity } = useCrmApi()
+
+// Form state
+const selectedCourseId = ref(props.selectedPlanId || '')
+const form = reactive({ name: '', phone: '', email: '', note: '' })
+const studyMode = ref('online')
+const errors = reactive({ name: '', phone: '', email: '', course: '' })
+const touched = reactive({ name: false, phone: false, email: false, course: false })
+const submitting = ref(false)
+const submitSuccess = ref(false)
+
+// Auto-select first plan if none selected
+watch(() => props.plans, (list: any) => {
+  if (!selectedCourseId.value && list.length > 0) {
+    selectedCourseId.value = list[0].id
+  }
+}, { immediate: true })
+
+// Sync when selectedPlanId prop changes
+watch(() => props.selectedPlanId, (id) => {
+  if (id) selectedCourseId.value = id
+})
+
+const selectedPlan = computed(() => props.plans.find((p) => p.id === selectedCourseId.value))
+
+// Validation
+function touch(field: keyof typeof touched) {
+  touched[field] = true
+  validateField(field)
+}
+
+function validateField(field: keyof typeof touched) {
+  if (field === 'name') {
+    if (!form.name) errors.name = 'Vui lòng nhập họ tên'
+    else if (form.name.length < 2) errors.name = 'Họ tên phải có ít nhất 2 ký tự'
+    else errors.name = ''
+  }
+  if (field === 'phone') {
+    if (!form.phone) errors.phone = 'Vui lòng nhập số điện thoại'
+    else if (!/^(0|\+84)\d{9,10}$/.test(form.phone.replace(/\s/g, ''))) errors.phone = 'Số điện thoại không hợp lệ'
+    else errors.phone = ''
+  }
+  if (field === 'email') {
+    if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errors.email = 'Email không hợp lệ'
+    else errors.email = ''
+  }
+  if (field === 'course') {
+    if (!selectedCourseId.value) errors.course = 'Vui lòng chọn khóa học'
+    else errors.course = ''
+  }
+}
+
+function formatLevel(level?: string) {
+  const labels: Record<string, string> = {
+    basic: 'Cơ bản',
+    advanced: 'Nâng cao',
+    expert: 'Chuyên gia',
+  }
+
+  return labels[level || ''] || level || ''
+}
+
+function validateAll() {
+  ; (['name', 'phone', 'email', 'course'] as const).forEach((f) => {
+    touched[f] = true
+    validateField(f)
+  })
+  return !errors.name && !errors.phone && !errors.email && !errors.course
+}
+
+// Submit
+async function handleSubmit() {
+  if (!validateAll()) return
+  submitting.value = true
+  submitSuccess.value = false
+
+  try {
+    const hostname = window.location.origin
+    const studyModeLabel =
+      studyMode.value === 'online'
+        ? 'Học trực tuyến (Online)'
+        : studyMode.value === 'offline'
+          ? 'Học tại lớp (Offline)'
+          : 'Đào tạo doanh nghiệp'
+
+    const levelLabel =
+      selectedPlan.value?.level === 'basic'
+        ? 'Cơ bản'
+        : selectedPlan.value?.level === 'advanced'
+          ? 'Nâng cao'
+          : selectedPlan.value?.level === 'expert'
+            ? 'Chuyên gia'
+            : selectedPlan.value?.level || ''
+
+
+    const description = [
+      `<strong>Khóa học:</strong> ${selectedPlan.value?.name || ''}`,
+      `<strong>Trình độ:</strong> ${levelLabel}`,
+      `<strong>Thời lượng:</strong> ${selectedPlan.value?.duration || ''}`,
+      `<strong>Hình thức học:</strong> ${studyModeLabel}`,
+      `<strong>Họ và tên:</strong> ${form.name}`,
+      `<strong>Số điện thoại:</strong> ${form.phone}`,
+      `<strong>Email:</strong> ${form.email || 'Không cung cấp'}`,
+      `<strong>Ghi chú:</strong> ${form.note || 'Không có'}`,
+    ].join('<br>')
+
+    await addOpportunity({
+      name: `Yêu cầu đăng ký khóa học ${selectedPlan.value?.name}`,
+      description: description,
+      referName: form.name,
+      referPhone: form.phone,
+      referEmail: form.email,
+      targetUrl: `${hostname}${window.location.pathname}`,
+      extSource: 'WEBSITE',
+    })
+    submitSuccess.value = true
+
+    setTimeout(() => {
+      submitSuccess.value = false
+    }, 2000)
+    form.name = ''
+    form.phone = ''
+    form.email = ''
+    form.note = ''
+    Object.keys(touched).forEach((k) => (touched[k as keyof typeof touched] = false))
+  } catch (err) {
+    console.error('Error submitting registration:', err)
+    errors.name = 'Gửi đăng ký thất bại, vui lòng thử lại.'
+    touched.name = true
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="rounded-2xl border border-[#e7e9f0] bg-white p-8">
+    <h2 class="mb-5 text-[17px] font-bold text-slate-900">Thông tin đăng ký</h2>
+
+    <form @submit.prevent="handleSubmit">
+      <!-- Course selection -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Chọn khóa học</label>
+        <div class="flex flex-col gap-[10px]">
+          <label v-for="course in plans" :key="course.id"
+            class="relative flex cursor-pointer items-center gap-3 rounded-[10px] border px-4 py-[14px] transition-colors"
+            :class="selectedCourseId === course.id ? 'border-[#2f5fe0] bg-[#eef3ff]' : 'border-[#e2e5ee] bg-white'">
+            <input type="radio" name="course" class="absolute h-0 w-0 opacity-0" :value="course.id"
+              v-model="selectedCourseId" @change="touch('course')">
+            <span class="relative h-[18px] w-[18px] flex-none rounded-[10px] border-2 transition-colors"
+              :class="selectedCourseId === course.id ? 'border-[#2f5fe0]' : 'border-[#cbd2e1]'">
+              <span v-if="selectedCourseId === course.id" class="absolute inset-[3px] rounded-[10px] bg-[#2f5fe0]" />
+            </span>
+            <span class="flex flex-col gap-[2px]">
+              <span class="text-sm font-semibold text-slate-900">{{ course.name }}</span>
+              <span class="text-[12.5px] text-gray-500">{{ formatLevel(course.level) }} · {{ course.duration }}</span>
+            </span>
+          </label>
+        </div>
+        <p v-if="touched.course && errors.course" class="mt-1 text-[12px] text-red-500">{{ errors.course }}</p>
+      </div>
+
+      <!-- Name & Phone -->
+      <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="fullname">Họ và tên</label>
+          <input id="fullname" v-model="form.name" type="text"
+            class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+            :class="touched.name && errors.name ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+            placeholder="Nguyễn Văn A" @blur="touch('name')">
+          <p v-if="touched.name && errors.name" class="mt-1 text-[12px] text-red-500">{{ errors.name }}</p>
+        </div>
+        <div>
+          <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="phone">Số điện thoại</label>
+          <input id="phone" v-model="form.phone" type="tel"
+            class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+            :class="touched.phone && errors.phone ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+            placeholder="0912 345 678" @blur="touch('phone')">
+          <p v-if="touched.phone && errors.phone" class="mt-1 text-[12px] text-red-500">{{ errors.phone }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="email">Email</label>
+        <input id="email" v-model="form.email" type="email"
+          class="w-full rounded-[10px] border px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:outline-none focus:ring-[3px]"
+          :class="touched.email && errors.email ? 'border-red-400 focus:border-red-400 focus:ring-red-400/15' : 'border-[#e2e5ee] focus:border-[#2f5fe0] focus:ring-[#2f5fe0]/15'"
+          placeholder="example@congty.vn" @blur="touch('email')">
+        <p v-if="touched.email && errors.email" class="mt-1 text-[12px] text-red-500">{{ errors.email }}</p>
+      </div>
+
+      <!-- Study mode -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Hình thức học</label>
+        <div class="flex flex-wrap gap-[10px]">
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'online' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'online'">
+            Học trực tuyến (Online)
+          </button>
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'offline' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'offline'">
+            Học tại lớp (Offline)
+          </button>
+          <button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
+            :class="studyMode === 'enterprise' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
+            @click="studyMode = 'enterprise'">
+            Đào tạo doanh nghiệp
+          </button>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="mb-5">
+        <label class="mb-[10px] block text-[13px] font-semibold text-gray-700" for="note">Ghi chú (tùy chọn)</label>
+        <textarea id="note" v-model="form.note" rows="3"
+          class="w-full min-h-[84px] resize-y rounded-[10px] border border-[#e2e5ee] bg-[#fafafb] px-[14px] py-[11px] text-sm text-slate-900 placeholder:text-gray-400 focus:border-[#2f5fe0] focus:outline-none focus:ring-[3px] focus:ring-[#2f5fe0]/15"
+          placeholder="Kinh nghiệm hiện tại, mục tiêu học tập..." />
+      </div>
+
+      <!-- Submit -->
+      <button type="submit" :disabled="submitting"
+        class="flex w-full items-center justify-center gap-2 rounded-[10px] bg-[#2f5fe0] px-5 py-[13px] text-[14.5px] font-semibold text-white transition-colors hover:bg-[#274ec2] disabled:opacity-60">
+        <span v-if="submitting">Đang gửi...</span>
+        <template v-else>
+          Gửi đăng ký
+          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
+        </template>
+      </button>
+    </form>
+
+    <!-- Success message -->
+    <div v-if="submitSuccess"
+      class="mb-5 mt-5 rounded-[10px] border border-green-200 bg-green-50 p-4 text-sm text-green-700">
+      Đăng ký thành công! Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất.
+    </div>
+  </section>
+</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,189 @@
+<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">
+        <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/${slug}#${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/${slug}#${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/${slug}#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"
+          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>
+      </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: `/giai-phap-proxmox/${props.slug}/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()
+
+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>