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,45 +92,45 @@ export default function Contact({
 
   return (
     <div className="relative isolate bg-brand-50/50 dark:bg-brand-900">
+      <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"
+          className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-brand-200 dark:stroke-white/10"
+        >
+          <defs>
+            <pattern
+              x="100%"
+              y={-1}
+              id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+              width={200}
+              height={200}
+              patternUnits="userSpaceOnUse"
+            >
+              <path d="M130 200V.5M.5 .5H200" fill="none" />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" strokeWidth={0} className="fill-white dark:fill-brand-900" />
+          <svg x="100%" y={-1} className="overflow-visible fill-brand-50 dark:fill-brand-800/20">
+            <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
+          </svg>
+          <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
+        </svg>
+        <div
+          aria-hidden="true"
+          className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))] dark:block"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
+            }}
+            className="aspect-1155/678 w-288.75 bg-linear-to-br from-brand-300 to-brand-600 opacity-10 dark:opacity-20"
+          />
+        </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">
-            <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"
-                className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-brand-200 dark:stroke-white/10"
-              >
-                <defs>
-                  <pattern
-                    x="100%"
-                    y={-1}
-                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
-                    width={200}
-                    height={200}
-                    patternUnits="userSpaceOnUse"
-                  >
-                    <path d="M130 200V.5M.5 .5H200" fill="none" />
-                  </pattern>
-                </defs>
-                <rect width="100%" height="100%" strokeWidth={0} className="fill-white dark:fill-brand-900" />
-                <svg x="100%" y={-1} className="overflow-visible fill-brand-50 dark:fill-brand-800/20">
-                  <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
-                </svg>
-                <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
-              </svg>
-              <div
-                aria-hidden="true"
-                className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))] dark:block"
-              >
-                <div
-                  style={{
-                    clipPath:
-                      'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
-                  }}
-                  className="aspect-1155/678 w-288.75 bg-linear-to-br from-brand-300 to-brand-600 opacity-10 dark:opacity-20"
-                />
-              </div>
-            </div>
             <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">