Base design done

components/ServicesGrid.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '@/constants/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const services = [
+  { name: 'Qur\'an', icon: 'book-open-variant' },
+  { name: 'Hadith', icon: 'book-open-page-variant' },
+  { name: 'Du\'a', icon: 'human-greeting' },
+];
+
+export default function ServicesGrid() {
+  const colorScheme = 'dark';
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Services to Enrich Your Spiritual Experience</Text>
+      <View style={styles.grid}>
+        {services.map((service, index) => (
+          <View key={index} style={styles.serviceItem}>
+            <View style={[styles.iconContainer, { backgroundColor: Colors[colorScheme].secondary }]}>
+              <MaterialCommunityIcons name={service.icon} size={30} color={Colors[colorScheme].tint} />
+            </View>
+            <Text style={styles.serviceName}>{service.name}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: Colors.dark.text,
+    marginBottom: 15,
+  },
+  grid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  serviceItem: {
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  serviceName: {
+    color: Colors.dark.text,
+    fontSize: 14,
+  },
+});