card devocional

App.tsx

@@ -32,6 +32,7 @@ const StackNavigator: React.FC<StackNavigatorProps> = ({ isAuthenticated }) => {
 	return (
 		<Stack.Navigator
 			initialRouteName={isAuthenticated ? "InitialPage" : "Login"}
+			// initialRouteName={"Home"}
 			screenOptions={{
 				headerStyle: {
 					backgroundColor: AppStyles.colors.background,

src/components/DevocionalCard/index.tsx

+import React from "react";
+import {
+    View,
+    Image,
+    TouchableWithoutFeedback,
+    ImageSourcePropType,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import styles from "./styles";
+
+interface EventCardProps {
+    onPress: () => void;
+}
+
+export default function EventCard({ onPress }: EventCardProps) {
+    // Obter o dia atual da semana em formato compatível com as chaves do mapa
+    const date = new Date();
+    const currentDay = date
+        .toLocaleDateString("pt-BR", { weekday: "long" })
+        .replace(/^\w/, (c) => c.toUpperCase()); // Ajusta a primeira letra para maiúscula
+
+    // Mapeamento das imagens
+    const images: { [key: string]: ImageSourcePropType } = {
+        "Segunda-feira": require("../../assets/devocionalday/2.jpg"),
+        "Terça-feira": require("../../assets/devocionalday/3.jpg"),
+        "Quarta-feira": require("../../assets/devocionalday/4.jpg"),
+        "Quinta-feira": require("../../assets/devocionalday/5.jpg"),
+        "Sexta-feira": require("../../assets/devocionalday/6.jpg"),
+        "Sábado": require("../../assets/devocionalday/7.jpg"),
+        "Domingo": require("../../assets/devocionalday/8.jpg"),
+    };
+
+    // Imagem de fallback caso o dia não seja encontrado
+    const fallbackImage = require("../../assets/icon.png");
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.cardContainer}>
+                {/* Imagem do evento */}
+                <Image
+                    source={images[currentDay] || fallbackImage}
+                    style={styles.image}
+                />
+
+                {/* Gradiente de sobreposição para melhorar o contraste visual */}
+                <LinearGradient
+                    colors={["transparent", "rgba(0,0,0,0.6)"]}
+                    style={styles.gradient}
+                />
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
\ No newline at end of file

src/components/DevocionalCard/styles.ts

+import { StyleSheet } from "react-native";
+import AppStyles from "../../theme/AppStyles";
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    width: 350,
+    height: 200,
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginVertical: 10,
+    shadowColor: AppStyles.colors.black,
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.15,
+		shadowRadius: 3.84,
+		elevation: 5,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+  gradient: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 10,
+    paddingVertical: 20,
+  },
+});
+
+export default styles;

src/screens/initialPage/index.tsx

@@ -9,6 +9,7 @@ import { isAdmin as checkAdminStatus } from "../../services/api";
 import { useFocusEffect } from "@react-navigation/native";
 import Loading from "../../components/Loading/Loading";
 import { LinearGradient } from "expo-linear-gradient";
+import DevocionalCard from "../../components/DevocionalCard/";
 
 interface LoginViewProps {
   navigation: any;
@@ -77,6 +78,11 @@ export default function InitialPage({ navigation }: LoginViewProps) {
           </Text>
         </TouchableOpacity>
       </View>
+
+      <View style={styles.devocional}>
+        <DevocionalCard onPress={() => alert("testando")}/>
+      </View>
+
       <View style={styles.studyContainer}>
         <Text style={styles.title}>Sua Jornada</Text>
       <ScrollView

src/screens/initialPage/styles.ts

@@ -90,6 +90,11 @@ const styles = StyleSheet.create({
     fontSize: 20,
     color: "white",
   },
+ devocional: {
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex",
+    },
 });
 
 export default styles;