fix footer position (add header shadow)

src/components/Header.tsx

@@ -32,7 +32,7 @@ const Header = (props: IHeader) => {
 
     return (
         <>
-            <div className="navbar bg-base-100 sticky top-0 z-50">
+            <div className="navbar bg-base-100 sticky top-0 z-50 shadow">
                 <div className="navbar-start">
                     <div className="dropdown lg:hidden">
                         <label tabIndex={0} className="btn btn-ghost ">

src/layouts/layout.tsx

@@ -44,9 +44,14 @@ const Layout = ({ children }: Props): JSX.Element => {
                 />
             </Helmet>
             <SEO />
-            <Header />
-            <div className="pt-0">{children}</div>
-            <Footer />
+            {/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c */}
+            <div className="relative min-h-screen">
+                <div className="pb-24">
+                    <Header />
+                    {children}
+                </div>
+                <Footer className="absolute bottom-0 h-24" />
+            </div>
         </>
     )
 }