adds text and donar redirect to tpmg website

screens/donar.js

@@ -1,17 +1,55 @@
 import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, ScrollView, Text, Button, Linking} from 'react-native';
 import Header from '../shared/header';
 
 export default function Donate({navigation}) {
     return (
-        <View style={styles.container}>
-         <Text>Donate Screen</Text>
-        </View>
+        <ScrollView style={styles.container}>
+        <Text style={styles.title}>
+            APOYA EL TRABAJO DE <Text style={styles.redText}>TPMG </Text>
+            CON SU COMPROMISO A <Text style={styles.blueText}>LA COMUNIDAD</Text></Text>
+        <Text style={styles.paragraph}>Estamos muy contentos(as)
+        de que te interese involucrarte con nuestro trabajo aquí
+        en Techos Pa' Mi Gente. Hay muchas maneras de ayudar,
+        y verdaderamente apreciamos cada esfuerzo. Tu apoyo será una
+        parte esencial para nuestra organización, que ayudará a fortalecer
+        nuestro trabajo. Nuestro compromiso es que 90% de los fondos recaudados
+        van a servicios directos y el 10% se destina en gastos operacionales.</Text>
+
+         <Button
+            onPress={ () => {Linking.openURL("https://www.tpmgcorp.org/toma-acción")}}
+            title="Donar"
+            accessibilityLabel="Donar presionando el botón."
+        />
+
+        </ScrollView>
     )
 }
 
 const styles = StyleSheet.create({
     container: {
         padding: 24
+    },
+    title: {
+        fontWeight: 'bold',
+        fontFamily: "AvenirNext-Bold",
+        fontSize: 40
+    },
+    subtitle: {
+        fontWeight: 'bold',
+        fontFamily: "Avenir-Black",
+        fontSize: 15 
+    },
+    paragraph: {
+        fontWeight: 'normal',
+        fontFamily: "Avenir-Black",
+        fontSize: 15,
+        textAlign: 'justify'
+    },
+    redText:{
+        color: '#DF4844'
+    },
+    blueText:{
+        color: '#047CC3'
     }
 });