Add_info_feature

src/screens/home/skin/information1.js

@@ -64,6 +64,22 @@ const Additionalinformation = ({ navigation }) => {
         }
     };
 
+    const ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={require('./skinassets/calling.png')} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
     const togglePlayPause = () => {
         setVideoPaused(!videoPaused);
         showControlsTemporarily(); // Toggle the pause state of the video
@@ -121,13 +137,13 @@ const Additionalinformation = ({ navigation }) => {
         
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/Vectorw.jpg')}  // Make sure the path is correct
+                            source={require('./skinassets/vector2.png')}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                         <Text style={styles.dscriptionText}>
                             Click below to explore informative videos on this condition from trusted YouTube sources. 
                             Remember, these videos are for educational purposes only. If you came this far, 
-                            you medical advice immediately consult a professional. Thank you for prioritizing your health.
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
                         </Text>
                         
                         <TouchableOpacity
@@ -149,6 +165,32 @@ const Additionalinformation = ({ navigation }) => {
                             <Text style={styles.orButtonText}>Click here to view video</Text>
                         </TouchableOpacity>
                     
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={require('./skinassets/Vectorw.png')}  // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
             </View>
                 </View>
 
@@ -300,24 +342,35 @@ const styles = StyleSheet.create({
         marginTop:50
     },
     qrCodeImage: {
-        width: 200, // Adjust size as needed
+        width: 250, // Adjust size as needed
         height: 200, // Adjust size as needed
     },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
     orButton: {
         marginTop: 30,
         backgroundColor:'#5F939A',
-       
         padding: 10,
-        borderRadius: 5,
+        borderRadius: 10,
         alignItems: 'center',
         justifyContent: 'left',
         flexDirection: 'row', // Align icon and text in a row
         width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
     },
     orButtonText: {
         color: COLORS.white,
         fontSize: 16,
-        fontWeight: 'bold',
+       
         marginLeft: 10, // Give some space after the icon
     },
     buttonIcon: {
@@ -332,6 +385,43 @@ const styles = StyleSheet.create({
         marginTop: 20,
         marginBottom: 20,
     },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },