nuxt-layer-core 2.0.1

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

@@ -0,0 +1,434 @@
+<template>
+  <section id="goi-san-pham" ref="sectionRoot" class="py-24 bg-white overflow-hidden" :class="{ 'pricing-revealed': revealed }">
+    <div class="max-w-6xl mx-auto px-6 lg:px-8">
+      <div class="text-center mb-12 pricing-header">
+        <h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Gói sản phẩm</h2>
+        <h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-4xl text-slate-900 mb-4">
+          Chọn gói phù hợp<br class="hidden sm:block" />
+          với nhu cầu của bạn
+        </h3>
+        <p class="text-slate-500 max-w-2xl mx-auto leading-relaxed">
+          Thuê hạ tầng Proxmox HCI theo tháng, tham gia workshop 1 ngày hoặc chọn khóa đào tạo chuyên sâu. Chi phí
+          minh bạch, điều chỉnh theo yêu cầu riêng.
+        </p>
+
+        <div class="flex flex-wrap items-center justify-center gap-3 mt-8">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            type="button"
+            @click="activeTab = tab.id"
+            class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold transition-all duration-300 cursor-pointer"
+            :class="activeTab === tab.id
+              ? 'bg-[#004AC6] text-white shadow-lg shadow-blue-500/25 scale-[1.03]'
+              : 'bg-white text-slate-500 border border-slate-200 hover:border-blue-200 hover:text-[#004AC6]'
+              "
+          >
+            <Icon :name="tab.icon" class="w-4 h-4" />
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <Transition name="fade-swap" mode="out-in">
+          <p :key="activeTab" class="text-slate-400 text-sm max-w-xl mx-auto mt-5">
+            {{ activeTabData.intro }}
+          </p>
+        </Transition>
+      </div>
+
+      <Transition name="fade-swap" mode="out-in">
+        <div :key="activeTab">
+          <!-- Info cards: only for Proxmox HCI -->
+          <div v-if="activeTab === 'hci'" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
+            <div
+              v-for="(info, i) in hciInfoCards"
+              :key="info.title"
+              class="pricing-reveal bg-white rounded-2xl border border-slate-200 p-6 hover:border-blue-200 hover:shadow-lg transition-all duration-300"
+              :style="{ '--i': i }"
+            >
+              <div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-5 text-[#004AC6]">
+                <Icon :name="info.icon" class="w-5 h-5" />
+              </div>
+              <h4 class="font-bold text-slate-900 mb-2">{{ info.title }}</h4>
+              <p class="text-sm text-slate-500 leading-relaxed">{{ info.desc }}</p>
+            </div>
+          </div>
+
+          <!-- Billing period switch: only for Proxmox HCI -->
+          <div v-if="activeTab === 'hci'" class="flex flex-col items-center gap-4 mb-10">
+            <p class="text-slate-500 text-sm">Chọn kỳ hạn thuê, càng dài chi phí hàng tháng càng thấp</p>
+            <div class="inline-flex items-center gap-1 bg-white border border-slate-200 rounded-full p-1">
+              <button
+                v-for="period in billingPeriods"
+                :key="period.value"
+                type="button"
+                @click="activePeriod = period.value"
+                class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 cursor-pointer"
+                :class="activePeriod === period.value
+                  ? 'bg-[#004AC6] text-white shadow-md shadow-blue-500/25'
+                  : 'text-slate-500 hover:text-[#004AC6]'
+                  "
+              >
+                {{ period.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Pricing cards -->
+          <Transition name="fade-swap" mode="out-in">
+            <div :key="activeTab + '-' + activePeriod" class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+              <div
+                v-for="(plan, i) in activePlans"
+                :key="plan.name"
+                class="pricing-reveal group relative"
+                :style="{ '--i': i }"
+                :class="plan.highlight ? 'md:-mt-6' : 'md:mt-0'"
+              >
+                <div
+                  v-if="plan.highlight"
+                  class="absolute -inset-3 bg-gradient-to-br from-[#004AC6]/25 via-blue-400/15 to-transparent rounded-[28px] blur-2xl opacity-70 -z-10"
+                ></div>
+
+                <div
+                  class="relative bg-white rounded-2xl flex flex-col overflow-hidden h-full transition-all duration-300 ease-out"
+                  :class="plan.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="plan.highlight"
+                    class="bg-gradient-to-r from-[#004AC6] to-[#1D63E0] text-white text-[11px] font-bold py-2.5 text-center uppercase tracking-widest flex items-center justify-center gap-1.5"
+                  >
+                    <Icon name="lucide:star" class="w-3.5 h-3.5" />
+                    Được chọn nhiều nhất
+                  </div>
+
+                  <div class="p-7 flex flex-col gap-4">
+                    <div>
+                      <h4 class="font-bold text-xl text-slate-900 mb-2">{{ plan.name }}</h4>
+                      <p class="text-slate-500 text-sm leading-relaxed">{{ plan.desc }}</p>
+                    </div>
+
+                    <div class="pb-1">
+                      <span v-if="plan.contact" class="font-['Montserrat'] font-extrabold text-2xl text-[#004AC6]">
+                        Liên hệ
+                      </span>
+                      <template v-else>
+                        <span class="font-['Montserrat'] font-extrabold text-2xl sm:text-[28px] text-slate-900">
+                          {{ plan.priceLabel }}{{ formatPrice(plan.price) }}đ
+                        </span>
+                        <span class="text-slate-400 text-sm">{{ plan.unit }}</span>
+                      </template>
+                      <p class="text-slate-400 text-xs mt-1.5">{{ plan.priceNote }}</p>
+                    </div>
+
+                    <div class="flex flex-wrap gap-1.5">
+                      <span
+                        v-for="tag in plan.tags"
+                        :key="tag"
+                        class="text-[11px] font-medium text-slate-500 bg-slate-50 border border-slate-100 rounded-md px-2 py-1"
+                      >
+                        {{ tag }}
+                      </span>
+                    </div>
+
+                    <ul class="flex flex-col gap-2.5 pt-4 border-t border-slate-100">
+                      <li
+                        v-for="feature in plan.features"
+                        :key="feature"
+                        class="flex items-start gap-2 text-sm text-slate-600"
+                      >
+                        <Icon name="lucide:check" class="w-4 h-4 text-[#004AC6] mt-0.5 shrink-0" />
+                        {{ feature }}
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="p-7 pt-2 mt-auto">
+                    <button
+                      type="button"
+                      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'
+                        : 'border border-slate-200 text-slate-600 hover:border-[#004AC6] hover:text-[#004AC6] hover:bg-blue-50/50'
+                        "
+                    >
+                      {{ activeTabData.cta }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
+
+<script setup>
+useScrollAnimate('.pricing-header', 'fade-up')
+
+const sectionRoot = ref(null)
+const revealed = ref(false)
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          revealed.value = true
+          observer.disconnect()
+        }
+      }
+    },
+    { threshold: 0.15 }
+  )
+
+  if (sectionRoot.value) observer.observe(sectionRoot.value)
+  onUnmounted(() => observer.disconnect())
+})
+
+const activeTab = ref('hci')
+const activePeriod = ref(36)
+
+const tabs = [
+  { id: 'hci', label: 'Proxmox HCI', icon: 'lucide:server-cog' },
+  { id: 'workshop', label: 'Workshop 1 ngày', icon: 'lucide:zap' },
+  { id: 'training', label: 'Đào tạo Proxmox', icon: 'lucide:layers' },
+]
+
+const billingPeriods = [
+  { value: 12, label: 'Thuê 12 tháng' },
+  { value: 24, label: 'Thuê 24 tháng' },
+  { value: 36, label: 'Thuê 36 tháng' },
+]
+
+const hciInfoCards = [
+  {
+    icon: 'lucide:server',
+    title: 'Thuê trọn gói tại DC của chúng tôi',
+    desc: 'Cụm đặt tại trung tâm dữ liệu Tier III, gồm phần cứng, điện, mạng và vận hành. Bạn chỉ dùng và trả phí hàng tháng.',
+  },
+  {
+    icon: 'lucide:building-2',
+    title: 'Thuê phần cứng đặt tại doanh nghiệp',
+    desc: 'Chúng tôi mang thiết bị tới đặt tại phòng máy của bạn, triển khai và bảo hành. Dữ liệu nằm trong nội bộ, không cần đầu tư ban đầu.',
+  },
+  {
+    icon: 'lucide:refresh-cw',
+    title: 'Thuê linh hoạt theo node',
+    desc: 'Thêm hoặc bớt node theo từng tháng khi nhu cầu thay đổi. Có tùy chọn chuyển quyền sở hữu thiết bị khi hết hạn thuê.',
+  },
+]
+
+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.',
+    cta: 'Nhận báo giá',
+  },
+  workshop: {
+    intro: 'Workshop cài đặt & triển khai Proxmox HCI trong 1 ngày, thực hành 100% trên lab thật.',
+    cta: 'Đăng ký workshop',
+  },
+  training: {
+    intro: 'Khóa học do giảng viên được Proxmox chứng nhận đứng lớp, kèm chứng nhận hoàn thành.',
+    cta: 'Đăng ký khóa học',
+  },
+}
+
+const activeTabData = computed(() => tabContent[activeTab.value])
+
+const activePlans = computed(() => {
+  if (activeTab.value === 'workshop') return workshopPlans
+  if (activeTab.value === 'training') return trainingPlans
+
+  return hciPlans.map((plan) => ({
+    ...plan,
+    price: plan.prices?.[activePeriod.value],
+    priceNote: `Giá thuê khi ký hợp đồng ${activePeriod.value} tháng`,
+  }))
+})
+
+function formatPrice(value) {
+  if (!value && value !== 0) return ''
+  return new Intl.NumberFormat('vi-VN').format(value)
+}
+</script>
+
+<style scoped>
+.pricing-reveal {
+  animation: pricing-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: calc(var(--i, 0) * 110ms);
+  animation-play-state: paused;
+}
+
+.pricing-revealed .pricing-reveal {
+  animation-play-state: running;
+}
+
+@keyframes pricing-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-swap-enter-active,
+.fade-swap-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-swap-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.fade-swap-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+</style>