Base design done

app/(tabs)/services.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import { Text, View } from '@/components/Themed';
+import AdhkarCard from '@/components/AdhkarCard';
+import SupplicationListItem from '@/components/SupplicationListItem';
+
+const adhkarCategories = [
+  'Thikr said in the morning and evening',
+  'Thikr before sleeping',
+  'Thikr after salam',
+];
+
+const supplications = [
+  'Upon breaking fast',
+  'Supplication said by one fasting when presented with food and does not break his fast',
+  'When insulted while fasting',
+  'Supplication upon seeing the early or premature fruit',
+  'Supplication upon sneezing',
+]
+
+export default function ServicesScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        <View style={styles.innerContainer}>
+          <Text style={styles.title}>Services</Text>
+          <Text style={styles.sectionTitle}>Adhkar</Text>
+          {adhkarCategories.map((title, index) => (
+            <AdhkarCard key={index} title={title} />
+          ))}
+
+          <Text style={styles.sectionTitle}>Hisn Al-Muslim</Text>
+          {supplications.map((text, index) => (
+            <SupplicationListItem key={index} text={text} onPress={() => {}} />
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  innerContainer: {
+    paddingHorizontal: 15,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginVertical: 15,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginVertical: 10,
+  }
+});