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
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section id="giai-phap" class="py-24 bg-white">
|
|
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">Lợi ích khóa học</h2>
|
|
6
|
-
<h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
|
|
7
|
-
Vì sao nên tham gia đào tạo Proxmox VE?
|
|
8
|
-
</h3>
|
|
9
|
-
<p class="text-slate-500 max-w-2xl mx-auto">
|
|
10
|
-
Đầu tư một lần vào đào tạo bài bản không chỉ giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng mà còn tạo bước đệm bứt phá trên con đường sự nghiệp.
|
|
11
|
-
</p>
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
<div class="grid grid-cols-1
|
|
15
|
-
<div
|
|
16
|
-
v-for="(item, i) in features"
|
|
17
|
-
:key="item.title"
|
|
18
|
-
:data-delay="i * 100"
|
|
19
|
-
class="feature-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
|
|
20
|
-
>
|
|
21
|
-
<div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
|
|
22
|
-
<Icon :name="item.icon" />
|
|
23
|
-
</div>
|
|
24
|
-
<h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
|
|
25
|
-
<p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
</section>
|
|
30
|
-
</template>
|
|
31
|
-
|
|
32
|
-
<script setup>
|
|
33
|
-
useScrollAnimate('.feature-card', 'scale-up')
|
|
34
|
-
|
|
35
|
-
const features = [
|
|
36
|
-
{
|
|
37
|
-
icon: 'lucide:server',
|
|
38
|
-
title: 'Làm chủ toàn diện Proxmox VE',
|
|
39
|
-
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 của nền tảng.'
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
icon: 'lucide:award',
|
|
43
|
-
title: 'Học từ chuyên gia thực chiến',
|
|
44
|
-
desc: 'Tiếp thu kinh nghiệm vận hành ảo hóa trực tiếp 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.'
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
icon: 'lucide:monitor-play',
|
|
48
|
-
title: 'Thực hành Lab môi trường thật',
|
|
49
|
-
desc: 'Không chỉ học lý thuyết, bạn sẽ trực tiếp thao tác và giải quyết các tình huống giả lập sát với thực tế doanh nghiệp.'
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
icon: 'lucide:activity',
|
|
53
|
-
title: 'Troubleshooting thần tốc',
|
|
54
|
-
desc: 'Trang bị kỹ năng nhận diện "bệnh" hệ thống nhạy bén, giúp bạn xử lý sự cố chính xác và dứt điểm hơn bao giờ hết.'
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
icon: 'lucide:trending-up',
|
|
58
|
-
title: 'Thăng tiến & Khẳng định vị thế',
|
|
59
|
-
desc: 'Nâng tầm giá trị bản thân, tạo dựng sự tín nhiệm tuyệt đối với cấp trên, đồng nghiệp và đối tác nhờ năng lực chuyên môn vượt trội.'
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
icon: 'lucide:file-badge',
|
|
63
|
-
title: 'Chứng nhận chính quy',
|
|
64
|
-
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 thực sự và sự đầu tư nghiêm túc của bạn.'
|
|
65
|
-
}
|
|
66
|
-
]
|
|
1
|
+
<template>
|
|
2
|
+
<section id="giai-phap" class="py-24 bg-white">
|
|
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">Lợi ích khóa học</h2>
|
|
6
|
+
<h3 class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-slate-900 mb-4">
|
|
7
|
+
Vì sao nên tham gia đào tạo Proxmox VE?
|
|
8
|
+
</h3>
|
|
9
|
+
<p class="text-slate-500 max-w-2xl mx-auto">
|
|
10
|
+
Đầu tư một lần vào đào tạo bài bản không chỉ giúp bạn tối ưu năng lực vận hành, cắt giảm chi phí hạ tầng mà còn tạo bước đệm bứt phá trên con đường sự nghiệp.
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
15
|
+
<div
|
|
16
|
+
v-for="(item, i) in features"
|
|
17
|
+
:key="item.title"
|
|
18
|
+
:data-delay="i * 100"
|
|
19
|
+
class="feature-card bg-white p-8 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-200 transition-all"
|
|
20
|
+
>
|
|
21
|
+
<div class="w-11 h-11 rounded-[10px] bg-blue-50 flex items-center justify-center mb-6 text-[#004AC6]">
|
|
22
|
+
<Icon :name="item.icon" />
|
|
23
|
+
</div>
|
|
24
|
+
<h4 class="font-bold text-lg text-slate-900 mb-3">{{ item.title }}</h4>
|
|
25
|
+
<p class="text-sm text-slate-500 leading-relaxed">{{ item.desc }}</p>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</section>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup>
|
|
33
|
+
useScrollAnimate('.feature-card', 'scale-up')
|
|
34
|
+
|
|
35
|
+
const features = [
|
|
36
|
+
{
|
|
37
|
+
icon: 'lucide:server',
|
|
38
|
+
title: 'Làm chủ toàn diện Proxmox VE',
|
|
39
|
+
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 của nền tảng.'
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
icon: 'lucide:award',
|
|
43
|
+
title: 'Học từ chuyên gia thực chiến',
|
|
44
|
+
desc: 'Tiếp thu kinh nghiệm vận hành ảo hóa trực tiếp 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.'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
icon: 'lucide:monitor-play',
|
|
48
|
+
title: 'Thực hành Lab môi trường thật',
|
|
49
|
+
desc: 'Không chỉ học lý thuyết, bạn sẽ trực tiếp thao tác và giải quyết các tình huống giả lập sát với thực tế doanh nghiệp.'
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
icon: 'lucide:activity',
|
|
53
|
+
title: 'Troubleshooting thần tốc',
|
|
54
|
+
desc: 'Trang bị kỹ năng nhận diện "bệnh" hệ thống nhạy bén, giúp bạn xử lý sự cố chính xác và dứt điểm hơn bao giờ hết.'
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
icon: 'lucide:trending-up',
|
|
58
|
+
title: 'Thăng tiến & Khẳng định vị thế',
|
|
59
|
+
desc: 'Nâng tầm giá trị bản thân, tạo dựng sự tín nhiệm tuyệt đối với cấp trên, đồng nghiệp và đối tác nhờ năng lực chuyên môn vượt trội.'
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
icon: 'lucide:file-badge',
|
|
63
|
+
title: 'Chứng nhận chính quy',
|
|
64
|
+
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 thực sự và sự đầu tư nghiêm túc của bạn.'
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
67
|
</script>
|
|
@@ -1,144 +1,144 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section id="#" class="relative">
|
|
3
|
-
<!-- Hero -->
|
|
4
|
-
<div class="bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] text-white pt-40 pb-24 overflow-hidden relative">
|
|
5
|
-
<!-- Dot grid pattern -->
|
|
6
|
-
<div class="absolute inset-0 opacity-[0.06]"
|
|
7
|
-
style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
|
|
8
|
-
|
|
9
|
-
<!-- Cluster nodes decoration -->
|
|
10
|
-
<svg class="absolute inset-0 w-full h-full opacity-[0.08]" xmlns="http://www.w3.org/2000/svg">
|
|
11
|
-
<!-- Connection lines -->
|
|
12
|
-
<line x1="15%" y1="25%" x2="35%" y2="45%" stroke="white" stroke-width="1" />
|
|
13
|
-
<line x1="35%" y1="45%" x2="25%" y2="70%" stroke="white" stroke-width="1" />
|
|
14
|
-
<line x1="35%" y1="45%" x2="55%" y2="35%" stroke="white" stroke-width="1" />
|
|
15
|
-
<line x1="55%" y1="35%" x2="75%" y2="55%" stroke="white" stroke-width="1" />
|
|
16
|
-
<line x1="75%" y1="55%" x2="85%" y2="30%" stroke="white" stroke-width="1" />
|
|
17
|
-
<line x1="75%" y1="55%" x2="65%" y2="75%" stroke="white" stroke-width="1" />
|
|
18
|
-
<!-- Nodes -->
|
|
19
|
-
<circle cx="15%" cy="25%" r="4" fill="white" />
|
|
20
|
-
<circle cx="35%" cy="45%" r="5" fill="white" />
|
|
21
|
-
<circle cx="25%" cy="70%" r="3.5" fill="white" />
|
|
22
|
-
<circle cx="55%" cy="35%" r="4.5" fill="white" />
|
|
23
|
-
<circle cx="75%" cy="55%" r="5" fill="white" />
|
|
24
|
-
<circle cx="85%" cy="30%" r="3.5" fill="white" />
|
|
25
|
-
<circle cx="65%" cy="75%" r="4" fill="white" />
|
|
26
|
-
<!-- Pulse rings -->
|
|
27
|
-
<circle cx="35%" cy="45%" r="12" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse" />
|
|
28
|
-
<circle cx="75%" cy="55%" r="14" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse"
|
|
29
|
-
style="animation-delay: 1.5s" />
|
|
30
|
-
</svg>
|
|
31
|
-
|
|
32
|
-
<div class="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center relative z-10">
|
|
33
|
-
<!-- Left -->
|
|
34
|
-
<div>
|
|
35
|
-
<div
|
|
36
|
-
class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-[10px] border border-white/20 mb-6">
|
|
37
|
-
<Icon name="lucide:headset" class="text-[16px]" />
|
|
38
|
-
<span class="text-xs font-bold uppercase tracking-widest">
|
|
39
|
-
Tư vấn miễn phí · Đào tạo Proxmox Virtual Environment
|
|
40
|
-
</span>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<h1 class="font-['Montserrat'] font-extrabold text-2xl sm:text-[2rem] leading-[1.15] mb-6">
|
|
44
|
-
Chưa biết nên học khóa nào?<br />
|
|
45
|
-
Được tư vấn đúng lộ trình trong 15 phút.
|
|
46
|
-
</h1>
|
|
47
|
-
|
|
48
|
-
<p class="text-blue-100/90 text-lg leading-relaxed mb-8 max-w-xl">
|
|
49
|
-
Đội ngũ kỹ sư hạ tầng của Long Vân sẽ đánh giá năng lực hiện tại và
|
|
50
|
-
mục tiêu công việc của bạn, từ đó đề xuất khóa học Proxmox, Ceph hoặc
|
|
51
|
-
DevOps phù hợp nhất — thay vì để bạn tự đoán.
|
|
52
|
-
</p>
|
|
53
|
-
|
|
54
|
-
<div class="flex flex-wrap gap-4">
|
|
55
|
-
<NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')"
|
|
56
|
-
class="bg-white text-[#004AC6] px-7 py-3.5 rounded-[10px] font-bold flex items-center gap-2 hover:bg-blue-50 transition-colors shadow-lg active:scale-95">
|
|
57
|
-
Đặt lịch tư vấn miễn phí
|
|
58
|
-
<Icon name="lucide:arrow-right" class="text-[18px]" />
|
|
59
|
-
</NuxtLink>
|
|
60
|
-
|
|
61
|
-
<NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')"
|
|
62
|
-
class="bg-transparent border border-white/40 text-white px-7 py-3.5 rounded-[10px] font-bold hover:bg-white/10 transition-colors">
|
|
63
|
-
Xem danh sách khóa học
|
|
64
|
-
</NuxtLink>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
<!-- Right -->
|
|
69
|
-
<div class="relative
|
|
70
|
-
<div class="relative z-10 rounded-2xl overflow-hidden">
|
|
71
|
-
<!-- <NuxtImg src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
|
|
72
|
-
alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" /> -->
|
|
73
|
-
<img src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
|
|
74
|
-
alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" />
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
|
|
80
|
-
<!-- Background phía dưới hero -->
|
|
81
|
-
<div class="bg-[#F7F9FB]">
|
|
82
|
-
<!-- Stats bar -->
|
|
83
|
-
<div class="relative -mt-8 z-10 max-w-7xl mx-auto px-6 lg:px-8">
|
|
84
|
-
<div class="hero-stats bg-white rounded-xl shadow-xl border border-slate-100 py-8 px-6">
|
|
85
|
-
<div class="grid grid-cols-3 gap-8 divide-x divide-slate-200">
|
|
86
|
-
<div class="text-center">
|
|
87
|
-
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
88
|
-
1.200+
|
|
89
|
-
</div>
|
|
90
|
-
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
91
|
-
Học viên đã được tư vấn
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div class="text-center">
|
|
96
|
-
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
97
|
-
96%
|
|
98
|
-
</div>
|
|
99
|
-
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
100
|
-
Chọn đúng khóa ngay lần đầu
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
<div class="text-center">
|
|
105
|
-
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
106
|
-
15 phút
|
|
107
|
-
</div>
|
|
108
|
-
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
109
|
-
Thời gian tư vấn trung bình
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
|
|
115
|
-
<!-- Khoảng cách trước section tiếp theo -->
|
|
116
|
-
<div class="h-16"></div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
</section>
|
|
120
|
-
</template>
|
|
121
|
-
|
|
122
|
-
<script setup>
|
|
123
|
-
const { scrollTo } = useScrollToSection()
|
|
124
|
-
useScrollAnimate('.hero-stats', 'fade-up')
|
|
125
|
-
</script>
|
|
126
|
-
|
|
127
|
-
<style scoped>
|
|
128
|
-
@keyframes pulse-ring {
|
|
129
|
-
0% {
|
|
130
|
-
transform: scale(1);
|
|
131
|
-
opacity: 0.6;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
100% {
|
|
135
|
-
transform: scale(2.5);
|
|
136
|
-
opacity: 0;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.hero-pulse {
|
|
141
|
-
animation: pulse-ring 3s ease-out infinite;
|
|
142
|
-
transform-origin: center;
|
|
143
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<section id="#" class="relative">
|
|
3
|
+
<!-- Hero -->
|
|
4
|
+
<div class="bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] text-white pt-40 pb-24 overflow-hidden relative">
|
|
5
|
+
<!-- Dot grid pattern -->
|
|
6
|
+
<div class="absolute inset-0 opacity-[0.06]"
|
|
7
|
+
style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>
|
|
8
|
+
|
|
9
|
+
<!-- Cluster nodes decoration -->
|
|
10
|
+
<svg class="absolute inset-0 w-full h-full opacity-[0.08]" xmlns="http://www.w3.org/2000/svg">
|
|
11
|
+
<!-- Connection lines -->
|
|
12
|
+
<line x1="15%" y1="25%" x2="35%" y2="45%" stroke="white" stroke-width="1" />
|
|
13
|
+
<line x1="35%" y1="45%" x2="25%" y2="70%" stroke="white" stroke-width="1" />
|
|
14
|
+
<line x1="35%" y1="45%" x2="55%" y2="35%" stroke="white" stroke-width="1" />
|
|
15
|
+
<line x1="55%" y1="35%" x2="75%" y2="55%" stroke="white" stroke-width="1" />
|
|
16
|
+
<line x1="75%" y1="55%" x2="85%" y2="30%" stroke="white" stroke-width="1" />
|
|
17
|
+
<line x1="75%" y1="55%" x2="65%" y2="75%" stroke="white" stroke-width="1" />
|
|
18
|
+
<!-- Nodes -->
|
|
19
|
+
<circle cx="15%" cy="25%" r="4" fill="white" />
|
|
20
|
+
<circle cx="35%" cy="45%" r="5" fill="white" />
|
|
21
|
+
<circle cx="25%" cy="70%" r="3.5" fill="white" />
|
|
22
|
+
<circle cx="55%" cy="35%" r="4.5" fill="white" />
|
|
23
|
+
<circle cx="75%" cy="55%" r="5" fill="white" />
|
|
24
|
+
<circle cx="85%" cy="30%" r="3.5" fill="white" />
|
|
25
|
+
<circle cx="65%" cy="75%" r="4" fill="white" />
|
|
26
|
+
<!-- Pulse rings -->
|
|
27
|
+
<circle cx="35%" cy="45%" r="12" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse" />
|
|
28
|
+
<circle cx="75%" cy="55%" r="14" fill="none" stroke="white" stroke-width="0.5" class="hero-pulse"
|
|
29
|
+
style="animation-delay: 1.5s" />
|
|
30
|
+
</svg>
|
|
31
|
+
|
|
32
|
+
<div class="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center relative z-10">
|
|
33
|
+
<!-- Left -->
|
|
34
|
+
<div>
|
|
35
|
+
<div
|
|
36
|
+
class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-4 py-2 rounded-[10px] border border-white/20 mb-6">
|
|
37
|
+
<Icon name="lucide:headset" class="text-[16px]" />
|
|
38
|
+
<span class="text-xs font-bold uppercase tracking-widest">
|
|
39
|
+
Tư vấn miễn phí · Đào tạo Proxmox Virtual Environment
|
|
40
|
+
</span>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<h1 class="font-['Montserrat'] font-extrabold text-2xl sm:text-[2rem] leading-[1.15] mb-6">
|
|
44
|
+
Chưa biết nên học khóa nào?<br />
|
|
45
|
+
Được tư vấn đúng lộ trình trong 15 phút.
|
|
46
|
+
</h1>
|
|
47
|
+
|
|
48
|
+
<p class="text-blue-100/90 text-lg leading-relaxed mb-8 max-w-xl">
|
|
49
|
+
Đội ngũ kỹ sư hạ tầng của Long Vân sẽ đánh giá năng lực hiện tại và
|
|
50
|
+
mục tiêu công việc của bạn, từ đó đề xuất khóa học Proxmox, Ceph hoặc
|
|
51
|
+
DevOps phù hợp nhất — thay vì để bạn tự đoán.
|
|
52
|
+
</p>
|
|
53
|
+
|
|
54
|
+
<div class="flex flex-wrap justify-center gap-4 lg:justify-start">
|
|
55
|
+
<NuxtLink to="#lien-he" @click.prevent="scrollTo('lien-he')"
|
|
56
|
+
class="bg-white text-[#004AC6] px-7 py-3.5 rounded-[10px] font-bold flex items-center gap-2 hover:bg-blue-50 transition-colors shadow-lg active:scale-95">
|
|
57
|
+
Đặt lịch tư vấn miễn phí
|
|
58
|
+
<Icon name="lucide:arrow-right" class="text-[18px]" />
|
|
59
|
+
</NuxtLink>
|
|
60
|
+
|
|
61
|
+
<NuxtLink to="#dao-tao" @click.prevent="scrollTo('dao-tao')"
|
|
62
|
+
class="bg-transparent border border-white/40 text-white px-7 py-3.5 rounded-[10px] font-bold hover:bg-white/10 transition-colors">
|
|
63
|
+
Xem danh sách khóa học
|
|
64
|
+
</NuxtLink>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Right: ẩn trên mobile/tablet để tiết kiệm chiều cao, chỉ hiện khi có đủ chỗ 2 cột -->
|
|
69
|
+
<div class="relative hidden justify-center lg:flex">
|
|
70
|
+
<div class="relative z-10 rounded-2xl overflow-hidden">
|
|
71
|
+
<!-- <NuxtImg src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
|
|
72
|
+
alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" /> -->
|
|
73
|
+
<img src="/images/image_from_https_hercules_cdn.com_file_6dztkvkfnip0ud23tzzvu57c.png"
|
|
74
|
+
alt="Long Vân Proxmox Infrastructure" class="w-full h-full object-contain p-4" />
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- Background phía dưới hero -->
|
|
81
|
+
<div class="bg-[#F7F9FB]">
|
|
82
|
+
<!-- Stats bar -->
|
|
83
|
+
<div class="relative -mt-8 z-10 max-w-7xl mx-auto px-6 lg:px-8">
|
|
84
|
+
<div class="hero-stats bg-white rounded-xl shadow-xl border border-slate-100 py-6 px-3 sm:py-8 sm:px-6">
|
|
85
|
+
<div class="grid grid-cols-3 gap-2 sm:gap-8 divide-x divide-slate-200">
|
|
86
|
+
<div class="text-center">
|
|
87
|
+
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
88
|
+
1.200+
|
|
89
|
+
</div>
|
|
90
|
+
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
91
|
+
Học viên đã được tư vấn
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="text-center">
|
|
96
|
+
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
97
|
+
96%
|
|
98
|
+
</div>
|
|
99
|
+
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
100
|
+
Chọn đúng khóa ngay lần đầu
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class="text-center">
|
|
105
|
+
<div class="font-['Montserrat'] font-extrabold text-2xl sm:text-3xl text-[#004AC6]">
|
|
106
|
+
15 phút
|
|
107
|
+
</div>
|
|
108
|
+
<div class="text-slate-500 text-xs sm:text-sm font-medium mt-1">
|
|
109
|
+
Thời gian tư vấn trung bình
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<!-- Khoảng cách trước section tiếp theo -->
|
|
116
|
+
<div class="h-16"></div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
</template>
|
|
121
|
+
|
|
122
|
+
<script setup>
|
|
123
|
+
const { scrollTo } = useScrollToSection()
|
|
124
|
+
useScrollAnimate('.hero-stats', 'fade-up')
|
|
125
|
+
</script>
|
|
126
|
+
|
|
127
|
+
<style scoped>
|
|
128
|
+
@keyframes pulse-ring {
|
|
129
|
+
0% {
|
|
130
|
+
transform: scale(1);
|
|
131
|
+
opacity: 0.6;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
100% {
|
|
135
|
+
transform: scale(2.5);
|
|
136
|
+
opacity: 0;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.hero-pulse {
|
|
141
|
+
animation: pulse-ring 3s ease-out infinite;
|
|
142
|
+
transform-origin: center;
|
|
143
|
+
}
|
|
144
144
|
</style>
|