updated layout style

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -43,6 +43,37 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
         <Aside asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
+
+        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
+          <div className='h-14 w-full flex justify-end items-center gap-5'>
+              {/* MENU HAND BURGER */}
+              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
+              <div
+              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+              onClick={asideDisplay}
+              >
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+                      : "top-1/2 -translate-y-1/2"
+                  }`}
+              ></div>
+              <div
+                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
+                  showAside
+                      ? "top-1/2 -translate-y-1/2 -rotate-45"
+                      : "bottom-0"
+                  }`}
+              ></div>
+              </div>
+          </div>
+        </header>
         <div className="flex p-5 relative">
           <div className="w-full p-5">{children}</div>
         </div>

src/layouts/GetStartedLayout.tsx

@@ -7,13 +7,15 @@ interface GetStartedLayoutProps {
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
   return (
-    <div className="relative">
-      <Header hideSidebar={true} hideMenu={true} />
-      <div className="flex flex-col min-h-[85vh] justify-between">
+    <div className="containerMode mb-[5.4375rem]">
+      <div className='sticky top-0 bg-white'>
+        <Header hideSidebar={true} hideMenu={true} />
+      </div>
+      <div className="flex flex-col min-h-[70vh] justify-between">
         {children}
-        <div className="self-end w-full">
-          <Footer />
-        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-white w-full">
+        <Footer />
       </div>
     </div>
   );

src/layouts/LetsGetStartedLayout.tsx

@@ -4,20 +4,20 @@ import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
-      <div className="grid md:grid-cols-2 h-[770px]">
+    <div className='containerMode mb-[5.4375rem]'>
+      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full">
-          <img src={layoutImage} alt="" className="w-full h-full" />
+        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
+          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </>
+    </div>
   );
 };