fix: render ContactModal via portal to fix centering when inside transformed ancestors

src/components/shared/ContactModal.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { motion, AnimatePresence } from 'framer-motion'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 import { useNotification } from '@/components/providers/notification-provider'
 
@@ -26,6 +27,12 @@ const validateEmail = (email: string) => {
 
 export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
   const { showNotification } = useNotification()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -105,7 +112,9 @@ export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
     }
   }
 
-  return (
+  if (!mounted) return null
+
+  return createPortal(
     <AnimatePresence>
       {isOpen && (
         <motion.div
@@ -246,6 +255,7 @@ export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
           </motion.div>
         </motion.div>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   )
 }