nuxt-layer-core 1.0.1

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { heroStats } from "../../data/proxmox-content"
+const { scrollTo } = useScrollToSection()
+</script>
+
+<template>
+  <section id="san-pham" class="relative overflow-hidden bg-gradient-to-b from-blue-50/60 via-white to-white">
+    <div
+      class="bg-grid pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_60%_60%_at_50%_0%,black,transparent)]" />
+
+    <div class="relative mx-auto max-w-7xl px-6 pt-20 pb-16 sm:pt-28 sm:pb-24 lg:px-8">
+      <div class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-12">
+        <!-- Left: copy -->
+        <div>
+          <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">
+            Giải pháp Hạ tầng Siêu hội tụ hàng đầu
+          </div>
+
+          <h1 v-reveal="{ delay: 80 }"
+            class="mt-6 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl lg:text-[3.4rem] lg:leading-[1.1]">
+            Proxmox HCI —
+            <span class="block text-blue-600">Hạ tầng siêu hội tụ</span>
+            toàn diện
+          </h1>
+
+          <p v-reveal="{ delay: 160 }" class="mt-6 max-w-xl text-lg leading-relaxed text-slate-600">
+            Tích hợp KVM, Ceph Storage, SDN và HA Cluster vào một nền tảng duy nhất. Giải pháp hoàn hảo giúp doanh
+            nghiệp tối ưu chi phí, nâng cao hiệu suất và đảm bảo tính sẵn sàng cao.
+          </p>
+
+          <a v-reveal="{ delay: 220 }" href="#lien-he" @click.prevent="scrollTo('lien-he')"
+            class="mt-5 inline-flex items-center gap-2 text-[15px] font-medium text-blue-600 hover:text-blue-700">
+            <ProxmoxAppIcon name="calendar" class="h-4 w-4" />
+            Triển khai dễ dàng, mở rộng linh hoạt. Nhận tư vấn giải pháp từ chuyên gia Long Vân.
+          </a>
+
+          <div v-reveal="{ delay: 280 }" class="mt-8 flex flex-wrap items-center gap-4">
+            <a href="#lien-he" @click.prevent="scrollTo('lien-he')"
+              class="inline-flex items-center gap-2 rounded-[10px] bg-blue-600 px-6 py-3.5 text-[15px] font-semibold text-white shadow-sm shadow-blue-600/20 transition hover:bg-blue-700">
+              Nhận tư vấn triển khai
+              <ProxmoxAppIcon name="arrowRight" class="h-4 w-4" />
+            </a>
+
+          </div>
+
+          <dl class="mt-9 grid grid-cols-2 border-t border-slate-200 pt-6 sm:grid-cols-4">
+            <div v-for="(stat, i) in heroStats" :key="stat.label" class="px-3 first:pl-0 sm:px-5" :class="[
+              i === 2 ? 'mt-6 sm:mt-0' : '',
+              i === 3 ? 'mt-6 sm:mt-0' : '',
+              i > 0 ? 'sm:border-l sm:border-slate-200' : ''
+            ]">
+              <dt class="text-2xl font-extrabold tracking-tight text-slate-900">
+                {{ stat.value }}
+              </dt>
+
+              <dd class="mt-1 max-w-[110px] text-xs leading-5 text-slate-500">
+                {{ stat.label }}
+              </dd>
+            </div>
+          </dl>
+        </div>
+
+        <!-- Right: image with floating cards -->
+        <div v-reveal="{ type: 'right', delay: 160 }" class="relative flex h-full items-center">
+          <div class="w-full overflow-hidden rounded-3xl shadow-2xl shadow-blue-900/10 ring-1 ring-black/5">
+            <img src="../../images/Proxmox HCI.png" alt="Datacenter server racks"
+              class="block h-auto w-full object-contain" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/app/layers/solution/app/components/proxmox/TestimonialsSection.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { testimonials } from "../../data/proxmox-content"
+</script>
+
+<template>
+  <section id="khach-hang" class="bg-white py-20 sm:py-28">
+    <div class="mx-auto max-w-6xl px-6 lg:px-8">
+      <div class="mx-auto max-w-3xl 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">
+          Học viên nói gì
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Được tư vấn đúng khóa,
+          <span class="text-blue-600">học đúng thứ cần dùng</span>
+        </h2>
+      </div>
+
+      <div class="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <figure
+          v-for="(t, i) in testimonials"
+          :key="t.name + i"
+          v-reveal="{ delay: 100 + i * 90 }"
+          class="rounded-2xl border border-slate-200 bg-white p-7"
+        >
+          <div class="flex gap-0.5 text-amber-400">
+            <ProxmoxAppIcon v-for="n in 5" :key="n" name="star" class="h-4 w-4 fill-current" />
+          </div>
+          <blockquote class="mt-4 text-[15px] italic leading-relaxed text-slate-600">
+            “{{ t.quote }}”
+          </blockquote>
+          <figcaption class="mt-6 flex items-center gap-3 border-t border-slate-100 pt-5">
+            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-bold text-blue-600">
+              HV
+            </span>
+            <div class="text-sm">
+              <p class="font-semibold text-slate-900">{{ t.name }}</p>
+              <p class="text-slate-500">{{ t.role }}</p>
+            </div>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+  </section>
+</template>

