1

2 months ago · 58eedc53e1
202 changed files with 34058 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead"
+      }
+    ]
+  ]
+}
--- a/.env.dev
+++ b/.env.dev
@ -0,0 +1,2 @@
+NODE_ENV="development"
+VITE_BASE_API="/api"
--- a/.env.prod
+++ b/.env.prod
@ -0,0 +1,2 @@
+NODE_ENV="production"
+VITE_BASE_API="http://localhost:5090/"
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.vercel
--- a/README.md
+++ b/README.md
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>博工科技</title>
+  </head>
+  <body theme="custom-dark">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,44 @@
+{
+  "name": "-",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode dev --host",
+    "build": "vite build",
+    "prod": "vite --mode prod",
+    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
+    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@phosphor-icons/vue": "^2.1.6",
+    "@vueuse/core": "^10.8.0",
+    "axios": "^1.7.2",
+    "bootstrap": "^5.3.3",
+    "swiper": "^11.0.6",
+    "vant": "^4.9.4",
+    "vue": "^3.4.15",
+    "vue-countup-v3": "^1.4.1",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.25.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@tsconfig/node20": "^20.1.2",
+    "@types/bootstrap": "^5.2.10",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "amfe-flexible": "^2.2.1",
+    "npm-run-all2": "^6.1.1",
+    "postcss-pxtorem": "^6.0.0",
+    "sass": "^1.71.1",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.11",
+    "vue-tsc": "^1.8.27"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+
+  import DefaultLayout from './layouts/DefaultLayout.vue';
+
+  onMounted(() => {
+    const body = document.querySelector('body');
+    body.setAttribute('theme', 'custom-dark');
+  });
+</script>
+
+<template>
+  <keep-alive>
+    <component :is="$route.meta.layout || DefaultLayout">
+      <router-view />
+    </component>
+  </keep-alive>
+</template>
--- a/src/assets/data/navbarData.ts
+++ b/src/assets/data/navbarData.ts
@ -0,0 +1,46 @@
+export const navbarData = [
+  {
+    id: "menu1",
+    menuTitle: "Home",
+    path: "#",
+    menuItems: [
+      {
+        id: "homeONe",
+        title: "Home One",
+        menuItemPath: "/",
+      },
+      {
+        id: "homeTwo",
+        title: "Home Two",
+        menuItemPath: "/landing-page-two",
+      },
+    ],
+  },
+  {
+    id: "about-page",
+    menuTitle: "About",
+    path: "/about-us",
+  },
+  {
+    id: "menu2",
+    menuTitle: "Blog",
+    path: "#",
+    menuItems: [
+      {
+        id: "all-blogs",
+        title: "Blogs",
+        menuItemPath: "/blogs",
+      },
+      {
+        id: "Blogs-details",
+        title: "Blog Details",
+        menuItemPath: "/blog-details",
+      },
+    ],
+  },
+  {
+    id: "contact-page",
+    menuTitle: "Contact",
+    path: "/contact",
+  },
+];
--- a/src/assets/image/444164749.jpg
+++ b/src/assets/image/444164749.jpg
--- a/src/assets/image/about-1.png
+++ b/src/assets/image/about-1.png
--- a/src/assets/image/all-project-link.png
+++ b/src/assets/image/all-project-link.png
--- a/src/assets/image/back.png
+++ b/src/assets/image/back.png
--- a/src/assets/image/calden.png
+++ b/src/assets/image/calden.png
--- a/src/assets/image/capture/1.png
+++ b/src/assets/image/capture/1.png
--- a/src/assets/image/capture/10.png
+++ b/src/assets/image/capture/10.png
--- a/src/assets/image/capture/11.png
+++ b/src/assets/image/capture/11.png
--- a/src/assets/image/capture/12.png
+++ b/src/assets/image/capture/12.png
--- a/src/assets/image/capture/13.png
+++ b/src/assets/image/capture/13.png
--- a/src/assets/image/capture/2.png
+++ b/src/assets/image/capture/2.png
--- a/src/assets/image/capture/3.png
+++ b/src/assets/image/capture/3.png
--- a/src/assets/image/capture/4.png
+++ b/src/assets/image/capture/4.png
--- a/src/assets/image/capture/5.png
+++ b/src/assets/image/capture/5.png
--- a/src/assets/image/capture/6.png
+++ b/src/assets/image/capture/6.png
--- a/src/assets/image/capture/7.png
+++ b/src/assets/image/capture/7.png
--- a/src/assets/image/capture/8.png
+++ b/src/assets/image/capture/8.png
--- a/src/assets/image/capture/9.png
+++ b/src/assets/image/capture/9.png
--- a/src/assets/image/image.png
+++ b/src/assets/image/image.png
--- a/src/assets/image/index1/111.jpg
+++ b/src/assets/image/index1/111.jpg
--- a/src/assets/image/index1/222.jpg
+++ b/src/assets/image/index1/222.jpg
--- a/src/assets/image/index1/333.jpg
+++ b/src/assets/image/index1/333.jpg
--- a/src/assets/image/index1/444.jpg
+++ b/src/assets/image/index1/444.jpg
--- a/src/assets/image/index1/baogaoBG.png
+++ b/src/assets/image/index1/baogaoBG.png
--- a/src/assets/image/index1/cbg.png
+++ b/src/assets/image/index1/cbg.png
--- a/src/assets/image/index1/close.png
+++ b/src/assets/image/index1/close.png
--- a/src/assets/image/index1/close1.png
+++ b/src/assets/image/index1/close1.png
--- a/src/assets/image/index1/icon01.png
+++ b/src/assets/image/index1/icon01.png
--- a/src/assets/image/index1/icon02.png
+++ b/src/assets/image/index1/icon02.png
--- a/src/assets/image/index1/icon03.png
+++ b/src/assets/image/index1/icon03.png
--- a/src/assets/image/index1/icon04.png
+++ b/src/assets/image/index1/icon04.png
--- a/src/assets/image/index1/playBtn.svg
+++ b/src/assets/image/index1/playBtn.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><title>Play_40x40</title><path d="M20 .833a19.167 19.167 0 1 0 19.167 19.167 19.167 19.167 0 0 0-19.167-19.167z" opacity=".6"/><path d="M20 2a18 18 0 1 1-18 18 18.02 18.02 0 0 1 18-18m0-2a20 20 0 1 0 20 20 20 20 0 0 0-20-20zm8.072 20.9a1.671 1.671 0 0 1-.513.513l-9.99 6.357a1.671 1.671 0 0 1-2.569-1.413v-12.715a1.671 1.671 0 0 1 2.569-1.41l9.99 6.358a1.671 1.671 0 0 1 .513 2.31z" fill="#fff"/></svg>
--- a/src/assets/image/index1/tj.png
+++ b/src/assets/image/index1/tj.png
--- a/src/assets/image/index1/yuyueBG.png
+++ b/src/assets/image/index1/yuyueBG.png
--- a/src/assets/image/index1/吴华林.jpg
+++ b/src/assets/image/index1/吴华林.jpg
--- a/src/assets/image/index1/李陶.jpg
+++ b/src/assets/image/index1/李陶.jpg
--- a/src/assets/image/index1/胡文详.jpg
+++ b/src/assets/image/index1/胡文详.jpg
--- a/src/assets/image/index1/袁道红.jpg
+++ b/src/assets/image/index1/袁道红.jpg
--- a/src/assets/image/location.png
+++ b/src/assets/image/location.png
--- a/src/assets/image/logo.png
+++ b/src/assets/image/logo.png
--- a/src/assets/image/not-found.png
+++ b/src/assets/image/not-found.png
--- a/src/assets/image/report.png
+++ b/src/assets/image/report.png
--- a/src/assets/image/test/01.png
+++ b/src/assets/image/test/01.png
--- a/src/assets/image/test/02.png
+++ b/src/assets/image/test/02.png
--- a/src/assets/image/test/03.png
+++ b/src/assets/image/test/03.png
--- a/src/assets/image/test/04.png
+++ b/src/assets/image/test/04.png
--- a/src/assets/image/test/1.png
+++ b/src/assets/image/test/1.png
--- a/src/assets/image/test/10.png
+++ b/src/assets/image/test/10.png
--- a/src/assets/image/test/11.png
+++ b/src/assets/image/test/11.png
--- a/src/assets/image/test/12.png
+++ b/src/assets/image/test/12.png
--- a/src/assets/image/test/13.png
+++ b/src/assets/image/test/13.png
--- a/src/assets/image/test/14.png
+++ b/src/assets/image/test/14.png
--- a/src/assets/image/test/15.png
+++ b/src/assets/image/test/15.png
--- a/src/assets/image/test/16.png
+++ b/src/assets/image/test/16.png
--- a/src/assets/image/test/17.png
+++ b/src/assets/image/test/17.png
--- a/src/assets/image/test/18.png
+++ b/src/assets/image/test/18.png
--- a/src/assets/image/test/19.png
+++ b/src/assets/image/test/19.png
--- a/src/assets/image/test/2.png
+++ b/src/assets/image/test/2.png
--- a/src/assets/image/test/20.png
+++ b/src/assets/image/test/20.png
--- a/src/assets/image/test/21.png
+++ b/src/assets/image/test/21.png
--- a/src/assets/image/test/22.png
+++ b/src/assets/image/test/22.png
--- a/src/assets/image/test/23.png
+++ b/src/assets/image/test/23.png
--- a/src/assets/image/test/24.png
+++ b/src/assets/image/test/24.png
--- a/src/assets/image/test/3.jpg
+++ b/src/assets/image/test/3.jpg
--- a/src/assets/image/test/3.png
+++ b/src/assets/image/test/3.png
--- a/src/assets/image/test/4.png
+++ b/src/assets/image/test/4.png
--- a/src/assets/image/test/5.png
+++ b/src/assets/image/test/5.png
--- a/src/assets/image/test/6.png
+++ b/src/assets/image/test/6.png
--- a/src/assets/image/test/7.png
+++ b/src/assets/image/test/7.png
--- a/src/assets/image/test/8.png
+++ b/src/assets/image/test/8.png
--- a/src/assets/image/test/9.png
+++ b/src/assets/image/test/9.png
--- a/src/assets/image/tick.png
+++ b/src/assets/image/tick.png
--- a/src/assets/styles/_common.scss
+++ b/src/assets/styles/_common.scss
@ -0,0 +1,284 @@
+// reset code start
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-decoration: none;
+  color: var(--white-neutral1);
+}
+
+button {
+  background: none;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 0rem;
+}
+
+input:focus {
+  outline: 1px solid var(--black-neutral2) !important;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="date"] {
+  text-transform: uppercase;
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+input,
+textarea {
+  padding: 12px 20px;
+  color: rgba(var(--black-neutral2), 1);
+  width: 100%;
+  outline-color: transparent;
+  font-size: 14px;
+  border-radius: 6px;
+  background-color: transparent;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  font-size: 16px;
+}
+input::placeholder,
+textarea::placeholder {
+  font-size: 16px;
+}
+input:focus,
+textarea:focus {
+  outline: 1px solid #2fa75f;
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+span {
+  display: inline-block;
+}
+// reset code end
+
+[theme="custom-light"] .light-mood-image-shape {
+  filter: brightness(0) !important;
+}
+
+// light theme common class
+[theme="custom-light"] .bg-light-white {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+[theme="custom-light"] .light-theme-white-text {
+  color: #fff !important;
+}
+
+/* scroll bar style */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: var(--black-neutral1);
+}
+::-webkit-scrollbar {
+  width: 6px;
+  background-color: var(--secondary-color);
+}
+
+.cart-scrollbar::-webkit-scrollbar {
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--secondary-color);
+  border-radius: 10px;
+  width: 2px;
+}
+
+/* swiper slider */
+.swiper-wrapper {
+  -webkit-transition-timing-function: linear !important;
+  -o-transition-timing-function: linear !important;
+  transition-timing-function: linear !important;
+}
+
+.m-t-120px {
+  margin-top: 120px;
+  @media (max-width: 1400px) {
+    margin-top: 100px;
+  }
+  @media (max-width: 1200px) {
+    margin-top: 80px;
+  }
+  @media (max-width: 992px) {
+    margin-top: 60px;
+  }
+}
+
+.m-t-60px {
+  margin-top: 60px;
+  @media (max-width: 1400px) {
+    margin-top: 40px;
+  }
+  @media (max-width: 1200px) {
+    margin-top: 36px;
+  }
+  @media (max-width: 992px) {
+    margin-top: 32px;
+  }
+}
+.m-t-40px {
+  margin-top: 40px;
+  @media (max-width: 1400px) {
+    margin-top: 32px;
+  }
+  @media (max-width: 1200px) {
+    margin-top: 28px;
+  }
+  @media (max-width: 992px) {
+    margin-top: 24px;
+  }
+}
+
+.m-t-32px {
+  margin-top: 32px;
+  @media (max-width: 1400px) {
+    margin-top: 26px;
+  }
+  @media (max-width: 1200px) {
+    margin-top: 24px;
+  }
+  @media (max-width: 992px) {
+    margin-top: 20px;
+  }
+}
+
+.m-b-60px {
+  margin-bottom: 60px;
+}
+.m-t-32px {
+  margin-top: 32px;
+}
+
+.p-32px {
+  padding: 32px;
+
+  @media (max-width: 1400px) {
+    padding: 24px;
+  }
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.gap-6px {
+  gap: 6px;
+}
+
+// animation
+@keyframes scaleUp {
+  50% {
+    transform: scale(1.25);
+  }
+}
+
+.scale-up-down {
+  animation: scaleUp 2s linear infinite;
+}
+
+//marque left
+@keyframes marqueeLeft {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
+.to-left {
+  animation: marqueeLeft 25s linear infinite;
+  white-space: nowrap;
+}
+
+// marque right
+@keyframes marqueeRight {
+  0% {
+    right: 0;
+  }
+  100% {
+    right: -100%;
+  }
+}
+
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.rotating {
+  -webkit-animation: rotating 2s linear infinite;
+  -moz-animation: rotating 2s linear infinite;
+  -ms-animation: rotating 2s linear infinite;
+  -o-animation: rotating 2s linear infinite;
+  animation: rotating 2s linear infinite;
+}
+
+.to-right {
+  animation: marqueeRight 25s linear infinite;
+}
+
+// back to home button style
+.button-back-to-home {
+  padding: 12px 20px;
+  background: var(--secondary-color);
+  border-radius: 8px;
+  color: var(--white-neutral1);
+  display: flex;
+  grid-area: 8px;
+  align-items: center;
+  width: fit-content;
+  position: relative;
+  z-index: 2;
+  transition: all 0.3s ease;
+
+  &:hover {
+    scale: 1.02;
+    color: var(--white-neutral1);
+  }
+}
--- a/src/assets/styles/_navbar.scss
+++ b/src/assets/styles/_navbar.scss
@ -0,0 +1,483 @@
+.navbar-container {
+  margin-top: 40px;
+}
+
+.desktop-navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  border-radius: 16px;
+  border: 1px solid var(--black-neutral3);
+  background: linear-gradient(153deg, rgba(255, 255, 255, 0.12) -65.62%, rgba(255, 255, 255, 0.04) 83.28%);
+
+  backdrop-filter: blur(25px);
+  padding: 16px 24px;
+
+  @media (max-width: 1200px) {
+    display: none;
+  }
+}
+
+[theme='custom-light'] .desktop-navbar-container {
+  background: #fff;
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+.logo-main {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+
+  &:hover {
+    color: #fff;
+  }
+  span {
+    color: var(--secondary-color);
+  }
+}
+
+[theme='custom-light'] .logo-main {
+  &:hover {
+    color: #1d1d1d;
+  }
+}
+
+.desktop-menu-items {
+  display: flex;
+  justify-content: space-between;
+  gap: 40px;
+  list-style: none;
+  color: var(--white-neutral1) !important;
+
+  @media (max-width: 1400px) {
+    gap: 24px;
+  }
+}
+
+[theme='custom-light'] .menu-item-text-white {
+  color: #222426 !important;
+  -webkit-text-fill-color: #222426 !important;
+}
+
+#primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding-left: 0px !important;
+  li {
+    .desktop-menu-item {
+      transition: all 0.3s ease-in-out;
+      white-space: nowrap;
+      text-decoration: none;
+      display: block;
+      position: relative;
+      z-index: 1;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color) 50%, #fff 50%);
+      background-size: 200% 100%;
+      background-position: -100%;
+      transition: all 0.3s ease-in-out;
+      &:before {
+        display: block;
+        content: '';
+        width: 0;
+        height: 3px;
+        bottom: 5px;
+        left: 0;
+        bottom: -3px;
+        z-index: 0;
+        position: absolute;
+        background: var(--secondary-color);
+        transition: all 0.3s ease-in-out;
+      }
+      &:hover {
+        background-position: 0%;
+        &:before {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.menu-active {
+  background-position: 0% !important;
+  &:before {
+    width: 100% !important;
+  }
+}
+
+.navbar-hover-text {
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    color: var(--secondary-color);
+  }
+}
+
+.main-menu-dropdown {
+  position: absolute;
+  top: 40px;
+  background: var(--black-neutral2);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0 12px 0;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: all 0.4s ease-in-out;
+  padding-bottom: 5px;
+}
+
+[theme='custom-light'] .main-menu-dropdown {
+  background: #ffefd7;
+}
+
+[theme='custom-light'] .main-menu-dropdown {
+  border-color: #a8a5a5e0;
+  background: #ecececec;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+.menu-item-with-dropdown {
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+
+  .menu-arrow-icon {
+    transition: all 0.3s ease-in-out;
+    stroke-width: 3;
+  }
+
+  &:hover .menu-arrow-icon {
+    transition: all 0.3s ease-in-out;
+    transform: rotate(180deg);
+    color: var(--secondary-color);
+  }
+
+  &:hover .main-menu-dropdown {
+    max-height: 400px;
+    opacity: 1;
+  }
+}
+
+.desktop-menu-dropdown-item {
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+  transition: all 0.3s ease-in-out;
+  padding: 15px;
+
+  &:hover {
+    border-color: transparent;
+  }
+}
+
+// mobile navbar
+.mobile-navbar-container {
+  border-radius: 16px;
+  border: 1px solid var(--black-neutral3);
+  background: linear-gradient(153deg, rgba(255, 255, 255, 0.12) -65.62%, rgba(255, 255, 255, 0.04) 83.28%);
+  color: var(--white-neutral1);
+  backdrop-filter: blur(25px);
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (min-width: 1200px) {
+    display: none;
+  }
+}
+
+// menu icon start
+@mixin line-props {
+  width: 100%;
+  height: 2px;
+  background-color: #fff;
+  border-radius: 4px;
+  position: absolute;
+  transition: transform 0.4s ease, opacity 0.4s ease;
+}
+
+.hamburger {
+  padding: 10px 0px;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  background-color: transparent;
+
+  &__container {
+    width: 36px;
+    height: 24px;
+    position: relative;
+  }
+
+  &:hover {
+    .hamburger__inner {
+      transform: translate(-51px, 50%);
+      opacity: 0;
+      &::before,
+      &::after {
+        transform: translate(102px, 0);
+        opacity: 0;
+      }
+    }
+  }
+
+  &.is-active {
+    .hamburger__inner {
+      display: none;
+    }
+  }
+
+  &__inner {
+    @include line-props;
+    top: 50%;
+    transform: translate(5px, -50%);
+    opacity: 1;
+    &::before,
+    &::after {
+      @include line-props;
+      content: '';
+      opacity: 1;
+      transform: translate(-5px, 0);
+    }
+
+    &::before {
+      top: -13px;
+    }
+
+    &::after {
+      top: 13px;
+    }
+  }
+
+  &:hover {
+    .hamburger__hidden {
+      opacity: 1;
+      transform: translate(0, -50%);
+      &::before,
+      &::after {
+        opacity: 1;
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &.is-active {
+    .hamburger__hidden {
+      opacity: 1;
+      transform: rotate(45deg);
+      &::before {
+        transform: translate(0, 13px) rotate(90deg);
+        transform-origin: center;
+      }
+
+      &::after {
+        transform: translate(0, -13px) rotate(0);
+        transform-origin: center;
+      }
+    }
+  }
+
+  &__hidden {
+    @include line-props;
+    background-color: var(--secondary-color);
+    top: 50%;
+    transform: translate(51px, -50%);
+    &::before,
+    &::after {
+      @include line-props;
+      background-color: var(--secondary-color);
+      content: '';
+      transform: translate(102px, 0);
+    }
+
+    &::before {
+      top: -13px;
+    }
+
+    &::after {
+      top: 13px;
+    }
+  }
+}
+
+[theme='custom-light'] .hamburger__inner {
+  background: var(--secondary-color);
+}
+
+[theme='custom-light'] .hamburger__inner::before,
+[theme='custom-light'] .hamburger__inner::after {
+  background: var(--secondary-color);
+}
+// menu icon end
+
+// mobile sidebar menu
+.mobile-sidebar-containe {
+  background: var(--black-neutral4);
+  width: 250px;
+  position: fixed;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  transition: all 0.7s;
+  overflow-y: scroll;
+  z-index: 4;
+  border-radius: 0px 32px 32px 0px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  transform: translateX(-300px);
+
+  .sidebar-logo {
+    padding: 40px 85px 70px 57px;
+    &:hover {
+      color: var(--secondary-color);
+    }
+  }
+
+  .mobile-sidebar-menus {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    padding: 0;
+
+    .mobile-menu-item {
+      border-bottom: 1px solid #2b2b2b;
+      padding-bottom: 20px;
+      cursor: pointer;
+    }
+    .mobile-single-menu {
+      padding-left: 32px;
+      padding-right: 32px;
+
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        color: var(--secondary-color);
+      }
+    }
+
+    .mobile-menu-link {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      font-size: 16px !important;
+    }
+  }
+}
+
+[theme='custom-light'] .mobile-menu-item {
+  border-bottom: 1px solid rgba(54, 60, 66, 0.2) !important;
+}
+
+[theme='custom-light'] .mobile-sidebar-containe {
+  background: #fff;
+
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+@media (max-width: 1400px) {
+  .mobile-sidebar-show {
+    z-index: 3;
+    transform: translateX(0px);
+  }
+
+  .mobile-sidebar-hide {
+    z-index: 3;
+    transform: translateX(-300px);
+  }
+}
+
+.logo-main-mobile {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  padding: 32px;
+  &:hover {
+    color: #fff;
+  }
+  span {
+    color: var(--secondary-color);
+  }
+}
+
+[theme='custom-light'] .logo-main-mobile {
+  &:hover {
+    color: #1d1d1d;
+  }
+}
+
+.mobile-sidebar-overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  background: black;
+  opacity: 0.5;
+  transition: all 0.8s ease-in-out;
+
+  // @media (min-width: 1200px) {
+  //   display: none;
+  // }
+}
+
+.mobile-sidebar-overlay-show {
+  transform: translateX(0px);
+}
+
+.mobile-sidebar-overlay-hide {
+  transform: translateX(-100%);
+}
+
+.icon-normal {
+  transition: all 0.3s ease-in-out;
+}
+
+.icon-rotate {
+  transition: all 0.3s ease-in-out;
+  transform: rotate(180deg);
+}
+
+.text-secondary {
+  color: var(--secondary-color) !important;
+}
+
+.mobile-sidebar-menu-modal {
+  top: 0px;
+  padding: 24px 0;
+  margin: 0 32px;
+  background: var(--black-neutral3);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 0px 20px 0px;
+  .sub-item {
+    border-bottom: 1px solid var(--black-neutral2);
+    padding-bottom: 20px;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+[theme='custom-light'] .mobile-sidebar-menu-modal {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #ecececec;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+[theme='custom-light'] .sub-item {
+  border-color: #a8a5a5e0;
+  background: #ecececec;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
--- a/src/assets/styles/_them.scss
+++ b/src/assets/styles/_them.scss
@ -0,0 +1,51 @@
+.theme-modal-button {
+  position: fixed;
+  right: 0px;
+  top: 50%;
+  background-color: #24202f;
+  border-radius: 10px 0 0 10px;
+  z-index: 4;
+
+  button {
+    background: transparent;
+    padding: 5px;
+  }
+  .setting-icon {
+    background-color: transparent !important;
+  }
+}
+
+.theme-modal {
+  position: fixed;
+  right: -350px;
+  top: 57%;
+  background-color: #24202f;
+  border-radius: 10px 0 0 10px;
+  width: 100px;
+  padding: 12px 0;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.7s ease-in-out;
+  z-index: 4;
+
+  &__theme-dir {
+    padding: 8px 12px;
+    font-size: 20px;
+    color: #fff;
+    border-bottom: 2px solid var(--secondary-color);
+    transition: all 0.3s ease-in-out;
+    height: fit-content;
+
+    &:hover {
+      background: var(--secondary-color);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.modal-open {
+  right: 0;
+}
--- a/src/assets/styles/_typography.scss
+++ b/src/assets/styles/_typography.scss
@ -0,0 +1,165 @@
+body {
+  background-color: var(--black-neutral1) !important;
+  margin: 0;
+  margin: 0;
+  color: var(--white-neutral1) !important;
+  font-family: var(--body-font) !important;
+}
+
+button {
+  border: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+button,
+input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.display-4 {
+  font-size: 56px;
+  font-weight: 600;
+  line-height: 120%;
+
+  @media (max-width: 1400px) {
+    font-size: 40px;
+  }
+  @media (max-width: 992px) {
+    font-size: 32px;
+  }
+  @media (max-width: 768px) {
+    font-size: 28px;
+  }
+}
+
+.heading-1 {
+  font-size: 48px;
+  font-weight: 700;
+  @media (max-width: 1400px) {
+    font-size: 38px;
+  }
+  @media (max-width: 1200px) {
+    font-size: 32px;
+  }
+  @media (max-width: 992px) {
+    font-size: 28px;
+  }
+  @media (max-width: 768px) {
+    font-size: 26px;
+  }
+}
+
+.heading-2 {
+  font-size: 40px;
+  font-weight: 600;
+  @media (max-width: 1400px) {
+    font-size: 32px;
+  }
+  @media (max-width: 1200px) {
+    font-size: 28px;
+  }
+  @media (max-width: 992px) {
+    font-size: 26px;
+  }
+  @media (max-width: 768px) {
+    font-size: 24px;
+  }
+}
+
+.heading-3 {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 120%;
+  @media (max-width: 1400px) {
+    font-size: 28px;
+  }
+  @media (max-width: 992px) {
+    font-size: 24px;
+  }
+  @media (max-width: 768px) {
+    font-size: 20px;
+  }
+}
+
+.heading-4 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 130%;
+  @media (max-width: 1400px) {
+    font-size: 20px;
+  }
+  @media (max-width: 992px) {
+    font-size: 18px;
+  }
+}
+
+.heading-5 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 130%;
+  @media (max-width: 1400px) {
+    font-size: 18px;
+  }
+}
+
+.textLead {
+  font-size: 24px;
+  line-height: 150%;
+  @media (max-width: 1400px) {
+    font-size: 20px;
+  }
+}
+.textXL {
+  font-size: 20px;
+  line-height: 150%;
+  @media (max-width: 1400px) {
+    font-size: 18px;
+  }
+}
+
+.textL {
+  font-size: 18px;
+  line-height: 150%;
+  @media (max-width: 1400px) {
+    font-size: 16px;
+  }
+}
+
+.textM {
+  font-size: 16px;
+  line-height: 150%;
+  @media (max-width: 1400px) {
+    font-size: 14px;
+  }
+}
+
+.textS {
+  font-size: 14px;
+  line-height: 150%;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+.font-semi-bold {
+  font-weight: 600;
+}
+.font-medium {
+  font-weight: 500;
+}
+
+.font-thin {
+  font-weight: 300;
+}
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@ -0,0 +1,44 @@
+// color variables
+
+:root {
+  --body-font: 'Kanit', sans-serif;
+  --primary-color: #ff6900;
+  --secondary-color: rgba(2, 232, 217, 1);
+  --accent1: #fff;
+  --accent2: #e6e6e6;
+  --accent3: #ffce32;
+  --accent4: #ffefd7;
+  --accent5: #cdff00;
+  --white: #ffffff;
+
+  --white-neutral1: #0a090d;
+  --white-neutral2: #2b2b2b;
+  --white-neutral3: #222426;
+  --white-neutral4: #1a1a1a;
+
+  --black-neutral1: #ffffff;
+  --black-neutral2: #f2f6f6;
+  --black-neutral3: #b3b6b9;
+  --black-neutral4: #f8f8f8;
+}
+
+[theme='custom-dark'] {
+  --primary-color: #ff6900;
+  --secondary-color: rgba(2, 232, 217, 1);
+  --accent1: #1d1d1d;
+  --accent2: #323232;
+  --accent3: #ffce32;
+  --accent4: #ffefd7;
+  --accent5: #cdff00;
+  --white: #ffffff;
+
+  --black-neutral1: #0a090d;
+  --black-neutral2: #2b2b2b;
+  --black-neutral3: #222426;
+  --black-neutral4: #1a1a1a;
+
+  --white-neutral1: #ffffff;
+  --white-neutral2: #f2f6f6;
+  --white-neutral3: #b3b6b9;
+  --white-neutral4: #f8f8f8;
+}
--- a/src/assets/styles/bootstrap-custom.scss
+++ b/src/assets/styles/bootstrap-custom.scss
--- a/src/assets/styles/dashboard/_all-blog.scss
+++ b/src/assets/styles/dashboard/_all-blog.scss
@ -0,0 +1,83 @@
+.all-blog-top-content {
+  transition: all 0.9s;
+  background: var(--accent1);
+  margin-left: 274px;
+  margin-top: 124px;
+  margin-bottom: 24px;
+  margin-right: 24px;
+  border: 1px solid var(--black-neutral3);
+
+  @media (max-width: 1400px) {
+    margin-left: 0;
+    margin-right: 0px;
+  }
+
+  @media (max-width: 992px) {
+    padding: 24px;
+  }
+
+  @media (max-width: 576px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 400px) {
+    padding: 8px;
+  }
+}
+
+.all-blog-bottom-content {
+  transition: all 0.9s;
+  background: var(--accent1);
+  margin-left: 274px;
+  margin-top: 60px;
+  margin-bottom: 24px;
+  margin-right: 24px;
+  border: 1px solid var(--black-neutral3);
+  padding: 60px;
+
+  @media (max-width: 1400px) {
+    margin-left: 0;
+    margin-right: 0px;
+    margin-top: 24px;
+  }
+
+  @media (max-width: 992px) {
+    padding: 24px;
+  }
+
+  @media (max-width: 576px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 400px) {
+    padding: 8px;
+  }
+}
+
+.box-bg1 {
+  border-radius: 20px;
+  border: 1px solid var(--black-neutral3);
+  background: rgba(34, 36, 38, 0.4);
+}
+
+[theme="custom-light"] .all-blog-top-content {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff !important;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important;
+}
+
+[theme="custom-light"] .all-blog-bottom-content {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff !important;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important;
+}
+
+[theme="custom-light"] .box-bg1 {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff !important;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important;
+}
+
+.all-blog-table-cover-image {
+  border-radius: 8px;
+}
--- a/src/assets/styles/dashboard/_dashboard-service.scss
+++ b/src/assets/styles/dashboard/_dashboard-service.scss
@ -0,0 +1,16 @@
+.service-table-icon {
+  display: block;
+  margin: 0 auto;
+}
+
+.catitem-box input {
+  background: var(--black-neutral3) !important;
+  padding: 10px 14px;
+  border: unset;
+  outline: none;
+}
+
+[theme="custom-light"] .catitem-box input {
+  background: #fff !important;
+  border: 1px solid #aeabab6b;
+}
--- a/src/assets/styles/dashboard/_experiences.scss
+++ b/src/assets/styles/dashboard/_experiences.scss
@ -0,0 +1,12 @@
+.description-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 400px;
+  white-space: nowrap;
+}
+
+.table-responsive {
+  &::-webkit-scrollbar {
+    height: 3px;
+  }
+}
--- a/src/assets/styles/dashboard/_new-blog.scss
+++ b/src/assets/styles/dashboard/_new-blog.scss
@ -0,0 +1,135 @@
+.bt-dashicon {
+  border-top: 1px solid var(--black-neutral2);
+}
+
+.img-cheng {
+  background: var(--black-neutral3);
+  padding: 10px 14px;
+  border: unset;
+  outline: none;
+  color: var(--n3);
+  font-size: 14px;
+  border-radius: 8px;
+  padding: 40px 12px;
+  position: relative;
+}
+
+[theme="custom-light"] .img-cheng {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+.img-cheng .custom-file {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.f-change-inthis {
+  position: relative;
+  height: 48px;
+  background: var(--black-neutral3);
+  padding: 10px 14px;
+  color: var(--n3);
+  font-size: 14px;
+  border-radius: 8px;
+}
+
+[theme="custom-light"] .f-change-inthis {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+.f-change-inthis input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: unset !important;
+  outline: none !important;
+  opacity: 0;
+}
+
+.new-blog-dropdown-container {
+  width: 100% !important;
+  border-radius: 6px;
+  background: var(--black-neutral3);
+
+  .dropdown-btn {
+    border-radius: 12px;
+    width: 100% !important;
+    justify-content: space-between;
+    padding: 9px 14px !important;
+  }
+}
+
+[theme="custom-light"] .new-blog-dropdown-container {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+/* editor custom style start*/
+
+.quill-editor {
+  background: var(--black-neutral3);
+  border-radius: 12px;
+}
+
+[theme="custom-light"] .quill-editor {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+.quill-editor .ql-container {
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+  border: unset !important;
+}
+
+/* Snow Theme */
+.quill-editor .ql-snow.ql-toolbar {
+  display: block;
+  background: inherit;
+  border: unset !important;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+
+/* Bubble Theme */
+.quill-editor .ql-bubble .ql-editor {
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+}
+
+.quill-editor .ql-editor {
+  min-height: 18em;
+}
+
+.ql-editor.ql-blank::before {
+  font-style: normal !important;
+  font-size: 14px !important;
+  color: #fff !important;
+  font-weight: 500 !important;
+}
+
+.ql-snow .ql-stroke {
+  stroke: var(--white-neutral3) !important;
+}
+
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: var(--white-neutral3) !important;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  color: var(--white-neutral3) !important;
+}
+
+/* editor custom style start end*/
--- a/src/assets/styles/dashboard/_personal-info.scss
+++ b/src/assets/styles/dashboard/_personal-info.scss
@ -0,0 +1,474 @@
+.persona-info-container {
+  .personal-info-content {
+    margin-top: 44px;
+    border-radius: 20px;
+    border: 1px solid var(--black-neutral3);
+    background: rgba(34, 36, 38, 0.4);
+
+    .personal-info-blue {
+      padding: 40px 32px 32px 32px;
+
+      @media (max-width: 576px) {
+        padding: 16px;
+      }
+    }
+
+    .personal-info-main-container {
+      border-top: 1px solid #2b2b2b;
+      border-bottom: 1px solid #2b2b2b;
+      padding: 32px 32px 40px 32px;
+
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: 24px;
+
+      @media (max-width: 576px) {
+        padding: 16px;
+      }
+    }
+
+    .personal-info-left {
+      grid-column-start: 1;
+      grid-column-end: 7;
+
+      @media (max-width: 1400px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+
+      .remove-image {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .remove-text {
+          cursor: pointer;
+          color: var(--white-neutral3);
+        }
+      }
+
+      .image-area {
+        border-radius: 12px;
+        border: 1px solid var(--black-neutral2);
+        background: var(--black-neutral3);
+        padding-top: 80px;
+        padding-bottom: 80px;
+        margin-top: 24px;
+      }
+
+      .personal-profile-image {
+        border-radius: 100%;
+        display: block;
+        margin: 0 auto;
+
+        @media (max-width: 576px) {
+          width: 200px;
+          height: 200px;
+        }
+      }
+
+      .personal-profile-shape {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        @media (max-width: 576px) {
+          width: 210px;
+          height: 210px;
+        }
+      }
+    }
+
+    .personal-info-right {
+      grid-column-start: 7;
+      grid-column-end: 13;
+
+      @media (max-width: 1400px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+    }
+  }
+}
+
+[theme="custom-light"] .personal-info-content {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+[theme="custom-light"]
+  .persona-info-container
+  .personal-info-content
+  .personal-info-main-container {
+  border-color: rgba(179, 182, 185, 0.5);
+}
+
+[theme="custom-light"]
+  .persona-info-container
+  .personal-info-content
+  .personal-info-left
+  .image-area {
+  border: 1px solid rgba(179, 182, 185, 0.4);
+  background: #fff;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+.personal-info-left-main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.profile-image-upload {
+  border-radius: 12px;
+  border: 1px solid var(--black-neutral2);
+  background: var(--black-neutral3);
+  color: var(--white-neutral1);
+  display: flex;
+  align-items: center;
+}
+
+[theme="custom-light"] .profile-image-upload {
+  background: #efecec;
+}
+
+.choose-file {
+  border-radius: 12px 0px 0px 12px;
+  padding: 12px 24px;
+  border-right: 1px solid var(--black-neutral2);
+  background: #1d1d1d;
+  color: var(--white-neutral3);
+}
+
+[theme="custom-light"] .choose-file {
+  color: #fff;
+  background: #4c4b4b;
+}
+
+.no-file-chosen {
+  padding-left: 16px;
+  color: var(--white-neutral3);
+}
+
+.image-requirements {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+
+  @media (max-width: 576px) {
+    flex-wrap: wrap;
+  }
+}
+.image-requirements-text {
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 150%;
+  color: var(--white-neutral3);
+}
+
+.light-text {
+  font-size: 14px;
+  font-weight: 300;
+  color: var(--white-neutral3);
+  margin-top: 12px;
+}
+
+.personal-info-title {
+  p {
+    color: var(--white-neutral3);
+    font-weight: 400;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid var(--black-neutral2);
+    background: var(--black-neutral3);
+    padding: 12px 16px;
+    margin-top: 14px;
+
+    &::placeholder {
+      color: var(--white-neutral1);
+      font-weight: 400;
+    }
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+}
+
+[theme="custom-light"] .personal-info-title input,
+[theme="custom-light"] .personal-info-title textarea {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+// personal rights section
+
+.enable-disable-area {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .text-enable-disable {
+    color: var(--white-neutral3);
+    align-self: flex-end;
+  }
+}
+
+.switch-checkbox {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.switch-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 40px;
+  height: 24px;
+  background: grey;
+  border-radius: 100px;
+  position: relative;
+  transition: background-color 0.2s;
+}
+
+.switch-label .switch-button {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  transition: 0.2s;
+  background: #fff;
+  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
+}
+
+.switch-checkbox:checked + .switch-label .switch-button {
+  left: calc(100% - 2px);
+  transform: translateX(-100%);
+}
+
+.switch-label:active .switch-button {
+  width: 20px;
+}
+
+.personal-info-resume-button {
+  margin-top: 45px;
+}
+
+.resume-text {
+  color: var(--white-neutral3);
+}
+
+.resume-button {
+  margin-top: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--black-neutral2);
+  background: var(--black-neutral3);
+  padding: 12px 4px 12px 24px;
+  color: var(--white-neutral3);
+  width: 100%;
+}
+
+[theme="custom-light"] .resume-button {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #efecec;
+  // box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+.resume-file {
+  margin-top: 54px;
+
+  @media (max-width: 576px) {
+    margin-top: 32px;
+  }
+}
+
+.resume-input {
+  margin-top: 14px;
+}
+
+.resume-required {
+  margin-top: 12px;
+  padding-bottom: 52px;
+
+  @media (max-width: 576px) {
+    padding-bottom: 32px;
+  }
+}
+
+.information-section {
+  border-top: 1px solid #2b2b2b;
+}
+
+[theme="custom-light"] .information-section {
+  border-color: rgba(179, 182, 185, 0.5);
+}
+
+.information-section-title {
+  color: var(--white-neutral2);
+  margin-top: 61px;
+
+  @media (max-width: 576px) {
+    margin-top: 32px;
+  }
+}
+
+.info-and-text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24px;
+  gap: 24px;
+
+  @media (max-width: 1860px) {
+    flex-wrap: wrap;
+  }
+}
+
+.info-input {
+  width: 100%;
+  input {
+    background: inherit;
+  }
+}
+
+.info-and-text-add {
+  background: var(--secondary-color);
+  border-radius: 12px;
+  padding: 12px 24px;
+}
+
+[theme="custom-light"] .info-and-text-add {
+  color: #fff;
+}
+
+.add-info-table {
+  margin-top: 60px;
+
+  @media (max-width: 576px) {
+    margin-top: 32px;
+    overflow-x: scroll;
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 0;
+    margin-top: 20px;
+    background-color: inherit;
+  }
+
+  td {
+    border-top: 1px solid #2b2b2b;
+    border-bottom: 1px solid #2b2b2b;
+    padding: 24px;
+    text-align: left;
+  }
+
+  .textXL {
+    white-space: nowrap;
+  }
+
+  th {
+    border-top: 1px solid #2b2b2b;
+    padding: 28px;
+  }
+}
+
+[theme="custom-light"] .add-info-table td {
+  border-color: rgba(179, 182, 185, 0.4);
+}
+
+.table-edit-remove {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: end;
+}
+
+.edit-button {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--black-neutral2);
+  background: var(--black-neutral3);
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    border: 1px solid var(--accent3);
+    background: var(--accent3);
+  }
+}
+
+[theme="custom-light"] .edit-button {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #f6f1f1;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+
+  &:hover {
+    border: 1px solid var(--accent3);
+    background: var(--accent3);
+  }
+}
+
+.remove-button {
+  border-radius: 4px;
+  border: 1px solid var(--black-neutral2);
+  background: var(--black-neutral3);
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    border: 1px solid var(--primary-color);
+    background: var(--primary-color);
+  }
+
+  svg {
+    transform: rotate(45deg);
+  }
+}
+
+[theme="custom-light"] .remove-button {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #f6f1f1;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+
+  &:hover {
+    border: 1px solid var(--primary-color);
+    background: var(--primary-color);
+  }
+}
+
+.update-button-container {
+  display: flex;
+  justify-content: end;
+}
+
+.personal-info-update-button {
+  border-radius: 12px;
+  background: var(--secondary-color);
+  padding: 12px 24px;
+  margin-top: 32px;
+  margin-bottom: 40px;
+  margin-right: 32px;
+
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    scale: 1.03;
+  }
+}
+
+[theme="custom-light"] .personal-info-update-button {
+  margin-left: 32px;
+  color: #fff;
+}
--- a/src/assets/styles/dashboard/_sidebarTopBarFooter.scss
+++ b/src/assets/styles/dashboard/_sidebarTopBarFooter.scss
@ -0,0 +1,316 @@
+// top bar start
+.top-bar-container {
+  position: fixed;
+  top: 0;
+  transition: all 0.9s;
+  background: var(--accent1);
+  width: calc(100% - 250px);
+  left: 250px;
+  z-index: 2;
+
+  @media (max-width: 1400px) {
+    width: 100%;
+    left: 0;
+  }
+  .top-bar-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+
+    .menu-icon {
+      padding: 18px;
+      color: var(--white-neutral3);
+
+      @media (min-width: 1400px) {
+        visibility: hidden;
+      }
+    }
+
+    .user-icon {
+      padding: 18px;
+      color: var(--white-neutral3);
+      background: var(--black-neutral2);
+      border-radius: 100%;
+      cursor: pointer;
+
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        background: var(--secondary-color);
+
+        svg {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+[theme="custom-light"] .top-bar-container {
+  background: #fff;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.top-dropdown-container {
+  position: absolute;
+  width: 150px;
+  top: 100px;
+  right: 20px;
+  z-index: 200000;
+  background: var(--black-neutral3);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border-radius: 12px;
+}
+
+[theme="custom-light"] .top-dropdown-container {
+  background: #fff;
+}
+
+.top-dropdown-container.active {
+  max-height: 200px;
+}
+
+.top-dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    color: #fff;
+  }
+}
+
+// top bar end
+
+// inner container
+.inner-content {
+  transition: all 0.9s;
+  background: var(--accent1);
+  margin-left: 274px;
+  margin-top: 124px;
+  margin-bottom: 24px;
+  margin-right: 24px;
+  padding: 224px;
+  border: 1px solid var(--black-neutral3);
+  background: var(--black-neutral4);
+  padding: 60px;
+
+  @media (max-width: 1400px) {
+    margin-left: 0;
+    margin-right: 0px;
+  }
+
+  @media (max-width: 992px) {
+    padding: 24px;
+  }
+
+  @media (max-width: 576px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 400px) {
+    padding: 8px;
+  }
+}
+
+[theme="custom-light"] .inner-content {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #fff;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+// sidebar start
+.sidebar-containe {
+  background: var(--black-neutral4);
+  width: 250px;
+  position: fixed;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  transition: all 0.7s;
+  overflow-y: scroll;
+  z-index: 4;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (max-width: 1400px) {
+    transform: translateX(-300px);
+  }
+  .sidebar-logo {
+    padding: 40px 85px 70px 57px;
+    &:hover {
+      color: var(--secondary-color);
+    }
+  }
+
+  .sidebar-menus {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    padding: 0;
+
+    .menu-item {
+      border-bottom: 1px solid #2b2b2b;
+      padding-bottom: 20px;
+      cursor: pointer;
+    }
+    .single-menu {
+      padding-left: 32px;
+      padding-right: 32px;
+
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        color: var(--secondary-color);
+      }
+    }
+
+    .menu-link {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+  }
+}
+
+[theme="custom-light"] .sidebar-containe .sidebar-menus .menu-item {
+  border-color: rgba(179, 182, 185, 0.5) !important;
+}
+
+[theme="custom-light"] .sidebar-containe {
+  background: #fff;
+
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+@media (max-width: 1400px) {
+  .sidebar-show {
+    z-index: 3;
+    transform: translateX(0px);
+  }
+
+  .sidebar-hide {
+    z-index: 3;
+    transform: translateX(-300px);
+  }
+}
+
+.sidebar-overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  background: black;
+  opacity: 0.5;
+  transition: all 0.8s ease-in-out;
+}
+
+.sidebar-overlay-show {
+  transform: translateX(0px);
+}
+
+.sidebar-overlay-hide {
+  transform: translateX(-100%);
+}
+
+.icon-normal {
+  transition: all 0.3s ease-in-out;
+}
+
+.icon-rotate {
+  transition: all 0.3s ease-in-out;
+  transform: rotate(180deg);
+}
+
+.text-secondary {
+  color: var(--secondary-color) !important;
+}
+
+.sidebar-menu-modal {
+  top: 0px;
+  padding: 24px 0;
+  margin: 0 32px;
+  background: var(--black-neutral3);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-direction: column;
+
+  .sidebar-sub-item {
+    border-bottom: 1px solid var(--black-neutral2);
+    padding-bottom: 20px;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+[theme="custom-light"] .sidebar-sub-item {
+  border-color: #f9f8f8;
+}
+
+[theme="custom-light"] .sidebar-menu-modal {
+  background: #bfbebe6b;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+// sidebar end
+
+// Footer start
+
+.footer-start {
+  direction: ltr;
+}
+
+.footer-container {
+  bottom: 0;
+  transition: all 0.9s;
+  background: var(--accent1);
+  width: calc(100% - 250px);
+  transform: translateX(250px);
+  text-align: center;
+
+  @media (max-width: 1400px) {
+    width: 100%;
+    transform: translateX(0px);
+  }
+}
+
+[theme="custom-light"] .footer-container {
+  background: #fff;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.dashboard-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 36px 0;
+
+  @media (max-width: 576px) {
+    flex-wrap: wrap;
+  }
+}
+
+.dashboard-footer__copyright-text {
+  border-right: 1px solid #b3b6b9;
+  padding-right: 12px;
+
+  @media (max-width: 400px) {
+    border: none;
+  }
+}
+
+.footer-text-right {
+  padding-left: 12px;
+
+  a {
+    color: var(--secondary-color);
+  }
+}
+// Footer end
--- a/src/assets/styles/dashboard/_skills-tools.scss
+++ b/src/assets/styles/dashboard/_skills-tools.scss
@ -0,0 +1,570 @@
+.skills-tools-content {
+  border-radius: 24px;
+  border: 1px solid var(--black-neutral3);
+  margin-top: 40px;
+}
+
+[theme='custom-light'] .skills-tools-content {
+  border-color: #6e6d6d6b;
+}
+
+.skill-tools-sub-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px 32px 20px 32px;
+  flex-wrap: wrap;
+  gap: 16px;
+  .subtitle {
+    color: var(--secondary-color);
+  }
+
+  .subtitle-button {
+    padding: 12px 24px;
+    border-radius: 12px;
+    background: var(--secondary-color);
+
+    transition: all 0.3s ease-in-out;
+    &:hover {
+      scale: 1.03;
+      color: var(--white-neutral1);
+    }
+  }
+}
+
+[theme='custom-light'] .skill-tools-sub-title .subtitle-button {
+  color: #fff;
+}
+
+.skill-tools-table-area {
+  padding: 20px 32px 32px 32px;
+  border-top: 1px solid #2b2b2b;
+}
+
+[theme='custom-light'] .skill-tools-table-area {
+  border-color: rgba(179, 182, 185, 0.5);
+}
+
+.skill-tools-top-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+/* Dropdown.css */
+.dropdown-arrow-button {
+  transition: all 0.3s ease-in-out;
+}
+
+.dropdown-arrow-button-rotate-down {
+  transform: rotate(180deg);
+}
+
+.dropdown-arrow-button-rotate-up {
+  transform: rotate(0deg);
+}
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-btn {
+  background-color: inherit;
+  color: var(--white-neutral1);
+  padding: 10px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 50px;
+}
+
+.dropdown-content {
+  display: block;
+  position: absolute;
+  top: 100%; /* Position dropdown content below the button */
+  left: 0;
+  width: 100%;
+  background: var(--black-neutral3);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border-radius: 12px;
+}
+
+[theme='custom-light'] .dropdown-content {
+  background: #fff;
+}
+
+.dropdown-content.active {
+  max-height: 200px;
+}
+
+.dropdown-option {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  border-bottom: 1px solid var(--accent2);
+
+  &:last-child {
+    border: none;
+  }
+}
+
+.dropdown-option:hover {
+  background-color: var(--secondary-color);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.search-field {
+  padding: 12px 20px;
+  border-radius: 12px;
+  border: 1px solid var(--black-neutral2);
+  background: inherit;
+}
+
+[theme='custom-light'] .search-field {
+  border-color: #6e6d6d6b;
+}
+
+.skills-tools-table {
+  border-radius: 24px;
+  overflow: hidden;
+  border: 1px solid var(--black-neutral2);
+  margin-top: 32px;
+}
+
+.table-skillresponsive {
+  border: 1px solid var(--black-neutral2);
+  border-radius: 20px;
+  margin-top: 32px;
+}
+
+[theme='custom-light'] .table-skillresponsive {
+  border-color: #6e6d6d6b;
+}
+
+.table-skillresponsive table {
+  margin-bottom: 0;
+  background: inherit;
+}
+.table-skillresponsive table thead th {
+  border-bottom: 1px solid var(--black-neutral2) !important;
+}
+
+[theme='custom-light'] .table-skillresponsive table thead th {
+  border-color: #6e6d6d6b !important;
+}
+
+.table-skillresponsive table thead th .skill-title {
+  gap: 80px;
+}
+
+.n0-color {
+  color: var(--white-neutral1) !important;
+}
+
+.table-skillresponsive table thead th .skill-title .ttext {
+  font-size: 20px;
+  font-weight: 400;
+  color: var(--white-neutral1);
+}
+
+.table-skillresponsive table tbody tr:not(:last-child) {
+  border-bottom: 1px solid var(--black-neutral2);
+}
+
+[theme='custom-light'] .table-skillresponsive table tbody tr:not(:last-child) {
+  border-color: #6e6d6d6b;
+}
+
+.table-skillresponsive table tbody tr:last-child {
+  border: unset;
+}
+.table-skillresponsive table tr th,
+.table-skillresponsive table tr td {
+  padding: 20px 32px;
+  background: inherit;
+}
+
+.table-skillresponsive tr td {
+  color: var(--white-neutral1);
+  opacity: 0.8;
+}
+
+.table > :not(caption) > * > * {
+  border-bottom-width: 0px !important;
+}
+
+.table-skillresponsive table tr th:not(:first-child),
+.table-skillresponsive table tr td:not(:first-child) {
+  border-left: 1px solid var(--black-neutral2);
+}
+
+[theme='custom-light'] .table-skillresponsive table tr th:not(:first-child),
+.table-skillresponsive table tr td:not(:first-child) {
+  border-left: 1px solid #6e6d6d6b;
+}
+
+.cmn-downbtn {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  background: var(--black-neutral3);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s;
+}
+
+[theme='custom-light'] .cmn-downbtn {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #f6f1f1;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+  transition: all 0.4s;
+}
+
+.cmn-downbtn:hover {
+  background: var(--secondary-color);
+}
+.cmn-downbtn:hover svg path {
+  stroke: #fff;
+  transition: all 0.4s;
+}
+
+[theme='custom-light'] .cmn-downbtn:hover svg path {
+  transition: all 0.4s;
+  stroke: #fff;
+}
+
+.table-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  background: var(--black-neutral3);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s;
+}
+
+.table-icon svg {
+  width: 21px;
+  transition: all 0.4s;
+}
+.table-icon svg path {
+  transition: all 0.4s;
+}
+.table-icon:hover {
+  cursor: pointer;
+  background: #ffce32;
+}
+.table-icon:hover svg path {
+  stroke: #fff;
+}
+
+.table-icon2hover:hover {
+  background: #ff6900;
+}
+
+[theme='custom-light'] .table-icon {
+  border: 1px solid rgba(179, 182, 185, 0.2);
+  background: #f6f1f1;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04);
+}
+
+[theme='custom-light'] .table-icon:hover {
+  cursor: pointer;
+  background: #ffce32;
+}
+[theme='custom-light'] .table-icon:hover svg path {
+  stroke: #fff;
+}
+
+[theme='custom-light'] .table-icon2hover:hover {
+  background: #ff6900;
+}
+
+.show-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.show-footer .coun {
+  padding: 11px 12px;
+  background: var(--secondary-color);
+  color: var(--white-neutral1);
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.show-footer .coun span {
+  color: var(--white-neutral1);
+}
+
+.pre-pagination {
+  gap: 20px;
+  border: 1px solid var(--black-neutral2);
+  border-radius: 12px;
+  padding: 0 20px;
+  list-style: none;
+}
+
+[theme='custom-light'] .pre-pagination {
+  border-color: #6e6d6d6b;
+}
+
+.cmn-downbtn {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  background: var(--black-neutral3);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.4s;
+}
+.cmn-downbtn:hover {
+  background: var(--secondary-color);
+}
+.cmn-downbtn:hover svg path {
+  stroke: var(--white-neutral1);
+}
+
+.remove-items-modal .modal-content {
+  border: 1px solid rgba(179, 182, 185, 0.3);
+  background: #1a1a1a;
+}
+
+[theme='custom-light'] .remove-items-modal .modal-content {
+  border-color: #6e6d6d6b;
+  background: #fff;
+}
+.remove-items-modal .modal-content .modal-header {
+  border-bottom: 1px solid rgba(179, 182, 185, 0.3);
+}
+
+[theme='custom-light'] .remove-items-modal .modal-content .modal-header {
+  border-bottom: 1px solid #6e6d6d6b;
+}
+
+.remove-items-modal .modal-content .modal-footer {
+  border-top: 1px solid rgba(179, 182, 185, 0.3);
+}
+
+[theme='custom-light'] .remove-items-modal .modal-content .modal-footer {
+  border-top: 1px solid #6e6d6d6b;
+}
+
+.remove-items-modal .modal-content .btn-close {
+  background: none;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--white-neutral1);
+  opacity: 1;
+  padding: 0;
+  margin: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+[theme='custom-light'] .remove-items-modal .modal-content .btn-close {
+  border: 1px solid #6e6d6d6b;
+}
+
+.remove-items-modal .modal-content .btn-close::before {
+  content: '✖️';
+  display: inline-block;
+  padding: 3px;
+  vertical-align: middle;
+  color: var(--white-neutral1);
+}
+
+.delte-alt {
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white-neutral1);
+  border-radius: 12px;
+}
+.delte-alt span {
+  color: var(--white-neutral1);
+}
+@media (max-width: 575px) {
+  .delte-alt {
+    padding: 8px 16px;
+  }
+}
+
+.delte-two {
+  background: var(--black-neutral2) !important;
+}
+
+[theme='custom-light'] .delte-two {
+  background: #2b2b2b !important;
+}
+
+.edit-modal-larges .imgwrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+}
+.edit-modal-larges .img-coverbox {
+  border: 1px dashed rgba(179, 182, 185, 0.3);
+  text-align: center;
+  padding: 16px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  width: 180px;
+}
+.edit-modal-larges .img-coverbox img {
+  width: 30px;
+}
+.edit-modal-larges .img-coverbox input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  outline: none;
+  border: unset;
+  opacity: 0;
+}
+@media (max-width: 575px) {
+  .edit-modal-larges .imgwrapper {
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+}
+
+.modal-center-text {
+  color: var(--white-neutral3);
+}
+
+.s1-color {
+  color: var(--secondary-color);
+}
+
+.cmn-btn {
+  background-color: var(--secondary-color);
+
+  &:hover {
+    background-color: #9c64e6;
+  }
+}
+
+.cmn-btn {
+  padding: 12px 28px;
+  border-radius: 12px;
+  font-size: 16px;
+  color: var(--white-neutral1);
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[theme='custom-light'] .delte-alt span {
+  color: #fff !important;
+}
+
+.edit-data-category .catitem-box .nice-select {
+  background: var(--black-neutral3);
+}
+.edit-data-category .catitem-box .nice-select .current {
+  color: var(--white-neutral3);
+  padding: 10px 14px 14px;
+  font-size: 14px;
+  font-weight: 400;
+}
+.edit-data-category .catitem-box .nice-select .list {
+  background: var(--accent1);
+  padding: 10px 15px;
+  height: 26vh;
+  overflow-y: scroll;
+}
+.edit-data-category .catitem-box .nice-select .list li {
+  color: var(--white-neutral1);
+}
+.edit-data-category .catitem-box .nice-select .list li:hover {
+  color: var(--secondary-color);
+}
+.edit-data-category .catitem-box input {
+  background: var(--black-neutral3);
+  padding: 10px 14px;
+  border: unset;
+  outline: none;
+  color: var(--white-neutral3);
+  font-size: 14px;
+}
+
+[theme='custom-light'] .edit-data-category .catitem-box input {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+.edit-data-category .catitem-box ::-moz-placeholder {
+  font-size: 14px;
+}
+.edit-data-category .catitem-box ::placeholder {
+  font-size: 14px;
+}
+
+.descrip {
+  color: var(--white-neutral1);
+}
+.descrip textarea {
+  background: var(--black-neutral3);
+  outline: none;
+  border: unset;
+  color: var(--white-neutral1);
+  border: 1px solid var(--black-neutral2);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+[theme='custom-light'] .descrip textarea {
+  border: 1px solid rgba(179, 182, 185, 0.5);
+  background: #efecec;
+}
+
+.descrip ::-moz-placeholder {
+  font-size: 14px;
+  color: var(--white-neutral3);
+  line-height: 1.8;
+}
+.descrip ::placeholder {
+  font-size: 14px;
+  color: var(--white-neutral3);
+  line-height: 1.8;
+}
+
+.n3-color {
+  color: var(--white-neutral3);
+}
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@ -0,0 +1,43 @@
+/* 确保没有平滑滚动效果 */
+html {
+  scroll-behavior: auto !important;
+}
+ul,
+ol,
+li,
+dl,
+dt,
+dd {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+  outline: 0px;
+  color: #333;
+}
+img {
+  border: 0;
+  max-width: 100%;
+}
+@import 'bootstrap-custom.scss';
+@import 'variables';
+@import 'typography';
+@import 'common';
+@import 'pages/landing';
+@import 'pages/landing-two';
+@import 'pages/about-us';
+@import 'pages/all-projects';
+@import 'pages/project-details';
+@import 'pages/blog';
+@import 'pages/blog-details';
+@import 'pages/service';
+@import 'pages/contact';
+@import 'pages/not-found';
+@import 'them';
+@import 'dashboard/sidebarTopBarFooter';
+@import 'dashboard/personal-info';
+@import 'dashboard/skills-tools';
+@import 'dashboard/experiences';
+@import 'dashboard/all-blog';
+@import 'dashboard/new-blog';
+@import 'navbar';
--- a/src/assets/styles/override.scss
+++ b/src/assets/styles/override.scss
--- a/src/assets/styles/pages/_about-us.scss
+++ b/src/assets/styles/pages/_about-us.scss
@ -0,0 +1,516 @@
+.about-top-left-element {
+  overflow: hidden;
+  width: 906px;
+  height: 906px;
+  border-radius: 906px;
+  opacity: 0.1;
+  background: var(--primary-color);
+  filter: blur(200px);
+  position: absolute;
+  left: -450px;
+  top: -450px;
+  @media (max-width: 768px) {
+    width: 400px;
+    height: 400px;
+    right: 0px;
+    bottom: 0px;
+  }
+
+  @media (max-width: 576px) {
+    width: 300px;
+    height: 300px;
+    right: 0px;
+    bottom: 0px;
+  }
+}
+
+.about-card {
+  position: relative;
+  border-radius: 20px;
+  height: 100%;
+  border: 1px solid var(--black-neutral3);
+  background: rgba(34, 36, 38, 0.4);
+}
+
+[theme='custom-light'] .about-card {
+  background: var(--black-neutral1);
+  border-color: rgba(34, 36, 38, 0.1);
+}
+.about-body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (max-width: 1400px) {
+    gap: 20px;
+  }
+
+  @media (max-width: 1200px) {
+    gap: 18px;
+  }
+  @media (max-width: 992px) {
+    gap: 16px;
+  }
+
+  &__1st-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+
+    @media (max-width: 1400px) {
+      gap: 20px;
+    }
+
+    @media (max-width: 1200px) {
+      gap: 18px;
+    }
+    @media (max-width: 992px) {
+      gap: 16px;
+    }
+
+    .card-hello {
+      position: relative;
+      grid-column-start: 1;
+      grid-column-end: 9;
+
+      padding: 60px 112px 60px 60px;
+      @media (max-width: 1400px) {
+        padding: 24px 24px 24px 24px;
+      }
+
+      @media (max-width: 992px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+
+      @media (max-width: 576px) {
+        text-align: center;
+      }
+
+      p {
+        font-weight: 300;
+        line-height: 150%;
+        margin-top: 24px;
+        opacity: 0.7;
+      }
+    }
+
+    .card-profile-image {
+      grid-column-start: 9;
+      grid-column-end: 13;
+      padding: 34px 72px;
+      @media (max-width: 1400px) {
+        padding: 32px;
+      }
+
+      @media (max-width: 992px) {
+        grid-column-start: 1;
+        grid-row-start: 1;
+      }
+
+      &__image-container {
+        position: relative;
+        width: fit-content;
+        margin: 0 auto;
+
+        .profile-image {
+          border-radius: 100%;
+          margin: 0 auto;
+          @media (max-width: 1400px) {
+            width: 200px;
+            height: 200px;
+          }
+        }
+
+        .profile-shape {
+          position: absolute;
+          top: -6px;
+          left: -6px;
+
+          @media (max-width: 1400px) {
+            width: 210px;
+            height: 210px;
+          }
+        }
+      }
+    }
+  }
+
+  &__2nd-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+
+    @media (max-width: 1400px) {
+      gap: 20px;
+    }
+
+    @media (max-width: 1200px) {
+      gap: 18px;
+    }
+    @media (max-width: 992px) {
+      gap: 16px;
+    }
+
+    .my-experience {
+      grid-column-start: 1;
+      grid-column-end: 5;
+      @media (max-width: 1400px) {
+        grid-column-start: 1;
+        grid-column-end: 9;
+      }
+
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+
+      &__content {
+        margin-top: 40px;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        @media (max-width: 1400px) {
+          gap: 20px;
+        }
+
+        @media (max-width: 1200px) {
+          gap: 18px;
+        }
+        @media (max-width: 992px) {
+          gap: 16px;
+        }
+
+        &-item {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          p {
+            font-weight: 300;
+            line-height: 150%;
+            color: var(--white-neutral1);
+            opacity: 0.7;
+          }
+
+          .dash {
+            width: 16px;
+            height: 1px;
+            background: var(--white-neutral1);
+            opacity: 0.7;
+            max-width: auto 0;
+          }
+        }
+      }
+    }
+
+    .download-icon {
+      padding: 8px;
+      border: 1px solid var(--secondary-color);
+      border-radius: 100%;
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        background: var(--secondary-color);
+      }
+    }
+
+    .what-i-do {
+      position: relative;
+      grid-column-start: 5;
+      grid-column-end: 8;
+
+      @media (max-width: 1400px) {
+        grid-column-start: 9;
+        grid-column-end: 13;
+      }
+
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+
+      &__content {
+        margin-top: 40px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        &-item {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          p {
+            font-weight: 300;
+            line-height: 150%;
+            color: var(--white-neutral1);
+            opacity: 0.7;
+          }
+
+          .dash {
+            width: 16px;
+            height: 1px;
+            background: var(--white-neutral1);
+            opacity: 0.7;
+            max-width: auto 0;
+          }
+        }
+      }
+    }
+
+    .experience-in-number {
+      padding: 40px 73px 40px 48px;
+      grid-column-start: 8;
+      grid-column-end: 13;
+      display: flex;
+
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      gap: 32px;
+
+      @media (max-width: 1400px) {
+        padding: 23px 32px 32px 32px;
+        grid-column-start: 1;
+        grid-column-end: 13;
+        flex-direction: row;
+      }
+
+      @media (max-width: 390px) {
+        text-align: center;
+        justify-content: center;
+      }
+
+      &__item {
+        display: flex;
+        gap: 8px;
+        flex-direction: column;
+      }
+
+      &__item-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &__item-text {
+        font-weight: 300;
+        color: var(--white-neutral1);
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &__3rd-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+
+    @media (max-width: 1400px) {
+      gap: 20px;
+    }
+
+    @media (max-width: 1200px) {
+      gap: 18px;
+    }
+    @media (max-width: 992px) {
+      gap: 16px;
+    }
+  }
+}
+
+[dir='ltr'] .group-shape {
+  position: absolute;
+  top: 0;
+  right: 24px;
+}
+
+[dir='rtl'] .group-shape {
+  position: absolute;
+  top: 0;
+  left: 24px;
+}
+
+[dir='ltr'] .bottom-shape {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+[dir='rtl'] .bottom-shape {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: rotate(90deg);
+}
+
+// [dir='ltr'] .about-body__1st-row .card-hello img {
+//   position: absolute;
+//   top: 20px;
+//   right: 20px;
+//   @media (max-width: 992px) {
+//     width: 70px;
+//     height: 70px;
+//   }
+//   @media (max-width: 576px) {
+//     width: 50px;
+//     height: 50px;
+//   }
+// }
+
+// [dir='rtl'] .about-body__1st-row .card-hello img {
+//   position: absolute;
+//   top: 20px;
+//   left: 20px;
+//   transform: rotate(-90deg);
+//   @media (max-width: 992px) {
+//     width: 70px;
+//     height: 70px;
+//   }
+//   @media (max-width: 576px) {
+//     width: 50px;
+//     height: 50px;
+//   }
+// }
+
+.about-profile {
+  grid-column-start: 1;
+  grid-column-end: 4;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  // @media (max-width: 1400px) {
+  //   grid-column-start: 1;
+  //   grid-column-end: 4;
+  // }
+
+  // @media (max-width: 992px) {
+  //   grid-column-start: 1;
+  //   grid-column-end: 7;
+  // }
+
+  // @media (max-width: 576px) {
+  //   grid-column-start: 1;
+  //   grid-column-end: 13;
+  // }
+
+  &__text {
+    font-weight: 300;
+    color: var(--white-neutral1);
+    opacity: 0.6;
+    margin-top: 18px;
+  }
+
+  .about-profile-link {
+    margin-top: 0px !important;
+  }
+}
+
+.about-education {
+  grid-column-start: 4;
+  grid-column-end: 10;
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (max-width: 1400px) {
+    grid-column-start: 4;
+    grid-column-end: 13;
+  }
+
+  @media (max-width: 992px) {
+    grid-column-start: 1;
+    grid-row-start: 1;
+  }
+
+  &__title {
+    font-weight: 500;
+    color: var(--white-neutral1);
+    @media (max-width: 576px) {
+      padding-bottom: 40px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+
+    @media (max-width: 576px) {
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .year {
+      font-weight: 300;
+      opacity: 0.6;
+      padding-top: 40px;
+      @media (max-width: 576px) {
+        padding-top: 0px;
+      }
+    }
+
+    .title {
+      font-weight: 400;
+      margin-top: 12px;
+      @media (max-width: 576px) {
+        margin-top: 8px;
+      }
+    }
+    .university {
+      font-weight: 300;
+      line-height: 150%;
+      opacity: 0.6;
+      margin-top: 4px;
+    }
+  }
+}
+
+[dir='ltr'] .about-education-shape {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+[dir='rtl'] .about-education-shape {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  transform: rotate(-90deg);
+}
+
+.about-get-in-touch {
+  grid-column-start: 10;
+  grid-column-end: 13;
+  display: flex;
+  flex-direction: column;
+  gap: 109px;
+  justify-content: space-between;
+  @media (max-width: 1400px) {
+    grid-column-start: 1;
+    grid-column-end: 13;
+    gap: 40px;
+  }
+
+  @media (max-width: 992px) {
+    grid-column-start: 7;
+    grid-column-end: 13;
+  }
+
+  @media (max-width: 576px) {
+    grid-column-start: 1;
+    grid-column-end: 13;
+  }
+
+  &__title {
+    font-weight: 500;
+    color: var(--white-neutral1);
+    white-space: nowrap;
+    @media (max-width: 1300px) {
+      white-space: normal;
+    }
+  }
+}
--- a/src/assets/styles/pages/_all-projects.scss
+++ b/src/assets/styles/pages/_all-projects.scss
@ -0,0 +1,185 @@
+.image-body {
+  position: relative;
+  transition: all 0.9s ease-in-out;
+  overflow: hidden;
+  width: fit-content;
+  &__image {
+    border-radius: 24px;
+    // object-fit: cover;
+  }
+
+  .all-project-link {
+    color: var(--white-neutral1);
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    align-items: end;
+    padding: 32px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    opacity: 0;
+    box-sizing: border-box;
+    transition: all 0.6s ease-in-out;
+    visibility: hidden;
+    background: linear-gradient(
+      180deg,
+      rgba(136, 136, 136, 0) 0%,
+      rgba(29, 29, 29, 0.8) 98.75%
+    );
+    border-radius: 24px;
+
+    @media (max-width: 1400px) {
+      padding: 24px;
+    }
+
+    @media (max-width: 992px) {
+      padding: 16px;
+    }
+
+    &__text-area {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      @media (max-width: 992px) {
+        gap: 4px;
+      }
+
+      .link-title {
+        color: #fff !important;
+      }
+
+      .link-text {
+        font-weight: 300 !important;
+        color: #fff;
+      }
+    }
+
+    &__image {
+      img {
+        max-width: 100px;
+        max-height: 60px;
+        transition: all 0.3s ease-in-out;
+        &:hover {
+          transform: rotate(-10deg);
+        }
+        @media (max-width: 992px) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &:hover .all-project-link {
+    opacity: 1;
+    height: 100%;
+    visibility: visible;
+  }
+}
+.all-project-body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  position: relative;
+  z-index: 2;
+
+  @media (max-width: 1400px) {
+    gap: 20px;
+  }
+
+  @media (max-width: 1200px) {
+    gap: 18px;
+  }
+  @media (max-width: 992px) {
+    gap: 16px;
+  }
+  .all-project__1st-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+
+    @media (max-width: 1400px) {
+      gap: 20px;
+    }
+
+    @media (max-width: 1200px) {
+      gap: 18px;
+    }
+    @media (max-width: 992px) {
+      gap: 16px;
+    }
+
+    &-1st-column {
+      grid-column-start: 1;
+      grid-column-end: 7;
+
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+
+      @media (max-width: 1400px) {
+        gap: 20px;
+      }
+
+      @media (max-width: 1200px) {
+        gap: 18px;
+      }
+      @media (max-width: 992px) {
+        gap: 16px;
+      }
+
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+    }
+
+    &-2nd-column {
+      grid-column-start: 7;
+      grid-column-end: 13;
+
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+    }
+  }
+
+  .all-project__3rd-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+
+    @media (max-width: 1400px) {
+      gap: 20px;
+    }
+
+    @media (max-width: 1200px) {
+      gap: 18px;
+    }
+    @media (max-width: 992px) {
+      gap: 16px;
+    }
+
+    &-1st-column {
+      grid-column-start: 1;
+      grid-column-end: 7;
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+    }
+
+    &-2nd-column {
+      grid-column-start: 7;
+      grid-column-end: 13;
+      @media (max-width: 768px) {
+        grid-column-start: 1;
+        grid-column-end: 13;
+      }
+    }
+  }
+}
			`@ -0,0 +1 @@`
			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><title>Play_40x40</title><path d="M20 .833a19.167 19.167 0 1 0 19.167 19.167 19.167 19.167 0 0 0-19.167-19.167z" opacity=".6"/><path d="M20 2a18 18 0 1 1-18 18 18.02 18.02 0 0 1 18-18m0-2a20 20 0 1 0 20 20 20 20 0 0 0-20-20zm8.072 20.9a1.671 1.671 0 0 1-.513.513l-9.99 6.357a1.671 1.671 0 0 1-2.569-1.413v-12.715a1.671 1.671 0 0 1 2.569-1.41l9.99 6.358a1.671 1.671 0 0 1 .513 2.31z" fill="#fff"/></svg>`