enforce client only to side step known bug of next ui Input

_components/ClientOnly.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState, useEffect, ReactNode, FC } from "react";
+
+interface ClientOnlyProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+const ClientOnly: FC<ClientOnlyProps> = ({ children, fallback = null }) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render fallback (e.g., spinner) or nothing while client-only content loads
+  if (!hasMounted) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+};
+
+export default ClientOnly;

_components/Footer.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 import { Link as NextUiLink } from "@nextui-org/react";
 import { AudioLines, Instagram, Youtube } from "lucide-react";
+import ClientOnly from "@/_components/ClientOnly";
 import NewsletterForm from "@/_components/NewsletterForm";
 import { instructorEmailAddress } from "@/_lib/constants";
-
 const Footer = () => {
   return (
     <footer data-testid="footer" className={"border-t py-6 bg-zinc-50"}>
@@ -15,7 +15,9 @@ const Footer = () => {
       >
         {/* Newsletter Signup Form */}
         <div data-testid="footer-newsletter" className={"flex justify-center"}>
-          <NewsletterForm />
+          <ClientOnly>
+            <NewsletterForm />
+          </ClientOnly>
         </div>
 
         {/* Social Media Links */}