feat: setup bottom tab navigation and base screens

frontend/src/app/_layout.tsx

@@ -11,12 +11,45 @@ export default function Layout() {
         tabBarInactiveTintColor: "#9CA3AF",
 
         tabBarStyle: {
-          height: 70,
+          position: "absolute",
-          paddingBottom: 10,
+          bottom: 5,
-          paddingTop: 10,
+          left: 20,
+          right: 20,
+
+          height: 82,
+
+          borderRadius: 25,
+
           backgroundColor: "#FFFFFF",
+
           borderTopWidth: 0,
-          elevation: 8,
+
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 10,
+          },
+
+          shadowOpacity: 0.08,
+          shadowRadius: 10,
+
+          elevation: 10,
+
+          paddingHorizontal: 10,
+        },
+
+        tabBarLabelStyle: {
+          fontSize: 11,
+          fontWeight: "400",
+          marginBottom: 8,
+        },
+
+        tabBarItemStyle: {
+          paddingTop: 6,
+          paddingBottom: 4,
+          borderRadius: 18,
+          marginVertical: 6,
+          marginHorizontal: 4,
         },
       }}
     >
@@ -24,8 +57,12 @@ export default function Layout() {
         name="index"
         options={{
           title: "Inicio",
-          tabBarIcon: ({ color, size }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
+            <Ionicons
+              name={focused ? "home" : "home-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -34,8 +71,12 @@ export default function Layout() {
         name="alerts"
         options={{
           title: "Alertas",
-          tabBarIcon: ({ color, size }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="notifications-outline" size={size} color={color} />
+            <Ionicons
+              name={focused ? "notifications" : "notifications-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -44,8 +85,12 @@ export default function Layout() {
         name="guide"
         options={{
           title: "Guía",
-          tabBarIcon: ({ color, size }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="leaf-outline" size={size} color={color} />
+            <Ionicons
+              name={focused ? "leaf" : "leaf-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />
@@ -54,8 +99,12 @@ export default function Layout() {
         name="profile"
         options={{
           title: "Perfil",
-          tabBarIcon: ({ color, size }) => (
+          tabBarIcon: ({ focused, color }) => (
-            <Ionicons name="person-outline" size={size} color={color} />
+            <Ionicons
+              name={focused ? "person" : "person-outline"}
+              size={focused ? 28 : 24}
+              color={color}
+            />
           ),
         }}
       />