nuxt-layer-core 2.0.1

package/app/layers/solution/app/composables/useCookie.ts

@@ -0,0 +1,79 @@
+/**
+ * Extract root domain from hostname.
+ * e.g. "dev.longvan.net" → ".longvan.net"
+ *      "longvan.net"     → ".longvan.net"
+ *      "localhost"       → "localhost"
+ */
+function getCookieDomain(): string {
+  if (typeof window === 'undefined') return ''
+  const hostname = window.location.hostname
+
+  // localhost / IP → không set domain (browser tự xử lý)
+  if (hostname === 'localhost' || /^\d{1,3}(\.\d{1,3}){3}$/.test(hostname)) {
+    return hostname
+  }
+
+  const parts = hostname.split('.')
+  // Lấy 2 phần cuối (root domain): longvan.net, example.com, ...
+  if (parts.length >= 2) {
+    return '.' + parts.slice(-2).join('.')
+  }
+  return hostname
+}
+
+/**
+ * Cookie helper composable — set, get, delete cookies theo domain hiện tại.
+ *
+ * Usage:
+ *   const { setCookie, getCookie, deleteCookie } = useCookie()
+ *   setCookie('token', 'abc123', 7)       // expires in 7 days
+ *   getCookie('token')                     // → 'abc123'
+ *   deleteCookie('token')
+ */
+export function useCookie() {
+  /**
+   * Lưu cookie.
+   * @param key   - Tên cookie
+   * @param value - Giá trị cookie
+   * @param days  - Số ngày hết hạn (mặc định 365)
+   */
+  function setCookie(key: string, value: string, days = 365): void {
+    const date = new Date()
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    const domain = getCookieDomain()
+    const domainPart = domain ? `; domain=${domain}` : ''
+    document.cookie = `${key}=${encodeURIComponent(value)}; ${expires}; path=/${domainPart}`
+  }
+
+  /**
+   * Lấy giá trị cookie theo key.
+   * @param key - Tên cookie
+   * @returns Giá trị cookie hoặc null nếu không tìm thấy
+   */
+  function getCookie(key: string): string | null {
+    const name = key + '='
+    const decodedCookie = decodeURIComponent(document.cookie)
+    const cookies = decodedCookie.split(';')
+
+    for (let cookie of cookies) {
+      cookie = cookie.trim()
+      if (cookie.startsWith(name)) {
+        return cookie.substring(name.length)
+      }
+    }
+    return null
+  }
+
+  /**
+   * Xóa cookie theo key.
+   * @param key - Tên cookie cần xóa
+   */
+  function deleteCookie(key: string): void {
+    const domain = getCookieDomain()
+    const domainPart = domain ? `; domain=${domain}` : ''
+    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/${domainPart}`
+  }
+
+  return { setCookie, getCookie, deleteCookie }
+}

package/app/layers/solution/app/composables/useCookieHelper.ts

@@ -0,0 +1,81 @@
+/**
+ * Extract root domain from hostname.
+ * e.g. "dev.longvan.net" → ".longvan.net"
+ *      "longvan.net"     → ".longvan.net"
+ *      "localhost"       → "localhost"
+ */
+function getCookieDomain(): string {
+  if (typeof window === 'undefined') return ''
+  const hostname = window.location.hostname
+
+  // localhost / IP → không set domain (browser tự xử lý)
+  if (hostname === 'localhost' || /^\d{1,3}(\.\d{1,3}){3}$/.test(hostname)) {
+    return hostname
+  }
+
+  const parts = hostname.split('.')
+  // Lấy 2 phần cuối (root domain): longvan.net, example.com, ...
+  if (parts.length >= 2) {
+    return '.' + parts.slice(-2).join('.')
+  }
+  return hostname
+}
+
+/**
+ * Cookie helper composable — set, get, delete cookies theo domain hiện tại.
+ *
+ * Renamed from `useCookie` to avoid collision with Nuxt's built-in auto-import.
+ *
+ * Usage:
+ *   const { setCookie, getCookie, deleteCookie } = useCookieHelper()
+ *   setCookie('token', 'abc123', 7)       // expires in 7 days
+ *   getCookie('token')                     // → 'abc123'
+ *   deleteCookie('token')
+ */
+export function useCookieHelper() {
+  /**
+   * Lưu cookie.
+   * @param key   - Tên cookie
+   * @param value - Giá trị cookie
+   * @param days  - Số ngày hết hạn (mặc định 365)
+   */
+  function setCookie(key: string, value: string, days = 365): void {
+    const date = new Date()
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+    const expires = 'expires=' + date.toUTCString()
+    const domain = getCookieDomain()
+    const domainPart = domain ? `; domain=${domain}` : ''
+    document.cookie = `${key}=${encodeURIComponent(value)}; ${expires}; path=/${domainPart}`
+  }
+
+  /**
+   * Lấy giá trị cookie theo key.
+   * @param key - Tên cookie
+   * @returns Giá trị cookie hoặc null nếu không tìm thấy
+   */
+  function getCookie(key: string): string | null {
+    const name = key + '='
+    const decodedCookie = decodeURIComponent(document.cookie)
+    const cookies = decodedCookie.split(';')
+
+    for (let cookie of cookies) {
+      cookie = cookie.trim()
+      if (cookie.startsWith(name)) {
+        return cookie.substring(name.length)
+      }
+    }
+    return null
+  }
+
+  /**
+   * Xóa cookie theo key.
+   * @param key - Tên cookie cần xóa
+   */
+  function deleteCookie(key: string): void {
+    const domain = getCookieDomain()
+    const domainPart = domain ? `; domain=${domain}` : ''
+    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/${domainPart}`
+  }
+
+  return { setCookie, getCookie, deleteCookie }
+}

