base

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

app/app.vue

@@ -0,0 +1,15 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+<script setup>
+const route = useRoute();
+useHead({
+  // or as a function
+  titleTemplate: (productCategory) => {
+    return productCategory ? `${productCategory} - Site Title` : 'Site Title';
+  },
+  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }],
+});
+</script>

app/assets/styles/main.css

@@ -0,0 +1,29 @@
+@import 'bulma/css/bulma.css';
+
+@import './variables.css';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.bg-primary {
+  background-color: var(--color-primary);
+}
+
+a {
+  color: inherit;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+  vertical-align: middle;
+}
+
+.h-100 {
+  height: 100%;
+}

app/assets/styles/variables.css

@@ -0,0 +1,19 @@
+:root {
+  /* Primary */
+  --color-primary: #16a34a;
+  --color-hover: #15803d;
+
+  /* Background */
+  --color-bg-light: #f0fdf4;
+  --color-card-bg: #ffffff;
+
+  /* Border */
+  --color-border: #bbf7d0;
+
+  /* Text */
+  --color-text-dark: #14532d;
+  --color-text-main: #111827;
+  --color-text-secondary: #374151;
+  --color-text-muted: #6b7280;
+  --color-text-light: #9ca3af;
+}

app/components/Footer/Footer.vue

@@ -0,0 +1,36 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="columns">
+        <div class="column"><FooterInfo /></div>
+        <div class="column">
+          <!-- <h3>Lien he</h3> -->
+        </div>
+      </div>
+      <div class="copy-right">
+        <img src="/icons/shield.svg" alt="" />
+        <span>BigDataTech Cloud. All rights reserved.</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import FooterInfo from './FooterInfo.vue';
+</script>
+<style lang="scss">
+.footer {
+  // padding: 0 0 20px;
+  padding-bottom: 0;
+  .copy-right {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+</style>

app/components/Footer/FooterInfo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="company">
+    <p class="logo">
+      <img src="/logo.png" alt="Logo" />
+    </p>
+    <p class="company-item">
+      <img class="icon" src="/icons/map.svg" alt="icon-map" />
+      <span>{{ companyInfo.address }}</span>
+    </p>
+    <p class="company-item">
+      <img class="icon" src="/icons/phone-call.svg" alt="icon-phone" />
+      <span>{{ companyInfo.phone.hotline }}</span>
+    </p>
+    <p class="company-item">
+      <img class="icon" src="/icons/email.svg" alt="icon-email" />
+      <span>{{ companyInfo.email.contact }}</span>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { companyInfo } from '~/config/company';
+</script>
+
+<style lang="scss">
+.company {
+  .logo {
+    width: 200px;
+  }
+  .company-item {
+    display: flex;
+    gap: 10px;
+    & + .company-item {
+        margin-top: 10px;
+    }
+    .icon {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
+</style>

app/components/Header/Header.vue

@@ -0,0 +1,25 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <HeaderLogo />
+      <HeaderMenu />
+    </div>
+  </header>
+</template>
+
+<script setup>
+import HeaderLogo from './HeaderLogo.vue';
+import HeaderMenu from './HeaderMenu.vue';
+</script>
+
+<style lang="scss">
+.header {
+  box-shadow: 4px 4px 4px 0px #00000040;
+  .container {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+}
+</style>

app/components/Header/HeaderLogo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img src="/logo.png" alt="" srcset="" />
+    </NuxtLink>
+  </div>
+</template>
+
+<style lang="scss">
+.logo {
+  a {
+    display: inline-block;
+    width: 150px;
+  }
+}
+</style>

app/components/Header/HeaderMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav class="navbar">
+    <div class="navbar-menu">
+      <div class="navbar-start">
+        <NuxtLink :key="index" v-for="(item, index) in listPage" :to="item.path" class="navbar-item"
+          >{{ item.title }}
+        </NuxtLink>
+      </div>
+      <div class="navbar-end" v-if="!isUser">
+        <NuxtLink to="#" class="navbar-item"> Đăng nhập </NuxtLink>
+        <NuxtLink to="#" class="navbar-item"> Đăng ký </NuxtLink>
+      </div>
+      <HeaderUser v-else />
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import HeaderUser from './HeaderUser.vue';
+
+const isUser = ref(false);
+
+const listPage = [
+  // {
+  //   path: '/',
+  //   title: 'Trang chủ',
+  // },
+  // {
+  //   path: '/about',
+  //   title: 'Giới thiệu',
+  // },
+  {
+    path: '#service-pricing',
+    title: 'Bảng giá',
+  },
+  {
+    path: '#contact',
+    title: 'Liên hệ',
+  },
+];
+</script>
+
+<style lang="scss">
+.navbar {
+  flex: auto;
+  min-height: fit-content;
+
+  .navbar-menu {
+    justify-content: flex-end;
+    gap: 30px;
+  }
+  .navbar-start {
+    margin-inline-end: unset;
+    flex: auto;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .navbar-end {
+    margin-inline-start: unset;
+    gap: 10px;
+  }
+
+  .navbar-item {
+    border-radius: 24px;
+    padding: 10px 20px;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 600;
+  }
+  .router-link-active {
+    background-color: var(--color-primary);
+    color: #fff;
+  }
+  a.navbar-item:focus,
+  a.navbar-item:focus-within,
+  a.navbar-item:hover,
+  .navbar-link:focus,
+  .navbar-link:focus-within,
+  .navbar-link:hover {
+    background-color: var(--color-hover);
+    color: #fff;
+  }
+}
+</style>

app/components/Header/HeaderUser.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="navbar-end">
+    <ul class="menu-user">
+      <li class="menu-user-item">
+        <img class="img-avatar" src="/icons/avatar.svg" alt="avatar" /> <span> Nguyễn Văn Nam </span>
+        <ul class="sub-menu">
+          <li>Tài khoản</li>
+          <li>Đăng xuất</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<style lang="scss">
+.header {
+  .menu-user {
+    min-width: 180px;
+    .menu-user-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      position: relative;
+      cursor: pointer;
+
+      &:hover {
+        .sub-menu {
+          display: block;
+        }
+      }
+    }
+    .img-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+    }
+  }
+  .sub-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 2px 2px 2px 0px #00000040;
+    border-radius: 16px;
+    padding: 20px 10px;
+
+    li {
+      padding: 5px;
+      & + li {
+        margin-top: 0.625rem;
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: var(--color-hover);
+        color: #fff;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>

app/components/ui/Pricing/PricingItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="pricing-item">
+    <h3 class="pricing-name">CX23</h3>
+    <p class="price">
+      <span class="price-value">300.000</span>&nbsp;
+      <span class="price-unit">VND/Tháng</span>
+    </p>
+    <div class="list-info">
+      <div class="info-item">
+        <p class="info-icon">
+          <img src="/icons/cpu.svg" alt="CPU" />
+        </p>
+        <p class="info-text">8 Core</p>
+      </div>
+      <div class="info-item">
+        <p class="info-icon">
+          <img src="/icons/ram.svg" alt="CPU" />
+        </p>
+        <p class="info-text">8 GB</p>
+      </div>
+      <div class="info-item">
+        <p class="info-icon">
+          <img src="/icons/hard-drive.svg" alt="CPU" />
+        </p>
+        <p class="info-text">8 GB</p>
+      </div>
+      <div class="info-item">
+        <p class="info-icon">
+          <img src="/icons/measure.svg" alt="CPU" />
+        </p>
+        <p class="info-text">100 Mbps</p>
+      </div>
+      <div class="info-item">
+        <p class="info-icon">
+          <img src="/icons/ip-address.svg" alt="CPU" />
+        </p>
+        <p class="info-text">IPv4</p>
+      </div>
+    </div>
+    <div class="btn-action">
+      <button class="btn-register">Đăng ký ngay</button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.pricing-item {
+  background-color: #dcfce7;
+  padding: 50px 30px;
+  border-radius: 16px;
+  box-shadow: 4px 4px 4px 0 rgba($color: #000000, $alpha: 0.2);
+
+  .pricing-name {
+    text-align: center;
+    font-weight: 700;
+    font-size: 32px;
+    margin-bottom: 16px;
+  }
+  .price {
+    font-style: italic;
+    text-align: center;
+    margin-bottom: 20px;
+
+    .price-value {
+      font-size: 32px;
+      font-weight: 700;
+    }
+
+    .price-unit {
+      font-weight: 700;
+    }
+  }
+
+  .list-info {
+    margin: 20px 0;
+    .info-item {
+      background-color: #fff;
+      border-radius: 16px;
+      display: flex;
+      gap: 8px;
+      padding:5px 10px;
+      align-items: center;
+      box-shadow: 2px 2px 4px 0 rgba($color: #000000, $alpha: 0.1);
+
+      & + .info-item {
+        margin-top: 15px;
+      }
+      .info-icon {
+        width: 32px;
+        height: 32px;
+      }
+      .info-text {
+        font-weight: 700;
+        font-size: 16px;
+      }
+    }
+  }
+  .btn-action {
+    .btn-register {
+      width: 100%;
+      text-align: center;
+      color: #fff;
+      background-color: var(--color-primary);
+      padding: 10px;
+      font-weight: 700;
+      font-size: 18px;
+      border-radius: 16px;
+    }
+  }
+}
+</style>

app/config/company.js

@@ -0,0 +1,21 @@
+export const companyInfo = {
+  name: 'Công ty TNHH Giải Pháp Công Nghệ Phân Tích Dữ Liệu Lớn',
+
+  phone: {
+    hotline: '(+84) 943 833 599',
+    support: '',
+    sales: '',
+  },
+  email: {
+    contact: 'contact@bigdatatech.vn', 
+    support: '', 
+  },
+  address: 'Tầng 4, 505 Đường Minh Khai, Phường Vĩnh Tuy, Hà Nội',
+
+  website: 'https://bigdatatech.vn/',
+
+  social: {
+    facebook: 'https://www.facebook.com/BigDataTechVietnam',
+    zalo: 'https://zalo.me/0943833599',
+  },
+};

app/layouts/default.vue

@@ -0,0 +1,10 @@
+<template>
+  <Header />
+  <slot />
+  <Footer />
+</template>
+
+<script>
+import Footer from '~/components/Footer/Footer.vue';
+import Header from '~/components/Header/Header.vue';
+</script>

app/pages/about/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="container">Page content about</div>
+</template>
+
+<script setup>
+
+</script>

app/pages/index.vue

@@ -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>

app/pages/product/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="container">
+
+    </div>
+</template>

build.sh

@@ -0,0 +1,5 @@
+PROJECT="bigdatacloud"
+IMAGE="web"
+
+docker build -t docker.bigdatatech.vn/$PROJECT/$IMAGE:latest .
+docker push docker.bigdatatech.vn/$PROJECT/$IMAGE:latest

nuxt.config.ts

@@ -0,0 +1,17 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+
+  devtools: { enabled: true },
+
+  css: ['@/assets/styles/main.css'],
+
+  app: {
+    head: {
+      title: 'BigDataTech-Cloud',
+      htmlAttrs: {
+        lang: 'vi',
+      },
+      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    },
+  },
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "base",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "bulma": "^1.0.4",
+    "nuxt": "^4.2.2",
+    "slick-carousel": "^1.8.1",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.4",
+    "vue-slick-carousel": "^1.0.6"
+  },
+  "devDependencies": {
+    "sass": "^1.98.0"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}