package/app/layers/solution/app/components/proxmox/TrainingBenefitsSection.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { trainingBenefits } from "../../data/proxmox-content"
+</script>
+
+<template>
+  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+    <div class="mx-auto max-w-6xl px-6 lg:px-8">
+      <div class="mx-auto max-w-3xl 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">
+          Lợi ích đào tạo
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Vì sao nên tham gia
+          <span class="text-blue-600">đào tạo Proxmox VE?</span>
+        </h2>
+        <p v-reveal="{ delay: 120 }" class="mt-5 leading-relaxed text-slate-600">
+          Đầu tư một lần vào đào tạo bài bản giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng và tạo bước đệm bứt phá trên con đường sự nghiệp.
+        </p>
+      </div>
+
+      <div class="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="(item, i) in trainingBenefits"
+          :key="item.title"
+          v-reveal="{ delay: 100 + i * 70 }"
+          class="rounded-2xl border border-slate-200 bg-white p-7 transition hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg hover:shadow-blue-900/5"
+        >
+          <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
+            <ProxmoxAppIcon :name="item.icon" class="h-5 w-5" />
+          </span>
+          <p class="mt-4 font-semibold text-slate-900">{{ item.title }}</p>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">{{ item.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/app/layers/solution/app/components/proxmox/VeFeaturesSection.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { veFeatureList, veFeatureCards } from "../../data/proxmox-content"
+</script>
+
+<template>
+  <section id="giai-phap" class="bg-white mx-auto max-w-7xl px-6 py-20 sm:py-28 lg:px-8">
+    <div class="grid grid-cols-1 items-start gap-16 lg:grid-cols-2">
+      <!-- Left copy -->
+      <div>
+        <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">
+          Nền tảng ảo hóa
+        </div>
+
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl sm:leading-tight">
+          Proxmox VE — Nền tảng ảo hóa
+          <span class="text-blue-600">hàng đầu thế giới</span>
+        </h2>
+
+        <p v-reveal="{ delay: 120 }" class="mt-5 leading-relaxed text-slate-600">
+          Proxmox VE là nền tảng ảo hóa mã nguồn mở mạnh mẽ, cho phép doanh nghiệp triển khai và quản lý VM & Container tập trung trên một giao diện web duy nhất. Được hàng nghìn doanh nghiệp toàn cầu tin dùng thay thế VMware vSphere với chi phí gần như bằng 0.
+        </p>
+
+        <ul class="mt-7 space-y-4">
+          <li
+            v-for="(item, i) in veFeatureList"
+            :key="item.text"
+            v-reveal="{ delay: 160 + i * 60 }"
+            class="flex items-center gap-3"
+          >
+            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
+              <ProxmoxAppIcon :name="item.icon" class="h-4 w-4" />
+            </span>
+            <span class="text-[15px] text-slate-700">{{ item.text }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Right card grid -->
+      <div class="grid grid-cols-2 gap-5">
+        <div
+          v-for="(card, i) in veFeatureCards"
+          :key="card.title"
+          v-reveal="{ type: 'scale', delay: 100 + i * 70 }"
+          class="rounded-2xl border border-slate-200 bg-slate-50/60 p-6 transition hover:-translate-y-1 hover:border-blue-200 hover:bg-white hover:shadow-lg hover:shadow-blue-900/5"
+        >
+          <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-white text-blue-600 shadow-sm ring-1 ring-slate-200">
+            <ProxmoxAppIcon :name="card.icon" class="h-5 w-5" />
+          </span>
+          <p class="mt-4 font-semibold text-slate-900">{{ card.title }}</p>
+          <p class="mt-1 text-sm text-slate-500">{{ card.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,47 @@
+export function useActiveSection(sectionIds: string[]) {
+  const activeSection = ref(sectionIds[0] || '')
+
+  onMounted(() => {
+    const sections = sectionIds
+      .map(id => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[]
+
+    if (!sections.length) return
+
+    function update() {
+      let maxVisibleHeight = 0
+      let maxId = activeSection.value
+
+      const viewportHeight = window.innerHeight
+
+      for (let i = 0; i < sections.length; i++) {
+        const el = sections[i]
+        const rect = el.getBoundingClientRect()
+        
+        const visibleTop = Math.max(0, rect.top)
+        const visibleBottom = Math.min(viewportHeight, rect.bottom)
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop)
+
+        if (visibleHeight > maxVisibleHeight) {
+          maxVisibleHeight = visibleHeight
+          maxId = el.id
+        }
+      }
+
+      if (window.scrollY < 50 && sections[0]) {
+         activeSection.value = sections[0].id
+         return
+      }
+
+      if (maxVisibleHeight > 0) {
+        activeSection.value = maxId
+      }
+    }
+
+    update()
+    window.addEventListener('scroll', update, { passive: true })
+    onUnmounted(() => window.removeEventListener('scroll', update))
+  })
+
+  return activeSection
+}

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

@@ -0,0 +1,244 @@
+export const useAuthApi = () => {
+    const { $sdk } = useNuxtApp()
+
+    // ==========================
+    // LOGIN / REGISTER
+    // ==========================
+
+    const login = (data: {
+        username: string
+        password: string
+        type?: string
+        otpCode?: string
+    }) => {
+        return $sdk.auth.login(data)
+    }
+
+    const register = (data: {
+        username: string
+        fullName: string
+    }) => {
+        return $sdk.auth.register(data as any)
+    }
+
+    const logout = (accessToken: string, partyId: string) => {
+        return $sdk.auth.logout(accessToken, partyId)
+    }
+
+    const getUserByToken = (token: string) => {
+        return $sdk.auth.getUserDetail(token)
+    }
+
+    const getUserLoginByToken = (token: string) => {
+        return $sdk.auth.getUserLoginByToken(token)
+    }
+
+    const updateInfo = (
+        accessToken: string,
+        updateUserRequest: { fullName: string; phone: string; email?: string },
+        type: string,
+        password: string
+    ) => {
+        return $sdk.auth.updateInfo(accessToken, updateUserRequest, type, password)
+    }
+
+    const getAccessTokenByOTP = (
+        code: string,
+        phone: string,
+        method: string
+    ) => {
+        return $sdk.auth.getAccessTokenByOTP(code, phone, method)
+    }
+
+    // ==========================
+    // USER LOGIN
+    // ==========================
+
+    const getUserLoginByUserLoginId = (userLoginId: string) => {
+        return $sdk.auth.getUserLoginByUserLoginId(userLoginId)
+    }
+
+    const checkUsernameExisted = (username: string) => {
+        return $sdk.auth.checkUsernameExisted(username)
+    }
+
+    const createUserLogin = (phone: string) => {
+        return $sdk.auth.createUserLogin(phone)
+    }
+
+    const linkingUserLoginAndUserDetail = (
+        userLoginId: string,
+        partyId: string
+    ) => {
+        return $sdk.auth.linkingUserLoginAndUserDetail(
+            userLoginId,
+            partyId
+        )
+    }
+
+    const createUserDetail = (userLoginId: string) => {
+        return $sdk.auth.createUserDetail(userLoginId)
+    }
+
+    // ==========================
+    // OTP
+    // ==========================
+
+    const sendOTP = (
+        phone: string,
+        method: "sms" | "zalo"
+    ) => {
+        return $sdk.auth.sendOTP(phone, method)
+    }
+
+    const validateOTP = (
+        code: string,
+        phone: string,
+        method: string
+    ) => {
+        return $sdk.auth.validateOTP(code, phone, method)
+    }
+
+    // ==========================
+    // RESET PASSWORD
+    // ==========================
+
+    const createResetKey = (userLoginId: string) => {
+        return $sdk.auth.createResetKey(userLoginId)
+    }
+
+    const checkResetKey = (key: string) => {
+        return $sdk.auth.checkResetKey(key)
+    }
+
+    const resetPassword = (
+        username: string,
+        newPassword: string,
+        accessToken: string
+    ) => {
+        return $sdk.auth.resetPassword(username, newPassword, accessToken)
+    }
+
+    // ==========================
+    // USER
+    // ==========================
+
+    const updateCustomer = (
+        partyId: string,
+        body: any,
+        updatedBy: string
+    ) => {
+        return $sdk.user.updateCustomer(
+            partyId,
+            body,
+            updatedBy
+        )
+    }
+
+    const updateProfile = (
+        userLoginId: string,
+        fullName: string,
+        phone: string,
+        email: string
+    ) => {
+        return $sdk.auth.updateProfile(
+            userLoginId,
+            fullName,
+            phone,
+            email
+        )
+    }
+
+    const getPhoneByPartyId = (partyId: string) => {
+        return $sdk.auth.getPhoneByPartyId(partyId)
+    }
+
+    // ==========================
+    // SOCIAL LOGIN
+    // ==========================
+
+    const loginGoogle = (redirectUrl: string, redirectUrlError: string, serviceOperator: string, appId: string, deviceId: string) => {
+        return $sdk.auth.loginGoogle(redirectUrl, redirectUrlError, serviceOperator, appId, deviceId)
+    }
+
+    const loginFacebook = (redirectUrl: string, redirectUrlError: string, serviceOperator: string, appId: string, deviceId: string) => {
+        return $sdk.auth.loginFacebook(redirectUrl, redirectUrlError, serviceOperator, appId, deviceId)
+    }
+
+    const loginZalo = (redirectUrl: string, redirectUrlError: string, serviceOperator: string, appId: string, deviceId: string) => {
+        return $sdk.auth.loginZalo(redirectUrl, redirectUrlError, serviceOperator, appId, deviceId)
+    }
+
+    // ==========================
+    // ORDER
+    // ==========================
+
+    const setOrderToken = (token: string) => {
+        return $sdk.order.setToken(token)
+    }
+
+    const findCampaignActionGiftVoucher = () => {
+        return $sdk.order.findCampaignActionGiftVoucher()
+    }
+
+    // ==========================
+    // CRM CAMPAIGN
+    // ==========================
+
+    const setCampaignToken = (token: string) => {
+        return $sdk.crm_camping.setToken(token)
+    }
+
+    const addCustomerToVoucher = (
+        userId: string,
+        voucherCode: string
+    ) => {
+        return $sdk.crm_camping.addCustomerToVoucher(
+            userId,
+            voucherCode
+        )
+    }
+
+    return {
+        // login / register
+        login,
+        register,
+        logout,
+        getUserByToken,
+        getUserLoginByToken,
+        updateInfo,
+        getAccessTokenByOTP,
+
+        // user login
+        getUserLoginByUserLoginId,
+        checkUsernameExisted,
+        createUserLogin,
+        linkingUserLoginAndUserDetail,
+        createUserDetail,
+
+        // otp
+        sendOTP,
+        validateOTP,
+
+        // reset
+        createResetKey,
+        checkResetKey,
+        resetPassword,
+
+        // user
+        updateCustomer,
+        updateProfile,
+        getPhoneByPartyId,
+
+        // social
+        loginGoogle,
+        loginFacebook,
+        loginZalo,
+
+        // voucher
+        setOrderToken,
+        findCampaignActionGiftVoucher,
+        setCampaignToken,
+        addCustomerToVoucher,
+    }
+}

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

@@ -0,0 +1,16 @@
+export const useAuthState = () => {
+    const isLoggedIn = useState('auth-logged-in', () => false)
+    const userName = useState('auth-user-name', () => '')
+
+    function setUser(name: string) {
+        isLoggedIn.value = true
+        userName.value = name
+    }
+
+    function clearUser() {
+        isLoggedIn.value = false
+        userName.value = ''
+    }
+
+    return { isLoggedIn, userName, setUser, clearUser }
+}

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/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 }
+}