diff --git a/Dockerfile b/Dockerfile
index 55cf17b..53ecadf 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,27 +1,7 @@
-# Use an official Node.js runtime as a parent image
-FROM node:16
-
-# Set the working directory in the container
+FROM node:21
 WORKDIR /app
-
-# Copy package.json and package-lock.json to the working directory
 COPY package*.json ./
-
-# Install app dependencies
-RUN npm upgrade
-
-# Install app dependencies
 RUN npm install
-
-# Install Vite globally
-RUN npm install -g create-vite
-
-# Copy the rest of your application code to the working directory
 COPY . .
-
-# Expose a port to communicate with the React app
 EXPOSE 5173
-
-# Start your React app using Vite
-CMD ["npx", "create-vite", "dev"]
-
+CMD ["npm","run","dev"]
\ No newline at end of file
diff --git a/README.md b/README.md
index 8b13789..153ae43 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,20 @@
+Prereq:
+1. az cli
+2. npm/nodejs
+3. docker/docker-compose
+
+Local Build:
+1. Remove package lock file
+2. Run "npm install"
+3. Run "npm run dev" and check the deployment
+
+Build Docker image
+1. Run "docker build -t levelupwww ."
+2. Run "docker images" check the image
+3. Run "docker run -it -p 80:5173 levelupwww" and deploy the image locally on port 80
+4. Run "az login" to login to Azure
+5. Run "az acr login --name levelupwww" to log in to container registry
+6. Run "docker tag levelupwww levelupwww.azurecr.io/levelupwww:latest" to tag the local image
+7. Run "docker push levelupwww.azurecr.io/levelupwww:latest" to push the latest image
+
 
diff --git a/package-lock.json b/package-lock.json
index b0d7c87..8e5539f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,8 @@
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.22.0",
         "react-router-hash-link": "^2.4.3",
+        "react-slick": "^0.30.2",
+        "slick-carousel": "^1.8.1",
         "sort-by": "^0.0.2",
         "styled-components": "^6.1.8",
         "tailwind-merge": "^2.2.1"
@@ -53,10 +55,10 @@
         "eslint-plugin-react-refresh": "^0.4.5",
         "postcss": "^8.4.33",
         "tailwindcss": "^3.4.1",
