feature home

deskripsi:
- tampilan home

app/(application)/(home-tabs)/_layout.tsx

@@ -1,52 +0,0 @@
-
-//app/(application)/(tabs)/_layout.tsx
-import { MainColor } from "@/constants/color-palet";
-import { Entypo } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
-
-export default function TabsLayout() {
-  return (
-    <>
-      <Tabs
-        screenOptions={{
-          headerTitleAlign: "center",
-          tabBarStyle: {
-            backgroundColor: MainColor.darkblue,
-          },
-          tabBarActiveTintColor: MainColor.white,
-        }}
-      >
-        <Tabs.Screen name="index" options={{ href: null }} />
-
-        <Tabs.Screen
-          name="katalog"
-          options={{
-            title: "Katalog",
-            tabBarIcon: () => (
-              <Entypo name="book" size={20} color={MainColor.white} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="maps"
-          options={{
-            title: "Maps",
-            tabBarIcon: () => (
-              <Entypo name="map" size={20} color={MainColor.white} />
-            ),
-          }}
-        />
-
-        <Tabs.Screen
-          name="forum/index"
-          options={{
-            title: "Forum",
-            tabBarIcon: () => (
-              <Entypo name="chat" size={20} color={MainColor.white} />
-            ),
-          }}
-        />
-      </Tabs>
-    </>
-  );
-}

app/(application)/(home-tabs)/index.tsx

@@ -1,30 +0,0 @@
-import HomeView from "@/screens/Home/HomeView";
-import { Styles } from "@/styles/global-styles";
-import { Stack } from "expo-router";
-import React from "react";
-import { View } from "react-native";
-
-export default function Tabs() {
-  // const router = useRouter();
-  // const navigation = useNavigation();
-  // useEffect(() => {
-  //   navigation.setOptions({
-
-  //   });
-  // }, [navigation]);
-
-  return (
-    <>
-      <View>
-        <Stack.Screen
-          options={{
-            title: "HIPMI",
-            headerStyle: Styles.headerStyle,
-            headerTitleStyle: Styles.headerTitleStyle,
-          }}
-        />
-        <HomeView />
-      </View>
-    </>
-  );
-}

app/(application)/_layout.tsx

@@ -20,16 +20,77 @@ export default function ApplicationLayout() {
         }}
       >
         <Stack.Screen
-          name="(home-tabs)"
+          name="home"
           options={{
-           headerShown: false,
+            title: "HIPMI",
+            headerLeft: () => (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+            headerRight: () => (
+              <Ionicons
+                name="notifications"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
           }}
         />
 
         <Stack.Screen
-          name="event/index"
+          name="forum/index"
           options={{
-            title: "Event",
+            title: "Forum",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="maps/index"
+          options={{
+            title: "Maps",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="market-place/index"
+          options={{
+            title: "Market Place",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="profile/index"
+          options={{
+            title: "Profile",
             headerLeft: () => (
               <Ionicons
                 name="arrow-back"

app/(application)/coba/index.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+const { width } = Dimensions.get("window");
+
+// Sample Screen Components
+const HomeScreen = () => (
+  <View style={styles.screen}>
+    <Text style={styles.screenTitle}>Selamat Datang!</Text>
+    <Text style={styles.screenText}>Ini adalah halaman utama aplikasi Anda</Text>
+  </View>
+);
+const SearchScreen = () => (
+  <View style={styles.screen}>
+    <Text style={styles.screenTitle}>Search Screen</Text>
+    <Text style={styles.screenText}>Cari apa yang Anda butuhkan</Text>
+  </View>
+);
+
+const ProfileScreen = () => (
+  <View style={styles.screen}>
+    <Text style={styles.screenTitle}>Profile Screen</Text>
+    <Text style={styles.screenText}>Informasi profil pengguna</Text>
+  </View>
+);
+
+const NotificationScreen = () => (
+  <View style={styles.screen}>
+    {Array.from({ length: 10 }).map((_, index) => (
+      <View key={index}>
+        <Text style={styles.screenTitle}>Notifications</Text>
+        <Text style={styles.screenText}>Notifikasi terbaru Anda</Text>
+      </View>
+    ))}
+  </View>
+);
+
+// Custom Tab Component
+const CustomTab = ({ icon, label, isActive, onPress }: any) => (
+  <TouchableOpacity
+    style={[styles.tabItem, isActive && styles.activeTab]}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <View
+      style={[styles.iconContainer, isActive && styles.activeIconContainer]}
+    >
+      <Ionicons name={icon} size={24} color={isActive ? "#fff" : "#666"} />
+    </View>
+    <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
+      {label}
+    </Text>
+    {isActive && <View style={styles.activeIndicator} />}
+  </TouchableOpacity>
+);
+
+// Main Custom Tab Navigator
+const CustomTabNavigator = () => {
+  const [activeTab, setActiveTab] = React.useState(
+    'home'
+  );
+  const [showHome, setShowHome] = React.useState(true);
+
+  const tabs = [
+    {
+      id: "search",
+      icon: "search-outline",
+      activeIcon: "search",
+      label: "Event",
+      component: SearchScreen,
+      path: "/event",
+    },
+    {
+      id: "notifications",
+      icon: "notifications-outline",
+      activeIcon: "notifications",
+      label: "Forum",
+      component: NotificationScreen,
+      path: "/(application)/(home-tabs)/forum",
+    },
+    {
+      id: "profile",
+      icon: "person-outline",
+      activeIcon: "person",
+      label: "Katalog",
+      component: ProfileScreen,
+      path: "/(application)/(home-tabs)/katalog",
+    },
+  ];
+
+  
+  // Function untuk handle tab press
+  const handleTabPress = (tabId: string) => {
+    setActiveTab(tabId);
+    // setShowHome(false); // Hide home when any tab is pressed
+  };
+  
+  // Determine which component to show
+  const getActiveComponent = () => {
+    if (showHome || activeTab === "home") {
+      return HomeScreen;
+    }
+    const selectedTab = tabs.find((tab) => tab.id === activeTab);
+    return selectedTab ? selectedTab.component : HomeScreen;
+  };
+
+  const ActiveComponent = getActiveComponent();
+
+  return (
+    <View style={styles.container}>
+      {/* Content Area */}
+      <ScrollView>
+        <View style={styles.content}>
+          <ActiveComponent />
+        </View>
+      </ScrollView>
+
+      {/* Custom Tab Bar */}
+      <View style={styles.tabBar}>
+        <View style={styles.tabContainer}>
+          {tabs.map((e) => (
+            <CustomTab
+              key={e.id}
+              icon={activeTab === e.id ? e.activeIcon : e.icon}
+              label={e.label}
+              isActive={activeTab === e.id && !showHome}
+              onPress={() => {
+                // handleTabPress(e.id);
+                router.push(e.path as any);
+              }}
+            />
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f5f5f5",
+  },
+  content: {
+    flex: 1,
+  },
+  screen: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  screenTitle: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#333",
+    marginBottom: 10,
+  },
+  screenText: {
+    fontSize: 16,
+    color: "#666",
+    textAlign: "center",
+  },
+  tabBar: {
+    backgroundColor: "#fff",
+    paddingBottom: 20,
+    paddingTop: 10,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 5,
+  },
+  tabContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingHorizontal: 20,
+  },
+  tabItem: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    minWidth: width / 5,
+    position: "relative",
+  },
+  activeTab: {
+    transform: [{ scale: 1.05 }],
+  },
+  iconContainer: {
+    padding: 8,
+    borderRadius: 20,
+    marginBottom: 4,
+  },
+  activeIconContainer: {
+    backgroundColor: "#007AFF",
+    shadowColor: "#007AFF",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  tabLabel: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "500",
+  },
+  activeTabLabel: {
+    color: "#007AFF",
+    fontWeight: "600",
+  },
+  activeIndicator: {
+    position: "absolute",
+    bottom: -2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#007AFF",
+  },
+});
+
+export default CustomTabNavigator;

app/(application)/home.tsx

@@ -1,16 +1,9 @@
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import NewHomeView from "@/screens/Home/UiHome";
-import HomeView from "@/screens/Home/HomeView";
-import { Styles } from "@/styles/global-styles";
-import { View } from "react-native";
 
 export default function Application() {
   return (
     <>
-      <ViewWrapper>
+      <NewHomeView />
-        <View style={Styles.container}>
-          <HomeView />
-        </View>
-      </ViewWrapper>
     </>
   );
 }

app/(application)/maps/index.tsx

@@ -5,5 +5,5 @@ export default function Maps() {
         <View>
             <Text>Maps</Text>
         </View>
-    );
+    )
 }

app/(application)/market-place/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function MarketPlace() {
+    return (
+        <View>
+            <Text>Market Place</Text>
+        </View>
+    );
+}

app/(application)/profile/index.tsx

@@ -1,9 +1,9 @@
 import { Text, View } from "react-native";
 
-export default function Katalog() {
+export default function Profile() {
     return (
         <View>
-            <Text>Katalog</Text>
+            <Text>Profile</Text>
         </View>
     );
 }

app/_layout.tsx

@@ -1,9 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { MainColor } from "@/constants/color-palet";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaProvider } from "react-native-safe-area-context";
-import Icon from "react-native-vector-icons/FontAwesome";
 
 export default function RootLayout() {
   return (
@@ -17,32 +14,17 @@ export default function RootLayout() {
           headerStyle: { backgroundColor: MainColor.darkblue },
           headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
           headerTitleAlign: "center",
-          contentStyle: {
+          // contentStyle: {
-            borderBottomColor: AccentColor.blue,
+          //   borderBottomColor: AccentColor.blue,
-            borderBottomWidth: 2,
+          //   borderBottomWidth: 2,
-          },
+          // },
           // headerLargeStyle: {
           //   backgroundColor: MainColor.darkblue,
           // },
           // headerShadowVisible: false,
         }}
       >
-        <Stack.Screen
+        <Stack.Screen name="index" options={{ headerShown: false }} />
-          name="index"
-          // options={{
-          //   title: "Login",
-          //   headerStyle: { backgroundColor: MainColor.darkblue },
-          //   headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
-          //   headerTitleAlign: "center",
-          //   headerRight: () => (
-          //     <MaterialIcons name="rocket" size={20} color={MainColor.yellow} />
-          //   ),
-          //   headerLeft: () => (
-          //     <Icon name="rocket" size={20} color={MainColor.yellow} />
-          //   ),
-          // }}
-          options={{ headerShown: false }}
-        />
         <Stack.Screen name="verification" options={{ headerShown: false }} />
         <Stack.Screen name="register" options={{ headerShown: false }} />
         <Stack.Screen name="(application)" options={{ headerShown: false }} />

components/Button/ButtonCustom.tsx

@@ -5,6 +5,7 @@ import { Text, TouchableOpacity } from "react-native";
 import buttonStyles from "./buttonStyles";
 
 // Definisi props dengan TypeScript
+
 interface ButtonProps {
   onPress: () => void;
   title?: string;
@@ -15,6 +16,17 @@ interface ButtonProps {
   iconLeft?: React.ReactNode;
 }
 
+/**
+ * Props untuk ButtonCustom
+ * @param onPress: () => void
+ * @param title?: string
+ * @param backgroundColor?: string
+ * @param textColor?: string
+ * @param radius?: number
+ * @param disabled?: boolean
+ * @param iconLeft?: React.ReactNode
+ * @example iconLeft={<Icon name="arrow-right" size={20} color={MainColor.black}/>
+ */
 const ButtonCustom: React.FC<ButtonProps> = ({
   onPress,
   title = "Button",

components/_ShareComponent/ViewWrapper.tsx

@@ -5,19 +5,23 @@ import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 interface ViewWrapperProps {
   children: React.ReactNode;
   withBackground?: boolean;
+  tabBarComponent?: React.ReactNode;
 }
 
 const ViewWrapper = ({
   children,
   withBackground = false,
+  tabBarComponent,
 }: ViewWrapperProps) => {
-
   const assetBackground = require("../../assets/images/main-background.png");
 
   return (
     <SafeAreaProvider>
       <SafeAreaView
-        edges={[]}
+        edges={[
+          "bottom",
+          // "top",
+        ]}
         style={{
           flex: 1,
           // paddingTop: StatusBar.currentHeight,
@@ -36,6 +40,7 @@ const ViewWrapper = ({
             <View style={Styles.container}>{children}</View>
           )}
         </ScrollView>
+        {tabBarComponent}
       </SafeAreaView>
     </SafeAreaProvider>
   );

screens/Authentication/RegisterView.tsx

@@ -40,7 +40,7 @@ export default function RegisterView() {
               radius={10}
               onPress={() => (
                 console.log("Success register"),
-                router.push("/(application)/(home-tabs)")
+                router.push("/(application)/home")
               )}
             />
             <Spacing />

screens/Home/UiHome.tsx

@@ -0,0 +1,194 @@
+/* eslint-disable no-unused-expressions */
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { Href, router } from "expo-router";
+import React from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Home_BottomFeatureSection from "./bottomFeatureSection";
+import Home_ImageSection from "./imageSection";
+import Home_FeatureSection from "./topFeatureSection";
+
+interface Tabs {
+  id: string;
+  icon: string;
+  activeIcon: string;
+  label: string;
+  path: Href;
+  isActive: boolean;
+  disabled: boolean;
+}
+
+const { width } = Dimensions.get("window");
+
+export default function NewHomeView() {
+  const tabs: Tabs[] = [
+    {
+      id: "forum",
+      icon: "chatbubble-ellipses-outline",
+      activeIcon: "chatbubble-ellipses",
+      label: "Forum",
+      path: "/forum",
+      isActive: true,
+      disabled: false,
+    },
+    {
+      id: "marketplace",
+      icon: "cart-outline",
+      activeIcon: "cart",
+      label: "Marketplace",
+      path: "/market-place",
+      isActive: false,
+      disabled: true,
+    },
+    {
+      id: "maps",
+      icon: "map-outline",
+      activeIcon: "map",
+      label: "Maps",
+      path: "/maps",
+      isActive: true,
+      disabled: false,
+    },
+    {
+      id: "profile",
+      icon: "person-outline",
+      activeIcon: "person",
+      label: "Profile",
+      path: "/profile",
+      isActive: true,
+      disabled: false,
+    },
+  ];
+
+  const CustomTab = ({ icon, label, isActive, onPress, disabled }: any) => (
+    <TouchableOpacity
+      style={[styles.tabItem, isActive && styles.activeTab]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View
+        style={[styles.iconContainer, isActive && styles.activeIconContainer]}
+      >
+        <Ionicons name={icon} size={20} color={isActive ? "#fff" : "#666"} />
+      </View>
+      <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
+        {label}
+      </Text>
+      {isActive && <View style={styles.activeIndicator} />}
+    </TouchableOpacity>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        tabBarComponent={
+          <View style={styles.tabBar}>
+            <View style={styles.tabContainer}>
+              {tabs.map((e) => (
+                <CustomTab
+                  key={e.id}
+                  icon={e.icon}
+                  label={e.label}
+                  isActive={e.isActive}
+                  onPress={() => {
+                    e.disabled ? console.log("disabled") : router.push(e.path);
+                  }}
+                />
+              ))}
+            </View>
+          </View>
+        }
+      >
+        <Home_ImageSection />
+        <Spacing height={10} />
+
+        {/* Grid Section */}
+        <Home_FeatureSection />
+        <Spacing height={10} />
+
+        {/* Job Vacancy Section */}
+        <Home_BottomFeatureSection />
+        <Spacing height={20} />
+      </ViewWrapper>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: MainColor.darkblue,
+    borderTopColor: AccentColor.blue,
+    borderTopWidth: 1,
+    // borderTopEndRadius: 10,
+    // borderTopStartRadius: 10,
+    // tintColor: MainColor.yellow
+    // paddingBottom: 20,
+    // paddingTop: 10,
+    // shadowColor: AccentColor.blue,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: -2,
+    // },
+    // shadowOpacity: 0.9,
+    // shadowRadius: 3,
+    // elevation: 5,
+  },
+  tabContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingHorizontal: 0,
+  },
+  tabItem: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    minWidth: width / 5,
+    position: "relative",
+  },
+  activeTab: {
+    transform: [{ scale: 1.05 }],
+  },
+  iconContainer: {
+    padding: 8,
+    borderRadius: 20,
+    // marginBottom: 4,
+  },
+  activeIconContainer: {
+    // backgroundColor: "#007AFF",
+    // shadowColor: "#007AFF",
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    // shadowOpacity: 0.3,
+    // shadowRadius: 4,
+    // elevation: 4,
+  },
+  tabLabel: {
+    fontSize: 10,
+    color: "#666",
+    fontWeight: "500",
+  },
+  activeTabLabel: {
+    color: MainColor.white,
+    fontWeight: "600",
+  },
+  activeIndicator: {
+    position: "absolute",
+    bottom: -2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#007AFF",
+  },
+});

screens/Home/bottomFeatureSection.tsx

@@ -0,0 +1,60 @@
+import Spacing from "@/components/_ShareComponent/Spacing";
+import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
+import { Text, View } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { stylesHome } from "./homeViewStyle";
+
+export default function Home_BottomFeatureSection() {
+  return (
+    <>
+      <View style={stylesHome.jobVacancyContainer}>
+        <View style={stylesHome.jobVacancyHeader}>
+          <Icon name="briefcase" size={24} color="white" />
+          <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
+        </View>
+
+        <View style={stylesHome.vacancyList}>
+          {/* Vacancy Item 1 */}
+          <View style={stylesHome.vacancyItem}>
+            {/* <Icon name="user" size={20} color="#FFD700" /> */}
+            <View style={stylesHome.vacancyDetails}>
+              <DynamicTruncatedText
+                text="Bagas_banuna"
+                fontSize={14}
+                fontFamily="System"
+                style={stylesHome.vacancyName}
+              />
+              <Spacing height={5} />
+              <DynamicTruncatedText
+                text="Dicari perawat kucing"
+                fontSize={12}
+                fontFamily="System"
+                style={stylesHome.vacancyDescription}
+              />
+            </View>
+          </View>
+
+          {/* Vacancy Item 2 */}
+          <View style={stylesHome.vacancyItem}>
+            {/* <Icon name="user" size={20} color="#FFD700" /> */}
+            <View style={stylesHome.vacancyDetails}>
+              <DynamicTruncatedText
+                text="fibramarcell"
+                fontSize={14}
+                fontFamily="System"
+                style={stylesHome.vacancyName}
+              />
+              <Spacing height={5} />
+              <DynamicTruncatedText
+                text="Di Butuhkan Seorang..."
+                fontSize={12}
+                fontFamily="System"
+                style={stylesHome.vacancyDescription}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </>
+  );
+}

screens/Home/imageSection.tsx

@@ -0,0 +1,26 @@
+import { Image } from "expo-image";
+import { View } from "react-native";
+
+export default function Home_ImageSection() {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#fff",
+        borderRadius: 10,
+      }}
+    >
+      <Image
+        source={require("@/assets/images/constants/home-hipmi.png")}
+        contentFit="cover"
+        transition={1000}
+        style={{
+          width: "100%",
+          height: 120,
+          borderRadius: 10,
+        }}
+      />
+    </View>
+  );
+}

screens/Home/topFeatureSection.tsx

@@ -0,0 +1,54 @@
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Text, TouchableOpacity, View } from "react-native";
+import { stylesHome } from "./homeViewStyle";
+
+export default function Home_FeatureSection() {
+  return (
+    <>
+      <View style={stylesHome.gridContainer}>
+        <TouchableOpacity
+          style={stylesHome.gridItem}
+          onPress={() => router.push("/(application)/event")}
+        >
+          <Ionicons name="analytics" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Event</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="share" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Collaboration</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="cube" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Voting</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="heart" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={stylesHome.gridContainer}>
+        <TouchableOpacity
+          style={stylesHome.gridItem}
+          onPress={() => router.push("/(application)/event")}
+        >
+          <Ionicons name="analytics" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Event</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="share" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Collaboration</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="cube" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Voting</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={stylesHome.gridItem}>
+          <Ionicons name="heart" size={48} color="white" />
+          <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+}