update prettier and add eslint

src/components/Background.astro

@@ -5,17 +5,17 @@
 <div class="theme-transition-all fixed inset-0 -z-10 overflow-hidden">
   <!-- Dot pattern background -->
   <div
-    class="bg-grid-pattern theme-transition-bg absolute inset-0 bg-[center_top_-1px] [mask-image:radial-gradient(white,transparent_85%)]"
+    class="bg-grid-pattern theme-transition-bg absolute inset-0 [mask-image:radial-gradient(white,transparent_85%)] bg-[center_top_-1px]"
   >
   </div>
 
   <!-- Ambient glow effects -->
   <div
-    class="animate-glow theme-transition-bg absolute left-1/4 top-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
+    class="animate-glow theme-transition-bg absolute top-1/4 left-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
   >
   </div>
   <div
-    class="animate-glow animation-delay-1000 theme-transition-bg absolute bottom-1/3 right-1/4 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
+    class="animate-glow animation-delay-1000 theme-transition-bg absolute right-1/4 bottom-1/3 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
   >
   </div>
 

src/components/Footer.astro

@@ -33,7 +33,7 @@ const socialLinks = [
 >
   <div class="pointer-events-none absolute inset-0 overflow-hidden">
     <div
-      class="theme-transition-all animate-float-slow absolute -right-40 -top-40 h-80 w-80 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/30"
+      class="theme-transition-all animate-float-slow absolute -top-40 -right-40 h-80 w-80 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/30"
     >
     </div>
     <div
@@ -41,12 +41,12 @@ const socialLinks = [
     >
     </div>
     <div
-      class="theme-transition-all animate-float-slow animation-delay-1000 absolute left-1/4 top-20 h-40 w-40 rounded-full bg-zinc-200/50 opacity-30 blur-2xl dark:bg-zinc-700/20"
+      class="theme-transition-all animate-float-slow animation-delay-1000 absolute top-20 left-1/4 h-40 w-40 rounded-full bg-zinc-200/50 opacity-30 blur-2xl dark:bg-zinc-700/20"
     >
     </div>
   </div>
 
-  <div class="relative px-4 pb-12 pt-16 sm:px-6">
+  <div class="relative px-4 pt-16 pb-12 sm:px-6">
     <div class="mx-auto max-w-4xl">
       <!-- Main footer content -->
       <div class="grid grid-cols-1 gap-10 md:grid-cols-12">
@@ -108,7 +108,7 @@ const socialLinks = [
         <!-- Quick links -->
         <div class="col-span-1 md:col-span-3">
           <h3
-            class="theme-transition-color relative inline-block pb-2 text-sm font-semibold uppercase tracking-wider text-zinc-900 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
+            class="theme-transition-color relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
           >
             Navigation
           </h3>

src/components/Navigation.astro

@@ -19,7 +19,7 @@ const currentPath = pathname.slice(1);
 ---
 
 <header
-  class="fixed left-0 right-0 top-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
+  class="fixed top-0 right-0 left-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
 >
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
     <!-- Logo -->

src/components/ShareButtons.astro

@@ -94,7 +94,7 @@ const encodedUrl = encodeURIComponent(url);
       >
       <span
         id="copy-tooltip"
-        class="absolute -top-8 left-1/2 -translate-x-1/2 transform whitespace-nowrap rounded bg-zinc-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
+        class="absolute -top-8 left-1/2 -translate-x-1/2 transform rounded bg-zinc-800 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
       >
         Copied!
       </span>

src/components/ThemeToggle.astro

@@ -5,14 +5,14 @@
 <button
   id="theme-toggle"
   data-theme-toggle
-  class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-300 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700 sm:p-2"
+  class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-none sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
   aria-label="Toggle dark mode"
 >
   <div class="relative z-10 flex h-5 w-5 items-center justify-center">
     <!-- Sun icon -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="icon-light absolute h-5 w-5 rotate-0 scale-100 text-zinc-800 transition-all duration-500 dark:-rotate-90 dark:scale-0 dark:text-zinc-200"
+      class="icon-light absolute h-5 w-5 scale-100 rotate-0 text-zinc-800 transition-all duration-500 dark:scale-0 dark:-rotate-90 dark:text-zinc-200"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -29,7 +29,7 @@
     <!-- Moon icon -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      class="icon-dark absolute h-5 w-5 rotate-90 scale-0 text-zinc-800 transition-all duration-500 dark:rotate-0 dark:scale-100 dark:text-zinc-200"
+      class="icon-dark absolute h-5 w-5 scale-0 rotate-90 text-zinc-800 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-zinc-200"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"