` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","function _assertThisInitialized(e) {\n if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n return e;\n}\nexport { _assertThisInitialized as default };","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport useTimeout from '@mui/utils/useTimeout';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = useTimeout();\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n // We have to make a tradeoff with this delay value.\n startTimer.start(DELAY_RIPPLE, () => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n });\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit, startTimer]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n startTimer.clear();\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.start(0, () => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, [startTimer]);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Testimonial;\r\n","import Testimonial from './Testimonial';\r\nexport default Testimonial;\r\n","import AboutPage from './AboutPage';\r\nexport default AboutPage;\r\n","import React from 'react';\r\nimport {\r\n AboutBanner,\r\n ChooseUs,\r\n TeamMember,\r\n Testimonial\r\n} from '../../sections/AboutPage';\r\n\r\nconst AboutPage = () => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AboutPage;\r\n","import Footer from './Footer';\r\nexport default Footer;\r\n","import React from 'react';\r\n\r\nconst Footer = () => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Amizhth Techno Solutions blends innovation and expertise to\r\n deliver customized software solutions, specializing in web,\r\n mobile, and cybersecurity services, with a commitment to\r\n client success.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Our Services
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Company Address
\r\n
\r\n
\r\n Address :153 / P, North Velli Street,\r\n Simmakkal, Madurai - 625009\r\n
\r\n
\r\n
\r\n
\r\n Address :2/397, Perumbakkam Main Rd,\r\n Perumbakkam, Chennai - 600100\r\n
\r\n
\r\n
\r\n
\r\n Email :vanakkam@amizhth.com\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Recent Blog
\r\n
\r\n
\r\n
\r\n
\r\n \r\n Modernise Applications by Exploiting the Cloud\r\n Services.\r\n \r\n
\r\n
March 24, 2024\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Powered By{' '}\r\n \r\n ![\"fav\"](\"/fav.png\")
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import CloudserviceBanner from './CloudserviceBanner';\r\nexport default CloudserviceBanner;\r\n","import React from 'react';\r\nconst CloudserviceBanner = () => {\r\n return (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CloudserviceBanner;\r\n","import Cloudservice from './Cloudservice';\r\nexport default Cloudservice;\r\n","import React from 'react';\r\n\r\nconst Cloudservice = () => {\r\n return (\r\n
\r\n
\r\n Modernise Applications by Exploiting the Cloud Services\r\n
\r\n
\r\n cloud !! Most of us have come across this term a lot in recent times,\r\n especially after the covid-19 pandemic. companies and individuals had to\r\n accommodate. a drastic change over the last 3 years and most of them\r\n operate remotely over the cloud. Even the sectors of non-IT too had to\r\n sail on the cloud to stay safe and afloat.There were few companies. Who\r\n already had been using or migrated to cloud. before the pandemic and so\r\n had a better transition.While others faced serve challenges in making\r\n the change. But now , the cloud is the place where everyone works,\r\n whether they like it or not. Almost all 0f the sector, like\r\n manufacturing, education, healthcare,and gaming are moved to the cloud.\r\n
\r\n
\r\n \r\n 1. Flexibility for cross-platform integration – hybrid and on-premise\r\n cloud\r\n \r\n
\r\n
\r\n Though most of us have stuck to a single cloud service provider, the\r\n future holds a different plate for all of us. Now the companies are\r\n looking to collaborate with multiple external systems and work with\r\n different cloud service providers. Companies have options to choose from\r\n different cloud environments like private, public, and hybrid, and now\r\n Most of them prefer to use more than one of them. Yes, a hybrid approach\r\n to cloud deployment is growing at a fast pace. The Cloud environment is\r\n best suited for resource-sharing requirements, while for software\r\n systems that require a deciated machine, companies prefer to have them\r\n on premise for license-related information. So now, all the cloud\r\n service providers are forced to offer cross-platform and hybrid\r\n deployment approaches\r\n
\r\n
\r\n 2. Cloud gaming and Efficient AI tools:\r\n
\r\n
\r\n Gone are the days, when games were played on a computer or TV system.\r\n Now many games are played on the cloud and the list still grows. Many\r\n big service providers like AWS, Google, and Microsoft offer services\r\n specficially for game development on the cloud. Traditional gaming\r\n companies like Tencent, Sony’s PSN network, and Nvidia have also started\r\n developing games specifically for cloud environments. The way people\r\n spend massive amounts for dedicated gaming hardware will be soon gone\r\n and most of the features will be subscription based. Cloud gaming will\r\n lead the gaming entertainment industry.\r\n
\r\n
\r\n Artificial intelligence (AI) , is already a buzzword for a few\r\n years. There are no second thoughts on whether AI will be deciding\r\n factor in the near future. Thanks to cloud service providers, AI\r\n capabilities are accessible to everyone who wants to try them. AI is not\r\n just accessible, but also affordable, for even small companies or\r\n individuals to access and try it out. cloud-based infrastructure will be\r\n leveraged by different industries for the purpose of 5G, self-driving\r\n cars, cancer research, smart city infrastructure, and more. Apart from\r\n AI as a service, the cloud providers will also need the help of AI in\r\n managing the cloud resources with intelligence. AI tools can be used to\r\n manage n maintain cloud data centers and their several critical\r\n components, such as hardware networks, cooling systems, and power\r\n consumption via monitoring and control.\r\n
\r\n
\r\n 3. Virtual Cloud Desktops:\r\n
\r\n
\r\n One more cost-efficient use of cloud computing eyed by the companies\r\n will be to use cloud-based workstations for their employees. Instead of\r\n a physical laptop or desktop, cloud-based virtual desktops will allow\r\n the companies to pay only when the employee works. This Will reduce\r\n costs not only on the infrastructure but also on the manpower and\r\n further upgrades and maintenance. With virtual desktops, the users also\r\n get updated latest technologies and in turn, it helps the business.\r\n Furthermore, scaling up / down, security updates and much more\r\n maintenance can be centralized and handled from one place.\r\n
\r\n
\r\n We at Amizhth, have good expertise in web and mobile app\r\n development, and also designing, maintaining, and implementing\r\n applications on the cloud for a long time. To know more, connect with\r\n us!\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default Cloudservice;\r\n","import BlogCloudservice from './BlogCloudservice';\r\nexport default BlogCloudservice;\r\n","import React from 'react';\r\nimport CloudserviceBanner from '../../sections/BlogCloudservice/CloudserviceBanner';\r\nimport Cloudservice from '../../sections/BlogCloudservice/Cloudservice';\r\n\r\nconst BlogCloudservice = () => {\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default BlogCloudservice;\r\n","import React from 'react';\r\n\r\nconst TomcatBanner = () => {\r\n return (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TomcatBanner;\r\n","import React from 'react';\r\n\r\nconst TomcatContent = () => {\r\n return (\r\n <>\r\n
\r\n
\r\n Spring Boot Application on AWS EC2 using Apache Tomcat\r\n
\r\n
\r\n Presently, everyone started to deploy their application on cloud\r\n services, developers started to explore better ways to deploy it. Most\r\n of us started to use AWS not just because it provides free service for\r\n a year but also the feasibility and availability does help us to\r\n achieve our goal. In this article we will deploy a spring boot\r\n application on tomcat service using AWS EC2.\r\n
\r\n\r\n
Without further ado, let’s see the steps involved in it.
\r\n
\r\n - Build Spring Boot application WAR
\r\n - Set up an EC2 instance on AWS
\r\n - Install JDK and Apache Tomcat
\r\n - Deploy your application WAR on EC2
\r\n
\r\n\r\n
\r\n Let’s see in detail
\r\n \r\n\r\n
\r\n 1.Build Spring boot application war:\r\n
\r\n
\r\n This is the easiest step for all developers, you must be already aware\r\n of how to generate a war using IDE.\r\n
\r\n
\r\n I have used maven tool in eclipse Ide to build my spring boot\r\n application war.\r\n
\r\n\r\n
\r\n 2.Set up a EC2 instance on AWS.\r\n
\r\n
\r\n Login to AWS management console, Search and Select service EC2 Don’t\r\n forget to select your region.\r\n
\r\n
![\"\"](\"/images/tomcatsetup.webp\")
\r\n
\r\n Just select Instances and click on Launch Instances (Orange button)\r\n Now there will be several information required which you can input\r\n based on your requirement. For OS you can choose Amazon Linux 2 AMI\r\n (HVM) Generate a keypair, create new security group to allow http(80),\r\n https and launch the instance. for more detailed information just\r\n refer document from amazon.\r\n
\r\n
\r\n Install JDK and Apache Tomcat\r\n
\r\n
\r\n Using the public ip / domain name and generated key pair, connect to\r\n the instance. Either you can directly connect using aws console or by\r\n using putty. Just follow the below steps.\r\n
\r\n
\r\n Update the system\r\n
\r\n
Sudo yum update -y
\r\n
\r\n Install java 17\r\n
\r\n
sudo yum install java-17-amazon-corretto
\r\n
\r\n Navigate to respective folder and download tomcat\r\n
\r\n
\r\n wget -c\r\n https://dlcdn.apache.org/tomcat/tomcat-10/v10.1.7/bin/apache-tomcat-10.1.7.tar.gz\r\n
\r\n
\r\n Extract tomcat\r\n
\r\n
sudo tar xf apache-tomcat-10.1.7.tar.gz
\r\n
\r\n 3. Place the application war inside webapps folder.\r\n
\r\n
\r\n 4. Navigate to bin and start the server using./startup.sh\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TomcatContent;\r\n","import BlogTomcat from './BlogTomcat';\r\nexport default BlogTomcat;\r\n","import React from 'react';\r\nimport TomcatBanner from '../../sections/BlogTomcat/TomcatBanner/TomcatBanner';\r\nimport TomcatContent from '../../sections/BlogTomcat/TomcatContent/TomcatContent';\r\n\r\nconst BlogTomcat = () => {\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default BlogTomcat;\r\n","import Dockerbanner from './Dockerbanner';\r\nexport default Dockerbanner;\r\n","import React from 'react';\r\n\r\nconst Dockerbanner = () => {\r\n return (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Dockerbanner;\r\n","import DockerContent from './DockerContent';\r\nexport default DockerContent;\r\n","import React from 'react';\r\n\r\nconst DockerContent = () => {\r\n return (\r\n
\r\n
\r\n Spring Boot Application as Docker Container Image on AWS EC2\r\n
\r\n
\r\n When we dive in to microservice architecture, we search for many ways to\r\n deploy it. Docker tool helps us to deploy multiple microservices /\r\n applications as containers. Let’s deep dive in to setting up docker\r\n service in AWS EC2 and deploy simple or complex spring boot\r\n applications. Assuming that you already have a java application written\r\n in spring boot framework, let’s see how to build it as a docker image\r\n and deploy as a microservice. We can choose either jar or war packaging\r\n to deploy in to docker service, which really doesn’t make any big\r\n difference.\r\n
\r\n
\r\n Building a Spring boot application for docker container\r\n
\r\n
\r\n Let it be simple straight forward application or a complex algorithm\r\n one, just follow the below steps,\r\n
\r\n
\r\n 1.Create a new file in any IDE with type as File and name it as Docker\r\n
\r\n
![](\"/images/dockercontent.jpg\")
\r\n
\r\n 2.Docker container uses its own environment; hence we have to configure\r\n JDK for all images that we build. Here we are using JDK 17 slim, you can\r\n search for your specific jdk version on the web.\r\n
\r\n
\r\n 3.Just paste the below contents in the Docker file (change application\r\n name with your project name)\r\n
\r\n
\r\n {`FROM openjdk:17-jdk-slim`}\r\n
\r\n {`ARG JAR_FILE=./amizhthblog.jar`}\r\n
\r\n {`COPY JAR_FILE amizhthblog.jar`}\r\n
\r\n {`ENTRYPOINT [\"java\",\"-jar\",\"amizhthblog.jar\"]`}\r\n \r\n
\r\n Line 1: JDK to be used
Line 2: The path where the jar is located.{' '}\r\n
\r\n Line 3: Copying the jar file from path in to the container
Line\r\n 4: Telling docker what to look for.\r\n
\r\n
\r\n 4. Build your spring boot application using maven. The docker file is\r\n not necessarily to be present inside the application package.\r\n
\r\n
\r\n Installing Docker Service in AWS EC2\r\n
\r\n
\r\n 1.Install Docker\r\n
\r\n
sudo yum install docker
\r\n
\r\n 2.Give ec2-user full access over docker service\r\n
\r\n
sudo usermod -a -G docker ec2-user id ec2-user newgrp docker
\r\n
\r\n \r\n 3. Enabling docker service with systemctl which will start the docker\r\n service if the server reboot happens\r\n \r\n
\r\n
sudo systemctl enable docker.service
\r\n
\r\n 4. Start docker service\r\n
\r\n
sudo systemctl start docker.service
\r\n
\r\n 5. Check status\r\n
\r\n
sudo systemctl status docker.service
\r\n
\r\n Deploy spring boot container image\r\n
\r\n
\r\n 1.place your application jar / war file and Docker file under\r\n /home/ec2-user/docker (the location can be anything that you wish) 2.run\r\n the command docker build -t amizhthblog . 3.bind the container to\r\n respective port and run the service, here we are binding to port 80\r\n docker run -d -e SERVER_PORT=80 -p 80:80 amizhthblog. 4.To check the\r\n logs, follow the steps below a. Run the command docker ps -a b. copy the\r\n container id which will be like 93053c4902b c. Run the command docker\r\n logs -f 93053c4902b0\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default DockerContent;\r\n","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getDialogUtilityClass(slot) {\n return generateUtilityClass('MuiDialog', slot);\n}\nconst dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);\nexport default dialogClasses;","import * as React from 'react';\nconst DialogContext = /*#__PURE__*/React.createContext({});\nif (process.env.NODE_ENV !== 'production') {\n DialogContext.displayName = 'DialogContext';\n}\nexport default DialogContext;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"aria-describedby\", \"aria-labelledby\", \"BackdropComponent\", \"BackdropProps\", \"children\", \"className\", \"disableEscapeKeyDown\", \"fullScreen\", \"fullWidth\", \"maxWidth\", \"onBackdropClick\", \"onClick\", \"onClose\", \"open\", \"PaperComponent\", \"PaperProps\", \"scroll\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport useId from '@mui/utils/useId';\nimport capitalize from '../utils/capitalize';\nimport Modal from '../Modal';\nimport Fade from '../Fade';\nimport Paper from '../Paper';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport dialogClasses, { getDialogUtilityClass } from './dialogClasses';\nimport DialogContext from './DialogContext';\nimport Backdrop from '../Backdrop';\nimport useTheme from '../styles/useTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DialogBackdrop = styled(Backdrop, {\n name: 'MuiDialog',\n slot: 'Backdrop',\n overrides: (props, styles) => styles.backdrop\n})({\n // Improve scrollable dialog support.\n zIndex: -1\n});\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n scroll,\n maxWidth,\n fullWidth,\n fullScreen\n } = ownerState;\n const slots = {\n root: ['root'],\n container: ['container', `scroll${capitalize(scroll)}`],\n paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']\n };\n return composeClasses(slots, getDialogUtilityClass, classes);\n};\nconst DialogRoot = styled(Modal, {\n name: 'MuiDialog',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n '@media print': {\n // Use !important to override the Modal inline-style.\n position: 'absolute !important'\n }\n});\nconst DialogContainer = styled('div', {\n name: 'MuiDialog',\n slot: 'Container',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.container, styles[`scroll${capitalize(ownerState.scroll)}`]];\n }\n})(({\n ownerState\n}) => _extends({\n height: '100%',\n '@media print': {\n height: 'auto'\n },\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n}, ownerState.scroll === 'body' && {\n overflowY: 'auto',\n overflowX: 'hidden',\n textAlign: 'center',\n '&::after': {\n content: '\"\"',\n display: 'inline-block',\n verticalAlign: 'middle',\n height: '100%',\n width: '0'\n }\n}));\nconst DialogPaper = styled(Paper, {\n name: 'MuiDialog',\n slot: 'Paper',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.paper, styles[`scrollPaper${capitalize(ownerState.scroll)}`], styles[`paperWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n margin: 32,\n position: 'relative',\n overflowY: 'auto',\n // Fix IE11 issue, to remove at some point.\n '@media print': {\n overflowY: 'visible',\n boxShadow: 'none'\n }\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'calc(100% - 64px)'\n}, ownerState.scroll === 'body' && {\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'left' // 'initial' doesn't work on IE11\n}, !ownerState.maxWidth && {\n maxWidth: 'calc(100% - 64px)'\n}, ownerState.maxWidth === 'xs' && {\n maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `max(${theme.breakpoints.values.xs}${theme.breakpoints.unit}, 444px)`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {\n maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.fullWidth && {\n width: 'calc(100% - 64px)'\n}, ownerState.fullScreen && {\n margin: 0,\n width: '100%',\n maxWidth: '100%',\n height: '100%',\n maxHeight: 'none',\n borderRadius: 0,\n [`&.${dialogClasses.paperScrollBody}`]: {\n margin: 0,\n maxWidth: '100%'\n }\n}));\n\n/**\n * Dialogs are overlaid modal paper based components with a backdrop.\n */\nconst Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiDialog'\n });\n const theme = useTheme();\n const defaultTransitionDuration = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen\n };\n const {\n 'aria-describedby': ariaDescribedby,\n 'aria-labelledby': ariaLabelledbyProp,\n BackdropComponent,\n BackdropProps,\n children,\n className,\n disableEscapeKeyDown = false,\n fullScreen = false,\n fullWidth = false,\n maxWidth = 'sm',\n onBackdropClick,\n onClick,\n onClose,\n open,\n PaperComponent = Paper,\n PaperProps = {},\n scroll = 'paper',\n TransitionComponent = Fade,\n transitionDuration = defaultTransitionDuration,\n TransitionProps\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n disableEscapeKeyDown,\n fullScreen,\n fullWidth,\n maxWidth,\n scroll\n });\n const classes = useUtilityClasses(ownerState);\n const backdropClick = React.useRef();\n const handleMouseDown = event => {\n // We don't want to close the dialog when clicking the dialog content.\n // Make sure the event starts and ends on the same DOM element.\n backdropClick.current = event.target === event.currentTarget;\n };\n const handleBackdropClick = event => {\n if (onClick) {\n onClick(event);\n }\n\n // Ignore the events not coming from the \"backdrop\".\n if (!backdropClick.current) {\n return;\n }\n backdropClick.current = null;\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n if (onClose) {\n onClose(event, 'backdropClick');\n }\n };\n const ariaLabelledby = useId(ariaLabelledbyProp);\n const dialogContextValue = React.useMemo(() => {\n return {\n titleId: ariaLabelledby\n };\n }, [ariaLabelledby]);\n return /*#__PURE__*/_jsx(DialogRoot, _extends({\n className: clsx(classes.root, className),\n closeAfterTransition: true,\n components: {\n Backdrop: DialogBackdrop\n },\n componentsProps: {\n backdrop: _extends({\n transitionDuration,\n as: BackdropComponent\n }, BackdropProps)\n },\n disableEscapeKeyDown: disableEscapeKeyDown,\n onClose: onClose,\n open: open,\n ref: ref,\n onClick: handleBackdropClick,\n ownerState: ownerState\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n role: \"presentation\"\n }, TransitionProps, {\n children: /*#__PURE__*/_jsx(DialogContainer, {\n className: clsx(classes.container),\n onMouseDown: handleMouseDown,\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogPaper, _extends({\n as: PaperComponent,\n elevation: 24,\n role: \"dialog\",\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby\n }, PaperProps, {\n className: clsx(classes.paper, PaperProps.className),\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogContext.Provider, {\n value: dialogContextValue,\n children: children\n })\n }))\n })\n }))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Dialog.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The id(s) of the element(s) that describe the dialog.\n */\n 'aria-describedby': PropTypes.string,\n /**\n * The id(s) of the element(s) that label the dialog.\n */\n 'aria-labelledby': PropTypes.string,\n /**\n * A backdrop component. This prop enables custom backdrop rendering.\n * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.\n * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.\n * @default styled(Backdrop, {\n * name: 'MuiModal',\n * slot: 'Backdrop',\n * overridesResolver: (props, styles) => {\n * return styles.backdrop;\n * },\n * })({\n * zIndex: -1,\n * })\n */\n BackdropComponent: PropTypes.elementType,\n /**\n * @ignore\n */\n BackdropProps: PropTypes.object,\n /**\n * Dialog children, usually the included sub-components.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * If `true`, hitting escape will not fire the `onClose` callback.\n * @default false\n */\n disableEscapeKeyDown: PropTypes.bool,\n /**\n * If `true`, the dialog is full-screen.\n * @default false\n */\n fullScreen: PropTypes.bool,\n /**\n * If `true`, the dialog stretches to `maxWidth`.\n *\n * Notice that the dialog width grow is limited by the default margin.\n * @default false\n */\n fullWidth: PropTypes.bool,\n /**\n * Determine the max-width of the dialog.\n * The dialog width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n * @default 'sm'\n */\n maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),\n /**\n * Callback fired when the backdrop is clicked.\n * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.\n */\n onBackdropClick: PropTypes.func,\n /**\n * @ignore\n */\n onClick: PropTypes.func,\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n */\n onClose: PropTypes.func,\n /**\n * If `true`, the component is shown.\n */\n open: PropTypes.bool.isRequired,\n /**\n * The component used to render the body of the dialog.\n * @default Paper\n */\n PaperComponent: PropTypes.elementType,\n /**\n * Props applied to the [`Paper`](/material-ui/api/paper/) element.\n * @default {}\n */\n PaperProps: PropTypes.object,\n /**\n * Determine the container for scrolling the dialog.\n * @default 'paper'\n */\n scroll: PropTypes.oneOf(['body', 'paper']),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The component used for the transition.\n * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n * @default Fade\n */\n TransitionComponent: PropTypes.elementType,\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n * @default {\n * enter: theme.transitions.duration.enteringScreen,\n * exit: theme.transitions.duration.leavingScreen,\n * }\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n /**\n * Props applied to the transition element.\n * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default Dialog;","import { Dialog } from '@mui/material';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { Link, NavLink } from 'react-router-dom';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nconst Navbar = () => {\r\n const [isNavbarOpen, setIsNavbarOpen] = useState(false);\r\n const toggleNavbar = () => {\r\n setIsNavbarOpen(!isNavbarOpen);\r\n };\r\n\r\n const closeNavbar = () => {\r\n setIsNavbarOpen(false);\r\n };\r\n const scrollToTop = () => {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n };\r\n const [openPop, setOpenPop] = useState(false);\r\n useEffect(() => {\r\n setOpenPop(false);\r\n }, []);\r\n const handleClose = () => {\r\n setOpenPop(false);\r\n };\r\n return (\r\n <>\r\n