Only footer left

package-lock.json

@@ -15,10 +15,13 @@
         "react": "^17.0.2",
         "react-bootstrap": "^2.4.0",
         "react-dom": "^17.0.2",
+        "react-elastic-carousel": "^0.11.5",
         "react-icons": "^4.4.0",
+        "react-player": "^2.10.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.0",
         "sass": "^1.52.2",
+        "styled-components": "^5.3.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2095,6 +2098,29 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -4926,6 +4952,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -5252,6 +5298,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg=="
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5723,6 +5774,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@@ -5904,6 +5963,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -8285,6 +8354,19 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11232,6 +11314,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -11397,6 +11484,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -13762,11 +13854,62 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-elastic-carousel": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz",
+      "integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "react-only-when": "^1.0.2",
+        "react-swipeable": "^5.5.1",
+        "resize-observer-polyfill": "1.5.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": "15 - 17",
+        "react-dom": "15 - 17",
+        "styled-components": "^5.1.0"
+      }
+    },
+    "node_modules/react-elastic-carousel/node_modules/react-only-when": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz",
+      "integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": "^15.0.0 || ^16.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/react-elastic-carousel/node_modules/react-swipeable": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz",
+      "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==",
+      "dependencies": {
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-icons": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
@@ -13785,6 +13928,21 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-player": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz",
+      "integrity": "sha512-ova0jY1Y1lqLYxOehkzbNEju4rFXYVkr5rdGD71nsiG4UKPzRXQPTd3xjoDssheoMNjZ51mjT5ysTrdQ2tEvsg==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14104,6 +14262,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -14602,6 +14765,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15001,6 +15169,36 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
@@ -17985,6 +18183,29 @@
       "integrity": "sha512-rZ6vufeY/UjAgtyiJ4WvfF6XP6HizIyOfbZOg0RnecIwjrvH8Am3nN1BpKnnPZunYAkUcPPXDhwbxOtGop8cfQ==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -20069,6 +20290,23 @@
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11",
+        "picomatch": "^2.3.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -20320,6 +20558,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -20680,6 +20923,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@@ -20787,6 +21035,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -22512,6 +22770,21 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -24645,6 +24918,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -24776,6 +25054,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -26317,11 +26600,43 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-elastic-carousel": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz",
+      "integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "react-only-when": "^1.0.2",
+        "react-swipeable": "^5.5.1",
+        "resize-observer-polyfill": "1.5.0"
+      },
+      "dependencies": {
+        "react-only-when": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz",
+          "integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==",
+          "requires": {}
+        },
+        "react-swipeable": {
+          "version": "5.5.1",
+          "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz",
+          "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==",
+          "requires": {
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-icons": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
@@ -26338,6 +26653,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-player": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz",
+      "integrity": "sha512-ova0jY1Y1lqLYxOehkzbNEju4rFXYVkr5rdGD71nsiG4UKPzRXQPTd3xjoDssheoMNjZ51mjT5ysTrdQ2tEvsg==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -26582,6 +26909,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -26934,6 +27266,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -27235,6 +27572,23 @@
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
       "requires": {}
     },
+    "styled-components": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
+      "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",

package.json

@@ -10,10 +10,13 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^17.0.2",
+    "react-elastic-carousel": "^0.11.5",
     "react-icons": "^4.4.0",
+    "react-player": "^2.10.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "sass": "^1.52.2",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Components/AcheiveGoalCard/AcheiveGoalCard.js

+import React from "react";
+import { skillPad } from "../../Constant/Images";
+import style from "./AcheiveGoalCard.module.scss";
+
+const AcheiveGoalCard = ({ data }) => {
+  function truncate(string, n) {
+    return string?.length > n ? string.substr(0, n - 1) + " ..." : string;
+  }
+  return (
+    <div className={style.box}>
+      <div className={style.imageContainer}>
+        <img src={data?.image} className={style.boxImage} />
+      </div>
+      <h6 className={style.title}>{truncate(data?.title, 60)}</h6>
+      <p className={`p-14 ${style.subTitle} `}>
+        {truncate(data?.description, 80)}
+      </p>
+    </div>
+  );
+};
+
+export default AcheiveGoalCard;

src/Components/AcheiveGoalCard/AcheiveGoalCard.module.scss

+.box {
+  width: 100%;
+  height: 300px;
+  padding: 40px;
+  margin-top: 20px;
+  // background-color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  -webkit-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  -moz-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  transition: 0.2s;
+  &:hover {
+    -webkit-box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+    -moz-box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+    box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+  }
+  .imageContainer {
+    width: 30%;
+    height: 40%;
+    .boxImage {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .title {
+    margin-top: 20px;
+    text-align: center;
+    margin-top: 30px;
+  }
+  .subTitle {
+    width: 100%;
+    margin-top: 10px;
+    text-align: center;
+  }
+}

src/Components/BlogCard/BlogCard.js

+import React from "react";
+import style from "./BlogCard.module.scss";
+import { AiFillStar } from "react-icons/ai";
+import { Col } from "react-bootstrap";
+import { GoCalendar } from "react-icons/go";
+import { BsFillPersonFill, BsArrowRight } from "react-icons/bs";
+
+const BlogCard = ({ data }) => {
+  return (
+    // <Col md={4} style={{marginTop: "40px"}}>
+    <div className={style.cardMainContianer}>
+      <div className={style.imageContainer}>
+        <img src={data?.image} alt="" />
+      </div>
+      <div className={style.cardBody}>
+        <div className={style.dateAndName}>
+          <div>
+            <p>
+              <GoCalendar /> April 5, 2017
+            </p>
+          </div>
+          <div>
+            <p>
+              <BsFillPersonFill /> John Doe
+            </p>
+          </div>
+        </div>
+        <h6>Conceptual Art, Photography and Wild Life</h6>
+        <p className={`p-14`}>{data?.description}</p>
+        <div>
+          <h6 className={style.price}>Read More <BsArrowRight /> </h6>
+        </div>
+      </div>
+    </div>
+    // </Col>
+  );
+};
+
+export default BlogCard;

src/Components/BlogCard/BlogCard.module.scss

+@use "../../root";
+
+.cardMainContianer {
+  width: 100%;
+  min-height: 400px;
+  height: 100%;
+  transition: 0.3s;
+  padding: 20px;
+  -webkit-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  .imageContainer {
+    width: 100%;
+    height: 220px;
+    background-color: orange;
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cardBody {
+    padding: 30px;
+    white-space: wrap;
+    overflow: hidden;
+    .price {
+      color: root.$main_red;
+      margin-bottom: 0px;
+    }
+    .dateAndName {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+  }
+  &:hover {
+    //   background-color: red;
+    -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+    -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+  }
+}

src/Components/Carousel/Carousel.js

+import React from "react";
+import Carousel, { consts } from "react-elastic-carousel";
+import { google, envato } from "../../Constant/Images";
+import { Button } from "react-bootstrap";
+import { AiOutlineRight, AiOutlineLeft } from "react-icons/ai";
+import style from "./Carousel.module.scss";
+
+const CarouselComponent = () => {
+  const myArrow = ({ type, onClick, isEdge }) => {
+    const pointer =
+      type === consts.PREV ? (
+        <AiOutlineLeft className={style.icon} />
+      ) : (
+        <AiOutlineRight className={style.icon} />
+      );
+    return (
+      <button onClick={onClick} disabled={isEdge} className={style.button}>
+        {pointer}
+      </button>
+    );
+  };
+  return (
+    <Carousel
+      pagination={false}
+      itemsToShow={4}
+      itemsToScroll={4}
+      renderArrow={myArrow}
+    >
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+
+      {/* {items.map((item) => (
+        <div key={item.id}>{item.title}</div>
+      ))} */}
+    </Carousel>
+  );
+};
+
+export default CarouselComponent;

src/Components/Carousel/Carousel.module.scss

+.button {
+  background-color: transparent;
+  border: 0px;
+  outline: none;
+}
+
+.icon {
+  font-size: 20px;
+}
+
+.img{
+    width: 160px;
+    height: 50px;
+}
\ No newline at end of file

src/Components/CourseCategories/CourseCategories.module.scss

@@ -10,6 +10,7 @@
   &:hover {
     background-color: root.$main_red;
     color: white !important;
+    transition: 0.2s;
   }
   &:hover .icon {
     color: white;

src/Components/Footer/Footer.js

+import React from "react";
+import { Container, Col, Row } from "react-bootstrap";
+import style from "./Footer.module.scss";
+const Footer = () => {
+  return (
+    <div className={style.footerMainContainer}>
+      <Container>
+        <div className={style.footerInnerContainer}>
+          <div className={style.footerDiv1}>asdsadas</div>
+          <div className={style.footerDiv2}>asdassad</div>
+          <div className={style.footerDiv3}>asdaas</div>
+          <div className={style.footerDiv4}>asdasd</div>
+          <div className={style.footerDiv5}>asdsa</div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Footer;

src/Components/Footer/Footer.module.scss

+@use "../../root";
+
+.footerMainContainer {
+  width: 100%;
+  height: 400px;
+  background-color: root.$footer_background;
+  color: white;
+  .footerInnerContainer {
+    display: flex;
+    width: 100%;
+    padding-top: 50px;
+    .footerDiv1,
+    .footerDiv2,
+    .footerDiv3,
+    .footerDiv4,
+    .footerDiv5 {
+      width: 20%;
+    }
+  }
+}

src/Constant/Images.js

@@ -4,6 +4,15 @@ import photographer_man from "../assets/images/photographer_man.png";
 import guitar from "../assets/images/guitar.png";
 import graphic from "../assets/images/graphic.png";
 import skillPad from "../assets/images/skill.png";
+import lcdScreen from "../assets/images/LCDScreen.png";
+import selfLearn from "../assets/images/self-learn.png";
+import key from "../assets/images/key.png";
+import camera from "../assets/images/camera.png";
+import analytics from "../assets/images/analytics.png";
+import quoteImg from "../assets/images/quote.png";
+import profile from "../assets/images/profile.png";
+import google from "../assets/images/google.png";
+import envato from "../assets/images/envato.png"
 
 export {
   headImg,
@@ -12,4 +21,13 @@ export {
   guitar,
   graphic,
   skillPad,
+  selfLearn,
+  lcdScreen,
+  key,
+  camera,
+  analytics,
+  quoteImg,
+  profile,
+  google,
+  envato
 };

src/Constant/mockData.js

-import { freelancingCardImg, photographer_man, guitar} from "./Images";
+import {
+  freelancingCardImg,
+  photographer_man,
+  guitar,
+  skillPad,
+  selfLearn,
+  lcdScreen,
+  key,
+  camera,
+  analytics,
+} from "./Images";
 const categories = [
   {
     title: "Development",
@@ -73,4 +83,43 @@ const topCourse = [
   },
 ];
 
-export { categories, topCourse };
+const acheiveGoalData = [
+  {
+    title: "Expand Skill Development",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: skillPad,
+  },
+  {
+    title: "Self Learn",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: selfLearn,
+  },
+  {
+    title: "Tech Jobs",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: lcdScreen,
+  },
+  {
+    title: "Unlock Your Potential",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: key,
+  },
+  {
+    title: "Explore Your Passion",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: camera,
+  },
+  {
+    title: "Analytics Work",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: analytics,
+  },
+];
+
+export { categories, topCourse, acheiveGoalData };

src/Screens/Home/Home.js

@@ -3,10 +3,21 @@ import style from "./Home.module.scss";
 import { Container, Row, Col } from "react-bootstrap";
 import NavbarComponent from "../../Components/Navbar/Navbar";
 import "../../App.scss";
-import { headImg, skillPad } from "../../Constant/Images";
+import { headImg, quoteImg, profile } from "../../Constant/Images";
 import CourseCategories from "../../Components/CourseCategories/CourseCategories";
-import { categories, topCourse } from "../../Constant/mockData";
+import {
+  acheiveGoalData,
+  categories,
+  topCourse,
+} from "../../Constant/mockData";
 import CourseCard from "../../Components/CourseCard/CourseCard";
+import AcheiveGoalCard from "../../Components/AcheiveGoalCard/AcheiveGoalCard";
+import ReactPlayer from "react-player";
+import CarouselComponent from "../../Components/Carousel/Carousel";
+import BlogCard from "../../Components/BlogCard/BlogCard";
+import Carousel from "react-elastic-carousel";
+import { BiCircle, BiSquare } from "react-icons/bi";
+import Footer from "../../Components/Footer/Footer";
 
 const Home = () => {
   return (
@@ -155,25 +166,118 @@ const Home = () => {
               bibendum venenatis mollis.
             </p>
             <Row>
-              <Col md={4}>
-                <div className={style.box}>
-                  <img src={skillPad} />
-                  <h6 className={style.title}>Expand Skill Development</h6>
-                  <p className={`p-14 ${style.subTitle} `}>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Morbi bibendum venenatis mollis.
-                  </p>
+              {acheiveGoalData?.map((item, index) => {
+                return (
+                  <Col md={4}>
+                    <AcheiveGoalCard data={item} />
+                  </Col>
+                );
+              })}
+            </Row>
+          </Container>
+        </div>
+        <div className={style.clientAppriciationContainer}>
+          <Container>
+            <h3>Client’s Appriciation</h3>
+            <p className={`p-14 ${style.subTitle} `}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+              bibendum venenatis mollis.
+            </p>
+
+            <div className={style.quoteAndVideoContainer}>
+              <div className={style.leftContainer}>
+                <div className={style.quoteImage}>
+                  <img src={quoteImg} alt="" />
                 </div>
-              </Col>
-              <Col md={4}>
-                <div className={style.box}></div>
-              </Col>
-              <Col md={4}>
-                <div className={style.box}></div>
-              </Col>
+                <h6 className={style.description}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Integer a viverra nisl. Morbi in ornare nibh, sed efficitur
+                  neque. Proin efficitur odio eget pulvinar hendrerit.
+                </h6>
+                <div className={style.profile}>
+                  <div className={style.profileImgContainer}>
+                    <img src={profile} className={style.profileImg} alt="" />
+                  </div>
+                  <div className={style.profileText}>
+                    <p className={`p-16 ${style.profileName}`}>John Doe</p>
+                    <p className={`p-14 ${style.profileDesignation}`}>
+                      Graphic Designer
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className={style.rightContainer}>
+                <div className={style.videoContainer}>
+                  <ReactPlayer url="https://youtu.be/LUKs-GENceE" />
+                </div>
+              </div>
+            </div>
+            <div className={style.companiesLogoContainer}>
+              <h3>
+                LMSedu is trusted by 322,000+ students and companies worldwide
+              </h3>
+              <div className={style.carouselContainer}>
+                <CarouselComponent />
+              </div>
+            </div>
+          </Container>
+        </div>
+        <div className={style.ourBlogContainer}>
+          <Container>
+            <h3>Our Blog</h3>
+            <p className={`p-14 ${style.subTitle} `}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+              bibendum venenatis mollis.
+            </p>
+            <Row>
+              <Carousel
+                itemsToShow={3}
+                showArrows={false}
+                renderPagination={({ pages, activePage, onClick }) => {
+                  return (
+                    <div direction="row">
+                      {pages.map((page) => {
+                        const isActivePage = activePage === page;
+                        return (
+                          <BiCircle
+                            key={page}
+                            onClick={() => onClick(page)}
+                            active={isActivePage}
+                          />
+                        );
+                      })}
+                    </div>
+                  );
+                }}
+              >
+                {topCourse?.map((item, index) => {
+                  return (
+                    <Col md={12}>
+                      {" "}
+                      <BlogCard key={index} data={item} />
+                    </Col>
+                  );
+                })}
+              </Carousel>
             </Row>
           </Container>
         </div>
+        <div className={style.becomeInstructorContainer}>
+          <Container>
+            <h2>Become A Instructor</h2>
+            <div className={style.inputAndBtnContainer}>
+              <div className={style.inputAndBtnInnerContainer}>
+                <input
+                  type="text"
+                  className={style.joinInput}
+                  placeholder="Become a Instructor"
+                />
+                <button className={style.joinBtn}>Join</button>
+              </div>
+            </div>
+          </Container>
+        </div>
+        <Footer />
       </div>
     </>
   );

src/Screens/Home/Home.module.scss

@@ -84,7 +84,7 @@
 
 .discoverContianer {
   background-color: rgb(243, 243, 243);
-  padding: 100px 0px;
+  padding: 80px 0px;
   .subTitle {
     width: 25%;
   }
@@ -140,29 +140,121 @@
 }
 
 .acheiveGoalContainer {
-  padding: 60px 0px;
+  padding: 80px 0px;
   .subTitle {
     width: 30%;
   }
-  .box {
+}
+
+.clientAppriciationContainer {
+  background-color: rgb(243, 243, 243);
+  padding: 80px 0px;
+  .subTitle {
+    width: 30%;
+  }
+
+  .quoteAndVideoContainer {
     width: 100%;
-    height: 300px;
-    padding: 40px;
-    // background-color: red;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
-    -webkit-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    -moz-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    .title {
-      margin-top: 20px;
-    }
-    .subTitle {
-      width: 100%;
-      margin-top: 10px;
+    .leftContainer {
+      width: 50%;
+      margin-top: 70px;
+      position: relative;
+      .quoteImage {
+        position: absolute;
+      }
+      .description {
+        padding: 35px;
+        font-family: "Roboto-800";
+        line-height: 32px;
+        width: 80%;
+      }
+      .profile {
+        display: flex;
+        align-items: center;
+        .profileImgContainer {
+          .profileImg {
+            border-radius: 50%;
+          }
+        }
+        .profileText {
+          padding-left: 20px;
+          .profileName {
+            margin: 0px;
+            font-family: "Roboto-500";
+          }
+          .profileDesignation {
+          }
+        }
+      }
+    }
+    .rightContainer {
+      width: 50%;
+      .videoContainer {
+        width: 100%;
+      }
+    }
+  }
+  .companiesLogoContainer {
+    margin-top: 150px;
+    h3 {
       text-align: center;
+      font-family: "Roboto-700";
+    }
+    .carouselContainer {
+      margin-top: 80px;
+    }
+  }
+}
+
+.ourBlogContainer {
+  padding: 80px 0px;
+  .subTitle {
+    width: 30%;
+  }
+}
+
+.becomeInstructorContainer {
+  width: 100%;
+  background-image: url(../../assets/images/becomeInstructor.png);
+  background-size: 100% 350px;
+  // background-position:;
+  height: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h2 {
+    text-align: center;
+    font-family: "Roboto-500" !important;
+    letter-spacing: 3px;
+  }
+  .inputAndBtnContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .inputAndBtnInnerContainer {
+      position: relative;
+      margin-top: 40px;
+      .joinInput {
+        padding: 15px 70px;
+        width: 600px;
+        border-radius: 50px;
+        outline: none;
+        border: none;
+      }
+      .joinBtn {
+        position: absolute;
+        padding: 15px 60px;
+        border-radius: 50px;
+        right: 0px;
+        background-color: root.$main_red;
+        color: white;
+        outline: none;
+        border: none;
+      }
     }
   }
 }

src/_root.scss

-$main_red: #ab0534;
+$main_red: #ab0534;
\ No newline at end of file
+$footer_background: #292662
\ No newline at end of file