package/app/layers/solution/app/composables/useCrmApi.ts

@@ -0,0 +1,32 @@
+export const useCrmApi = () => {
+  const { $sdk } = useNuxtApp()
+
+  const addOpportunity = async (payload: {
+    name: string
+    description: string
+    referName: string
+    referPhone: string
+    referEmail: string
+    priorityName?: string
+    targetUrl?: string
+    extSource?: string
+    ownerId?: string
+  }) => {
+    const addOpportunityRequest = {
+      name: payload.name,
+      description: payload.description,
+      referName: payload.referName,
+      referPhone: payload.referPhone,
+      referEmail: payload.referEmail,
+      priorityName: payload.priorityName || 'MEDIUM',
+      targetId: '',
+      targetUrl: payload.targetUrl || '',
+      extSource: payload.extSource || '',
+      ownerId: payload.ownerId || '',
+    }
+
+    return $sdk.crm.addOpportunity(addOpportunityRequest, 'ANONYMOUS')
+  }
+
+  return { addOpportunity }
+}

package/app/layers/solution/app/composables/useDynamicCollection.ts

@@ -0,0 +1,23 @@
+export const useDynamicCollection = () => {
+    const { $sdk } = useNuxtApp()
+
+    const handleGetSlugPathView = (slug: string, type: string) => {
+        try {
+            const response = $sdk.dynamic_collection.getSlugPathView(slug, type);
+
+            if (response) {
+                return response
+            } else {
+                return null;
+            }
+
+        } catch (error) {
+            console.log("🚀 ~ handleGetSlugPathView ~ error:", error);
+            return null;
+        }
+    }
+
+    return {
+        handleGetSlugPathView
+    }
+}

package/app/layers/solution/app/composables/useScrollAnimate.ts

@@ -0,0 +1,40 @@
+const presets: Record<string, string> = {
+  'fade-up': 'opacity-0 translate-y-8',
+  'fade-in': 'opacity-0',
+  'slide-left': 'opacity-0 -translate-x-8',
+  'slide-right': 'opacity-0 translate-x-8',
+  'scale-up': 'opacity-0 scale-95',
+}
+
+export function useScrollAnimate(selector: string, animation = 'fade-up') {
+  onMounted(() => {
+    const els = document.querySelectorAll<HTMLElement>(selector)
+    if (!els.length) return
+
+    const base = 'transition-all duration-700 ease-out'
+    const initial = presets[animation] || presets['fade-up']
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const el = entry.target as HTMLElement
+            const delay = el.dataset.delay || '0'
+            el.style.transitionDelay = `${delay}ms`
+            el.classList.remove(...initial.split(' '))
+            el.classList.add('opacity-100', 'translate-y-0', 'translate-x-0', 'scale-100')
+            observer.unobserve(el)
+          }
+        }
+      },
+      { threshold: 0.1 }
+    )
+
+    els.forEach((el) => {
+      el.classList.add(...base.split(' '), ...initial.split(' '))
+      observer.observe(el)
+    })
+
+    onUnmounted(() => observer.disconnect())
+  })
+}

package/app/layers/solution/app/composables/useScrollToSection.ts

@@ -0,0 +1,13 @@
+export const useScrollToSection = () => {
+  const scrollTo = (id: string, behavior: ScrollBehavior = 'smooth') => {
+    if (!id) return
+    const el = document.getElementById(id)
+    if (el) {
+      el.scrollIntoView({ behavior })
+    }
+  }
+
+  return {
+    scrollTo,
+  }
+}

package/app/layers/solution/app/composables/useSolutionApi.ts

