base
This commit is contained in:
Thien Pham Van
200
app/pages/index.vue
Normal file
200
app/pages/index.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="home-page mb-5">
|
||||
<section class="banner mb-6">
|
||||
<div
|
||||
class="banner-item"
|
||||
:style="{
|
||||
backgroundImage: `url('https://www.shutterstock.com/image-photo/fanshaped-cirrus-clouds-scattered-by-600nw-2662999063.jpg')`,
|
||||
}"
|
||||
>
|
||||
<div class="container h-100">
|
||||
<div class="fixed-grid h-100">
|
||||
<div class="grid h-100">
|
||||
<div class="cell left">
|
||||
<h2 class="title">BigDataTech Cloud cung cấp dịch vụ cloud</h2>
|
||||
<p class="sub-title">Chúng tôi chuyên cung cấp các dịch vụ colud chuyên nghiệp</p>
|
||||
<NuxtLink href="/" class="button is-primary">Đọc thêm</NuxtLink>
|
||||
</div>
|
||||
<div class="cell right">
|
||||
<img src="https://www.ece.fr/wp-content/uploads/sites/2/2024/04/saas-concept-collage.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="service-pricing" id="service-pricing">
|
||||
<div class="container">
|
||||
<h2 class="title">Bảng giá dịch vụ Cloud Server</h2>
|
||||
<p class="sub-title">Giải pháp máy chủ linh hoạt, hiệu năng cao cho website và ứng dụng của bạn.</p>
|
||||
<div class="menu-service-pricing">
|
||||
<div class="nav-menu">
|
||||
<p class="nav-menu-item active">Basic</p>
|
||||
<p class="nav-menu-item">Premium</p>
|
||||
<p class="nav-menu-item">Enterprise</p>
|
||||
</div>
|
||||
<div class="menu-service-content">
|
||||
<div class="list-service">
|
||||
<div class="pricing-card" v-for="i in 8">
|
||||
<PricingItem />
|
||||
</div>
|
||||
</div>
|
||||
<p class="note-service mt-5">* Giá trên chưa bao gồm VAT</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="contact" id="contact">
|
||||
<div class="container">
|
||||
<h2 class="title">Liên hệ</h2>
|
||||
<p class="sub-title">Liên hiện với chúng tôi để nhận được tư vấn tốt nhất cho yêu cầu của bạn.</p>
|
||||
<div class="fixed-grid has-12-cols">
|
||||
<div class="grid">
|
||||
<div class="cell is-col-span-6">
|
||||
<label class="label" for="contact-name">Họ và tên<span class="has-text-danger ml-1">*</span></label>
|
||||
<input class="input" id="contact-name" type="text" placeholder="Nhập họ và tên" />
|
||||
</div>
|
||||
<div class="cell is-col-span-6">
|
||||
<label class="label" for="contact-email"
|
||||
>Email / Số điện thoại<span class="has-text-danger ml-1">*</span></label
|
||||
>
|
||||
<input class="input" id="contact-email" type="text" placeholder="Nhập email / Số điện thoại" />
|
||||
</div>
|
||||
<div class="cell is-col-span-12">
|
||||
<label class="label" for="contact-content">Nội dung<span class="has-text-danger ml-1">*</span></label>
|
||||
<textarea class="textarea" id="contact-content" placeholder="Nội dung liên hệ" rows="6"></textarea>
|
||||
</div>
|
||||
<div class="cell is-col-span-12">
|
||||
<button class="button is-primary">Gửi ngay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PricingItem from '~/components/ui/Pricing/PricingItem.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-page {
|
||||
.title {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
.banner-item {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 758px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
.title {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 36px;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.button {
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
max-width: 668px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-pricing {
|
||||
.menu-service-pricing {
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.nav-menu-item {
|
||||
padding: 15px 25px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border: 1px solid #000;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
min-width: 168px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover);
|
||||
color: #fff;
|
||||
border-color: var(--color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-service-content {
|
||||
background-color: #f0fdf4;
|
||||
padding: 40px 20px;
|
||||
.list-service {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 0 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
.note-service {
|
||||
text-align: right;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
.is-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user