nuxt-layer-core 1.1.2 → 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 +3 -3
- package/app/layers/solution/app/components/FeaturesSection.vue +66 -66
- package/app/layers/solution/app/components/HeroSection.vue +3 -3
- 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 +1 -1
- 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 +6 -6
- package/app/layers/solution/app/components/proxmox/HeroSection.vue +3 -3
- package/package.json +1 -1
|
@@ -237,7 +237,7 @@ async function handleSubmit() {
|
|
|
237
237
|
<!-- Study mode -->
|
|
238
238
|
<div class="mb-5">
|
|
239
239
|
<label class="mb-[10px] block text-[13px] font-semibold text-gray-700">Hình thức học</label>
|
|
240
|
-
<div class="flex flex-wrap gap-[10px]">
|
|
240
|
+
<div class="flex flex-wrap justify-center gap-[10px] sm:justify-start">
|
|
241
241
|
<button type="button" class="rounded-[10px] border px-4 py-[9px] text-[13.5px] font-medium transition-colors"
|
|
242
242
|
:class="studyMode === 'online' ? 'border-[#2f5fe0] bg-[#2f5fe0] text-white' : 'border-[#e2e5ee] bg-white text-gray-700'"
|
|
243
243
|
@click="studyMode = 'online'">
|
|
@@ -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>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-200/70 shadow-sm">
|
|
3
3
|
<div class="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between h-16">
|
|
4
|
-
<NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex items-center gap-2.5">
|
|
4
|
+
<NuxtLink :to="`/giai-phap-proxmox/khoa-hoc-proxmox-hci`" class="flex shrink-0 items-center gap-2.5">
|
|
5
5
|
<img src="/images/logo-lvs-1300x330.png" alt="Long Vân" class="h-8 w-auto" />
|
|
6
6
|
</NuxtLink>
|
|
7
7
|
|
|
8
|
-
<nav class="hidden
|
|
8
|
+
<nav class="hidden lg:flex shrink-0 items-center gap-5 whitespace-nowrap text-sm font-medium text-slate-600 xl:gap-8">
|
|
9
9
|
<template v-for="link in navLinks" :key="link.id">
|
|
10
10
|
<template v-if="link.path">
|
|
11
11
|
<NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" :class="[
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
</nav>
|
|
38
38
|
|
|
39
39
|
<!-- Logged in -->
|
|
40
|
-
<div v-if="user" class="relative hidden
|
|
40
|
+
<div v-if="user" class="relative hidden lg:block">
|
|
41
41
|
<button @click="showMenu = !showMenu"
|
|
42
42
|
class="flex items-center gap-2.5 text-sm font-medium text-slate-700 hover:text-[#004AC6] transition-colors">
|
|
43
43
|
<span
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
</div>
|
|
65
65
|
|
|
66
66
|
<!-- Not logged in -->
|
|
67
|
-
<div v-else class="hidden
|
|
67
|
+
<div v-else class="hidden shrink-0 items-center gap-3 whitespace-nowrap lg:flex">
|
|
68
68
|
<a v-if="isConsultant" :href="`/giai-phap-proxmox/khoa-hoc-proxmox-hci#lien-he`" @click.prevent="scrollTo('lien-he')"
|
|
69
69
|
class="inline-flex items-center gap-1.5 text-sm font-bold px-5 py-2.5 rounded-[10px] border border-[#004AC6] text-[#004AC6] hover:bg-blue-50 transition-all active:scale-95 cursor-pointer">
|
|
70
70
|
Liên hệ tư vấn
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
</div>
|
|
79
79
|
|
|
80
80
|
<!-- Mobile menu toggle -->
|
|
81
|
-
<button type="button" class="
|
|
81
|
+
<button type="button" class="lg:hidden flex h-9 w-9 items-center justify-center rounded-[10px] text-slate-600 hover:bg-slate-100 transition-colors"
|
|
82
82
|
:aria-expanded="showMobileMenu" aria-label="Mở menu"
|
|
83
83
|
@click="showMobileMenu = !showMobileMenu">
|
|
84
84
|
<Icon :name="showMobileMenu ? 'lucide:x' : 'lucide:menu'" class="text-[22px]" />
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
<Transition enter-active-class="transition ease-out duration-150" enter-from-class="opacity-0 -translate-y-1"
|
|
90
90
|
enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-100"
|
|
91
91
|
leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 -translate-y-1">
|
|
92
|
-
<div v-if="showMobileMenu" class="
|
|
92
|
+
<div v-if="showMobileMenu" class="lg:hidden border-t border-slate-200/70 bg-white px-6 py-4">
|
|
93
93
|
<nav class="flex flex-col gap-1 text-sm font-medium text-slate-600">
|
|
94
94
|
<template v-for="link in navLinks" :key="link.id">
|
|
95
95
|
<NuxtLink v-if="link.path && link.path != route.path" :to="`${link.path}`" class="rounded-[10px] px-3 py-2.5 transition-colors"
|
|
@@ -35,7 +35,7 @@ const { scrollTo } = useScrollToSection()
|
|
|
35
35
|
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.
|
|
36
36
|
</a>
|
|
37
37
|
|
|
38
|
-
<div v-reveal="{ delay: 280 }" class="mt-8 flex flex-wrap items-center gap-4">
|
|
38
|
+
<div v-reveal="{ delay: 280 }" class="mt-8 flex flex-wrap items-center justify-center gap-4 lg:justify-start">
|
|
39
39
|
<a href="#lien-he" @click.prevent="scrollTo('lien-he')"
|
|
40
40
|
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">
|
|
41
41
|
Nhận tư vấn triển khai
|
|
@@ -61,8 +61,8 @@ const { scrollTo } = useScrollToSection()
|
|
|
61
61
|
</dl>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
64
|
-
<!-- Right: image with floating cards -->
|
|
65
|
-
<div v-reveal="{ type: 'right', delay: 160 }" class="relative
|
|
64
|
+
<!-- Right: image with floating cards - ẩn trên mobile/tablet để tiết kiệm chiều cao -->
|
|
65
|
+
<div v-reveal="{ type: 'right', delay: 160 }" class="relative hidden h-full items-center lg:flex">
|
|
66
66
|
<div class="w-full overflow-hidden rounded-3xl shadow-2xl shadow-blue-900/10 ring-1 ring-black/5">
|
|
67
67
|
<img src="../../images/Proxmox HCI.png" alt="Datacenter server racks"
|
|
68
68
|
class="block h-auto w-full object-contain" />
|