@@ -0,0 +1,55 @@
+export const useSolutionApi = () => {
+    const { $sdk } = useNuxtApp()
+    const { handleGetSlugPathView } = useDynamicCollection()
+
+    const getPublicProductDynamic = (categoryId: string) => {
+        return $sdk.marketplace.getPublicProductDynamic(categoryId, '', [
+            "supplierId",
+            "categoryId",
+            "storeChannel",
+            "productContent { resumeId resumeName resumeDesc }",
+            "product { partyId id title status }",
+            "slugPath { id slug basePath domain publicStatus type templateId contentId platform providerDomain profileId fullUrl url targetCTA }"
+        ])
+    }
+
+    const getResumeByIdData = (resumeId: string) => {
+        console.log("🚀 ~ getSolutionDetail ~ resumeId:", resumeId)
+        const data = $sdk.crm.getResumeById(resumeId, [
+            "resumeId",
+            "resumeName",
+            "status",
+            "statusCode",
+            "level",
+            "fieldResumes { fieldName value fieldType type children { fieldName value fieldType type children { fieldName value fieldType type children { fieldName value fieldType type } } } }"
+        ])
+        console.log("🚀 ~ getResumeByIdData ~ data:", data)
+
+        return data
+    }
+
+    const getSolutionDetail = async (slug: string, type: string) => {
+        const productData = await handleGetSlugPathView(slug, type)
+
+        if(productData.length > 0){
+            const getData = productData?.find((c:any)=> c.type == type) ?? productData?.[0];
+
+            // console.log("🚀 ~ getSolutionDetail ~ productData:", productData)
+            const resumeId = getData?.profileId
+            // console.log("🚀 ~ getSolutionDetail ~ resumeId:", resumeId)
+            if (!resumeId) return { productData, resumeData: null }
+            const resumeData = await getResumeByIdData(resumeId)
+            // console.log("🚀 ~ getSolutionDetail ~ resumeData:", resumeData)
+            return { productData, resumeData }
+        }else{
+            return { productData: null, resumeData: null }
+        }
+        
+    }
+
+    return {
+        getPublicProductDynamic,
+        getResumeByIdData,
+        getSolutionDetail,
+    }
+}

package/app/layers/solution/app/composables/useToast.ts

@@ -0,0 +1,14 @@
+import { toast } from 'vue-sonner'
+
+export function useToast() {
+  return {
+    success: (message: string) => toast.success(message),
+    error: (message: string) => toast.error(message),
+    info: (message: string) => toast.info(message),
+    warning: (message: string) => toast.warning(message),
+    promise: <T>(
+      promise: Promise<T>,
+      msgs: { loading: string; success: string | ((data: T) => string); error: string | ((err: unknown) => string) }
+    ) => toast.promise(promise, msgs),
+  }
+}

package/app/layers/solution/app/data/proxmox-content.ts

