Actualizacion Index

Author: Viclor27322

app/(tabs)/index.tsx

@@ -1,70 +1,117 @@
-import { Image, StyleSheet, Platform } from 'react-native';
+import React from 'react';
+import { View, Text, Image, ScrollView, StyleSheet, Button, TouchableOpacity } from 'react-native';
 
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
 
 export default function HomeScreen() {
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{' '}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    <ScrollView style={styles.container}>
+       {/* Logo Section */}
+      <View style={styles.logoContainer}>
+        <Image source={require('@/assets/images/CirupieD.png')} style={styles.logo} />
+      </View>
+     
+      {/* Information Section */}
+      <View style={styles.infoContainer}>
+        <Text style={styles.title}>SOMOS UN EQUIPO MULTIDISCIPLINARIO DE PERSONAL DE LA SALUD</Text>
+        <Text style={styles.subtitle}>Conserva tus pasos, cuida tus pies</Text>
+
+      </View>
+
+      {/* Carousel */}
+      <ScrollView horizontal pagingEnabled style={styles.carousel}>
+        <Image source={require('@/assets/images/slider-1.jpg')} style={styles.carouselImage} />
+        <Image source={require('@/assets/images/slider-4.jpg')} style={styles.carouselImage} />
+        <Image source={require('@/assets/images/slider-5.jpg')} style={styles.carouselImage} />
+      </ScrollView>
+
+
+      {/* Mission and Vision Section */}
+      <View style={styles.cardsContainer}>
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Misión</Text>
+          <Text style={styles.cardText}>
+            Proporcionar un servicio de atención integral con la finalidad de prevenir, detectar, diagnosticar,
+            tratar y rehabilitar a los pacientes con pie diabético.
+          </Text>
+        </View>
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Visión</Text>
+          <Text style={styles.cardText}>
+            Preservar la integridad de los pacientes con pie diabético, y crear un cambio consciente en los pacientes y su entorno.
+          </Text>
+        </View>
+      </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: 'white',
+  },
+  carousel: {
+    height: 200,
+  },
+  carouselImage: {
+    width: 300,
+    height: 200,
+    marginHorizontal: 5,
+    borderRadius: 10,
+  },
+  infoContainer: {
+    padding: 20,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  subtitle: {
+    fontSize: 16,
+    textAlign: 'center',
+    color: 'gray',
+    marginBottom: 20,
+  },
+  contactButton: {
+    backgroundColor: '#28a745',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 5,
+  },
+  contactButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  logoContainer: {
     alignItems: 'center',
-    gap: 8,
+    marginVertical: 20,
+  },
+  logo: {
+    width: 150,
+    height: 150,
+    resizeMode: 'contain',
+  },
+  cardsContainer: {
+    paddingHorizontal: 20,
+  },
+  card: {
+    backgroundColor: '#f0f0f0',
+    padding: 15,
+    borderRadius: 8,
+    marginVertical: 10,
   },
-  stepContainer: {
-    gap: 8,
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#007bff',
     marginBottom: 8,
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  cardText: {
+    fontSize: 14,
+    color: '#555',
   },
 });