diff --git a/.gitignore b/.gitignore
index cc53221..8ab56f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ meta.md
 .env
 meta-tag.md
 .vercel
+chart.js
+chart2.js
diff --git a/package-lock.json b/package-lock.json
index 8b4cc37..995b94f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,15 +11,20 @@
         "@vercel/analytics": "^1.3.1",
         "@vercel/speed-insights": "^1.0.12",
         "@vueuse/head": "^2.0.0",
+        "apexcharts": "^3.52.0",
         "axios": "^1.7.5",
         "babel-plugin-transform-import-meta": "^2.2.1",
         "firebase": "^10.13.0",
+        "scrollreveal": "^4.0.9",
+        "swiper": "^11.1.10",
         "vite-plugin-environment": "^1.1.3",
         "vue": "^3.4.38",
         "vue-countup-v3": "^1.4.2",
+        "vue-lazyload": "^3.0.0",
         "vue-router": "^4.4.3",
         "vue-turnstile": "^1.0.11",
         "vue-writer": "^2.0.2",
+        "vue3-apexcharts": "^1.5.3",
         "vue3-toastify": "^0.2.2"
       },
       "devDependencies": {
@@ -82,9 +87,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.2.tgz",
-      "integrity": "sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
+      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -123,13 +128,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
-      "integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
+      "version": "7.25.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz",
+      "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@babel/types": "^7.25.0",
+        "@babel/types": "^7.25.4",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
@@ -260,12 +265,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
-      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
+      "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.2"
+        "@babel/types": "^7.25.4"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -289,17 +294,17 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
-      "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz",
+      "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/parser": "^7.25.3",
+        "@babel/generator": "^7.25.4",
+        "@babel/parser": "^7.25.4",
         "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.2",
+        "@babel/types": "^7.25.4",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -308,9 +313,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
-      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
+      "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
@@ -1732,9 +1737,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
-      "integrity": "sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.1.tgz",
+      "integrity": "sha512-2thheikVEuU7ZxFXubPDOtspKn1x0yqaYQwvALVtEcvFhMifPADBrgRPyHV0TF3b+9BgvgjgagVyvA/UqPZHmg==",
       "cpu": [
         "arm"
       ],
@@ -1745,9 +1750,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz",
-      "integrity": "sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.1.tgz",
+      "integrity": "sha512-t1lLYn4V9WgnIFHXy1d2Di/7gyzBWS8G5pQSXdZqfrdCGTwi1VasRMSS81DTYb+avDs/Zz4A6dzERki5oRYz1g==",
       "cpu": [
         "arm64"
       ],
@@ -1758,9 +1763,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
-      "integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.1.tgz",
+      "integrity": "sha512-AH/wNWSEEHvs6t4iJ3RANxW5ZCK3fUnmf0gyMxWCesY1AlUj8jY7GC+rQE4wd3gwmZ9XDOpL0kcFnCjtN7FXlA==",
       "cpu": [
         "arm64"
       ],
@@ -1771,9 +1776,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz",
-      "integrity": "sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.1.tgz",
+      "integrity": "sha512-dO0BIz/+5ZdkLZrVgQrDdW7m2RkrLwYTh2YMFG9IpBtlC1x1NPNSXkfczhZieOlOLEqgXOFH3wYHB7PmBtf+Bg==",
       "cpu": [
         "x64"
       ],
@@ -1784,9 +1789,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz",
-      "integrity": "sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.1.tgz",
+      "integrity": "sha512-sWWgdQ1fq+XKrlda8PsMCfut8caFwZBmhYeoehJ05FdI0YZXk6ZyUjWLrIgbR/VgiGycrFKMMgp7eJ69HOF2pQ==",
       "cpu": [
         "arm"
       ],
@@ -1797,9 +1802,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz",
-      "integrity": "sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.1.tgz",
+      "integrity": "sha512-9OIiSuj5EsYQlmwhmFRA0LRO0dRRjdCVZA3hnmZe1rEwRk11Jy3ECGGq3a7RrVEZ0/pCsYWx8jG3IvcrJ6RCew==",
       "cpu": [
         "arm"
       ],
@@ -1810,9 +1815,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz",
-      "integrity": "sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.1.tgz",
+      "integrity": "sha512-0kuAkRK4MeIUbzQYu63NrJmfoUVicajoRAL1bpwdYIYRcs57iyIV9NLcuyDyDXE2GiZCL4uhKSYAnyWpjZkWow==",
       "cpu": [
         "arm64"
       ],
@@ -1823,9 +1828,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz",
-      "integrity": "sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.1.tgz",
+      "integrity": "sha512-/6dYC9fZtfEY0vozpc5bx1RP4VrtEOhNQGb0HwvYNwXD1BBbwQ5cKIbUVVU7G2d5WRE90NfB922elN8ASXAJEA==",
       "cpu": [
         "arm64"
       ],
@@ -1836,9 +1841,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz",
-      "integrity": "sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.1.tgz",
+      "integrity": "sha512-ltUWy+sHeAh3YZ91NUsV4Xg3uBXAlscQe8ZOXRCVAKLsivGuJsrkawYPUEyCV3DYa9urgJugMLn8Z3Z/6CeyRQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1849,9 +1854,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz",
-      "integrity": "sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.1.tgz",
+      "integrity": "sha512-BggMndzI7Tlv4/abrgLwa/dxNEMn2gC61DCLrTzw8LkpSKel4o+O+gtjbnkevZ18SKkeN3ihRGPuBxjaetWzWg==",
       "cpu": [
         "riscv64"
       ],
@@ -1862,9 +1867,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz",
-      "integrity": "sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.1.tgz",
+      "integrity": "sha512-z/9rtlGd/OMv+gb1mNSjElasMf9yXusAxnRDrBaYB+eS1shFm6/4/xDH1SAISO5729fFKUkJ88TkGPRUh8WSAA==",
       "cpu": [
         "s390x"
       ],
@@ -1875,9 +1880,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz",
-      "integrity": "sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.1.tgz",
+      "integrity": "sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==",
       "cpu": [
         "x64"
       ],
@@ -1888,9 +1893,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz",
-      "integrity": "sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.1.tgz",
+      "integrity": "sha512-CbFv/WMQsSdl+bpX6rVbzR4kAjSSBuDgCqb1l4J68UYsQNalz5wOqLGYj4ZI0thGpyX5kc+LLZ9CL+kpqDovZA==",
       "cpu": [
         "x64"
       ],
@@ -1901,9 +1906,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz",
-      "integrity": "sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.1.tgz",
+      "integrity": "sha512-3Q3brDgA86gHXWHklrwdREKIrIbxC0ZgU8lwpj0eEKGBQH+31uPqr0P2v11pn0tSIxHvcdOWxa4j+YvLNx1i6g==",
       "cpu": [
         "arm64"
       ],
@@ -1914,9 +1919,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz",
-      "integrity": "sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.1.tgz",
+      "integrity": "sha512-tNg+jJcKR3Uwe4L0/wY3Ro0H+u3nrb04+tcq1GSYzBEmKLeOQF2emk1whxlzNqb6MMrQ2JOcQEpuuiPLyRcSIw==",
       "cpu": [
         "ia32"
       ],
@@ -1927,9 +1932,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz",
-      "integrity": "sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.1.tgz",
+      "integrity": "sha512-xGiIH95H1zU7naUyTKEyOA/I0aexNMUdO9qRv0bLKN3qu25bBdrxZHqA3PTJ24YNN/GdMzG4xkDcd/GvjuhfLg==",
       "cpu": [
         "x64"
       ],
@@ -2444,9 +2449,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.5.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
-      "integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
+      "version": "22.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
+      "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -2860,6 +2865,12 @@
         "vue": ">=2.7 || >=3"
       }
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -2968,6 +2979,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.52.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.52.0.tgz",
+      "integrity": "sha512-7dg0ADKs8AA89iYMZMe2sFDG0XK5PfqllKV9N+i3hKHm3vEtdhwz8AlXGm+/b0nJ6jKiaXsqci5LfVxNhtB+dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -3044,6 +3070,7 @@
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz",
       "integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -3180,9 +3207,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001651",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
