Faro & grafana improvements

apps/frontend-mobile/app/(tabs)/home.tsx

@@ -1,51 +1,55 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function HomeScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   return (
     <View style={styles.container}>
-      <View style={styles.hero}>
+      <View style={[styles.hero, isTablet && styles.heroTablet]}>
         <Image
           source={require('../../assets/farmaclic_logo.png')}
-          style={styles.logo}
+          style={[styles.logo, isTablet && styles.logoTablet]}
           resizeMode="contain"
         />
-        <Text style={styles.brandName}>FarmaClic</Text>
-        <Text style={styles.description}>
+        <Text style={[styles.brandName, isTablet && styles.brandNameTablet]}>FarmaClic</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
           Encuentra tus medicamentos en farmacias cercanas
         </Text>
       </View>
 
-      <View style={styles.cards}>
+      <View style={[styles.cards, isTablet && styles.cardsTablet]}>
         <TouchableOpacity
-          style={styles.card}
+          style={[styles.card, isTablet && styles.cardTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/(tabs)')}
         >
           <View style={[styles.cardIcon, styles.cardIconSearch]}>
-            <Ionicons name="search" size={24} color={colors.onPrimaryContainer} />
+            <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
           </View>
           <View style={styles.cardContent}>
-            <Text style={styles.cardLabel}>Buscar Medicamento</Text>
+            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet]}>Buscar Medicamento</Text>
             <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>
 
         <TouchableOpacity
-          style={[styles.card, styles.cardScan]}
+          style={[styles.card, styles.cardScan, isTablet && styles.cardTablet]}
           activeOpacity={0.85}
           onPress={() => router.push('/scanner')}
         >
           <View style={[styles.cardIcon, styles.cardIconScan]}>
-            <Ionicons name="scan" size={24} color="#ffffff" />
+            <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
           </View>
           <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, styles.cardLabelScan]}>Escanear TSI</Text>
+            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
             <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>
@@ -68,17 +72,27 @@ const styles = StyleSheet.create({
     gap: spacing.sm,
     marginBottom: spacing.md,
   },
+  heroTablet: {
+    marginBottom: spacing.xl,
+  },
   logo: {
     width: 120,
     height: 120,
     marginBottom: spacing.xs,
   },
+  logoTablet: {
+    width: 160,
+    height: 160,
+  },
   brandName: {
     fontSize: 28,
     fontWeight: 'bold',
     color: colors.text,
     letterSpacing: -0.5,
   },
+  brandNameTablet: {
+    fontSize: 36,
+  },
   description: {
     fontSize: 16,
     color: colors.textSecondary,
@@ -86,11 +100,19 @@ const styles = StyleSheet.create({
     maxWidth: 260,
     lineHeight: 24,
   },
+  descriptionTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+    lineHeight: 28,
+  },
   cards: {
     width: '100%',
     maxWidth: 320,
     gap: spacing.md,
   },
+  cardsTablet: {
+    maxWidth: 480,
+  },
   card: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -101,6 +123,10 @@ const styles = StyleSheet.create({
     minHeight: 64,
     ...shadows.card,
   },
+  cardTablet: {
+    padding: spacing.lg,
+    minHeight: 72,
+  },
   cardScan: {
     backgroundColor: colors.scanButton,
   },
@@ -131,6 +157,9 @@ const styles = StyleSheet.create({
     color: colors.onPrimaryContainer,
     lineHeight: 24,
   },
+  cardLabelTablet: {
+    fontSize: 20,
+  },
   cardLabelScan: {
     color: '#ffffff',
   },