add manege dashboard and create base public home

src/App.js

@@ -16,7 +16,7 @@ Coded by www.creative-tim.com
 import { useEffect } from "react";
 
 // react-router components
-import { Routes, Route, Navigate, useLocation } from "react-router-dom";
+import { Routes, Route, useLocation } from "react-router-dom";
 
 // @mui material components
 import { ThemeProvider } from "@mui/material/styles";
@@ -28,6 +28,7 @@ import Presentation from "layouts/pages/presentation";
 
 // Material Kit 2 React routes
 import routes from "routes";
+import Home from "pages/public/Home";
 
 export default function App() {
   const { pathname } = useLocation();
@@ -57,7 +58,7 @@ export default function App() {
       <Routes>
         {getRoutes(routes)}
         <Route path="/presentation" element={<Presentation />} />
-        <Route path="*" element={<Navigate to="/presentation" />} />
+        <Route path="*" element={<Home />} />
       </Routes>
     </ThemeProvider>
   );

src/components/MDAlert/MDAlertCloseIcon.js

@@ -0,0 +1,35 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import { styled } from "@mui/material/styles";
+
+export default styled("span")(({ theme }) => {
+  const { palette, typography, functions } = theme;
+
+  const { white } = palette;
+  const { size, fontWeightMedium } = typography;
+  const { pxToRem } = functions;
+
+  return {
+    color: white.main,
+    fontSize: size.xl,
+    padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`,
+    marginLeft: pxToRem(40),
+    fontWeight: fontWeightMedium,
+    cursor: "pointer",
+    lineHeight: 0,
+  };
+});

src/components/MDAlert/MDAlertRoot.js

@@ -0,0 +1,48 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+export default styled(Box)(({ theme, ownerState }) => {
+  const { palette, typography, borders, functions } = theme;
+  const { color } = ownerState;
+
+  const { white, gradients } = palette;
+  const { fontSizeRegular, fontWeightMedium } = typography;
+  const { borderRadius } = borders;
+  const { pxToRem, linearGradient } = functions;
+
+  // backgroundImage value
+  const backgroundImageValue = gradients[color]
+    ? linearGradient(gradients[color].main, gradients[color].state)
+    : linearGradient(gradients.info.main, gradients.info.state);
+
+  return {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    minHeight: pxToRem(60),
+    backgroundImage: backgroundImageValue,
+    color: white.main,
+    position: "relative",
+    padding: pxToRem(16),
+    marginBottom: pxToRem(16),
+    borderRadius: borderRadius.md,
+    fontSize: fontSizeRegular,
+    fontWeight: fontWeightMedium,
+  };
+});

src/components/MDAlert/index.js

@@ -0,0 +1,86 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useState } from "react";
+
+// prop-types is a library for typechecking of props
+import PropTypes from "prop-types";
+
+// @mui material components
+import Fade from "@mui/material/Fade";
+
+// Material Dashboard 2 React components
+import MDBox from "components/MDBox";
+
+// Custom styles for the MDAlert
+import MDAlertRoot from "components/MDAlert/MDAlertRoot";
+import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon";
+
+function MDAlert({ color, dismissible, children, ...rest }) {
+  const [alertStatus, setAlertStatus] = useState("mount");
+
+  const handleAlertStatus = () => setAlertStatus("fadeOut");
+
+  // The base template for the alert
+  const alertTemplate = (mount = true) => (
+    <Fade in={mount} timeout={300}>
+      <MDAlertRoot ownerState={{ color }} {...rest}>
+        <MDBox display="flex" alignItems="center" color="white">
+          {children}
+        </MDBox>
+        {dismissible ? (
+          <MDAlertCloseIcon onClick={mount ? handleAlertStatus : null}>&times;</MDAlertCloseIcon>
+        ) : null}
+      </MDAlertRoot>
+    </Fade>
+  );
+
+  switch (true) {
+    case alertStatus === "mount":
+      return alertTemplate();
+    case alertStatus === "fadeOut":
+      setTimeout(() => setAlertStatus("unmount"), 400);
+      return alertTemplate(false);
+    default:
+      alertTemplate();
+      break;
+  }
+
+  return null;
+}
+
+// Setting default values for the props of MDAlert
+MDAlert.defaultProps = {
+  color: "info",
+  dismissible: false,
+};
+
+// Typechecking props of the MDAlert
+MDAlert.propTypes = {
+  color: PropTypes.oneOf([
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "light",
+    "dark",
+  ]),
+  dismissible: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+export default MDAlert;

src/components/MDAvatar/MDAvatarRoot.js

@@ -0,0 +1,89 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// @mui material components
+import Avatar from "@mui/material/Avatar";
+import { styled } from "@mui/material/styles";
+
+export default styled(Avatar)(({ theme, ownerState }) => {
+  const { palette, functions, typography, boxShadows } = theme;
+  const { shadow, bgColor, size } = ownerState;
+
+  const { gradients, transparent, white } = palette;
+  const { pxToRem, linearGradient } = functions;
+  const { size: fontSize, fontWeightRegular } = typography;
+
+  // backgroundImage value
+  const backgroundValue =
+    bgColor === "transparent"
+      ? transparent.main
+      : linearGradient(gradients[bgColor].main, gradients[bgColor].state);
+
+  // size value
+  let sizeValue;
+
+  switch (size) {
+    case "xs":
+      sizeValue = {
+        width: pxToRem(24),
+        height: pxToRem(24),
+        fontSize: fontSize.xs,
+      };
+      break;
+    case "sm":
+      sizeValue = {
+        width: pxToRem(36),
+        height: pxToRem(36),
+        fontSize: fontSize.sm,
+      };
+      break;
+    case "lg":
+      sizeValue = {
+        width: pxToRem(58),
+        height: pxToRem(58),
+        fontSize: fontSize.sm,
+      };
+      break;
+    case "xl":
+      sizeValue = {
+        width: pxToRem(74),
+        height: pxToRem(74),
+        fontSize: fontSize.md,
+      };
+      break;
+    case "xxl":
+      sizeValue = {
+        width: pxToRem(110),
+        height: pxToRem(110),
+        fontSize: fontSize.md,
+      };
+      break;
+    default: {
+      sizeValue = {
+        width: pxToRem(48),
+        height: pxToRem(48),
+        fontSize: fontSize.md,
+      };
+    }
+  }
+
+  return {
+    background: backgroundValue,
+    color: white.main,
+    fontWeight: fontWeightRegular,
+    boxShadow: boxShadows[shadow],
+    ...sizeValue,
+  };
+});

src/components/MDAvatar/index.js

@@ -0,0 +1,52 @@
+/**
+=========================================================
+* Material Dashboard 2 React - v2.2.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-react
+* Copyright 2023 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { forwardRef } from "react";
+
+// prop-types is a library for typechecking of props
+import PropTypes from "prop-types";
+
+// Custom styles for MDAvatar
+import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot";
+
+const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (
+  <MDAvatarRoot ref={ref} ownerState={{ shadow, bgColor, size }} {...rest} />
+));
+
+// Setting default values for the props of MDAvatar
+MDAvatar.defaultProps = {
+  bgColor: "transparent",
+  size: "md",
+  shadow: "none",
+};
+
+// Typechecking props for the MDAvatar
+MDAvatar.propTypes = {
+  bgColor: PropTypes.oneOf([
+    "transparent",
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "light",
+    "dark",
+  ]),
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]),
+  shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]),
+};
+
+export default MDAvatar;