115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
|
|
export default function HomeScreen() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Image source={require('../../assets/images/logo.jpeg')} style={styles.logo} />
|
|
<Text style={styles.title}>Welcome to Sajidaat</Text>
|
|
<Text style={styles.subtitle}>
|
|
Discover, review, and share prayer spaces near you. Find mosques, prayer rooms, and community spaces with real user reviews and photos.
|
|
</Text>
|
|
<TouchableOpacity style={styles.button} onPress={() => router.push('/(tabs)/mapList')}>
|
|
<Ionicons name="list" size={24} color="#fff" style={{ marginRight: 8 }} />
|
|
<Text style={styles.buttonText}>View Prayer Spaces List</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.button} onPress={() => router.push('/(tabs)/map')}>
|
|
<Ionicons name="map" size={24} color="#fff" style={{ marginRight: 8 }} />
|
|
<Text style={styles.buttonText}>Explore Map</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.button} onPress={() => router.push('/(tabs)/prayTime')}>
|
|
<Ionicons name="time" size={24} color="#fff" style={{ marginRight: 8 }} />
|
|
<Text style={styles.buttonText}>Check Prayer Times</Text>
|
|
</TouchableOpacity>
|
|
<View style={styles.infoBox}>
|
|
<Text style={styles.infoTitle}>How it works:</Text>
|
|
<Text style={styles.infoText}>• Browse a map or list of prayer spaces</Text>
|
|
<Text style={styles.infoText}>• See reviews, photos, and facilities</Text>
|
|
<Text style={styles.infoText}>• Add your own reviews and photos</Text>
|
|
<Text style={styles.infoText}>• Help others find the best places to pray</Text>
|
|
</View>
|
|
{/* <Text style={styles.footer}>Made with <Ionicons name="heart" size={16} color="#e74c3c" /> by the DRP Project Team</Text> */}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
backgroundColor: '#FFEEE7',
|
|
},
|
|
logo: {
|
|
width: 100,
|
|
height: 100,
|
|
marginBottom: 24,
|
|
borderRadius: 20,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: '#007bff',
|
|
marginBottom: 10,
|
|
textAlign: 'center',
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#555',
|
|
marginBottom: 24,
|
|
textAlign: 'center',
|
|
paddingHorizontal: 10,
|
|
},
|
|
button: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#007bff',
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 24,
|
|
borderRadius: 8,
|
|
marginVertical: 8,
|
|
width: '90%',
|
|
justifyContent: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
},
|
|
infoBox: {
|
|
backgroundColor: '#E2A593', // changed from #FFEEE7 to #E2A593 for filter/info box
|
|
borderRadius: 10,
|
|
padding: 18,
|
|
marginTop: 28,
|
|
marginBottom: 16,
|
|
width: '100%',
|
|
},
|
|
infoTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: '#333',
|
|
marginBottom: 8,
|
|
},
|
|
infoText: {
|
|
fontSize: 15,
|
|
color: '#555',
|
|
marginBottom: 4,
|
|
},
|
|
footer: {
|
|
fontSize: 14,
|
|
color: '#888',
|
|
marginTop: 16,
|
|
textAlign: 'center',
|
|
},
|
|
});
|