-        "vite": "^5.0.8"
+        "vite": "^5.1.4"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -81,12 +83,12 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -456,9 +458,9 @@
       }
     },
     "node_modules/@dotlottie/react-player": {
-      "version": "1.6.17",
-      "resolved": "https://registry.npmjs.org/@dotlottie/react-player/-/react-player-1.6.17.tgz",
-      "integrity": "sha512-VwrR9mvY1SZYrbH4xZp7RiPbrG0RmgXDVFQI6OMwu7uUB1aBjdTWtxzB7i7r52oZkjoVpN6ND8ETd67NxSDE9Q==",
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/@dotlottie/react-player/-/react-player-1.6.18.tgz",
+      "integrity": "sha512-oiCc4sMU2hrn8hIhPSWimDY7OC98Vt229UMbbg6rfmSx5a1+s8QrvdUUfdXhC1W9+Zbc1e1nRjxTIaQfa+zqoQ==",
       "dependencies": {
         "@dotlottie/common": "0.7.10"
       },
@@ -1540,13 +1542,13 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz",
-      "integrity": "sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -1574,9 +1576,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz",
-      "integrity": "sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1645,9 +1647,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz",
-      "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -1705,9 +1707,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz",
-      "integrity": "sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz",
+      "integrity": "sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==",
       "cpu": [
         "arm"
       ],
@@ -1718,9 +1720,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz",
-      "integrity": "sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz",
+      "integrity": "sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==",
       "cpu": [
         "arm64"
       ],
@@ -1731,9 +1733,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz",
-      "integrity": "sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz",
+      "integrity": "sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==",
       "cpu": [
         "arm64"
       ],
@@ -1744,9 +1746,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz",
-      "integrity": "sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz",
+      "integrity": "sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==",
       "cpu": [
         "x64"
       ],
@@ -1757,9 +1759,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz",
-      "integrity": "sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz",
+      "integrity": "sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==",
       "cpu": [
         "arm"
       ],
@@ -1770,9 +1772,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz",
-      "integrity": "sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz",
+      "integrity": "sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==",
       "cpu": [
         "arm64"
       ],
@@ -1783,9 +1785,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz",
-      "integrity": "sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz",
+      "integrity": "sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==",
       "cpu": [
         "arm64"
       ],
@@ -1796,9 +1798,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz",
-      "integrity": "sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz",
+      "integrity": "sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==",
       "cpu": [
         "riscv64"
       ],
@@ -1809,9 +1811,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz",
-      "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz",
+      "integrity": "sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==",
       "cpu": [
         "x64"
       ],
@@ -1822,9 +1824,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz",
-      "integrity": "sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz",
+      "integrity": "sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==",
       "cpu": [
         "x64"
       ],
@@ -1835,9 +1837,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz",
-      "integrity": "sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz",
+      "integrity": "sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==",
       "cpu": [
         "arm64"
       ],
@@ -1848,9 +1850,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz",
-      "integrity": "sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz",
+      "integrity": "sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==",
       "cpu": [
         "ia32"
       ],
@@ -1861,9 +1863,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz",
-      "integrity": "sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz",
+      "integrity": "sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==",
       "cpu": [
         "x64"
       ],
@@ -1890,20 +1892,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.24.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.24.1.tgz",
-      "integrity": "sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==",
+      "version": "5.25.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.25.0.tgz",
+      "integrity": "sha512-vlobHP64HTuSE68lWF1mEhwSRC5Q7gaT+a/m9S+ItuN+ruSOxe1rFnR9j0ACWQ314BPhBEVKfBQ6mHL0OWfdbQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.24.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.24.1.tgz",
-      "integrity": "sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==",
+      "version": "5.25.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.25.0.tgz",
+      "integrity": "sha512-u+n5R7mLO7RmeiIonpaCRVXNRWtZEef/aVZ/XGWRPa7trBIvGtzlfo0Ah7ZtnTYfrKEVwnZ/tzRCBcoiqJ/tFw==",
       "dependencies": {
-        "@tanstack/query-core": "5.24.1"
+        "@tanstack/query-core": "5.25.0"
       },
       "funding": {
         "type": "github",
@@ -2331,9 +2333,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.61",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.61.tgz",
-      "integrity": "sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==",
+      "version": "18.2.64",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
+      "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -2342,9 +2344,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.2.21",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.21.tgz",
+      "integrity": "sha512-gnvBA/21SA4xxqNXEwNiVcP0xSGHh/gi1VhWv9Bl46a0ItbTT5nFY+G9VSQpaG/8N/qdJpJ+vftQ4zflTtnjLw==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -2632,6 +2634,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz",
+      "integrity": "sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
@@ -2668,6 +2689,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.toreversed": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
+      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
     "node_modules/array.prototype.tosorted": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
@@ -2718,9 +2751,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.17",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
-      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "version": "10.4.18",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
+      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
       "dev": true,
       "funding": [
         {
@@ -2737,8 +2770,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.22.2",
-        "caniuse-lite": "^1.0.30001578",
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001591",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -2898,9 +2931,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001591",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
-      "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==",
+      "version": "1.0.30001596",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz",
+      "integrity": "sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2968,6 +3001,11 @@
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
       "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clsx": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
@@ -3237,9 +3275,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.688",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.688.tgz",
-      "integrity": "sha512-3/tHg2ChPF00eukURIB8cSVt3/9oeS1oTUIEt3ivngBInUaEcBhG2VdyEDejhwQdR6SLqaiEAEc0dHS0V52pOw=="
+      "version": "1.4.696",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.696.tgz",
+      "integrity": "sha512-SOr0bHP52OvYg2chCsz/0+FUSMGFm8L8HKwPpx3cbwRY24EOemVJtbgTm+IFO8LzhcnPy+hXmTq7ZcZ8uUuaYg=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -3247,6 +3285,11 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
@@ -3507,27 +3550,29 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.33.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
-      "integrity": "sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==",
+      "version": "7.34.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.0.tgz",
+      "integrity": "sha512-MeVXdReleBTdkz/bvcQMSnCXGi+c9kvy51IpinjnJgutl3YTHWsDdke7Z1ufZpGfDG8xduBDKyjtB9JH1eBKIQ==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "array.prototype.tosorted": "^1.1.1",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlast": "^1.2.4",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.toreversed": "^1.1.2",
+        "array.prototype.tosorted": "^1.1.3",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.12",
+        "es-iterator-helpers": "^1.0.17",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "object.hasown": "^1.1.2",
-        "object.values": "^1.1.6",
+        "object.entries": "^1.1.7",
+        "object.fromentries": "^2.0.7",
+        "object.hasown": "^1.1.3",
+        "object.values": "^1.1.7",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.4",
+        "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.8"
+        "string.prototype.matchall": "^4.0.10"
       },
       "engines": {
         "node": ">=4"
@@ -4790,6 +4835,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4836,6 +4887,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -5022,9 +5081,9 @@
       }
     },
     "node_modules/million": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/million/-/million-3.0.3.tgz",
-      "integrity": "sha512-fuFF18eBfAQy/+0EnZbqi7lVyJqT0EISboz9bG5tKG0Be3KL2chG4cCp2Bv9wdU6WXI4RZ4mh1gtR4ZPoGn1Vw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/million/-/million-3.0.5.tgz",
+      "integrity": "sha512-4Ti0exibWnQGAyaxeuPEfW5gltQ23gK8rdRColorUMIS6sKXdsTKEaTg1R3X00fmJwonRWmTJQg3PeWAm/lvDw==",
       "dependencies": {
         "@babel/core": "^7.23.7",
         "@babel/types": "^7.23.6",
@@ -8321,11 +8380,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
-      "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.2"
+        "@remix-run/router": "1.15.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -8335,12 +8394,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
-      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
       "dependencies": {
-        "@remix-run/router": "1.15.2",
-        "react-router": "6.22.2"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -8362,6 +8421,22 @@
         "react-router-dom": ">=4"
       }
     },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -8431,6 +8506,11 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -8483,9 +8563,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
-      "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz",
+      "integrity": "sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==",
       "devOptional": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -8498,19 +8578,19 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.12.0",
-        "@rollup/rollup-android-arm64": "4.12.0",
-        "@rollup/rollup-darwin-arm64": "4.12.0",
-        "@rollup/rollup-darwin-x64": "4.12.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.12.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-        "@rollup/rollup-linux-arm64-musl": "4.12.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-musl": "4.12.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.12.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.12.0",
-        "@rollup/rollup-win32-x64-msvc": "4.12.0",
+        "@rollup/rollup-android-arm-eabi": "4.12.1",
+        "@rollup/rollup-android-arm64": "4.12.1",
+        "@rollup/rollup-darwin-arm64": "4.12.1",
+        "@rollup/rollup-darwin-x64": "4.12.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.12.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.12.1",
+        "@rollup/rollup-linux-arm64-musl": "4.12.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.12.1",
+        "@rollup/rollup-linux-x64-gnu": "4.12.1",
+        "@rollup/rollup-linux-x64-musl": "4.12.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.12.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.12.1",
+        "@rollup/rollup-win32-x64-msvc": "4.12.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -8765,6 +8845,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/sort-by": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/sort-by/-/sort-by-0.0.2.tgz",
@@ -8818,6 +8906,11 @@
         "stacktrace-gps": "^3.0.4"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -9366,9 +9459,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true,
       "peer": true,
       "bin": {
@@ -9395,9 +9488,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.6.2.tgz",
-      "integrity": "sha512-vSqvUE5skSxQJ5sztTZ/CdeJb1Wq0Hf44hlYMciqHghvz+K88U0l7D6u1VsndoFgskDcnU+nG3gYmMzJVzd9Qg==",
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.7.0.tgz",
+      "integrity": "sha512-IcWssIyDN1gk6Mcae44q04oRoWTKrW8OKz0effVK1xdWwAgMPnfpxhn9RXUSL5JlwSikO18R7Ibk7Nukz6kxWA==",
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
       },
@@ -9406,14 +9499,17 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.7.1.tgz",
-      "integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.8.3.tgz",
+      "integrity": "sha512-ZlLteXGDcyJgsbN2g4sZ3Dw6fpX1O5rjgeaA5MmQhhA2YxnTxsh43f8nDQgFOzcir0iv8GYMjtCV8MtyNnrhEg==",
       "dependencies": {
         "acorn": "^8.11.3",
-        "chokidar": "^3.5.3",
+        "chokidar": "^3.6.0",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/update-browserslist-db": {
@@ -9479,9 +9575,9 @@
       "integrity": "sha512-SG2W1RHqE2LShl3p6tyERt6I+G6PQa9ZFVfkyNKXz01HBzL+tBeH5kXw/5AQeAzPJSjI3djVGBl1CyozA1kyBQ=="
     },
     "node_modules/vite": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz",
-      "integrity": "sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz",
+      "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
@@ -9800,9 +9896,9 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz",
-      "integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index a3e4538..fa14c05 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "scripts": {
+  "scripts": { 
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
@@ -12,7 +12,6 @@
   "build": {
     "outDir": "build"
   },
-
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -43,6 +42,8 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.0",
     "react-router-hash-link": "^2.4.3",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "sort-by": "^0.0.2",
     "styled-components": "^6.1.8",
     "tailwind-merge": "^2.2.1"
@@ -59,10 +60,9 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.0.8"
+    "vite": "^5.1.4"
   },
   "engines": {
-        "node": ">=18.0.0"
-      }
-  
+    "node": ">=18.0.0"
+  }
 }