@@ -0,0 +1,158 @@
+// Toàn bộ nội dung trong file này là dữ liệu giả (mock data) dùng để dựng giao diện demo.
+
+export const heroStats = [
+  { value: "1.000+", label: "Doanh nghiệp tin dùng" },
+  { value: "50%", label: "Tiết kiệm chi phí bản quyền" },
+  { value: "99.99%", label: "Uptime đảm bảo (HA)" },
+  { value: "24/7", label: "Hỗ trợ kỹ thuật chuyên gia" }
+]
+
+export const veFeatureList = [
+  { icon: "cpu", text: "Quản lý VM (KVM) & Container (LXC)" },
+  { icon: "globe", text: "Giao diện web trực quan, dễ vận hành" },
+  { icon: "layers", text: "Snapshot, Backup & Restore tích hợp" },
+  { icon: "activity", text: "Monitoring tài nguyên theo thời gian thực" },
+  { icon: "share", text: "Software Defined Network (SDN)" },
+  { icon: "cluster", text: "Hỗ trợ cluster HA tự động failover" }
+]
+
+export const veFeatureCards = [
+  { icon: "cpu", title: "KVM Virtualization", desc: "Hiệu năng gần native" },
+  { icon: "database", title: "Ceph Storage", desc: "Lưu trữ phân tán HA" },
+  { icon: "share", title: "SDN / Networking", desc: "VLAN, VXLAN tích hợp" },
+  { icon: "shield", title: "Proxmox Backup", desc: "Dedup & incremental" },
+  { icon: "bolt", title: "HA Cluster", desc: "Failover tự động" },
+  { icon: "chart", title: "Monitoring", desc: "Real-time dashboard" }
+]
+
+export const hciOverviewCards = [
+  {
+    icon: "layers",
+    title: "Hợp nhất Compute – Storage – Network",
+    desc: "Tích hợp toàn bộ thành phần hạ tầng vào một platform duy nhất, giảm thiểu độ phức tạp vận hành."
+  },
+  {
+    icon: "database",
+    title: "Ceph Distributed Storage",
+    desc: "Lưu trữ phân tán hiệu năng cao với deduplication, không cần SAN/NAS riêng biệt."
+  },
+  {
+    icon: "share",
+    title: "Software Defined Network",
+    desc: "Quản lý VLAN, VXLAN, SDN ngay trong giao diện web Proxmox, không cần thiết bị mạng phức tạp."
+  },
+  {
+    icon: "shield",
+    title: "Backup & Disaster Recovery",
+    desc: "Proxmox Backup Server tích hợp incremental backup, khôi phục nhanh, tiết kiệm dung lượng."
+  },
+  {
+    icon: "bolt",
+    title: "High Availability Cluster",
+    desc: "Tự động failover khi node gặp sự cố, duy trì uptime 99.99% không gián đoạn dịch vụ."
+  },
+  {
+    icon: "trending",
+    title: "Mở rộng không giới hạn",
+    desc: "Thêm node mới vào cluster không gián đoạn hệ thống, scale linh hoạt theo nhu cầu doanh nghiệp."
+  }
+]
+
+export const trainingBenefits = [
+  {
+    icon: "book",
+    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."
+  },
+  {
+    icon: "users",
+    title: "Học từ chuyên gia thực chiến",
+    desc: "Tiếp thu kinh nghiệm 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: "layers",
+    title: "Thực hành Lab môi trường thật",
+    desc: "Trực tiếp thao tác và giải quyết tình huống giả lập sát với thực tế doanh nghiệp, không chỉ lý thuyết."
+  },
+  {
+    icon: "bolt",
+    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, xử lý sự cố chính xác và dứt điểm."
+  },
+  {
+    icon: "trending",
+    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 với cấp trên nhờ năng lực chuyên môn vượt trội."
+  },
+  {
+    icon: "award",
+    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 và sự đầu tư nghiêm túc."
+  }
+]
+
+export const comparisonRows = [
+  { label: "Hiệu suất", hci: "Vượt trội", legacy: "Đạt", legacyOk: true },
+  { label: "Chi phí ban đầu", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Triển khai ban đầu", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Mở rộng tài nguyên", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Quản lý & vận hành", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Quản lý ngân sách", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Uptime", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Sao lưu dự phòng", hci: "Vượt trội", legacy: "Hạn chế" },
+  { label: "Chuyển đổi mô hình", hci: "Vượt trội", legacy: "Hạn chế" }
+]
+
+export const testimonials = [
+  {
+    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.",
+    name: "Học viên",
+    role: "System Admin"
+  },
+  {
+    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.",
+    name: "Học viên",
+    role: "DevOps Engineer"
+  },
+  {
+    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.",
+    name: "Học viên",
+    role: "IT Manager"
+  }
+]
+
+export const faqItems = [
+  {
+    question: "Khóa học phù hợp với đối tượng nào?",
+    answer:
+      "Khóa học phù hợp với System Admin, DevOps Engineer, IT Manager và bất kỳ ai đang vận hành hạ tầng máy chủ, muốn chuyển đổi sang nền tảng ảo hóa mã nguồn mở tiết kiệm chi phí."
+  },
+  {
+    question: "Học xong có thể làm được gì ngay?",
+    answer:
+      "Bạn có thể tự triển khai cluster Proxmox HCI hoàn chỉnh với Ceph Storage, SDN và HA, đồng thời xử lý các sự cố vận hành thường gặp trong môi trường doanh nghiệp."
+  },
+  {
+    question: "Môi trường lab thực hành như thế nào?",
+    answer:
+      "Học viên được cấp quyền truy cập lab thật, mô phỏng sát hạ tầng doanh nghiệp thực tế, thao tác trực tiếp trên cluster nhiều node thay vì chỉ xem demo."
+  },
+  {
+    question: "Thời gian học và hình thức học?",
+    answer:
+      "Khóa học tổ chức linh hoạt cả online và offline, với lịch học buổi tối hoặc cuối tuần để phù hợp với người đang đi làm."
+  },
+  {
+    question: "Có hỗ trợ sau khi hoàn thành khóa học không?",
+    answer:
+      "Học viên được tham gia nhóm hỗ trợ kỹ thuật riêng, tư vấn thêm khi triển khai thực tế tại doanh nghiệp sau khi kết thúc khóa học."
+  },
+  {
+    question: "Tôi chưa biết nên chọn khóa nào?",
+    answer:
+      "Đặt lịch tư vấn miễn phí 15 phút, đội ngũ chuyên gia sẽ khảo sát hạ tầng hiện tại và đề xuất lộ trình học phù hợp nhất với bạn."
+  }
+]

package/app/layers/solution/app/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="layer-theme pt-16">
+        <slot />
+    </div>
+</template>

package/app/layers/solution/app/nuxt.config.ts

@@ -0,0 +1,9 @@
+export default defineNuxtConfig({
+    imports: {
+    dirs: [
+      "composables/**",
+      "services",
+      "types",
+    ],
+  },
+})