-      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
+      "version": "1.0.30001653",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
+      "integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==",
       "funding": [
         {
           "type": "opencollective",
@@ -3888,9 +3915,9 @@
       }
     },
     "node_modules/env-ci": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/env-ci/-/env-ci-11.0.0.tgz",
-      "integrity": "sha512-apikxMgkipkgTvMdRT9MNqWx5VLOci79F4VBd7Op/7OPjjoanjdAvn6fglMCCEf/1bAh8eOiuEVCUs4V3qP3nQ==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/env-ci/-/env-ci-11.1.0.tgz",
+      "integrity": "sha512-Z8dnwSDbV1XYM9SBF2J0GcNVvmfmfh3a49qddGIROhBoVro6MZVTji15z/sJbQ2ko2ei8n988EU1wzoLU/tF+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4888,6 +4915,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-dom-node": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz",
+      "integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==",
+      "license": "MIT"
+    },
+    "node_modules/is-dom-node-list": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
+      "integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-dom-node": "^1.0.4"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5337,9 +5379,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5433,6 +5475,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/miniraf": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz",
+      "integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8765,9 +8813,9 @@
       "license": "ISC"
     },
     "node_modules/protobufjs": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.3.tgz",
-      "integrity": "sha512-HaYi2CVjiPoBR1d2zTVKVHXr9IUnpJizCjUu19vxdD3B8o4z+vfOHpIEB1358w8nv8dfUNEfDHFvMsH7QlLt/Q==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.4.0.tgz",
+      "integrity": "sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -8949,6 +8997,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/rematrix": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz",
+      "integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8998,9 +9052,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
-      "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.1.tgz",
+      "integrity": "sha512-ZnYyKvscThhgd3M5+Qt3pmhO4jIRR5RGzaSovB6Q7rGNrK5cUncrtLmcTTJVSdcKXyZjW8X8MB0JMSuH9bcAJg==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -9013,22 +9067,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.0",
-        "@rollup/rollup-android-arm64": "4.21.0",
-        "@rollup/rollup-darwin-arm64": "4.21.0",
-        "@rollup/rollup-darwin-x64": "4.21.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.0",
-        "@rollup/rollup-linux-arm64-musl": "4.21.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.0",
-        "@rollup/rollup-linux-x64-gnu": "4.21.0",
-        "@rollup/rollup-linux-x64-musl": "4.21.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.0",
-        "@rollup/rollup-win32-x64-msvc": "4.21.0",
+        "@rollup/rollup-android-arm-eabi": "4.21.1",
+        "@rollup/rollup-android-arm64": "4.21.1",
+        "@rollup/rollup-darwin-arm64": "4.21.1",
+        "@rollup/rollup-darwin-x64": "4.21.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.1",
+        "@rollup/rollup-linux-arm64-musl": "4.21.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.1",
+        "@rollup/rollup-linux-x64-gnu": "4.21.1",
+        "@rollup/rollup-linux-x64-musl": "4.21.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.1",
+        "@rollup/rollup-win32-x64-msvc": "4.21.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -9062,6 +9116,18 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
+    "node_modules/scrollreveal": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.9.tgz",
+      "integrity": "sha512-fefGvzVS8YbXbDK1+T0kvy2yqxaiBJZeGUhPeqajf+7sGqtX4xikbKGAlzQuPCpswAMswx94ZwhDjXKnRIqW1w==",
+      "hasInstallScript": true,
+      "license": "GPL-3.0",
+      "dependencies": {
+        "miniraf": "1.0.0",
+        "rematrix": "0.3.0",
+        "tealight": "0.3.6"
+      }
+    },
     "node_modules/semantic-release": {
       "version": "24.1.0",
       "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.1.0.tgz",
@@ -9341,7 +9407,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
-      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -9773,6 +9838,116 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
+      "license": "MIT"
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "license": "MIT",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/swiper": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.11.tgz",
+      "integrity": "sha512-077Aw3OrlZpkkBRf/6+44bGh/HZY/vsLEyate2db2KkJgYUIR5TvDgvvhcJtW/puXzw79w5KBc30DauEX6GZYQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
@@ -9824,6 +9999,16 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/tealight": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz",
+      "integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-dom-node": "^1.0.4",
+        "is-dom-node-list": "^1.2.1"
+      }
+    },
     "node_modules/temp-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-3.0.0.tgz",
@@ -9998,9 +10183,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
       "license": "0BSD"
     },
     "node_modules/type-fest": {
@@ -10299,6 +10484,12 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-lazyload": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-3.0.0.tgz",
+      "integrity": "sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==",
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
@@ -10372,6 +10563,16 @@
       "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
       "license": "MIT"
     },
+    "node_modules/vue3-apexcharts": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.5.3.tgz",
+      "integrity": "sha512-yaHTPoj0iVKAtEVg8wEwIwwvf0VG+lPYNufCf3txRzYQOqdKPoZaZ9P3Dj3X+2A1XY9O1kcTk9HVqvLo+rppvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "apexcharts": "> 3.0.0",
+        "vue": "> 3.0.0"
+      }
+    },
     "node_modules/vue3-toastify": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.2.tgz",
diff --git a/package.json b/package.json
index 0db1caf..45a3734 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,20 @@
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "@vueuse/head": "^2.0.0",
+    "apexcharts": "^3.52.0",
     "axios": "^1.7.5",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "firebase": "^10.13.0",
+    "scrollreveal": "^4.0.9",
+    "swiper": "^11.1.10",
     "vite-plugin-environment": "^1.1.3",
     "vue": "^3.4.38",
     "vue-countup-v3": "^1.4.2",
+    "vue-lazyload": "^3.0.0",
     "vue-router": "^4.4.3",
     "vue-turnstile": "^1.0.11",
     "vue-writer": "^2.0.2",
