nuxt-layer-core 2.0.1 → 2.0.2

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

@@ -61,9 +61,19 @@
 
             <!-- Searchable dropdown -->
             <div class="space-y-1.5" ref="dropdownRef">
-              <label class="text-xs font-bold uppercase text-slate-500">
-                Khóa học quan tâm <span class="text-red-500">*</span>
-              </label>
+              <div class="flex items-center justify-between gap-2">
+                <label class="text-xs font-bold uppercase text-slate-500">
+                  Khóa học quan tâm <span class="text-red-500">*</span>
+                </label>
+                <button v-if="consultationRequest" type="button" @click="clearContext"
+                  class="flex items-center gap-1 text-[11px] font-medium text-[#004AC6] hover:underline cursor-pointer">
+                  <Icon name="lucide:x" class="w-3 h-3" />
+                  Xem tất cả
+                </button>
+              </div>
+              <p v-if="consultationRequest" class="text-[11px] text-slate-400 -mt-1">
+                Đã lọc theo mục bạn vừa chọn: {{ categoryLabels[consultationRequest.category] }}
+              </p>
               <div class="relative">
                 <div @click="toggleDropdown"
                   class="w-full px-4 py-3 border rounded-[10px] text-sm text-slate-900 cursor-pointer flex items-center justify-between transition-all"
@@ -145,6 +155,8 @@
 </template>
 
 <script setup>
+import { hciPlans, workshopPlans, trainingPlans } from '../data/pricingPlans'
+
 useScrollAnimate('.cta-card', 'scale-up')
 
 const props = defineProps({
@@ -152,6 +164,36 @@ const props = defineProps({
   selectedPlanId: { type: String, default: null },
 })
 
+const consultationRequest = useConsultationRequest()
+
+const categoryLabels = {
+  hci: 'Proxmox HCI',
+  workshop: 'Workshop 1 ngày',
+  training: 'Đào tạo Proxmox',
+}
+
+// Items relevant to whichever plan the visitor just picked in PricingPlansSection
+const contextPlans = computed(() => {
+  const category = consultationRequest.value?.category
+  if (category === 'hci') {
+    return hciPlans.map((p) => ({ id: p.id, name: p.name, level: 'Gói thuê hạ tầng', duration: p.unit, icon: 'lucide:server-cog' }))
+  }
+  if (category === 'workshop') {
+    return workshopPlans.map((p) => ({ id: p.id, name: p.name, level: 'Workshop', duration: p.tags?.[0] || '', icon: 'lucide:zap' }))
+  }
+  if (category === 'training') {
+    return trainingPlans.map((p) => ({ id: p.id, name: p.name, level: 'Khóa đào tạo', duration: p.tags?.[0] || '', icon: 'lucide:graduation-cap' }))
+  }
+  return null
+})
+
+function clearContext() {
+  consultationRequest.value = null
+  selectedCourse.value = null
+  touched.course = false
+  errors.course = ''
+}
+
 const { addOpportunity } = useCrmApi()
 
 // Format plans from resumeData (same logic as CoursesSection)
@@ -194,6 +236,8 @@ const formattedPlans = computed(() => {
   return result.length > 0 ? result : samplePlans
 })
 
+const dropdownPlans = computed(() => contextPlans.value || formattedPlans.value)
+
 // Form state
 const form = reactive({ name: '', phone: '', email: '' })
 const errors = reactive({ name: '', phone: '', email: '', course: '' })
@@ -219,11 +263,23 @@ watch(() => props.selectedPlanId, (id) => {
   }
 }, { immediate: true })
 
+// Auto-select + activate the item the visitor just picked in PricingPlansSection
+watch(consultationRequest, (request) => {
+  if (!request) return
+  const found = dropdownPlans.value.find(p => p.id === request.planId)
+    || dropdownPlans.value.find(p => p.name === request.planName)
+  if (found) {
+    selectedCourse.value = found
+    touched.course = true
+    errors.course = ''
+  }
+}, { immediate: true })
+
 // Search filter
 const filteredCourses = computed(() => {
-  if (!searchQuery.value) return formattedPlans.value
+  if (!searchQuery.value) return dropdownPlans.value
   const q = searchQuery.value.toLowerCase()
-  return formattedPlans.value.filter(p =>
+  return dropdownPlans.value.filter(p =>
     p.name.toLowerCase().includes(q) || p.level.toLowerCase().includes(q)
   )
 })

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

@@ -146,8 +146,24 @@
                   </div>
 
                   <div class="p-7 pt-2 mt-auto">
+                    <a
+                      v-if="plan.url"
+                      :href="plan.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="w-full py-3.5 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer inline-flex items-center justify-center gap-2"
+                      :class="plan.highlight
+                        ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 hover:bg-[#1D4ED8] hover:shadow-blue-500/40'
+                        : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
+                        "
+                    >
+                      Đăng ký ngay
+                      <Icon name="lucide:arrow-up-right" class="w-4 h-4" />
+                    </a>
                     <button
+                      v-else
                       type="button"
+                      @click="handleContactClick(plan)"
                       class="w-full py-3.5 rounded-xl font-bold text-sm transition-all duration-300 cursor-pointer"
                       :class="plan.highlight
                         ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 hover:bg-[#1D4ED8] hover:shadow-blue-500/40'
@@ -168,8 +184,22 @@
 </template>
 
 <script setup>
+import { hciPlans, workshopPlans, trainingPlans } from '../data/pricingPlans'
+
 useScrollAnimate('.pricing-header', 'fade-up')
 
+const { scrollTo } = useScrollToSection()
+const consultationRequest = useConsultationRequest()
+
+function handleContactClick(plan) {
+  consultationRequest.value = {
+    category: activeTab.value,
+    planId: plan.id,
+    planName: plan.name,
+  }
+  scrollTo('lien-he')
+}
+
 const sectionRoot = ref(null)
 const revealed = ref(false)
 
@@ -223,144 +253,6 @@ const hciInfoCards = [
   },
 ]
 
-const hciPlans = [
-  {
-    name: 'HCI Starter',
-    desc: 'Cụm 3 node cho doanh nghiệp vừa và nhỏ',
-    unit: '/tháng',
-    priceLabel: '',
-    prices: { 12: 14900000, 24: 11900000, 36: 9900000 },
-    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,
-  },
-  {
-    name: 'HCI Pro',
-    desc: 'Cụm mở rộng cho hệ thống production',
-    unit: '/tháng',
-    priceLabel: '',
-    prices: { 12: 27900000, 24: 23900000, 36: 20900000 },
-    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,
-  },
-  {
-    name: 'HCI Datacenter',
-    desc: 'Đa site, khôi phục thảm họa',
-    unit: '',
-    contact: true,
-    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,
-  },
-]
-
-const workshopPlans = [
-  {
-    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,
-  },
-  {
-    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,
-  },
-  {
-    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,
-  },
-]
-
-const trainingPlans = [
-  {
-    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,
-  },
-  {
-    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,
-  },
-  {
-    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,
-  },
-]
-
 const tabContent = {
   hci: {
     intro: 'Thuê cụm siêu hội tụ theo tháng: không đầu tư ban đầu, đã bao gồm phần cứng, triển khai Ceph, HA và đội ngũ vận hành.',

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/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/package.json

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