nuxt-layer-core 2.0.1

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { faqItems } from "../../data/proxmox-content"
+
+const openIndex = ref<number | null>(0)
+
+function toggle(i: number) {
+  openIndex.value = openIndex.value === i ? null : i
+}
+</script>
+
+<template>
+  <section class="bg-[#F7F9FB] py-20 sm:py-28">
+    <div class="mx-auto max-w-3xl px-6 lg:px-8">
+      <div class="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">
+          FAQ
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Câu hỏi thường gặp
+        </h2>
+      </div>
+
+      <div class="mt-12 space-y-3">
+        <div
+          v-for="(item, i) in faqItems"
+          :key="item.question"
+          v-reveal="{ delay: 80 + i * 60 }"
+          class="overflow-hidden rounded-xl border border-slate-200 bg-white"
+        >
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-4 px-6 py-4 text-left text-[15px] font-semibold text-slate-800"
+            :aria-expanded="openIndex === i"
+            @click="toggle(i)"
+          >
+            {{ item.question }}
+            <ProxmoxAppIcon
+              name="chevronDown"
+              class="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-300"
+              :class="{ 'rotate-180 text-blue-600': openIndex === i }"
+            />
+          </button>
+
+          <div
+            class="grid transition-all duration-300 ease-in-out"
+            :style="{ gridTemplateRows: openIndex === i ? '1fr' : '0fr' }"
+          >
+            <div class="overflow-hidden">
+              <p class="px-6 pb-5 text-sm leading-relaxed text-slate-500">
+                {{ item.answer }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { hciOverviewCards } 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">
+          HCI là gì?
+        </div>
+        <h2 v-reveal="{ delay: 60 }" class="mt-5 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">
+          Proxmox HCI — Hạ tầng hội tụ
+          <span class="text-blue-600">dựa trên Proxmox VE</span>
+        </h2>
+        <p v-reveal="{ delay: 120 }" class="mt-5 leading-relaxed text-slate-600">
+          HCI (Hyper-Converged Infrastructure) hợp nhất compute, storage và network vào một platform phần mềm duy nhất — loại bỏ SAN riêng biệt, đơn giản hóa vận hành và giảm chi phí đáng kể.
+        </p>
+      </div>
+
+      <div class="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="(card, i) in hciOverviewCards"
+          :key="card.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="card.icon" class="h-5 w-5" />
+          </span>
+          <p class="mt-4 font-semibold text-slate-900">{{ card.title }}</p>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">{{ card.desc }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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