2 components

src/components/OtherOpportunities.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { View, Text, StyleSheet, Image, Pressable } from "react-native";
+
+export default function OtherOpportunities() {
+  return (
+    <View>
+      <Text style={styles.header}>Other Opportunities</Text>
+      <View style={styles.cardContainer}>
+        <Pressable style={[styles.card, styles.first]}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/music-note.png")}
+          />
+          <Text style={styles.text}>Request a Concert</Text>
+          <Image
+            style={styles.arrow}
+            source={require("./../assets/caret-left.png")}
+          />
+        </Pressable>
+        <View style={styles.divider} />
+        <Pressable style={[styles.card, styles.last]}>
+          <Image style={styles.icon} source={require("./../assets/gift.png")} />
+          <Text style={styles.text}>Make a Donation</Text>
+          <Image
+            style={styles.arrow}
+            source={require("./../assets/caret-left.png")}
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  cardContainer: {
+    backgroundColor: "#f5f5f5",
+    borderRadius: 10,
+  },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 10,
+    borderColor: "#e0e0e0",
+    borderWidth: 1,
+  },
+  first: {
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+  },
+  last: {
+    borderBottomLeftRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  icon: {
+    width: 15,
+    height: 15,
+    marginRight: 10,
+  },
+  text: {
+    flex: 1,
+    fontSize: 14,
+    color: "#555",
+  },
+  arrow: {
+    width: 20,
+    height: 20,
+    transform: [{ rotateZ: "180deg" }],
+  },
+  divider: {
+    height: 0.1,
+    backgroundColor: "#e0e0e0",
+  },
+});

src/components/VolunteerOpportunity.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { View, Text, StyleSheet, Image, Pressable } from "react-native";
+
+export default function VolunteerOpportunity(props) {
+  return (
+    <View style={styles.background}>
+      <Image
+        style={styles.image}
+        source={require("./../assets/warm-springs-bart.png")}
+      />
+      <View>
+        <Pressable>
+          <Text style={styles.title}>Library Music Hour</Text>
+          <Text style={styles.info}>
+            <Image
+              style={styles.icon}
+              source={require("./../assets/clock.png")}
+            />
+            Saturday, August 10, 2024 2:30 PM
+          </Text>
+          <Text style={styles.info}>
+            <Image
+              style={styles.icon}
+              source={require("./../assets/location.png")}
+            />
+            Fremont Main Library
+          </Text>
+        </Pressable>
+      </View>
+      <Image
+        style={styles.caret}
+        source={require("./../assets/caret-left.png")}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#f5f5f5",
+    borderColor: "#e0e0e0",
+    borderRadius: 10,
+    margin: 1,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    marginRight: 6,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginTop: -15,
+  },
+  info: {
+    fontSize: 10,
+    color: "#555",
+    marginTop: -3,
+  },
+  icon: {
+    width: 10,
+    height: 10,
+    marginRight: 5,
+    marginTop: 5,
+  },
+  caret: {
+    width: 20,
+    height: 50,
+    marginLeft: 30,
+    transform: [{ rotateZ: "180deg" }],
+  },
+});