feat: Add Formbricks integration, update forms with webhooks, enhance navigation

- Integrate @formbricks/js for future surveys (FormbricksProvider)
- Add WebhookForm component for unified form submission (contact/franchise/membership)
- Update contact form with reason dropdown field
- Update franchise form with new fields: estado, ciudad, socios checkbox
- Update franchise benefits: manuals, training platform, RH system, investment $100k
- Add Contacto link to desktop/mobile nav and footer
- Update membership form to use WebhookForm with membership_id select
- Update hero buttons to use #3E352E color consistently
- Refactor contact/franchise pages to use new hero layout and components
- Add webhook utility (lib/webhook.ts) for parallel submission to test+prod
- Add email receipt hooks to booking endpoints
- Update globals.css with new color variables and navigation styles
- Docker configuration for deployment

components/app-wrapper.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import { LoadingScreen } from '@/components/loading-screen'
+import { useScrollEffect } from '@/hooks/use-scroll-effect'
+
+interface AppWrapperProps {
+  children: React.ReactNode
+}
+
+/** @description Client component wrapper that handles loading screen and scroll effects */
+export function AppWrapper({ children }: AppWrapperProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+  const pathname = usePathname()
+  const isScrolled = useScrollEffect()
+
+  useEffect(() => {
+    // Only show loading screen on first visit to home page
+    if (pathname === '/' && !hasLoadedOnce) {
+      setIsLoading(true)
+      setHasLoadedOnce(true)
+    }
+  }, [pathname, hasLoadedOnce])
+
+  const handleLoadingComplete = () => {
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    // Apply scroll class to header
+    const header = document.querySelector('.site-header')
+    if (header) {
+      if (isScrolled) {
+        header.classList.add('scrolled')
+      } else {
+        header.classList.remove('scrolled')
+      }
+    }
+  }, [isScrolled])
+
+  return (
+    <>
+      {isLoading && <LoadingScreen onComplete={handleLoadingComplete} />}
+      <div style={{ opacity: isLoading ? 0 : 1, transition: 'opacity 0.5s ease' }}>
+        {children}
+      </div>
+    </>
+  )
+}