feat: enhance UI with metallic gradient cards - admin and mobile consistent color schemes

apps/mobile/src/app/(tabs)/index.tsx

@@ -112,7 +112,7 @@ export default function HomeScreen() {
         <View style={styles.header}>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
             <Image
-              source={require("../../public/nextform-logo.png")}
+              source={require("../../../public/nextform-logo.png")}
               style={{ width: 40, height: 40, resizeMode: 'contain' }}
             />
             <View>

apps/mobile/src/components/ActivityWidget.tsx

@@ -16,7 +16,7 @@ export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProp
     return (
         <View style={styles.container}>
             <LinearGradient
-                colors={theme.gradients.dark}
+                colors={['#0c4a6e', '#0369a1', '#0ea5e9']}
                 start={{ x: 0, y: 0 }}
                 end={{ x: 1, y: 1 }}
                 style={[styles.card, theme.shadows.medium]}

apps/mobile/src/components/HydrationWidget.tsx

@@ -15,7 +15,7 @@ export function HydrationWidget({ current, goal }: HydrationWidgetProps) {
     return (
         <View style={styles.container}>
             <LinearGradient
-                colors={['#e0f2fe', '#dbeafe']} // Light blue background
+                colors={['#0369a1', '#0ea5e9', '#06b6d4']}
                 style={[styles.card, theme.shadows.subtle]}
             >
                 <View style={styles.content}>

apps/mobile/src/components/PerformanceMetrics.tsx

@@ -16,37 +16,37 @@ interface MetricProps {
 const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
   const schemes = {
     blue: {
-      colors: ['#1e3a8a', '#0c4a6e'],
+      colors: ['#1e40af', '#0369a1', '#06b6d4'] as const,
       text: '#ffffff',
-      label: '#93c5fd',
-      badge: '#3b82f6',
+      label: '#e0f2fe',
+      badge: '#0ea5e9',
       badgeText: '#ffffff',
-      icon: '#60a5fa',
+      icon: '#06b6d4',
     },
     green: {
-      colors: ['#064e3b', '#047857'],
+      colors: ['#be185d', '#ec4899', '#f472b6'] as const,
       text: '#ffffff',
-      label: '#86efac',
+      label: '#fbcfe8',
+      badge: '#ec4899',
+      badgeText: '#ffffff',
+      icon: '#f472b6',
+    },
+    purple: {
+      colors: ['#b45309', '#d97706', '#fbbf24'] as const,
+      text: '#ffffff',
+      label: '#fef3c7',
+      badge: '#f59e0b',
+      badgeText: '#ffffff',
+      icon: '#fbbf24',
+    },
+    orange: {
+      colors: ['#047857', '#059669', '#10b981'] as const,
+      text: '#ffffff',
+      label: '#d1fae5',
       badge: '#10b981',
       badgeText: '#ffffff',
       icon: '#34d399',
     },
-    purple: {
-      colors: ['#581c87', '#7c3aed'],
-      text: '#ffffff',
-      label: '#d8b4fe',
-      badge: '#a855f7',
-      badgeText: '#ffffff',
-      icon: '#c084fc',
-    },
-    orange: {
-      colors: ['#92400e', '#b45309'],
-      text: '#ffffff',
-      label: '#fcd34d',
-      badge: '#f97316',
-      badgeText: '#ffffff',
-      icon: '#fb923c',
-    },
   };
   return schemes[colorScheme];
 };

apps/mobile/src/styles/theme.ts

@@ -64,6 +64,11 @@ export const theme = {
         forest: ['#10b981', '#059669'] as const,
         lavender: ['#a78bfa', '#ec4899'] as const,
         dark: ['#1e293b', '#0f172a'] as const,
+        // Premium metallic gradients
+        blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
+        amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
+        magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
+        emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
     },
 
     // Shadow System