nuxt-layer-core 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/layers/solution/app/components/CoursesSection.vue +244 -244
- package/app/layers/solution/app/components/CtaSection.vue +347 -347
- package/app/layers/solution/app/components/FeaturesSection.vue +66 -66
- package/app/layers/solution/app/components/HeroSection.vue +143 -143
- package/app/layers/solution/app/components/LinuxVersionsSection.vue +1 -1
- package/app/layers/solution/app/components/PricingPlansSection.vue +396 -396
- package/app/layers/solution/app/components/RegistrationForm.vue +10 -7
- package/app/layers/solution/app/components/RegistrationSection.vue +24 -24
- package/app/layers/solution/app/components/RegistrationSidebar.vue +70 -70
- package/app/layers/solution/app/components/TestimonialsSection.vue +57 -57
- package/app/layers/solution/app/components/TheFooter.vue +60 -60
- package/app/layers/solution/app/components/TheHeader.vue +255 -192
- package/app/layers/solution/app/components/proxmox/ComparisonSection.vue +8 -8
- package/app/layers/solution/app/components/proxmox/HeroSection.vue +3 -3
- package/package.json +52 -52
|
@@ -39,6 +39,9 @@ watch(() => props.selectedPlanId, (id) => {
|
|
|
39
39
|
|
|
40
40
|
const selectedPlan = computed(() => props.plans.find((p) => p.id === selectedCourseId.value))
|
|
41
41
|
|
|
42
|
+
// Chỉ có đúng 1 gói -> hiển thị thông tin thay vì danh sách chọn (xem template)
|
|
43
|
+
const singlePlan = computed(() => (props.plans.length === 1 ? props.plans[0] : null))
|
|
44
|
+
|
|
42
45
|
// Validation
|
|
43
46
|
function touch(field: keyof typeof touched) {
|
|
44
47
|
touched[field] = true
|
|
@@ -157,7 +160,7 @@ async function handleSubmit() {
|
|
|
157
160
|
</script>
|
|
158
161
|
|
|
159
162
|
<template>
|
|
160
|
-
<section class="rounded-2xl border border-[#e7e9f0] bg-white p-8">
|
|
163
|
+
<section class="rounded-2xl border border-[#e7e9f0] bg-white p-5 sm:p-8">
|
|
161
164
|
<h2 class="mb-5 text-[17px] font-bold text-slate-900">Thông tin đăng ký</h2>
|
|
162
165
|
|
|
163
166
|
<form @submit.prevent="handleSubmit">
|
|
@@ -168,18 +171,18 @@ async function handleSubmit() {
|
|
|
168
171
|
</label>
|
|
169
172
|
|
|
170
173
|
<!-- Đã chọn sẵn 1 gói từ trang trước -> chỉ hiển thị thông tin, không cần chọn lại -->
|
|
171
|
-
<div v-if="
|
|
174
|
+
<div v-if="singlePlan" class="flex flex-col gap-2 rounded-[10px] border border-[#2f5fe0] bg-[#eef3ff] px-4 py-[14px]">
|
|
172
175
|
<div class="flex items-center gap-3">
|
|
173
176
|
<span class="relative h-[18px] w-[18px] flex-none rounded-[10px] border-2 border-[#2f5fe0]">
|
|
174
177
|
<span class="absolute inset-[3px] rounded-[10px] bg-[#2f5fe0]" />
|
|
175
178
|
</span>
|
|
176
179
|
<span class="flex flex-col gap-[2px]">
|
|
177
|
-
<span class="text-sm font-semibold text-slate-900">{{
|
|
178
|
-
<span v-if="planMetaLine(
|
|
180
|
+
<span class="text-sm font-semibold text-slate-900">{{ singlePlan.name }}</span>
|
|
181
|
+
<span v-if="planMetaLine(singlePlan)" class="text-[12.5px] text-gray-500">{{ planMetaLine(singlePlan) }}</span>
|
|
179
182
|
</span>
|
|
180
183
|
</div>
|
|
181
|
-
<p v-if="
|
|
182
|
-
<p v-if="
|
|
184
|
+
<p v-if="singlePlan.price" class="pl-[30px] text-[12.5px] font-semibold text-[#2f5fe0]">{{ singlePlan.price }}</p>
|
|
185
|
+
<p v-if="singlePlan.description" class="pl-[30px] text-[12.5px] text-gray-500">{{ singlePlan.description }}</p>
|
|
183
186
|
</div>
|
|
184
187
|
|
|
185
188
|
<div v-else class="flex flex-col gap-[10px]">
|
|
@@ -234,7 +237,7 @@ async function handleSubmit() {
|
|
|
234
237
|
<!-- Study mode -->
|
|
235
238
|
<div class="mb-5">
|
|
236
239
|
<label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Hình thức học</label>
|
|
237
|
-
<div class="flex flex-wrap gap-[10px]">
|
|
240
|
+
<div class="flex flex-wrap justify-center gap-[10px] sm:justify-start">
|
|
238
241
|
<button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
|
|
239
242
|
:class="studyMode === 'online' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
|
|
240
243
|
@click="studyMode = 'online'">
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
defineProps<{
|
|
3
|
-
plans: Array<{
|
|
4
|
-
id: string
|
|
5
|
-
name: string
|
|
6
|
-
level: string
|
|
7
|
-
duration: string
|
|
8
|
-
icon: string
|
|
9
|
-
}>
|
|
10
|
-
selectedPlanId?: string
|
|
11
|
-
}>()
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<template>
|
|
15
|
-
<div class="min-h-screen bg-[#f4f5f9] px-
|
|
16
|
-
<div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6
|
|
17
|
-
<!-- Left column -->
|
|
18
|
-
<RegistrationSidebar />
|
|
19
|
-
|
|
20
|
-
<!-- Right column: form -->
|
|
21
|
-
<RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</template>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
defineProps<{
|
|
3
|
+
plans: Array<{
|
|
4
|
+
id: string
|
|
5
|
+
name: string
|
|
6
|
+
level: string
|
|
7
|
+
duration: string
|
|
8
|
+
icon: string
|
|
9
|
+
}>
|
|
10
|
+
selectedPlanId?: string
|
|
11
|
+
}>()
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<template>
|
|
15
|
+
<div class="min-h-screen bg-[#f4f5f9] px-4 py-12 font-sans text-slate-900 sm:px-6 sm:py-20 lg:py-28">
|
|
16
|
+
<div class="mx-auto grid max-w-[1000px] grid-cols-1 items-start gap-6 lg:grid-cols-[340px_1fr]">
|
|
17
|
+
<!-- Left column -->
|
|
18
|
+
<RegistrationSidebar />
|
|
19
|
+
|
|
20
|
+
<!-- Right column: form -->
|
|
21
|
+
<RegistrationForm :plans="plans" :selected-plan-id="selectedPlanId" />
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<aside class="flex flex-col gap-4">
|
|
3
|
-
<div class="rounded-2xl border border-[#e7e9f0] bg-white p-7">
|
|
4
|
-
<h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
|
|
5
|
-
<ul class="flex flex-col gap-[22px]">
|
|
6
|
-
<li class="flex items-start gap-3">
|
|
7
|
-
<span
|
|
8
|
-
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
9
|
-
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
10
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
11
|
-
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
12
|
-
<circle cx="9" cy="7" r="4" />
|
|
13
|
-
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
14
|
-
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
15
|
-
</svg>
|
|
16
|
-
</span>
|
|
17
|
-
<span class="flex flex-col gap-[3px]">
|
|
18
|
-
<span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
|
|
19
|
-
<span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
|
|
20
|
-
từng học viên.</span>
|
|
21
|
-
</span>
|
|
22
|
-
</li>
|
|
23
|
-
<li class="flex items-start gap-3">
|
|
24
|
-
<span
|
|
25
|
-
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
26
|
-
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
27
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
28
|
-
<path d="M22 10 12 5 2 10l10 5 10-5Z" />
|
|
29
|
-
<path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
|
|
30
|
-
</svg>
|
|
31
|
-
</span>
|
|
32
|
-
<span class="flex flex-col gap-[3px]">
|
|
33
|
-
<span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
|
|
34
|
-
<span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
|
|
35
|
-
chỉ lý thuyết.</span>
|
|
36
|
-
</span>
|
|
37
|
-
</li>
|
|
38
|
-
<li class="flex items-start gap-3">
|
|
39
|
-
<span
|
|
40
|
-
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
41
|
-
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
42
|
-
stroke-linecap="round" stroke-linejoin="round">
|
|
43
|
-
<circle cx="12" cy="12" r="10" />
|
|
44
|
-
<path d="m9 12 2 2 4-4" />
|
|
45
|
-
</svg>
|
|
46
|
-
</span>
|
|
47
|
-
<span class="flex flex-col gap-[3px]">
|
|
48
|
-
<span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
|
|
49
|
-
<span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
|
|
50
|
-
sau khóa học.</span>
|
|
51
|
-
</span>
|
|
52
|
-
</li>
|
|
53
|
-
</ul>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-6 py-[22px]">
|
|
57
|
-
<p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
|
|
58
|
-
<svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
59
|
-
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
60
|
-
<path d="M23 7 16 12l7 5V7Z" />
|
|
61
|
-
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
|
|
62
|
-
</svg>
|
|
63
|
-
Khai giảng linh hoạt
|
|
64
|
-
</p>
|
|
65
|
-
<p class="text-[13px] leading-relaxed text-gray-600">
|
|
66
|
-
Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
|
|
67
|
-
</p>
|
|
68
|
-
</div>
|
|
69
|
-
</aside>
|
|
70
|
-
</template>
|
|
1
|
+
<template>
|
|
2
|
+
<aside class="flex flex-col gap-4">
|
|
3
|
+
<div class="rounded-2xl border border-[#e7e9f0] bg-white p-5 sm:p-7">
|
|
4
|
+
<h2 class="mb-5 text-[17px] font-bold text-slate-900">Vì sao chọn chúng tôi</h2>
|
|
5
|
+
<ul class="flex flex-col gap-[22px]">
|
|
6
|
+
<li class="flex items-start gap-3">
|
|
7
|
+
<span
|
|
8
|
+
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
9
|
+
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
10
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
11
|
+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
12
|
+
<circle cx="9" cy="7" r="4" />
|
|
13
|
+
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
14
|
+
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
15
|
+
</svg>
|
|
16
|
+
</span>
|
|
17
|
+
<span class="flex flex-col gap-[3px]">
|
|
18
|
+
<span class="text-sm font-semibold text-slate-900">Lớp nhỏ, kèm sát</span>
|
|
19
|
+
<span class="text-[13px] leading-relaxed text-gray-500">Sĩ số giới hạn, giảng viên hỗ trợ trực tiếp
|
|
20
|
+
từng học viên.</span>
|
|
21
|
+
</span>
|
|
22
|
+
</li>
|
|
23
|
+
<li class="flex items-start gap-3">
|
|
24
|
+
<span
|
|
25
|
+
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
26
|
+
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
27
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
28
|
+
<path d="M22 10 12 5 2 10l10 5 10-5Z" />
|
|
29
|
+
<path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
|
|
30
|
+
</svg>
|
|
31
|
+
</span>
|
|
32
|
+
<span class="flex flex-col gap-[3px]">
|
|
33
|
+
<span class="text-sm font-semibold text-slate-900">Thực hành hệ thống thật</span>
|
|
34
|
+
<span class="text-[13px] leading-relaxed text-gray-500">Thao tác trên cụm Proxmox HCI thực tế, không
|
|
35
|
+
chỉ lý thuyết.</span>
|
|
36
|
+
</span>
|
|
37
|
+
</li>
|
|
38
|
+
<li class="flex items-start gap-3">
|
|
39
|
+
<span
|
|
40
|
+
class="flex h-[34px] w-[34px] flex-none items-center justify-center rounded-[10px] bg-[#e8eefc] text-[#2f5fe0]">
|
|
41
|
+
<svg class="h-[17px] w-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
|
|
42
|
+
stroke-linecap="round" stroke-linejoin="round">
|
|
43
|
+
<circle cx="12" cy="12" r="10" />
|
|
44
|
+
<path d="m9 12 2 2 4-4" />
|
|
45
|
+
</svg>
|
|
46
|
+
</span>
|
|
47
|
+
<span class="flex flex-col gap-[3px]">
|
|
48
|
+
<span class="text-sm font-semibold text-slate-900">Chứng nhận hoàn thành</span>
|
|
49
|
+
<span class="text-[13px] leading-relaxed text-gray-500">Cấp chứng nhận và hỗ trợ tư vấn nghề nghiệp
|
|
50
|
+
sau khóa học.</span>
|
|
51
|
+
</span>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="rounded-2xl border border-[#dbe4fd] bg-[#eef2ff] px-5 py-4 sm:px-6 sm:py-[22px]">
|
|
57
|
+
<p class="mb-2 flex items-center gap-[9px] text-sm font-bold text-[#2f5fe0]">
|
|
58
|
+
<svg class="h-[17px] w-[17px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
59
|
+
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
60
|
+
<path d="M23 7 16 12l7 5V7Z" />
|
|
61
|
+
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
|
|
62
|
+
</svg>
|
|
63
|
+
Khai giảng linh hoạt
|
|
64
|
+
</p>
|
|
65
|
+
<p class="text-[13px] leading-relaxed text-gray-600">
|
|
66
|
+
Lịch học buổi tối và cuối tuần, phù hợp cho cả người đi làm. Hỗ trợ ghi hình buổi học để xem lại.
|
|
67
|
+
</p>
|
|
68
|
+
</div>
|
|
69
|
+
</aside>
|
|
70
|
+
</template>
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section id="khach-hang" class="py-24 bg-white border-t border-slate-200">
|
|
3
|
-
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
|
4
|
-
<div class="text-center mb-16">
|
|
5
|
-
<h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Học viên nói gì</h2>
|
|
6
|
-
<h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900">
|
|
7
|
-
Được tư vấn đúng khóa, học đúng thứ cần dùng
|
|
8
|
-
</h3>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
<div class="grid grid-cols-1
|
|
12
|
-
<blockquote
|
|
13
|
-
v-for="(t, i) in testimonials"
|
|
14
|
-
:key="t.name"
|
|
15
|
-
:data-delay="i * 150"
|
|
16
|
-
class="testimonial-card bg-white p-8 rounded-xl border border-slate-200 relative hover:shadow-lg transition-shadow"
|
|
17
|
-
>
|
|
18
|
-
<Icon name="lucide:quote" class="text-blue-100 text-4xl absolute top-6 right-6" />
|
|
19
|
-
<p class="text-slate-700 leading-relaxed mb-6 relative z-10">{{ t.quote }}</p>
|
|
20
|
-
<footer class="flex items-center gap-3">
|
|
21
|
-
<div class="w-10 h-10 rounded-[10px] bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center text-xs font-bold text-white">
|
|
22
|
-
{{ t.initials }}
|
|
23
|
-
</div>
|
|
24
|
-
<div class="text-sm">
|
|
25
|
-
<p class="font-bold text-slate-900">{{ t.name }}</p>
|
|
26
|
-
<p class="text-slate-500">{{ t.role }}</p>
|
|
27
|
-
</div>
|
|
28
|
-
</footer>
|
|
29
|
-
</blockquote>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
</section>
|
|
33
|
-
</template>
|
|
34
|
-
|
|
35
|
-
<script setup>
|
|
36
|
-
useScrollAnimate('.testimonial-card', 'slide-left')
|
|
37
|
-
|
|
38
|
-
const testimonials = [
|
|
39
|
-
{
|
|
40
|
-
initials: 'TH',
|
|
41
|
-
name: 'Trần Hải',
|
|
42
|
-
role: 'IT Manager, chuỗi bán lẻ 20 chi nhánh',
|
|
43
|
-
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.'
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
initials: 'NL',
|
|
47
|
-
name: 'Nguyễn Lâm',
|
|
48
|
-
role: 'DevOps Lead, công ty fintech',
|
|
49
|
-
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.'
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
initials: 'PA',
|
|
53
|
-
name: 'Phạm Anh',
|
|
54
|
-
role: 'CTO, startup logistics',
|
|
55
|
-
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.'
|
|
56
|
-
}
|
|
57
|
-
]
|
|
1
|
+
<template>
|
|
2
|
+
<section id="khach-hang" class="py-24 bg-white border-t border-slate-200">
|
|
3
|
+
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
|
4
|
+
<div class="text-center mb-16">
|
|
5
|
+
<h2 class="text-[#004AC6] font-bold uppercase tracking-widest text-sm mb-2">Học viên nói gì</h2>
|
|
6
|
+
<h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900">
|
|
7
|
+
Được tư vấn đúng khóa, học đúng thứ cần dùng
|
|
8
|
+
</h3>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
12
|
+
<blockquote
|
|
13
|
+
v-for="(t, i) in testimonials"
|
|
14
|
+
:key="t.name"
|
|
15
|
+
:data-delay="i * 150"
|
|
16
|
+
class="testimonial-card bg-white p-8 rounded-xl border border-slate-200 relative hover:shadow-lg transition-shadow"
|
|
17
|
+
>
|
|
18
|
+
<Icon name="lucide:quote" class="text-blue-100 text-4xl absolute top-6 right-6" />
|
|
19
|
+
<p class="text-slate-700 leading-relaxed mb-6 relative z-10">{{ t.quote }}</p>
|
|
20
|
+
<footer class="flex items-center gap-3">
|
|
21
|
+
<div class="w-10 h-10 rounded-[10px] bg-gradient-to-br from-[#2563EB] to-[#1D4ED8] flex items-center justify-center text-xs font-bold text-white">
|
|
22
|
+
{{ t.initials }}
|
|
23
|
+
</div>
|
|
24
|
+
<div class="text-sm">
|
|
25
|
+
<p class="font-bold text-slate-900">{{ t.name }}</p>
|
|
26
|
+
<p class="text-slate-500">{{ t.role }}</p>
|
|
27
|
+
</div>
|
|
28
|
+
</footer>
|
|
29
|
+
</blockquote>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script setup>
|
|
36
|
+
useScrollAnimate('.testimonial-card', 'slide-left')
|
|
37
|
+
|
|
38
|
+
const testimonials = [
|
|
39
|
+
{
|
|
40
|
+
initials: 'TH',
|
|
41
|
+
name: 'Trần Hải',
|
|
42
|
+
role: 'IT Manager, chuỗi bán lẻ 20 chi nhánh',
|
|
43
|
+
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.'
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
initials: 'NL',
|
|
47
|
+
name: 'Nguyễn Lâm',
|
|
48
|
+
role: 'DevOps Lead, công ty fintech',
|
|
49
|
+
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.'
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
initials: 'PA',
|
|
53
|
+
name: 'Phạm Anh',
|
|
54
|
+
role: 'CTO, startup logistics',
|
|
55
|
+
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.'
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
58
|
</script>
|
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<footer class="bg-white border-t border-slate-200 pt-16 pb-10">
|
|
3
|
-
<div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1
|
|
4
|
-
<div class="space-y-4">
|
|
5
|
-
<div class="flex items-center">
|
|
6
|
-
<img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
|
|
7
|
-
</div>
|
|
8
|
-
<p class="text-slate-500 text-sm leading-relaxed">
|
|
9
|
-
Tư vấn và đào tạo hạ tầng siêu hội tụ Proxmox. Đồng hành cùng bạn chọn đúng khóa học,
|
|
10
|
-
đúng lộ trình nghề nghiệp.
|
|
11
|
-
</p>
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
<div>
|
|
15
|
-
<h5 class="font-bold text-slate-900 mb-5 text-sm">Khóa học</h5>
|
|
16
|
-
<ul class="space-y-3">
|
|
17
|
-
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Proxmox nền tảng</NuxtLink></li>
|
|
18
|
-
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Vận hành production</NuxtLink></li>
|
|
19
|
-
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đào tạo doanh nghiệp</NuxtLink></li>
|
|
20
|
-
</ul>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div>
|
|
24
|
-
<h5 class="font-bold text-slate-900 mb-5 text-sm">Tư vấn</h5>
|
|
25
|
-
<ul class="space-y-3">
|
|
26
|
-
<li><NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Quy trình tư vấn</NuxtLink></li>
|
|
27
|
-
<li><NuxtLink to="#khach-hang" @click.prevent="scrollTo('khach-hang')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Học viên nói gì</NuxtLink></li>
|
|
28
|
-
<li><NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đặt lịch tư vấn</NuxtLink></li>
|
|
29
|
-
</ul>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<div>
|
|
33
|
-
<h5 class="font-bold text-slate-900 mb-5 text-sm">Liên hệ</h5>
|
|
34
|
-
<ul class="space-y-3 text-sm text-slate-500">
|
|
35
|
-
<li class="flex items-center gap-2">
|
|
36
|
-
<Icon name="lucide:mail" class="text-[16px] text-[#004AC6]" />
|
|
37
|
-
tuvan@longvan.net
|
|
38
|
-
</li>
|
|
39
|
-
<li class="flex items-center gap-2">
|
|
40
|
-
<Icon name="lucide:phone" class="text-[16px] text-[#004AC6]" />
|
|
41
|
-
1800 6070
|
|
42
|
-
</li>
|
|
43
|
-
</ul>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
48
|
-
<p class="text-slate-400 text-xs">© {{ year }} Long Vân Cloud Solution. Bảo lưu mọi quyền.</p>
|
|
49
|
-
<div class="flex gap-6 text-xs text-slate-500">
|
|
50
|
-
<NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="hover:text-[#004AC6] transition-colors">Vì sao chọn chúng tôi</NuxtLink>
|
|
51
|
-
<NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="hover:text-[#004AC6] transition-colors">Khóa học</NuxtLink>
|
|
52
|
-
<NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="hover:text-[#004AC6] transition-colors">Tư vấn</NuxtLink>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</footer>
|
|
56
|
-
</template>
|
|
57
|
-
|
|
58
|
-
<script setup>
|
|
59
|
-
const { scrollTo } = useScrollToSection()
|
|
60
|
-
const year = new Date().getFullYear()
|
|
1
|
+
<template>
|
|
2
|
+
<footer class="bg-white border-t border-slate-200 pt-16 pb-10">
|
|
3
|
+
<div class="max-w-7xl mx-auto px-6 lg:px-8 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
4
|
+
<div class="space-y-4">
|
|
5
|
+
<div class="flex items-center">
|
|
6
|
+
<img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
|
|
7
|
+
</div>
|
|
8
|
+
<p class="text-slate-500 text-sm leading-relaxed">
|
|
9
|
+
Tư vấn và đào tạo hạ tầng siêu hội tụ Proxmox. Đồng hành cùng bạn chọn đúng khóa học,
|
|
10
|
+
đúng lộ trình nghề nghiệp.
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div>
|
|
15
|
+
<h5 class="font-bold text-slate-900 mb-5 text-sm">Khóa học</h5>
|
|
16
|
+
<ul class="space-y-3">
|
|
17
|
+
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Proxmox nền tảng</NuxtLink></li>
|
|
18
|
+
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Vận hành production</NuxtLink></li>
|
|
19
|
+
<li><NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đào tạo doanh nghiệp</NuxtLink></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div>
|
|
24
|
+
<h5 class="font-bold text-slate-900 mb-5 text-sm">Tư vấn</h5>
|
|
25
|
+
<ul class="space-y-3">
|
|
26
|
+
<li><NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Quy trình tư vấn</NuxtLink></li>
|
|
27
|
+
<li><NuxtLink to="#khach-hang" @click.prevent="scrollTo('khach-hang')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Học viên nói gì</NuxtLink></li>
|
|
28
|
+
<li><NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="text-slate-500 hover:text-[#004AC6] transition-colors text-sm">Đặt lịch tư vấn</NuxtLink></li>
|
|
29
|
+
</ul>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div>
|
|
33
|
+
<h5 class="font-bold text-slate-900 mb-5 text-sm">Liên hệ</h5>
|
|
34
|
+
<ul class="space-y-3 text-sm text-slate-500">
|
|
35
|
+
<li class="flex items-center gap-2">
|
|
36
|
+
<Icon name="lucide:mail" class="text-[16px] text-[#004AC6]" />
|
|
37
|
+
tuvan@longvan.net
|
|
38
|
+
</li>
|
|
39
|
+
<li class="flex items-center gap-2">
|
|
40
|
+
<Icon name="lucide:phone" class="text-[16px] text-[#004AC6]" />
|
|
41
|
+
1800 6070
|
|
42
|
+
</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-12 pt-8 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
48
|
+
<p class="text-slate-400 text-xs">© {{ year }} Long Vân Cloud Solution. Bảo lưu mọi quyền.</p>
|
|
49
|
+
<div class="flex gap-6 text-xs text-slate-500">
|
|
50
|
+
<NuxtLink to="#giai-phap" @click.prevent="scrollTo('giai-phap')" class="hover:text-[#004AC6] transition-colors">Vì sao chọn chúng tôi</NuxtLink>
|
|
51
|
+
<NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')" class="hover:text-[#004AC6] transition-colors">Khóa học</NuxtLink>
|
|
52
|
+
<NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')" class="hover:text-[#004AC6] transition-colors">Tư vấn</NuxtLink>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</footer>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<script setup>
|
|
59
|
+
const { scrollTo } = useScrollToSection()
|
|
60
|
+
const year = new Date().getFullYear()
|
|
61
61
|
</script>
|