fix some bugs

astro.config.mjs

@@ -26,5 +26,8 @@ export default defineConfig({
   ],
   vite: {
     plugins: [tailwindcss()],
+    ssr: {
+      noExternal: ['motion', 'motion/react'],
+    },
   },
 });

src/components/foot.astro

@@ -16,7 +16,7 @@ const legalNotice = footer.legal.replace('{year}', String(year));
 ---
 
 <FooterAnimated
-  client:visible
+  client:load
   siteName={general.siteName}
   serviceArea={general.serviceArea}
   phone={general.phone}

src/components/header.tsx

@@ -34,6 +34,14 @@ export default function Header({
       lastScrollY.current = currentY;
     };
 
+    // Sync state with the actual scroll position on mount
+    const initialY = window.scrollY;
+    lastScrollY.current = initialY;
+    setIsScrolled(initialY > 10);
+    if (initialY > 80) {
+      setIsVisible(false);
+    }
+
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);

src/components/sections/contact.tsx

@@ -92,9 +92,6 @@ export default function Contact({
 
   return (
     <div className="relative isolate bg-brand-50/50 dark:bg-brand-900">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
-        <motion.div {...slideIn("left", 0.05)} className="relative px-6 pt-12 pb-20 lg:static">
-          <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
       <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-brand-50 ring-1 ring-brand-900/10 lg:w-1/2 dark:bg-brand-900 dark:ring-white/10">
         <svg
           aria-hidden="true"
@@ -131,6 +128,9 @@ export default function Contact({
           />
         </div>
       </div>
+      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+        <motion.div {...slideIn("left", 0.05)} className="relative px-6 pt-12 pb-20 lg:static">
+          <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
             <motion.dl {...fadeUp(0.1)} className="mt-10 space-y-4 text-base/7 text-brand-700 dark:text-brand-100">
               <div className="flex gap-x-4">
                 <dt className="flex-none">