nuxt-layer-core 1.1.0 → 1.1.2
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/CtaSection.vue +347 -347
- package/app/layers/solution/app/components/HeroSection.vue +143 -143
- package/app/layers/solution/app/components/RegistrationForm.vue +9 -6
- 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/TheHeader.vue +255 -192
- package/app/layers/solution/app/components/proxmox/ComparisonSection.vue +9 -9
- package/app/layers/solution/app/components/proxmox/HciOverviewSection.vue +1 -1
- package/app/layers/solution/app/components/proxmox/PainPointsSection.vue +43 -0
- package/app/layers/solution/app/components/proxmox/TrainingBenefitsSection.vue +1 -1
- package/app/layers/solution/app/data/proxmox-content.ts +196 -158
- package/app/layers/solution/app/pages/giai-phap-proxmox/[slug]/proxmox-hci/index.vue.disabled +1 -0
- package/package.json +52 -52
|
@@ -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 flex justify-center">
|
|
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 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 flex justify-center">
|
|
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>
|
|
@@ -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]">
|
|
@@ -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>
|