create base for home page (still needs input component), and fix type stuff for settings

src/components/Header.astro

@@ -1,9 +1,9 @@
 ---
 import { Icon } from "astro-icon/components";
 ---
-<div class="h-14 bg-(--background) border-b border-b-(--border) px-4 fixed w-full z-10 flex items-center">
+<div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center">
     <div class="flex items-center gap-3">
-        <button class="inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10">
+        <button class="cursor-pointer inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10">
             <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
         </button>
         <a class="flex items-center gap-2" href="/">

src/components/SettingsLoader.astro

@@ -1,8 +1,14 @@
 <script>
+    declare global {
+        interface Window {
+            settings: Settings
+        }
+    }
+    
     import { Settings } from "@utils/settings.ts";
-    const settings = new Settings();
-    window.settings = settings;
+    window.settings = await Settings.getInstance(); 
+    
     document.addEventListener('astro:after-swap', async () => {
-        settings.theme()
+        window.settings.theme()
     });
 </script>