diff --git a/public/assets/basma.png b/public/assets/basma.png
new file mode 100644
index 0000000..94b33f7
Binary files /dev/null and b/public/assets/basma.png differ
diff --git a/public/assets/css/index.css b/public/assets/css/index.css
index 16974a6..8f1e8aa 100644
--- a/public/assets/css/index.css
+++ b/public/assets/css/index.css
@@ -3,8 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-
 body {
     background-color: #f9fff5;
     font-family: 'Inter', sans-serif;
diff --git a/public/assets/risk.png b/public/assets/risk.png
index ad45487..57202f8 100644
Binary files a/public/assets/risk.png and b/public/assets/risk.png differ
diff --git a/src/Components/AboutComponent/PrincipelCompo.jsx b/src/Components/AboutComponent/PrincipelCompo.jsx
index 0e4b812..1d89300 100644
--- a/src/Components/AboutComponent/PrincipelCompo.jsx
+++ b/src/Components/AboutComponent/PrincipelCompo.jsx
@@ -3,7 +3,7 @@ import PrimaryButton from "../Buttons/PrimaryButton";
 
 function PrincipelCompo() {
   return (
-    <section className="py-12 mb-28 bg-gradient-to-r from-[#1C4987] to-[#159D9B] max-w-[1400px] mx-auto">
+    <section className="py-12 mb-28 rounded-3xl bg-gradient-to-r from-[#1C4987] to-[#159D9B] max-w-[1400px] mx-auto">
       <div className="max-w-[1000px] px-3 mx-auto ">
         <div className="text-center   ">
           <h2 className="font-semibold md:font-bold text-3xl md:text-5xl px-6 py-3 w-fit mx-auto mb-8 rounded-3xl text-white ">LevelUp Principles</h2>
diff --git a/src/Components/Blog/BlogHero.jsx b/src/Components/Blog/BlogHero.jsx
new file mode 100644
index 0000000..b266ebb
--- /dev/null
+++ b/src/Components/Blog/BlogHero.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import Slider from "react-slick";
+import BlogCard from "../BlogCard/TopBlogCard";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+// Custom Arrow components
+function SampleNextArrow(props) {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={className}
+      style={{ ...style, display: "block" }}
+      onClick={onClick}
+    />
+  );
+}
+
+function SamplePrevArrow(props) {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={className}
+      style={{ ...style, display: "block"}}
+      onClick={onClick}
+    />
+  );
+}
+
+const BlogHero = () => {
+  const [blogs, setBlogs] = useState(null);
+
+  useEffect(() => {
+    fetch(process.env.BLOG_EXPLORE_API_URL)
+      .then((response) => response.json())
+      .then((data) => {
+        setBlogs(Array.from(data));
+      });
+  }, []);
+
+  const sliderSettings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+
+  if (!blogs) return <div>Loading...</div>;
+  return (
+    <div className="container pt-28 pb-20 mx-auto px-[5%]  bg-gradient-to-b from-[#112b65] to-[#02c2ab] rounded-b-[40px]">
+      <h1 className="text-center font-bold text-4xl mb-4 text-white">
+        Top Selected Blogs for You
+      </h1>
+      {/* Blog Slider */}
+      {blogs && blogs.length > 0 && (
+        <div className="mb-8">
+          <Slider {...sliderSettings}>
+            {blogs.map((blog, index) => (
+              <div key={index} className="p-4">
+                <BlogCard blog={blog} />
+              </div>
+            ))}
+          </Slider>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BlogHero;
diff --git a/src/Components/Blog/BlogShow.jsx b/src/Components/Blog/BlogShow.jsx
new file mode 100644
index 0000000..3003656
--- /dev/null
+++ b/src/Components/Blog/BlogShow.jsx
@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import BlogCard from "../BlogCard/BlogCard"; 
+import PrimaryButton from "../Buttons/PrimaryButton";
+
+// Assuming you have a blogs array already available. If not, you'll need to fetch or import this data.
+const blogs = [
+  {
+    _id: "1",
+    title: "Blog Title 1",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 1",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "2",
+    title: "Blog Title 2",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 2",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "3",
+    title: "Blog Title 3",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 3",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "4",
+    title: "Blog Title 4",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 4",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "5",
+    title: "Blog Title 5",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 5",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "6",
+    title: "Blog Title 6",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 6",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "7",
+    title: "Blog Title 7",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 7",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "8",
+    title: "Blog Title 8",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 8",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "9",
+    title: "Blog Title 9",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 9",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "10",
+    title: "Blog Title 10",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 10",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "11",
+    title: "Blog Title 11",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 11",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "12",
+    title: "Blog Title 12",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 12",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "13",
+    title: "Blog Title 13",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 13",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "14",
+    title: "Blog Title 14",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 14",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "15",
+    title: "Blog Title 15",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 15",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "16",
+    title: "Blog Title 16",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 16",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "17",
+    title: "Blog Title 17",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 17",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "18",
+    title: "Blog Title 18",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 18",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "19",
+    title: "Blog Title 19",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 19",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "20",
+    title: "Blog Title 20",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 20",
+    keywords: ["keyword1", "keyword2"],
+  },
+];
+
+const BlogShow = () => {
+  const [visibleBlogs, setVisibleBlogs] = useState(9);
+
+  const handleShowMoreBlogs = () => {
+    setVisibleBlogs((prevVisibleBlogs) => prevVisibleBlogs + 9);
+  };
+
+  return (
+    <div className="container px-[5%] mt-20 mx-auto">
+      <h2 className="text-center text-5xl font-bold text-[#002E70] mb-4">
+        Learn from our impact makers
+      </h2>
+      <p className="text-center text-2xl  text-[#002E70] mb-4">
+        Our blog is a great resource for learning about the latest trends in
+        sustainability, ESG, and corporate governance.
+      </p>
+      {/* Blog Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {blogs.slice(0, visibleBlogs).map((blog, index) => (
+          <BlogCard key={index} blog={blog} />
+        ))}
+      </div>
+      {visibleBlogs < blogs.length && (
+        <div className="text-center mt-4">
+          <PrimaryButton onCLick={handleShowMoreBlogs} title={"More Blogs"}/>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BlogShow;
diff --git a/src/Components/Blog/Call.jsx b/src/Components/Blog/Call.jsx
new file mode 100644
index 0000000..5b13dd8
--- /dev/null
+++ b/src/Components/Blog/Call.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import img from "/assets/earth.png";
+
+const Call = () => {
+  return (
+    <div>
+      <section className="container px-[5%] mt-28 mx-auto">
+        <div className="flex max-md:flex-col md:gap-20 bg-[#002E70] py-4 md:py-12 mx-auto px-[5%] md:px-32 rounded-[14px]">
+          <div className=" md:w-[470px]">
+            <img src={img} alt="CTA img" className="w-full h-[300px] object-cover " />
+          </div>
+          <div className="flex flex-col items-center justify-between ">
+            <h2 className="text-3xl font-bold text-white mb-2">
+              Green-Tok, a newsletter dedicated to climate green news
+            </h2>
+            <p className="text-white text-lg mb-4">
+              We share green news once a month (or more if we find interesting
+              things to tell you)
+            </p>
+            <form className="w-full flex max-md:flex-col gap-4 md:gap-10 content-start">
+              <input
+                type="email"
+                placeholder="Your email address"
+                className="bg-white md:w-[300px] rounded-lg p-4 outline-none"
+              />
+              <input
+                type="submit"
+                value="Sign Up"
+                className="bg-[#02c2acd4] hover:bg-[#02c2ac] duration-300 cursor-pointer rounded-lg p-4 text-white"
+              />
+            </form>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Call;
diff --git a/src/Components/Blog/HighBlog.jsx b/src/Components/Blog/HighBlog.jsx
new file mode 100644
index 0000000..0c41f02
--- /dev/null
+++ b/src/Components/Blog/HighBlog.jsx
@@ -0,0 +1,95 @@
+import React from "react";
+import img from "/assets/wmn.png";
+import PrimaryButton from "../Buttons/PrimaryButton";
+
+const HighBlog = () => {
+  return (
+    <div className="container mx-auto mt-28 px-4 sm:px-[5%]">
+      <div className="relative">
+        <div className="flex flex-wrap w-full">
+          <div className="w-full sm:w-[40%] bg-[#002E70] max-md:px-[5%] pt-4 md:pt-10 md:pl-10">
+            <span className="text-white mb-2 block">Newest Blog • 5 min</span>
+            <h1 className="text-3xl sm:text-5xl text-white font-bold mb-4">
+              How to be a successful
+            </h1>
+            <p className="text-white mb-8">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga repellendus magnam ab aliquam
+            </p>
+            <PrimaryButton title="Read more" classes="max-md:mb-6" />
+          </div>
+          <div className="w-full sm:w-[60%]">
+            <img src={img} alt="women" />
+          </div>
+        </div>
+        <div className="px-4 sm:px-[5%]">
+          <div className="relative bg-[#02c2ac] mt-[-100px] z-10 rounded-3xl p-4 md:p-8">
+            <div className="flex flex-wrap justify-between mb-16">
+              <h2 className="text-2xl sm:text-3xl font-semibold text-[#002E70] max-md:text-center">
+                Blog Stufsus
+              </h2>
+              <div className="flex  max-md:flex-col gap-6">
+                <input
+                  type="search"
+                  name="search"
+                  id="1"
+                  placeholder="Search"
+                  className="rounded-full p-2 px-3 mt-4 sm:mt-0 max-md:w-full"
+                />
+                <input
+                  type="submit"
+                  value="Search"
+                  className="bg-[#004dbc] cursor-pointer hover:bg-[#004ebcde] text-white rounded-full p-2 px-3"
+                />
+              </div>
+            </div>
+            <div>
+              <h2 className="text-4xl sm:text-5xl font-bold text-[#002E70] mb-8">
+                Top Blogs
+              </h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-lg">
+                  {/* Blog 1 */}
+                  <div className="mb-4">
+                    <img src={img} alt="" className="rounded-md" />
+                  </div>
+                  <h3 className="font-bold text-lg">Blog Title 1</h3>
+                  <p>
+                    Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
+                  </p>
+                </div>
+                <div className="space-y-4 sm:col-span-1 sm:grid sm:grid-rows-1 gap-4">
+                  <div className="flex flex-col sm:flex-row gap-4 bg-white p-4 rounded-lg shadow-lg">
+                    {/* Blog 2 */}
+                    <div className="sm:w-1/2">
+                      <img src={img} alt="" className="w-full h-auto sm:w-[235px] sm:h-[235px] object-cover rounded-2xl" />
+                    </div>
+                    <div className="sm:w-1/2">
+                      <h3 className="font-bold text-lg">Blog Title 2</h3>
+                      <p>
+                        Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col sm:flex-row gap-4 bg-white p-4 rounded-lg shadow-lg">
+                    {/* Blog 3 */}
+                    <div className="sm:w-1/2">
+                      <img src={img} alt="" className="w-full h-auto sm:w-[235px] sm:h-[235px] object-cover rounded-2xl" />
+                    </div>
+                    <div className="sm:w-1/2">
+                      <h3 className="font-bold text-lg">Blog Title 3</h3>
+                      <p>
+                        Some quick example text to build on the card title and make up the bulk of the card&apos;s content.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HighBlog;
diff --git a/src/Components/BlogCard/TopBlogCard.jsx b/src/Components/BlogCard/TopBlogCard.jsx
new file mode 100644
index 0000000..d9fa7cd
--- /dev/null
+++ b/src/Components/BlogCard/TopBlogCard.jsx
@@ -0,0 +1,40 @@
+import Aos from 'aos';
+import React, { useEffect } from 'react';
+import "aos/dist/aos.css"; // Import AOS styles
+import { Link } from 'react-router-dom';
+
+const TopBlogCard = ({ blog }) => {
+  useEffect(() => {
+    Aos.init({
+      once: true, // Whether animation should happen only once - while scrolling down
+      mirror: false, // Whether elements should animate out while scrolling past them
+    });
+  }, []);
+
+  // Destructure the blog objec
+  const { _id, title, image, summary, keywords } = blog;
+
+  return (
+    <Link
+      to={`/academy/blogs/${_id}`}
+      className="block"
+      data-aos="zoom-in-out"
+      data-aos-duration="1600"
+    >
+      <div className='group block p-4 w-full  rounded-lg overflow-hidden text-[#002E70]'>
+        <div className="rounded-lg overflow-hidden">
+          <img src={image} alt={title} className="w-full h-80 object-cover rounded-2xl" />
+        </div>
+        <div className="p-4">
+          <h2 className="text-xl font-bold mb-2">{title.slice(0, 100) + (title.length > 100 && '...')}</h2>
+          <p className="text-[#002E70]/80 mb-4 ">{summary.slice(0, 100) + (summary.length > 100 && '...')}</p>
+          {/* <div className="text-sm text-[#002E70]">
+            <p>reading time {readingTime}</p>
+          </div> */}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default TopBlogCard;
diff --git a/src/Components/Cards/JobCard.jsx b/src/Components/Cards/JobCard.jsx
new file mode 100644
index 0000000..76da4ef
--- /dev/null
+++ b/src/Components/Cards/JobCard.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoShareSocialSharp } from "react-icons/io5";
+
+const Property = ({ text }) => (
+    <span className='rounded-full px-2 py-1 border capitalize border-slate-700 select-none'>{text}</span>
+);
+
+export default function JobCard({ date, jobTitle, companyName, companyLogoUrl, properties, salary, location, link }) {
+
+    return (
+        <div className='rounded-xl p-1  bg-gradient-to-r from-[#1C4987] to-[#159D9B] shadow-lg min-w-64 w-full pb-6'>
+            {/* Start Header ====================================== */}
+            <div className="rounded-xl bg-[#62e7d7] p-4 flex flex-col justify-between h-[300px]">
+                <div className="flex flex-col gap-4">
+                    <div className="flex justify-between items-center">
+                        <span className="rounded-full px-3 py-2 bg-white select-none shadow-lg hover:scale-105 hover:rounded-2xl transition-all cursor-pointer">{date}</span>
+                        {/* Share BTN */}
+                        <span className="aspect-square rounded-full hover:rounded-xl bg-white box-border w-8 justify-center items-center shadow-lg hover:shadow-xl flex  hover:scale-105 active:scale-95 hover:bg-opacity-80 active:bg-opacity-100 bg-opacity-90 transition-all cursor-pointer"><IoShareSocialSharp /></span>
+                    </div>
+
+                    {/* Job Title & Company (name\logo) */}
+                    <div className="flex flex-col gap-3">
+                        <span className="font-semibold ">{companyName}</span>
+                        <div className="flex justify-between gap-3 items-center">
+                            <span className="text-2xl font-bold whitespace-break-spaces break-all capitalize  break-keep">{jobTitle}</span>
+                            {companyLogoUrl &&
+                                <div className="rounded-full aspect-square bg-gray-200 w-10 flex-shrink-0 shadow-lg cursor-pointer hover:scale-105 transition-all">
+                                    <img src={companyLogoUrl} alt={companyName} className="w-full object-cover" />
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+
+                {/* Properties */}
+                <div className="flex flex-wrap gap-2">{properties.map((text, index) => (<Property key={index} text={text} />))}</div>
+            </div>
+            {/* End Header ====================================== */}
+
+            {/* Start Details ======================================= */}
+            <div className="pt-6 flex justify-between  items-center px-4">
+                <div className='flex flex-col'>
+                    <span className="font-semibold text-xl">{salary}</span>
+                    <span className='text-gray-800'>{location}</span>
+                </div>
+                <a  className='font-semibold text-white p-2 px-5 bg-[#002E70] rounded-full hover:rounded-2xl shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 hover:bg-opacity-80 active:bg-opacity-100 bg-opacity-90 transition-all cursor-not-allowed'>Opening Soon</a>
+            </div>
+            {/* End Details ======================================= */}
+        </div>
+    )
+}
+// export default function JobCard({time, jobTitle, companyName, companyLogoUrl, properties}) {
+
+JobCard.propTypes = {
+    date: PropTypes.string.isRequired,
+    jobTitle: PropTypes.string.isRequired,
+    companyName: PropTypes.string.isRequired,
+    companyLogoUrl: PropTypes.string,
+    properties: PropTypes.arrayOf(PropTypes.string),
+    salary: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    location: PropTypes.string.isRequired
+}
diff --git a/src/Components/IAProgram.jsx b/src/Components/IAProgram.jsx
index f5733c7..f71f93a 100644
--- a/src/Components/IAProgram.jsx
+++ b/src/Components/IAProgram.jsx
@@ -57,7 +57,7 @@ function IAProgram() {
     },
     {
       id: 3,
-      subtitle: "Follow-ip and Corrective",
+      subtitle: "Follow-up",
       description:
         "Track and monitor the implementation of corrective actions in response to audit findings.",
     },
diff --git a/src/Components/Jobs.jsx b/src/Components/Jobs.jsx
index 7c77240..49a8a97 100644
--- a/src/Components/Jobs.jsx
+++ b/src/Components/Jobs.jsx
@@ -2,64 +2,86 @@ import React, { useEffect } from "react";
 import { FaArrowRight } from "react-icons/fa6";
 import AOS from "aos";
 import "aos/dist/aos.css"; // Import AOS styles
+import JobCard from "./Cards/JobCard";
+// import logo from "../../public/assets/images/"
 
 const jobs = [
   {
-    title: "GHG Specialist (Full or Part-time)",
-    link: "https://www.linkedin.com/company/levelupesg/jobs/",
+    "date": "February 11, 2024",
+    "jobTitle": "UI/UX Design Service",
+    "companyName": "LevelUp",
+    "companyLogoUrl": "/assets/images/logo.png",
+    "properties": [""],
+    
+    "link": "#",
   },
   {
-    title: "Corporate Sustainability Subject Matter Expert (SME) - Contract",
-    link: "https://www.linkedin.com/company/levelupesg/jobs/",
+    "date": "February 21, 2024",
+    "jobTitle": "Senior ESG Consultant",
+    "companyName": "LevelUp",
+    "companyLogoUrl": "/assets/images/logo.png",
+    "properties": [""],
+    
+    "link": "#",
   },
+  {
+    "date": "February 22, 2024",
+    "jobTitle": "Sustainable Procurement Subject Matter Resource (SMR)",
+    "companyName": "LevelUp",
+    "companyLogoUrl": "/assets/images/logo.png",
+    "properties": [""],
+    
+    "link": "#",
+  },
+  {
+    "date": "February 22, 2024",
+    "jobTitle": "Carbon Specialist ",
+    "companyName": "LevelUp",
+    "companyLogoUrl": "/assets/images/logo.png",
+    "properties": [""],
+    
+    "link": "#",
+  },
+  {
+    "date": "February 22, 2024",
+    "jobTitle": "Circular Economy Subject Matter Resource (SMR)",
+    "companyName": "LevelUp",
+    "companyLogoUrl": "/assets/images/logo.png",
+    "properties": [""],
+    
+    "link": "#",
+  },
+
 ];
 
+
 const Jobs = () => {
   return (
-    <>
-      <section className="jobs max-w-7xl mx-auto">
-        <div className="w-full py-28 px-4 md:px-8 lg:px-0">
-          <div className="max-w-3xl mx-auto">
-            <div
-              data-aos="fade-up"
-              data-aos-duration="1200"
-              className="text-center"
-            >
-              <h2 className="mb-6 text-[#112b65] font-bold text-4xl md:text-5xl leading-[1.2]">
-                Job openings
-              </h2>
-              <p className="text-lg text-[#112b65]">
-                Join us on this journey and find your spot to be an Impact
-                Maker.
-              </p>
-            </div>
-            <div data-aos="fade-up" data-aos-duration="1800" className="mt-8">
-              {/* Mapping job openings */}
-              {jobs.map((job, index) => (
-                <a
-                  href={job.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  key={index}
-                >
-                  <div className="group mb-6 p-4 border border-[#e6e6e5] rounded-3xl transition duration-300 hover:bg-[#02c2ab] flex justify-between items-center">
-                    <h3 className="w-full group-hover:pl-2 group-hover:text-white duration-500 max-w-[500px] text-lg md:text-xl font-bold text-[#112b65]">
-                      {job.title}
-                    </h3>
-                    <div className="flex justify-end items-center w-[200px] gap-4">
-                      <span className="text-[#112b65] duration-500 group-hover:text-white ">Apply</span>
-                      <div className="p-2 text-[20px] rounded-md bg-[#02c2ab] duration-500 group-hover:text-white ">
-                        <FaArrowRight />
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              ))}
-            </div>
+    <section className="jobs max-w-7xl mx-auto ">
+      <div className="w-full py-28 ">
+        <div className="w-full mx-auto">
+          <div
+            data-aos="fade-up"
+            data-aos-duration="1200"
+            className="text-center w-full"
+          >
+            <h2 className="mb-6 text-[#112b65] font-bold text-4xl md:text-5xl leading-[1.2]">
+              Job openings
+            </h2>
+            <p className="text-lg text-[#112b65]">
+              Join us on this journey and find your spot to be an Impact
+              Maker.
+            </p>
+          </div>
+          <div data-aos="fade-up" data-aos-duration="1800" className="mt-8 grid grid-cols-3 max-[1040px]:grid-cols-2 max-[725px]:grid-cols-1 gap-10 px-10 max-[465px]:px-5 w-full">
+            {/* Mapping job openings */}
+            {jobs.map((job, index) => (
+              <JobCard {...job} key={index} />
+            ))}
           </div>
         </div>
-      </section>
-    </>
+      </div>
+    </section>
   );
 };
 
diff --git a/src/Components/Teams.jsx b/src/Components/Teams.jsx
index d3caea7..d1293f4 100644
--- a/src/Components/Teams.jsx
+++ b/src/Components/Teams.jsx
@@ -22,6 +22,7 @@ import maria from "/assets/Teams/Maria.png";
 import eleonora from "/assets/Teams/eleonora.png";
 import Fabio from "/assets/Teams/Fabio.png";
 import charlene from "/assets/Teams/charlene.png";
+import basma from "/assets/basma.png";
 
 export default function Teams() {
   const dataTeam = [
@@ -44,6 +45,7 @@ export default function Teams() {
     { id: 17, photo: eleonora, userName: "Eleonora Tossini" },
     { id: 18, photo: Fabio, userName: "Dr. Fabio Puntillo" },
     { id: 19, photo: charlene, userName: "Charlene Gabrielle" },
+    { id: 20, photo: basma, userName: "Bassma Sherif" },
   ];
   return (
     <div className="flex justify-center">
diff --git a/src/Pages/Blogs/BlogsDiscoveryPage.jsx b/src/Pages/Blogs/BlogsDiscoveryPage.jsx
index 5516c7c..95bad83 100644
--- a/src/Pages/Blogs/BlogsDiscoveryPage.jsx
+++ b/src/Pages/Blogs/BlogsDiscoveryPage.jsx
@@ -1,25 +1,16 @@
-import React, { useEffect, useState } from "react";
-import BlogCard from "../../Components/BlogCard/BlogCard";
+import React from "react";
+import BlogHero from "../../Components/Blog/BlogHero";
+import BlogShow from "../../Components/Blog/BlogShow";
+import Call from "../../Components/Blog/Call";
+import HighBlog from "../../Components/Blog/HighBlog";
 
 const Blog = () => {
-  const [blogs, setBlogs] = useState(null);
-
-  useEffect(() => {
-    fetch(process.env.BLOG_EXPLORE_API_URL)
-      .then((response) => response.json())
-      .then((data) => {
-        setBlogs(Array.from(data));
-      })
-  }, []);
-
-  if (!blogs) return <div>Loading...</div>;
   return (
-    <div className="container mx-auto py-8 mt-20 px-[5%]">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {blogs.map((blog, index) => (
-          <BlogCard key={index} blog={{...blog}} />
-        ))}
-      </div>
+    <div>
+      <BlogHero />
+      <BlogShow />
+      <Call />
+      <HighBlog />
     </div>
   );
 };