nuxt-layer-core 1.1.2 → 1.1.4

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

@@ -1,67 +1,67 @@
-<template>
-  <section id="giai-phap" class="py-24 bg-white">
-    <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">Lợi ích khóa học</h2>
-        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
-          Vì sao nên tham gia đào tạo Proxmox VE?
-        </h3>
-        <p class="text-slate-500 max-w-2xl mx-auto">
-          Đầu tư một lần vào đào tạo bài bản không chỉ giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng mà còn tạo bước đệm bứt phá trên con đường sự nghiệp.
-        </p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div
-          v-for="(item, i) in features"
-          :key="item.title"
-          :data-delay="i * 100"
-          class="feature-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
-        >
-          <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
-            <Icon :name="item.icon" />
-          </div>
-          <h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
-          <p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-useScrollAnimate('.feature-card', 'scale-up')
-
-const features = [
-  {
-    icon: 'lucide:server',
-    title: 'Làm chủ toàn diện Proxmox VE',
-    desc: 'Nắm vững trọn vẹn các khái niệm cốt lõi, từ triển khai ảo hóa cơ bản đến quản trị các tính năng cao cấp của nền tảng.'
-  },
-  {
-    icon: 'lucide:award',
-    title: 'Học từ chuyên gia thực chiến',
-    desc: 'Tiếp thu kinh nghiệm vận hành ảo hóa trực tiếp từ đội ngũ giảng viên được chứng nhận, đã xử lý hàng ngàn bài toán hệ thống.'
-  },
-  {
-    icon: 'lucide:monitor-play',
-    title: 'Thực hành Lab môi trường thật',
-    desc: 'Không chỉ học lý thuyết, bạn sẽ trực tiếp thao tác và giải quyết các tình huống giả lập sát với thực tế doanh nghiệp.'
-  },
-  {
-    icon: 'lucide:activity',
-    title: 'Troubleshooting thần tốc',
-    desc: 'Trang bị kỹ năng nhận diện "bệnh" hệ thống nhạy bén, giúp bạn xử lý sự cố chính xác và dứt điểm hơn bao giờ hết.'
-  },
-  {
-    icon: 'lucide:trending-up',
-    title: 'Thăng tiến & Khẳng định vị thế',
-    desc: 'Nâng tầm giá trị bản thân, tạo dựng sự tín nhiệm tuyệt đối với cấp trên, đồng nghiệp và đối tác nhờ năng lực chuyên môn vượt trội.'
-  },
-  {
-    icon: 'lucide:file-badge',
-    title: 'Chứng nhận chính quy',
-    desc: 'Nhận chứng chỉ hoàn thành khóa học danh giá, minh chứng rõ nét cho năng lực thực sự và sự đầu tư nghiêm túc của bạn.'
-  }
-]
+<template>
+  <section id="giai-phap" class="py-24 bg-white">
+    <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">Lợi ích khóa học</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
+          Vì sao nên tham gia đào tạo Proxmox VE?
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto">
+          Đầu tư một lần vào đào tạo bài bản không chỉ giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng mà còn tạo bước đệm bứt phá trên con đường sự nghiệp.
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="(item, i) in features"
+          :key="item.title"
+          :data-delay="i * 100"
+          class="feature-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
+        >
+          <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
+            <Icon :name="item.icon" />
+          </div>
+          <h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
+          <p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.feature-card', 'scale-up')
+
+const features = [
+  {
+    icon: 'lucide:server',
+    title: 'Làm chủ toàn diện Proxmox VE',
+    desc: 'Nắm vững trọn vẹn các khái niệm cốt lõi, từ triển khai ảo hóa cơ bản đến quản trị các tính năng cao cấp của nền tảng.'
+  },
+  {
+    icon: 'lucide:award',
+    title: 'Học từ chuyên gia thực chiến',
+    desc: 'Tiếp thu kinh nghiệm vận hành ảo hóa trực tiếp từ đội ngũ giảng viên được chứng nhận, đã xử lý hàng ngàn bài toán hệ thống.'
+  },
+  {
+    icon: 'lucide:monitor-play',
+    title: 'Thực hành Lab môi trường thật',
+    desc: 'Không chỉ học lý thuyết, bạn sẽ trực tiếp thao tác và giải quyết các tình huống giả lập sát với thực tế doanh nghiệp.'
+  },
+  {
+    icon: 'lucide:activity',
+    title: 'Troubleshooting thần tốc',
+    desc: 'Trang bị kỹ năng nhận diện "bệnh" hệ thống nhạy bén, giúp bạn xử lý sự cố chính xác và dứt điểm hơn bao giờ hết.'
+  },
+  {
+    icon: 'lucide:trending-up',
+    title: 'Thăng tiến & Khẳng định vị thế',
+    desc: 'Nâng tầm giá trị bản thân, tạo dựng sự tín nhiệm tuyệt đối với cấp trên, đồng nghiệp và đối tác nhờ năng lực chuyên môn vượt trội.'
+  },
+  {
+    icon: 'lucide:file-badge',
+    title: 'Chứng nhận chính quy',
+    desc: 'Nhận chứng chỉ hoàn thành khóa học danh giá, minh chứng rõ nét cho năng lực thực sự và sự đầu tư nghiêm túc của bạn.'
+  }
+]
 </script>

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