+    "vue3-apexcharts": "^1.5.3",
     "vue3-toastify": "^0.2.2"
   },
   "devDependencies": {
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index 0499d7e..2b35f8a 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -2,7 +2,8 @@ declare module 'alpinejs';
 declare module 'vue-writer';
 declare module 'express';
 declare module '@vercel/speed-insights';
-
+declare module 'swiper'
+declare module 'scrollreveal'
 declare module '*.vue' {
     import { DefineComponent } from 'vue';
     const component: DefineComponent<{}, {}, any>;
diff --git a/src/App.vue b/src/App.vue
index f2108c1..9c42b5a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,7 +51,7 @@
             charset: computed(() => siteData.charset),
           },
           {
-            name: `apple-mobile-web-app-capable`,
+            name: `mobile-web-app-capable`,
             content: computed(() => siteData.appleCapable),
           },
           {
diff --git a/src/assets/bg-1.png b/src/assets/bg-1.png
new file mode 100644
index 0000000..bdd3df0
Binary files /dev/null and b/src/assets/bg-1.png differ
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 5eeb66d..0891739 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,32 +1,127 @@
 <script setup lang="ts">
-  import { defineProps, ref } from 'vue'
-  import CountUp from 'vue-countup-v3'
-  import axios from 'axios'
-  import { toast } from 'vue3-toastify'
-  import 'vue3-toastify/dist/index.css'
-  import { getDatabase, push, ref as dbRef, query, orderByChild, equalTo, get } from "firebase/database"
-  import Meta from './icons/Meta.vue'
-  import Instagram from './icons/Instagram.vue'
-  import Twitter from './icons/Twitter.vue'
-  import Github from './icons/Github.vue'
-  import Account from './icons/Account.vue'
-
-  // Initialize Database
-  const db = getDatabase()
-  const props = defineProps<{ name: string, description: string }>()
-  const ipAddress = ref("")
-  const city = ref("")
-  const org = ref("")
-  const loc = ref("")
-  const timezone = ref("")
-  const country = ref("")
-  const postal = ref("")
-
-  axios.get('https://ipinfo.io/json', {
-    params: {
-      token: process.env.VITE_TOKEN_IP
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import CountUp from 'vue-countup-v3'
+import axios from 'axios'
+import { toast } from 'vue3-toastify'
+import 'vue3-toastify/dist/index.css'
+import { getDatabase, push, ref as dbRef, query, orderByChild, equalTo, get } from "firebase/database"
+import Meta from './icons/Meta.vue'
+import Instagram from './icons/Instagram.vue'
+import Twitter from './icons/Twitter.vue'
+import Github from './icons/Github.vue'
+import Laravel from './icons/Laravel.vue'
+import Vuejs from './icons/Vuejs.vue'
+import Tailwind from './icons/Tailwind.vue'
+import Git from './icons/Git.vue'
+import Cloudflare from './icons/Cloudflare.vue'
+// import Account from './icons/Account.vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper/modules'
+import 'swiper/css'
+import ScrollReveal from 'scrollreveal'
+
+// Initialize Database
+const db = getDatabase()
+const props = defineProps<{ name: string, userID: string, description: string }>()
+const ipAddress = ref("")
+const city = ref("")
+const org = ref("")
+const loc = ref("")
+const timezone = ref("")
+const country = ref("")
+const postal = ref("")
+const menu = ref()
+const options = {
+  chart: {
+    height: 300,
+    type: 'line',
+    toolbar: {
+      show: false
     }
-  })
+  },
+  colors: ["#3736af", "#3693FF"],
+  dataLabels: {
+    enabled: false
+  },
+  stroke: {
+    curve: 'smooth',
+    width: 6
+  },
+  legend: {
+    show: false,
+
+  },
+  markers: {
+    strokeWidth: 5,
+    strokeColors: '#fff',
+    hover: {
+      size: 10,
+    },
+  },
+  grid: {
+    show: true,
+    strokeDashArray: 6,
+    borderColor: '#e6e6e6',
+    xaxis: {
+      lines: {
+        show: true
+      },
+    },
+    yaxis: {
+      lines: {
+        show: false
+      },
+    },
+  },
+  yaxis: {
+    show: false,
+    labels: {
+      style: {
+        colors: '#717579',
+        fontSize: '12px',
+        fontFamily: 'Poppins',
+        fontWeight: 400
+
+      },
+      formatter: function (value: number) {
+        return value + "USD";
+      }
+    },
+  },
+  xaxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "jun", "Jul", "Aug", "Sep", "Oct", "Nov"],
+    labels: {
+      style: {
+        colors: '#B5B5C3',
+        fontSize: '12px',
+        fontFamily: 'Poppins',
+        fontWeight: 400
+
+      },
+    },
+    axisBorder: {
+      show: false,
+    },
+    tooltip: {
+      enabled: false,
+    }
+  }
+}
+const series = [{
+  name: '1 ETH',
+  className: 'bg-primary',
+  data: [10000, 25000, 15000, 5000, 8000, 7000, 6000, 5000, 10000, 4000]
+}, {
+  name: '1 XRP',
+  className: 'bg-secondary',
+  data: [7000, 15000, 8000, 3000, 4000, 5000, 1000, 500, 8000, 2000]
+}]
+
+axios.get('https://ipinfo.io/json', {
+  params: {
+    token: process.env.VITE_TOKEN_IP
+  }
+})
   .then((response) => {
     const getData = response.data
     ipAddress.value = getData.ip || null
@@ -40,17 +135,17 @@
     // Firebase Database Realtime
     const ipUnique = query(dbRef(db, 'ip/'), orderByChild('ip'), equalTo(ipAddress.value))
     get(ipUnique)
-    .then((data) => {
-      data.exists() ? undefined : push(dbRef(db, 'ip/'), {
-        ip: ipAddress.value,
-        location: city.value,
-        org: org.value,
-        loc: loc.value,
-        timezone: timezone.value,
-        country: country.value,
-        postal: postal.value,
+      .then((data) => {
+        data.exists() ? undefined : push(dbRef(db, 'ip/'), {
+          ip: ipAddress.value,
+          location: city.value,
+          org: org.value,
+          loc: loc.value,
+          timezone: timezone.value,
+          country: country.value,
+          postal: postal.value,
+        })
       })
-    })
   })
   .catch((error) => {
     toast.error(error.message, {
@@ -58,131 +153,660 @@
     })
   });
 
+  function addActice() {
+    const scrollPosition = window.scrollY
+
+    if (scrollPosition > 10) { 
+      menu.value.classList.add("active")
+    } else {
+      menu.value.classList.remove("active")
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener("scroll", addActice)
+
+    const sr = ScrollReveal();
+    var slideUp = {
+      delay: 375,
+      duration: 500,
+      distance: '30px',
+      origin: 'top',
+      opacity: null,
+      easing: 'ease-out',
+      reset: true
+    };
+    var slideDown = {
+      delay: 375,
+      duration: 500,
+      distance: '30px',
+      origin: 'bottom',
+      opacity: null,
+      easing: 'ease-out',
+      reset: true
+    };
+    var slideLeft = {
+      delay: 375,
+      duration: 500,
+      distance: '30px',
+      origin: 'left',
+      opacity: null,
+      easing: 'ease-out',
+      reset: true
+    };
+    var slideRight = {
+      delay: 375,
+      duration: 500,
+      distance: '30px',
+      origin: 'right',
+      opacity: null,
+      easing: 'ease-out',
+      reset: true
+    };
+    sr.reveal('.slide-up', slideUp)
+    sr.reveal('.slide-down', slideDown)
+    sr.reveal('.slide-left', slideLeft)
+    sr.reveal('.slide-right', slideRight)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("scroll", addActice)
+  })
 </script>
 
 <template>
-  <div
-    class="min-h-screen h-full w-full flex justify-center items-center bg-[#F1F5F9] p-[18px]"
-  >
-    <div
-      class="dark:!bg-navy-800 rounded-[8px] bg-white shadow-3xl shadow-gray-500 rounded-primary relative mx-auto w-full max-w-[678px] bg-cover bg-clip-border dark:text-white dark:shadow-none"
-    >
-      <div class="p-[21px]">
-        <div
-          class="relative flex h-20 md:h-36 w-full justify-center rounded-[8px] bg-gradient-to-r from-rose-400 to-orange-300"
-        >
-          <div
-            class="absolute -bottom-4 md:-bottom-12 md:left-12 flex justify-center rounded-full border-[4px] border-white"
-          >
-            <img
-              class="size-[100px] md:size-[130px] rounded-full object-fill"
-              src="https://ik.imagekit.io/odbmay3h6/avatar.webp?updatedAt=1724402771259"
-              alt="Nguyen Tan Duy" loading="lazy"
-            />
-          </div>
+  <div class="container-fluid">
+    <div class="w-full h-44 md:h-52 bg-[#3736af] absolute top-0 left-0 baner-top"></div>
+    <div class="fixed top-0 header-top w-full p-5 md:px-12 z-50" ref="menu">
+      <div class="flex justify-between items-center relative">
+        <div class="flex justify-center items-center gap-2 md:gap-3">
+          <button aria-label="Menu" class="p-2 bg-[#ffffff1f] rounded-lg text-white">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M4 6l16 0" />
+              <path d="M4 12l16 0" />
+              <path d="M4 18l16 0" />
+            </svg>
+          </button>
+          <a href="#" aria-label="Dark Mode" class="p-2 md:bg-[#ffffff1f] rounded-lg text-white">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-brightness-up">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+              <path d="M12 5l0 -2" />
+              <path d="M17 7l1.4 -1.4" />
+              <path d="M19 12l2 0" />
+              <path d="M17 17l1.4 1.4" />
+              <path d="M12 19l0 2" />
+              <path d="M7 17l-1.4 1.4" />
+              <path d="M6 12l-2 0" />
+              <path d="M7 7l-1.4 -1.4" />
+            </svg>
+          </a>
         </div>
-        <div class="w-full flex justify-end p-3 mt-6 md:mt-0">
-          <div class="w-full flex-col md:w-[70%]">
-            <h4
-              class="flex justify-center md:justify-normal items-center gap-2 text-navy-700 text-2xl text-center md:text-left font-bold dark:text-white"
-            >
-              {{ props.name }}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                style="color: #0866ff"
-                title="System verified"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="icon icon-tabler icons-tabler-filled icon-tabler-rosette-discount-check hover:cursor-pointer"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path
-                  d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
-                />
-                <title>System verified</title>
-              </svg>
-            </h4>
-            <h5
-              className="text-base font-normal text-[15px] text-center md:text-left text-gray-600"
-            >
-              <vue-writer :array="[props.description]" :eraseSpeed="35" :typeSpeed="20"></vue-writer>
-            </h5>
+        <div class="flex gap-2 md:gap-4">
+          <div class="flex gap-2 md:gap-3">
+            <a href="https://facebook.com/ntanduy03" target="_blank" aria-label="Facebook"
+              class="p-2 md:bg-[#ffffff1f] rounded-lg text-white">
+              <Meta />
+            </a>
+            <a href="https://github.com/TanDuy03" target="_blank" aria-label="Github"
+              class="p-2 md:bg-[#ffffff1f] rounded-lg text-white">
+              <Github />
+            </a>
+            <a href="https://x.com/daniel_saigon" target="_blank" aria-label="Twitter"
+              class="p-2 md:bg-[#ffffff1f] rounded-lg text-white">
+              <Twitter />
+            </a>
+            <a href="https://instagram.com/ng.tanduy26" target="_blank" aria-label="Instagram"
+              class="p-2 md:bg-[#ffffff1f] rounded-lg text-white">
+              <Instagram />
+            </a>
+          </div>
+
+          <div class="flex gap-3">
+            <div class="md:flex flex-col text-right hidden">
+              <h3 class="text-white font-bold">{{ props.name }}</h3>
+              <small class="text-white">@{{ props.userID }}</small>
+            </div>
+            <img class="size-[42px] rounded-full"
+              v-lazy="'https://ik.imagekit.io/odbmay3h6/avatar.jpg?updatedAt=1724846688735'"
+              :alt="props.name">
           </div>
         </div>
-        <div class="w-full flex justify-center pt-2 pb-3">
-          <div class="w-2/3 grid grid-cols-3 gap-4">
-            <div class="px-4 flex flex-col justify-center items-center">
-              <count-up class="text-2xl font-bold" :end-val="26"></count-up>
-              <small class="font-normal text-neutral-600">Online</small>
+      </div>
+    </div>
+    <div class="px-5 md:px-12">
+      <div class="relative w-full border-line"></div>
+    </div>
+    <div class="mt-32"></div>
+    <div class="w-full p-5 md:px-12 min-h-[500px] bg-[#09153F]">
+      <div class="z-[1]">
+        <swiper :modules="[Autoplay, Scrollbar, Pagination, Navigation]" :slides-per-view="1" :speed="15000" :space-between="20"
+          :scrollbar="{ draggable: true }" :autoplay="{
+            delay: 0,
+            disableOnInteraction: false,
+            reverseDirection: true,
+            pauseOnMouseEnter: true,
+          }" :breakpoints="{
+            640: {
+              slidesPerView: 2,
+              spaceBetween: 20,
+            },
+            768: {
+              slidesPerView: 3,
+              spaceBetween: 25,
+            },
+            1024: {
+              slidesPerView: 4,
+              spaceBetween: 30,
+            },
+          }">
+          <swiper-slide>
+            <div class="max-w-full p-6 bg-[#F4392E] rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+              <div class="flex gap-3 items-center">
+                <div class="size-11 p-2 bg-white mb-3 flex justify-center items-center rounded-md">
+                  <Laravel />
+                </div>
+                <h2 class="mb-2 text-lg font-semibold tracking-tight text-white dark:text-white">Laravel
+                </h2>
+              </div>
+              <a href="https://laravel.com" target="_blank"
+                class="inline-flex font-normal items-center text-white hover:underline">
+                <small class="text-[14px]">Documentation</small>
+                <svg class="w-2 h-2 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                </svg>
+              </a>
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="max-w-full p-6 bg-[#3AB67A] rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+              <div class="flex gap-3 items-center">
+                <div class="size-11 p-2 bg-white mb-3 flex justify-center items-center rounded-md">
+                  <Vuejs />
+                </div>
+                <h2 class="mb-2 text-lg font-semibold tracking-tight text-white dark:text-white">Vuejs
+                </h2>
+              </div>
+              <a href="https://vuejs.org" target="_blank"
+                class="inline-flex font-normal items-center text-white hover:underline">
+                <small class="text-[14px]">Documentation</small>
+                <svg class="w-2 h-2 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                </svg>
+              </a>
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="max-w-full p-6 bg-[#F54D27] rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+              <div class="flex gap-3 items-center">
+                <div class="size-11 p-2 bg-white mb-3 flex justify-center items-center rounded-md">
+                  <Git />
+                </div>
+                <h2 class="mb-2 text-lg font-semibold tracking-tight text-white dark:text-white">Git
+                </h2>
+              </div>
+              <a href="https://git-scm.com" target="_blank"
+                class="inline-flex font-normal items-center text-white hover:underline">
+                <small class="text-[14px]">Documentation</small>
+                <svg class="w-2 h-2 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                </svg>
+              </a>
             </div>
-            <div class="px-4 flex flex-col justify-center items-center">
-              <count-up class="text-2xl font-bold" :end-val="12"></count-up>
-              <small class="font-normal text-neutral-600">View</small>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="max-w-full p-6 bg-[#3693FF] rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+              <div class="flex gap-3 items-center">
+                <div class="size-11 p-2 bg-white mb-3 flex justify-center items-center rounded-md">
+                  <Tailwind />
+                </div>
+                <h2 class="mb-2 text-lg font-semibold tracking-tight text-white dark:text-white">Tailwindcss
+                </h2>
+              </div>
+              <a href="https://tailwindcss.com" target="_blank"
+                class="inline-flex font-normal items-center text-white hover:underline">
+                <small class="text-[14px]">Documentation</small>
+                <svg class="w-2 h-2 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                </svg>
+              </a>
             </div>
-            <div class="px-4 flex flex-col justify-center items-center">
-              <count-up class="text-2xl font-bold" :end-val="60"></count-up>
-              <small class="font-normal text-neutral-600">Block</small>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="max-w-full p-6 bg-[#FFAB2D] rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+              <div class="flex gap-3 items-center">
+                <div class="size-11 p-2 bg-white mb-3 flex justify-center items-center rounded-md">
+                  <Cloudflare />
+                </div>
+                <h2 class="mb-2 text-lg font-semibold tracking-tight text-white dark:text-white">Cloudflare
+                </h2>
+              </div>
+              <a href="https://developers.cloudflare.com" target="_blank"
+                class="inline-flex font-normal items-center text-white hover:underline">
+                <small class="text-[14px]">Documentation</small>
+                <svg class="w-2 h-2 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill="none" viewBox="0 0 18 18">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                </svg>
+              </a>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+
+      <!-- Chart -->
+      <div class="w-full grid md:grid-cols-2 gap-[30px] mt-12 mb-10 overflow-hidden">
+        <div class="bg-[#18254F] rounded-lg shadow-2xl p-3 slide-left">
+          <div class="card text-primary-content">
+            <h4 class="card-title text-white font-medium text-lg capitalize slide-up">Crypto Statistics</h4>
+            <p class="text-[#8896b9] text-xs mt-2 slide-left">Latest data and analysis on cryptocurrencies</p>
+            <div class="card-body">
+              <apexchart width="100%" type="line" :options="options" :series="series"></apexchart>
             </div>
           </div>
         </div>
-        <div class="w-full mt-1">
-          <p
-            class="text-[13px] font-normal text-slate-600 -tracking-2 text-left md:text-justify"
-          >
-            Welcome to the website. I am a programmer from Vietnam, I specialize
-            in programming web applications using Laravel, Vuejs, Tailwindcss, etc. My 
-            strong passion for programming drives me to
-            create powerful, high-performance web applications with the most
-            modern technologies and contribute to the development of open
-            source.
-          </p>
+        <div class="bg-[#18254F] rounded-lg shadow-2xl p-3 slide-right">
+          <div class="card text-primary-content flex flex-col h-full">
+            <h4 class="card-title text-white font-medium text-lg capitalize slide-up">Weather in your location</h4>
+            <p class="text-[#8896b9] text-xs mt-2 slide-right">Instant weather forecast for your current location</p>
+            <div class="card-body flex justify-center items-center flex-grow p-4">
+              <div class="loader-spiner"></div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="w-full h-[1px] bg-gray-300"></div>
-      <div class="px-[21px] py-3">
-        <small class="block text-center text-[13px]">Your current IP: {{ ipAddress || 'No data' }} - {{ city || 'No data' }}</small>
+
+      <!-- About -->
+      <div class="bg-[#18254F] mt-10 rounded-lg">
+        <div class="max-w-[85rem] px-4 py-6 sm:px-6 lg:px-8 lg:py-10 mx-auto">
+          <div class="lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center lg:justify-between overflow-hidden">
+            <div class="lg:col-span-6 lg:col-start-1">
+              <div class="mb-8">
+                <h2 class="mb-2 text-3xl text-white font-bold lg:text-4xl dark:text-neutral-200 slide-up">
+                  The passion that drives me forward
+                </h2>
+                <p class="text-gray-500 text-sm dark:text-neutral-400">
+                  I am a programmer from Vietnam, I specialize in programming web applications using Laravel, Vuejs, Tailwindcss, etc. My strong passion for programming drives me to create powerful, high-performance web applications with the most modern technologies and contribute to the development of open source.
+                </p>
+              </div>
+
+              <blockquote class="relative">
+                <svg
+                  class="absolute top-0 start-0 transform -translate-x-6 -translate-y-8 size-16 text-gray-200 dark:text-neutral-800"
+                  width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true">
+                  <path
+                    d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
+                    fill="currentColor" />
+                </svg>
+
+                <div class="relative z-10">
+                  <p class="text-xl italic text-white dark:text-white">
+                    Amazing people to work with. Very fast and professional partner.
+                  </p>
+                </div>
+
+                <footer class="mt-6">
+                  <div class="flex items-center gap-x-4 slide-left">
+                    <div class="shrink-0">
+                      <img class="size-[42px] rounded-full object-fill"
+                        v-lazy="'https://ik.imagekit.io/odbmay3h6/avatar.jpg?updatedAt=1724846688735'"
+                        :alt="props.name">
+                    </div>
+                    <div class="grow">
+                      <div class="font-semibold text-white dark:text-neutral-200">{{ props.name }}</div>
+                      <div class="text-xs text-white dark:text-neutral-500">{{ props.description }}</div>
+                    </div>
+                  </div>
+                </footer>
+              </blockquote>
+            </div>
+
+            <div class="mt-10 lg:mt-0 lg:col-span-6 lg:col-end-13">
+              <div class="space-y-6 sm:space-y-8">
+                <ul
+                  class="grid grid-cols-2 divide-y-2 divide-x-2 divide-gray-500 overflow-hidden dark:divide-neutral-700">
+                  <li class="flex flex-col -m-0.5 p-4 sm:p-8">
+                    <div
+                      class="flex items-end text-3xl sm:text-5xl font-bold text-[#ffab2d] mb-2 dark:text-neutral-200 slide-up">
+                      <count-up :end-val="45"></count-up>k+
+                    </div>
+                    <p class="text-sm sm:text-base text-white dark:text-neutral-400 slide-left">
+                      users - from new startups to public companies
+                    </p>
+                  </li>
+
+                  <li class="flex flex-col -m-0.5 p-4 sm:p-8">
+                    <div
+                      class="flex items-end text-3xl sm:text-5xl font-bold text-[#ffab2d] mb-2 dark:text-neutral-200 slide-up">
+                      <svg class="shrink-0 size-5 text-[#ffab2d] dark:text-blue-500" xmlns="http://www.w3.org/2000/svg"
+                        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m5 12 7-7 7 7" />
+                        <path d="M12 19V5" />
+                      </svg>
+                      <count-up :end-val="23"></count-up>%
+                    </div>
+                    <p class="text-sm sm:text-base text-white dark:text-neutral-400 slide-right">
+                      increase in traffic on webpages with Looms
+                    </p>
+                  </li>
+
+                  <li class="flex flex-col -m-0.5 p-4 sm:p-8">
+                    <div
+                      class="flex items-end text-3xl sm:text-5xl font-bold text-[#ffab2d] mb-2 dark:text-neutral-200 slide-up">
+                      <svg class="shrink-0 size-5 text-[#ffab2d] dark:text-blue-500" xmlns="http://www.w3.org/2000/svg"
+                        width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m5 12 7-7 7 7" />
+                        <path d="M12 19V5" />
+                      </svg>
+                      <count-up :end-val="93"></count-up>%
+                    </div>
+                    <p class="text-sm sm:text-base text-white dark:text-neutral-400 slide-left">
+                      boost in reply rates across sales outreach
+                    </p>
+                  </li>
+
+                  <li class="flex flex-col -m-0.5 p-4 sm:p-8">
+                    <div
+                      class="flex items-end text-3xl sm:text-5xl font-bold text-[#ffab2d] mb-2 dark:text-neutral-200 slide-up">
+                      <count-up :end-val="2"></count-up>x
+                    </div>
+                    <p class="text-sm sm:text-base text-white dark:text-neutral-400 slide-right">
+                      faster than previous Preline versions
+                    </p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  <div class="fixed bottom-0 right-0 py-3 w-full bg-[#6366F1] sm:bg-inherit sm:w-auto sm:bottom-10 
-    sm:right-10 flex sm:flex-col sm:gap-3 rounded-t-[15px] justify-evenly items-center
-    sm:rounded-none sm:py-0
-    ">
-    <div class="sm:size-[45px] sm:bg-[#6366F1] rounded-full hover:translateY shadow-lg shadow-[#6366F1]">
-      <a href="https://www.facebook.com/ntanduy03" target="_blank" aria-label="Facebook" class="w-full h-full flex items-center justify-center text-white">
-        <Meta class="size-6"/>
-      </a>
-    </div>
-    <div class="sm:size-[45px] sm:bg-[#6366F1] rounded-full hover:translateY shadow-lg shadow-[#6366F1]">
-      <a href="https://x.com/daniel_saigon" target="_blank" aria-label="X" class="w-full h-full flex items-center justify-center text-white">
-        <Twitter class="size-6"/>
-      </a>
-    </div>
-    <div class="sm:size-[45px] sm:bg-[#6366F1] rounded-full hover:translateY shadow-lg shadow-[#6366F1]">
-      <a href="https://www.instagram.com/ng.tanduy26" target="_blank" aria-label="Instagram" class="w-full h-full flex items-center justify-center text-white">
-        <Instagram class="size-6"/>
-      </a>
-    </div>
-    <div class="sm:size-[45px] sm:bg-[#6366F1] rounded-full hover:translateY shadow-lg shadow-[#6366F1]">
-      <a href="https://www.github.com/TanDuy03" target="_blank" aria-label="Github" class="w-full h-full flex items-center justify-center text-white">
-        <Github class="size-6"/>
-      </a>
-    </div>
-    <div class="sm:size-[45px] sm:bg-[#6366F1] rounded-full hover:translateY shadow-lg shadow-[#6366F1]">
-      <router-link to="/login" class="w-full h-full flex items-center justify-center text-white" aria-label="Login">
-        <Account class="size-6"/>
-      </router-link>
+
+      <!-- Business  -->
+      <div class="mt-10">
+        <section class="py-6 bg-[#18254F] sm:py-12 lg:py-18 rounded-lg overflow-hidden">
+          <div class="px-4 md:px-0 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+            <div class="grid items-center grid-cols-1 gap-y-12 lg:grid-cols-2 lg:gap-x-24">
+              <div class="slide-left">
+                <img class="w-full max-w-md mx-auto"
+                  v-lazy="'https://cdn.rareblocks.xyz/collection/celebration/images/integration/2/services-icons.png'"
+                  :alt="props.name" />
+              </div>
+              <div class="text-center lg:text-left">
+                <h2 class="text-3xl font-bold leading-tight text-white sm:text-4xl lg:text-5xl slide-up">Grow business with
+                  connections.</h2>
+                <p class="mt-6 text-gray-500 text-sm slide-right">Amet minim mollit non deserunt ullamco est sit aliqua dolor do
+                  amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud
+                  amet.</p>
+
+                <a href="#" title=""
+                  class="inline-flex items-center justify-center px-8 py-4 font-semibold text-white transition-all duration-200 bg-blue-600 rounded-md mt-9 hover:bg-blue-700 focus:bg-blue-700 slide-down"
+                  role="button"> Check all 1486 apps </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <!-- Princing -->
+      <div class="bg-[#18254F] mt-10 rounded-lg">
+        <section class="py-6 sm:py-12 lg:py-18 overflow-hidden">
+          <div class="max-w-8xl px-4 mx-auto sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-[2fr,1fr] md:items-stretch gap-x-12 lg:gap-x-20 gap-y-10">
+              <div class="flex flex-col lg:py-5 slide-left">
+                <h2 class="text-3xl font-bold leading-tight text-white sm:text-4xl lg:leading-tight lg:text-5xl">Join
+                  35k+ web professionals & build your website</h2>
+
+                <div class="mt-10">
+                  <div class="flex items-center">
+                    <svg class="w-6 h-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    <svg class="w-6 h-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    <svg class="w-6 h-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    <svg class="w-6 h-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                    <svg class="w-6 h-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                    </svg>
+                  </div>
+
+                  <blockquote class="mt-3">
+                    <p class="text-sm leading-relaxed text-white">You made it so simple. My new site is so much faster
+                      and easier to work with than my old site. I just choose the page, make the change and click save.
+                    </p>
+                  </blockquote>
+
+                  <div class="flex items-center mt-8">
+                    <img class="flex-shrink-0 object-fill size-[42px] rounded-full"
+                      v-lazy="'https://ik.imagekit.io/odbmay3h6/avatar.jpg?updatedAt=1724846688735'"
+                      :alt="props.name" />
+                    <div class="ml-4">
+                      <p class="text-base font-semibold text-white">{{ props.name }}</p>
+                      <p class="mt-px text-sm text-gray-400">{{ props.description }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="slide-right">
+                <div class="overflow-hidden bg-white rounded-md" style="z-index: -1;">
+                  <div class="p-10">
+                    <h3 class="text-xs font-semibold tracking-widest text-purple-600 uppercase">Single pack</h3>
+                    <p class="mt-4 text-6xl font-bold text-black">$79</p>
+
+                    <ul class="flex flex-col mt-8 space-y-4">
+                      <li class="inline-flex items-center space-x-2">
+                        <svg class="flex-shrink-0 w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                        </svg>
+                        <span class="text-base font-medium text-gray-900"> 1 Domain License </span>
+                      </li>
+
+                      <li class="inline-flex items-center space-x-2">
+                        <svg class="flex-shrink-0 w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                        </svg>
+                        <span class="text-base font-medium text-gray-900"> Full Celebration Library </span>
+                      </li>
+
+                      <li class="inline-flex items-center space-x-2">
+                        <svg class="flex-shrink-0 w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                        </svg>
+                        <span class="text-base font-medium text-gray-900"> 120+ Coded Blocks </span>
+                      </li>
+
+                      <li class="inline-flex items-center space-x-2">
+                        <svg class="flex-shrink-0 w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                        </svg>
+                        <span class="text-base font-medium text-gray-900"> Design Files Included </span>
+                      </li>
+
+                      <li class="inline-flex items-center space-x-2">
+                        <svg class="flex-shrink-0 w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd" />
+                        </svg>
+                        <span class="pb-0.5 text-base font-medium text-gray-900 border-b border-black border-dashed">
+                          Premium Support </span>
+                      </li>
+                    </ul>
+
+                    <button
+                      class="inline-flex items-center justify-center w-full px-8 py-4 mt-10 font-semibold text-white transition-all duration-200 rounded-full bg-gradient-to-r from-fuchsia-600 to-blue-600 hover:opacity-80 focus:opacity-80"
+                      role="button"> Get full access </button>
+
+                    <div class="flex items-center mt-5">
+                      <svg class="flex-shrink-0 w-5 h-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                      </svg>
+                      <span class="ml-2 text-sm text-gray-500"> 14 Days Moneyback Guarantee </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+      </div>
+
+      <!-- Footer -->
+      <footer class="bg-[#18254F] rounded-lg mt-10">
+        <div class="w-full max-w-screen-xl mx-auto px-8 py-4 md:pt-8 md:pb-5">
+          <div class="sm:flex sm:items-center sm:justify-between">
+            <a href="https://pinkary.com/@TanDuy03" target="_blank"
+              class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse slide-up">
+              <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" :alt="props.name" />
+              <span class="self-center text-2xl font-semibold whitespace-nowrap text-white">{{ props.userID }}</span>
+            </a>
+            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-white sm:mb-0 slide-up">
+              <li>
+                <a href="#" class="hover:underline me-4 md:me-6">About</a>
+              </li>
+              <li>
+                <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
+              </li>
+              <li>
+                <a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
+              </li>
+              <li>
+                <a href="#" class="hover:underline me-4 md:me-6">Contact</a>
+              </li>
+              <li>
+                <router-link to="/login" class="hover:underline">Login</router-link>
+              </li>
+            </ul>
+          </div>
+          <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-5" />
+          <small class="block text-white sm:text-center slide-down">© {{ new Date().getFullYear() }} <a
+              href="https://pinkary.com/@TanDuy03" class="hover:underline">{{ props.userID }}</a>. All Rights Reserved -
+            Your current IP: {{ ipAddress || 'No data' }} - {{ city || 'No data' }}.</small>
+        </div>
+      </footer>
     </div>
   </div>
 </template>
 
 <style scoped>
+.baner-top {
+  background-image: url('../assets/bg-1.png');
+  background-blend-mode: luminosity;
+  background-size: cover;
+  background-position: top;
+}
+
+.header-top {
+  -webkit-transition: background-color 1000ms linear;
+  -moz-transition: background-color 1000ms linear;
+  -o-transition: background-color 1000ms linear;
+  -ms-transition: background-color 1000ms linear;
+  transition: background-color 1000ms linear;
+}
+
+.header-top.active {
+  background-color: #3736af;
+  box-shadow: 0 6px 12px rgba(55, 54, 175, 0.6);
+}
+
+svg {
+  height: 1.65rem;
+  width: 1.65rem;
+}
+
+.border-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  top: -45px;
+  background-color: rgba(255, 255, 255, 0.12);
+}
 
-  .icon-social svg {
-    height: 28px;
-    width: 28px;
+.swiper-wrapper {
+  -webkit-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+
+.loader-spiner {
+  --s: 64px;
+  width: var(--s);
+  aspect-ratio: 2;
+  --_g: #fff 90%, #0000;
+  background:
+    radial-gradient(farthest-side, var(--_g)) 0 50%/25% 50%,
+    radial-gradient(farthest-side at bottom, var(--_g)) 50% calc(50% - var(--s)/16)/25% 25%,
+    radial-gradient(farthest-side at top, var(--_g)) 50% calc(50% + var(--s)/16)/25% 25%,
+    radial-gradient(farthest-side at bottom, var(--_g)) 100% calc(50% - var(--s)/16)/25% 25%,
+    radial-gradient(farthest-side at top, var(--_g)) 100% calc(50% + var(--s)/16)/25% 25%;
+  background-repeat: no-repeat;
+  animation: l14 1s infinite;
+}
+
+@keyframes l14 {
+  25% {
+    background-position: 0 50%, 50% 0, 50% 100%, 100% 0, 100% 100%
   }
 
-</style>
+  50% {
+    background-position: 100% 50%, 0 0, 0 100%, 50% 0, 50% 100%
+  }
+
+  75%,
+  100% {
+    background-position: 100% 50%, 0 calc(50% - var(--s)/16), 0 calc(50% + var(--s)/16), 50% calc(50% - var(--s)/16), 50% calc(50% + var(--s)/16)
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/icons/Cloudflare.vue b/src/components/icons/Cloudflare.vue
new file mode 100644
index 0000000..10faee2
--- /dev/null
+++ b/src/components/icons/Cloudflare.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <path fill="#FFF" d="m115.679 69.288-15.591-8.94-2.689-1.163-63.781.436v32.381h82.061z" />
+        <path fill="#F38020"
+            d="M87.295 89.022c.763-2.617.472-5.015-.8-6.796-1.163-1.635-3.125-2.58-5.488-2.689l-44.737-.581c-.291 0-.545-.145-.691-.363s-.182-.509-.109-.8c.145-.436.581-.763 1.054-.8l45.137-.581c5.342-.254 11.157-4.579 13.192-9.885l2.58-6.723c.109-.291.145-.581.073-.872-2.906-13.158-14.644-22.97-28.672-22.97-12.938 0-23.913 8.359-27.838 19.952a13.35 13.35 0 0 0-9.267-2.58c-6.215.618-11.193 5.597-11.811 11.811-.145 1.599-.036 3.162.327 4.615C10.104 70.051 2 78.337 2 88.549c0 .909.073 1.817.182 2.726a.895.895 0 0 0 .872.763h82.57c.472 0 .909-.327 1.054-.8l.617-2.216z" />
+        <path fill="#FAAE40"
+            d="M101.542 60.275c-.4 0-.836 0-1.236.036-.291 0-.545.218-.654.509l-1.744 6.069c-.763 2.617-.472 5.015.8 6.796 1.163 1.635 3.125 2.58 5.488 2.689l9.522.581c.291 0 .545.145.691.363.145.218.182.545.109.8-.145.436-.581.763-1.054.8l-9.924.582c-5.379.254-11.157 4.579-13.192 9.885l-.727 1.853c-.145.363.109.727.509.727h34.089c.4 0 .763-.254.872-.654.581-2.108.909-4.325.909-6.614 0-13.447-10.975-24.422-24.458-24.422" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/Git.vue b/src/components/icons/Git.vue
new file mode 100644
index 0000000..9954d29
--- /dev/null
+++ b/src/components/icons/Git.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <path fill="#F34F29"
+            d="M124.737 58.378L69.621 3.264c-3.172-3.174-8.32-3.174-11.497 0L46.68 14.71l14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314 2.703 2.706 3.461 6.607 2.294 9.993l13.992 13.993c3.385-1.167 7.292-.413 9.994 2.295 3.78 3.777 3.78 9.9 0 13.679a9.673 9.673 0 01-13.683 0 9.677 9.677 0 01-2.105-10.521L68.574 47.933l-.002 34.341a9.708 9.708 0 012.559 1.828c3.778 3.777 3.778 9.898 0 13.683-3.779 3.777-9.904 3.777-13.679 0-3.778-3.784-3.778-9.905 0-13.683a9.65 9.65 0 013.167-2.11V47.333a9.581 9.581 0 01-3.167-2.111c-2.862-2.86-3.551-7.06-2.083-10.576L41.056 20.333 3.264 58.123a8.133 8.133 0 000 11.5l55.117 55.114c3.174 3.174 8.32 3.174 11.499 0l54.858-54.858a8.135 8.135 0 00-.001-11.501z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/Laravel.vue b/src/components/icons/Laravel.vue
new file mode 100644
index 0000000..6f64ecb
--- /dev/null
+++ b/src/components/icons/Laravel.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="133px"
+        viewBox="0 0 128 128" version="1.1">
+        <g id="surface1">
+            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(94.117647%,32.54902%,25.098039%);fill-opacity:1;"
+                d="M 26.027344 0.136719 C 25.824219 0.214844 20.085938 3.484375 13.28125 7.394531 C 5.035156 12.136719 0.800781 14.632812 0.574219 14.867188 C 0.394531 15.070312 0.191406 15.421875 0.128906 15.644531 C -0.0429688 16.21875 -0.0546875 100.347656 0.117188 100.953125 C 0.179688 101.1875 0.382812 101.53125 0.566406 101.722656 C 1.011719 102.191406 50.238281 130.496094 50.835938 130.632812 C 51.113281 130.699219 51.425781 130.6875 51.734375 130.601562 C 52.40625 130.433594 101.503906 102.191406 101.941406 101.730469 C 102.121094 101.53125 102.324219 101.1875 102.390625 100.953125 C 102.476562 100.675781 102.507812 96.277344 102.507812 87.015625 L 102.507812 73.480469 L 114.476562 66.605469 C 125.761719 60.117188 126.453125 59.710938 126.742188 59.265625 L 127.039062 58.785156 L 127.039062 44.207031 C 127.039062 28.335938 127.070312 29.230469 126.441406 28.65625 C 126.273438 28.507812 120.523438 25.152344 113.652344 21.195312 L 101.171875 14.015625 L 99.785156 14.015625 L 87.574219 21.027344 C 80.851562 24.894531 75.136719 28.199219 74.859375 28.378906 C 74.582031 28.5625 74.25 28.902344 74.113281 29.148438 L 73.867188 29.574219 L 73.8125 43.308594 L 73.761719 57.046875 L 63.679688 62.855469 C 58.132812 66.042969 53.515625 68.683594 53.417969 68.707031 C 53.238281 68.757812 53.226562 67.449219 53.226562 42.203125 L 53.226562 15.632812 L 52.960938 15.175781 C 52.628906 14.621094 54.121094 15.507812 39.136719 6.894531 C 26.570312 -0.332031 26.871094 -0.179688 26.027344 0.136719 Z M 37.578125 10.65625 C 42.835938 13.671875 47.136719 16.167969 47.136719 16.199219 C 47.136719 16.230469 42.527344 18.894531 36.894531 22.132812 L 26.644531 28.015625 L 16.414062 22.132812 C 10.792969 18.894531 6.1875 16.230469 6.1875 16.199219 C 6.1875 16.167969 10.785156 13.503906 16.40625 10.273438 L 26.613281 4.402344 L 27.316406 4.785156 C 27.710938 5 32.332031 7.640625 37.578125 10.65625 Z M 110.730469 24.191406 C 116.265625 27.378906 120.84375 30.011719 120.886719 30.054688 C 121.003906 30.160156 100.703125 41.828125 100.425781 41.816406 C 100.148438 41.808594 80.097656 30.246094 80.105469 30.105469 C 80.117188 29.945312 100.289062 18.339844 100.492188 18.371094 C 100.585938 18.394531 105.195312 21.015625 110.730469 24.191406 Z M 14.828125 25.875 L 24.585938 31.492188 L 24.640625 59.304688 L 24.691406 87.121094 L 24.929688 87.496094 C 25.054688 87.695312 25.289062 87.964844 25.460938 88.089844 C 25.621094 88.207031 31.050781 91.300781 37.523438 94.953125 L 49.28125 101.59375 L 49.28125 113.359375 C 49.28125 119.816406 49.238281 125.113281 49.183594 125.113281 C 49.140625 125.113281 38.976562 119.296875 26.601562 112.175781 L 4.105469 99.238281 L 4.074219 59.464844 L 4.054688 19.703125 L 4.554688 19.980469 C 4.84375 20.132812 9.460938 22.785156 14.828125 25.875 Z M 49.28125 45.453125 L 49.28125 71.082031 L 48.886719 71.339844 C 48.351562 71.679688 28.8125 82.910156 28.746094 82.910156 C 28.714844 82.910156 28.691406 71.339844 28.691406 57.195312 L 28.703125 31.492188 L 38.910156 25.621094 C 44.523438 22.390625 49.152344 19.769531 49.207031 19.789062 C 49.246094 19.8125 49.28125 31.363281 49.28125 45.453125 Z M 88.222656 39.558594 L 98.453125 45.441406 L 98.453125 57.101562 C 98.453125 68.164062 98.441406 68.757812 98.273438 68.695312 C 98.164062 68.652344 93.535156 66 87.980469 62.800781 L 77.867188 56.992188 L 77.867188 45.335938 C 77.867188 38.917969 77.898438 33.675781 77.929688 33.675781 C 77.972656 33.675781 82.601562 36.320312 88.222656 39.558594 Z M 123.09375 45.261719 C 123.09375 51.644531 123.050781 56.910156 123.007812 56.960938 C 122.933594 57.078125 102.699219 68.738281 102.570312 68.738281 C 102.539062 68.738281 102.507812 63.496094 102.507812 57.078125 L 102.507812 45.421875 L 112.714844 39.546875 C 118.335938 36.320312 122.964844 33.675781 123.007812 33.675781 C 123.0625 33.675781 123.09375 38.886719 123.09375 45.261719 Z M 86.230469 66.46875 C 94.835938 71.421875 96.320312 72.308594 96.171875 72.425781 C 96.074219 72.488281 92.8125 74.363281 88.929688 76.582031 C 85.046875 78.796875 74.988281 84.53125 66.570312 89.328125 L 51.273438 98.054688 L 50.785156 97.789062 C 47.863281 96.191406 30.910156 86.546875 30.910156 86.472656 C 30.902344 86.3125 75.765625 60.53125 75.945312 60.597656 C 76.03125 60.628906 80.660156 63.269531 86.230469 66.46875 Z M 98.433594 87.558594 L 98.398438 99.238281 L 75.914062 112.175781 C 63.542969 119.296875 53.375 125.113281 53.324219 125.113281 C 53.269531 125.113281 53.226562 120.359375 53.226562 113.359375 L 53.226562 101.59375 L 75.765625 88.742188 C 88.148438 81.675781 98.324219 75.890625 98.378906 75.878906 C 98.421875 75.878906 98.441406 81.132812 98.433594 87.558594 Z M 98.433594 87.558594 " />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/Tailwind.vue b/src/components/icons/Tailwind.vue
new file mode 100644
index 0000000..09f1273
--- /dev/null
+++ b/src/components/icons/Tailwind.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <path
+            d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597 6.398-8.531 13.867-11.73 22.398-9.597 4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602-6.399 8.536-13.867 11.735-22.399 9.602-4.87-1.215-8.347-4.746-12.207-8.66-6.27-6.367-13.53-13.738-29.394-13.738zM32.004 64c-17.066 0-27.73 8.531-32 25.602C6.402 81.066 13.87 77.867 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66 6.274 6.367 13.536 13.738 29.395 13.738 17.066 0 27.73-8.53 32-25.597-6.399 8.531-13.867 11.73-22.399 9.597-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64zm0 0"
+            fill="#38bdf8" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/Vuejs.vue b/src/components/icons/Vuejs.vue
new file mode 100644
index 0000000..4e44892
--- /dev/null
+++ b/src/components/icons/Vuejs.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+        <path
+            d="M0 8.934l49.854.158 14.167 24.47 14.432-24.47L128 8.935l-63.834 110.14zm126.98.637l-24.36.02-38.476 66.053L25.691 9.592.942 9.572l63.211 107.89zm-25.149-.008l-22.745.168-15.053 24.647L49.216 9.73l-22.794-.168 37.731 64.476zm-75.834-.17l23.002.009m-23.002-.01l23.002.01"
+            fill="none" />
+        <path d="M25.997 9.393l23.002.009L64.035 34.36 79.018 9.404 102 9.398 64.15 75.053z" fill="#35495e" />
+        <path d="M.91 9.569l25.067-.172 38.15 65.659L101.98 9.401l25.11.026-62.966 108.06z" fill="#41b883" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 66dee77..d11642b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,9 +10,19 @@ import { initializeApp } from "firebase/app"
 import { getPerformance } from "firebase/performance"
 import { inject } from '@vercel/analytics'
 import { injectSpeedInsights } from '@vercel/speed-insights'
+import VueApexCharts from "vue3-apexcharts"
+import VueLazyload from 'vue-lazyload'
 
 const meta = createHead()
-createApp(App).use(VueWriter).use(meta).use(router).mount('#app')
+createApp(App)
+.use(VueLazyload, {
+    preLoad: 1.3,
+    error: 'https://ik.imagekit.io/odbmay3h6/error.jpg?updatedAt=1724846706951',
+})
+.use(VueApexCharts)
+.use(VueWriter)
+.use(meta).use(router)
+.mount('#app')
 
 window.Alpine = Alpine
 Alpine.store('page', {
diff --git a/src/router/index.ts b/src/router/index.ts
index ebea096..c9165ab 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,7 @@ const routes: RouteRecordRaw[] = [
     props: {
       name: 'Nguyen Tan Duy',
       description: 'Software Developer',
+      userID: 'TanDuy03',
     }
   },
   { 
diff --git a/src/style.css b/src/style.css
index 6129572..eb81a6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer base {
+    /* body {
+        background-color: #09153F;
+    }    */
+    
     html {
         font-family: "Poppins", sans-serif;
         letter-spacing: -0.5px;
diff --git a/tailwind.config.js b/tailwind.config.js
index b769691..fc74573 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,12 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        '2xl': '0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05)'
+      }
+    },
     fontFamily: {},
   },
   plugins: [],
 }
-