fix footer

app/components/Footer.tsx

@@ -1,16 +1,16 @@
 export const Footer = () => {
   return (
-    <footer class="fixed bottom-0 left-0 z-20 w-full p-4 border-t border-gray-200 shadow md:p-6 dark:bg-gray-800 dark:border-gray-600 md:flex md:items-center md:justify-around">
-      <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="#" class="hover:underline">Staff Directory</a>. All Rights Reserved.
+    <footer className="fixed bottom-0 left-0 z-20 w-full p-4 border-t border-gray-200 shadow md:p-6 dark:bg-gray-800 dark:border-gray-600 md:flex md:items-center md:justify-around">
+      <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 <a href="#" className="hover:underline">Staff Directory</a>. All Rights Reserved.
       </span>
-      <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+      <ul className="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
         <li>
-          <p class="me-4 md:me-6">Made with HonoX + Cloudflare Pages + D1 + ❤️</p>
+          <p className="me-4 md:me-6">Made with HonoX + Cloudflare Pages + D1 + ❤️</p>
         </li>
         <li>
-          <a href="https://github.com/lauragift21/staff-hub" class="hover:underline me-4 md:me-6">GitHub</a>
+          <a href="https://github.com/lauragift21/staff-hub" className="hover:underline me-4 md:me-6">GitHub</a>
         </li>
       </ul>
     </footer>
-  )
-}
+  );
+};

app/routes/index.tsx

@@ -24,7 +24,7 @@ export const GET = createRoute(async (c) => {
   const locations = await findAllLocations(c.env.DB)
   const departments = await findAllDepartments(c.env.DB)
   return c.render(
-    <section className="h-full">
+    <section className="pb-16 md:pb-20">
       <h1 className="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl mt-12">
         <span className="text-transparent bg-clip-text bg-gradient-to-r to-blue-600 from-sky-400">{`Directory `}</span>
       </h1>