@@ -51,7 +51,7 @@
             DevOps phù hợp nhất — thay vì để bạn tự đoán.
           </p>
 
-          <div class="flex flex-wrap gap-4">
+          <div class="flex flex-wrap justify-center gap-4 lg:justify-start">
             <NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')"
               class="bg-white text-[#004AC6] px-7 py-3.5 rounded-[10px] font-bold flex items-center gap-2 hover:bg-blue-50 transition-colors shadow-lg active:scale-95">
               Đặt lịch tư vấn miễn phí
@@ -65,8 +65,8 @@
           </div>
         </div>
 
-        <!-- Right -->
-        <div class="relative flex justify-center">
+        <!-- Right: ẩn trên mobile/tablet để tiết kiệm chiều cao, chỉ hiện khi có đủ chỗ 2 cột -->
+        <div class="relative hidden justify-center lg:flex">
           <div class="relative z-10 rounded-2xl overflow-hidden">
             <!-- <NuxtImg src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
               alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" /> -->

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

@@ -15,7 +15,7 @@
       </div>
 
       <!-- Version cards -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mb-16">
         <button
           v-for="version in resolvedVersions"
           :key="version.id"
@@ -79,6 +79,13 @@
 
       <Transition name="fade-swap" mode="out-in">
         <div :key="activeVersionId" class="flex flex-col gap-14">
+          <div
+            v-if="activeVersion.groups.length === 0"
+            class="text-center text-slate-400 text-sm py-14 border border-dashed border-slate-200 rounded-2xl"
+          >
+            Chưa có gói dịch vụ nào được cấu hình cho phiên bản này.
+          </div>
+
           <div
             v-for="(group, gi) in activeVersion.groups"
             :key="group.id"
@@ -95,15 +102,18 @@
               </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div class="grid gap-6"
+              :class="group.packages.length === 1 ? 'grid-cols-1 justify-items-center' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'">
               <div
                 v-for="pkg in group.packages"
                 :key="pkg.id"
                 class="relative bg-white rounded-2xl flex flex-col overflow-hidden transition-all duration-300 ease-out"
-                :class="pkg.highlight
-                  ? 'ring-1 ring-[#004AC6]/15 shadow-[0_8px_30px_-6px_rgba(0,74,198,0.25)] hover:shadow-[0_20px_45px_-10px_rgba(0,74,198,0.35)] hover:-translate-y-1'
-                  : 'ring-1 ring-slate-200 shadow-[0_2px_10px_-2px_rgba(15,23,42,0.06)] hover:ring-blue-200 hover:shadow-[0_12px_30px_-8px_rgba(15,23,42,0.12)] hover:-translate-y-1'
-                  "
+                :class="[
+                  group.packages.length === 1 ? 'w-full max-w-sm' : '',
+                  pkg.highlight
+                    ? 'ring-1 ring-[#004AC6]/15 shadow-[0_8px_30px_-6px_rgba(0,74,198,0.25)] hover:shadow-[0_20px_45px_-10px_rgba(0,74,198,0.35)] hover:-translate-y-1'
+                    : 'ring-1 ring-slate-200 shadow-[0_2px_10px_-2px_rgba(15,23,42,0.06)] hover:ring-blue-200 hover:shadow-[0_12px_30px_-8px_rgba(15,23,42,0.12)] hover:-translate-y-1'
+                ]"
               >
                 <div
                   v-if="pkg.highlight"
@@ -121,7 +131,7 @@
 
                   <div class="pb-1">
                     <span class="font-['Montserrat'] font-extrabold text-xl text-slate-900">
-                      {{ formatPrice(pkg.price) }}đ
+                      {{ pkg.price }}
                     </span>
                     <span class="text-slate-400 text-sm">{{ pkg.unit }}</span>
                   </div>
@@ -158,7 +168,7 @@
                       : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
                       "
                   >
-                    Đăng ký ngay
+                    {{ pkg.titleButton || 'Đăng ký ngay' }}
                   </button>
                 </div>
               </div>
@@ -207,7 +217,12 @@ const normalizeGroup = (raw) => {
     name: raw.name,
     icon: raw.icon || 'lucide:server-cog',
     desc: raw.desc || '',
-    packages: Array.isArray(raw.packages) ? raw.packages : [],
+    // Chỉ 1 gói -> tự động highlight (không có gói khác để so sánh nên luôn là gói nổi bật)
+    packages: Array.isArray(raw.packages)
+      ? raw.packages.length === 1
+        ? [{ ...raw.packages[0], highlight: true }]
+        : raw.packages
+      : [],
   }
 }
 
@@ -283,10 +298,6 @@ function handleSelectPackage(pkg, group) {
   })
 }
 
-function formatPrice(value) {
-  if (!value && value !== 0) return ''
-  return new Intl.NumberFormat('vi-VN').format(value)
-}
 
 const sectionRoot = ref(null)
 const revealed = ref(false)