add blur

src/components/layout/NavigationBar/NavigationBar.module.scss

@@ -1,3 +1,24 @@
+// Blur background under tab bar
+.blurBackground {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  // Height: tab bar height + moderate overlap above tab bar
+  height: calc(14px + 60px + 20px); // bottom offset + tab bar height + overlap above
+  z-index: 9994; // Just below the tab bar
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  background: rgba(255, 255, 255, 0.7);
+  pointer-events: none; // Don't block interactions
+  
+  // Fallback for browsers that don't support backdrop-filter
+  @supports not (backdrop-filter: blur(1px)) {
+    background: rgba(255, 255, 255, 0.85);
+  }
+}
+
 .container {
   width: calc(100% - 32px);
   max-width: 400px;

src/components/layout/NavigationBar/NavigationBar.tsx

@@ -30,41 +30,46 @@ export default function NavigationBar() {
   if (isRetainingFunnel) return null;
 
   return (
-    <nav className={styles.container}>
+    <>
-      {navItems.map(item => {
+      {/* Blur background under tab bar */}
-        const isActive =
+      <div className={styles.blurBackground} />
-          item.href === ROUTES.home()
-            ? pathnameWithoutLocale === item.href
-            : pathnameWithoutLocale.startsWith(item.href);
 
-        const badge = getBadge(item, totalUnreadCount);
+      <nav className={styles.container}>
+        {navItems.map(item => {
+          const isActive =
+            item.href === ROUTES.home()
+              ? pathnameWithoutLocale === item.href
+              : pathnameWithoutLocale.startsWith(item.href);
 
-        return (
+          const badge = getBadge(item, totalUnreadCount);
-          <Link
+
-            key={item.key}
+          return (
-            href={item.href}
+            <Link
-            className={clsx(styles.item, { [styles.active]: isActive })}
+              key={item.key}
-          >
+              href={item.href}
-            <Icon name={item.icon} color={isActive ? "#007AFF" : "#8A8D93"}>
+              className={clsx(styles.item, { [styles.active]: isActive })}
-              {!!badge && (
+            >
-                <Badge className={styles.badge}>
+              <Icon name={item.icon} color={isActive ? "#007AFF" : "#8A8D93"}>
-                  <Typography
+                {!!badge && (
-                    weight="medium"
+                  <Badge className={styles.badge}>
-                    size="xs"
+                    <Typography
-                    color="white"
+                      weight="medium"
-                    className={styles.badgeContent}
+                      size="xs"
-                  >
+                      color="white"
-                    {badge > 99 ? "99+" : badge}
+                      className={styles.badgeContent}
-                  </Typography>
+                    >
-                </Badge>
+                      {badge > 99 ? "99+" : badge}
-              )}
+                    </Typography>
-            </Icon>
+                  </Badge>
-            <Typography weight="medium" className={styles.label}>
+                )}
-              {item.label}
+              </Icon>
-            </Typography>
+              <Typography weight="medium" className={styles.label}>
-          </Link>
+                {item.label}
-        );
+              </Typography>
-      })}
+            </Link>
-    </nav>
+          );
+        })}
+      </nav>
+    </>
   );
 }

src/shared/api/httpClient.ts

@@ -148,7 +148,24 @@ class HttpClient {
     }
 
     const data = payload as T;
-    const validatedData = schema ? schema.parse(data) : data;
+
+    // Validate data with enhanced error logging
+    let validatedData: T;
+    if (schema) {
+      try {
+        validatedData = schema.parse(data);
+      } catch (error) {
+        console.error(`❌ [ZOD VALIDATION ERROR] ${method} ${fullUrl}`);
+        console.error(`📊 Status: ${res.status}`);
+        console.error(`📦 Raw Data:`, data);
+        console.error(`📋 Schema Expected:`, schema._def);
+        console.error(`⚠️ Validation Error:`, error);
+        console.error(`🔍 Data Type:`, typeof data, data === null ? "(null)" : "");
+        throw error;
+      }
+    } else {
+      validatedData = data;
+    }
 
     // Log successful API response (both client and server)
     if (typeof window !== "undefined") {