app/(application)/discussion/index.tsx

@@ -4,6 +4,7 @@ import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
@@ -102,22 +103,22 @@ export default function Discussion() {
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" &&
-               <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+               <WrapTab>
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="true"
                      onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="false"
                      onPress={() => { setStatus("false") }}
                      label="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
-               </View>
+               </WrapTab>
             }
 
             <InputSearch onChange={setSearch} />

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -5,6 +5,7 @@ import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
@@ -134,22 +135,22 @@ export default function DiscussionDivision() {
          {
             ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
             <View>
-               <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+               <WrapTab>
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="true"
                      onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
                      active={status == "false" ? "false" : "true"}
                      value="false"
                      onPress={() => { setStatus("false") }}
                      label="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
-               </View>
+               </WrapTab>
                <InputSearch onChange={setSearch} />
             </View>
          }

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -123,7 +123,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : colors.text}
+                        color={statusFix == "0" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -137,7 +137,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : colors.text}
+                        color={statusFix == "1" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -151,7 +151,7 @@ export default function ListTask() {
                   icon={
                      <Ionicons
                         name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : colors.text}
+                        color={statusFix == "2" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -165,7 +165,7 @@ export default function ListTask() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : colors.text}
+                        color={statusFix == "3" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }

app/(application)/division/index.tsx

@@ -6,6 +6,7 @@ import PaperGridContent from "@/components/paperGridContent";
 import Skeleton from "@/components/skeleton";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDivision } from "@/lib/api";
@@ -121,7 +122,7 @@ export default function ListDivision() {
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" ?
-                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+                  <WrapTab>
                      <ButtonTab
                         active={status == "false" ? "false" : "true"}
                         value="true"
@@ -130,7 +131,7 @@ export default function ListDivision() {
                         icon={
                            <Feather
                               name="check-circle"
-                              color={status == "false" ? colors.text : "white"}
+                              color={status == "false" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -144,15 +145,15 @@ export default function ListDivision() {
                         icon={
                            <AntDesign
                               name="closecircleo"
-                              color={status == "true" ? colors.text : "white"}
+                              color={status == "true" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
                         n={2}
                      />
-                  </View>
+                  </WrapTab>
                   :
-                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+                  <WrapTab>
                      <ButtonTab
                         active={category == "semua" ? "false" : "true"}
                         value="true"
@@ -161,7 +162,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-outline"
-                              color={category == "semua" ? colors.text : "white"}
+                              color={category == "semua" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -175,13 +176,13 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-stacked-outline"
-                              color={category == "semua" ? "white" : colors.text}
+                              color={category == "semua" ? "white" : colors.dimmed}
                               size={20}
                            />
                         }
                         n={2}
                      />
-                  </View>
+                  </WrapTab>
             }
 
             <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>

app/(application)/feature.tsx

@@ -2,7 +2,7 @@ import AppHeader from "@/components/AppHeader";
 import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
-import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { AntDesign, Entypo, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { SafeAreaView, View } from "react-native";
 import { useSelector } from "react-redux";
@@ -24,23 +24,23 @@ export default function Feature() {
          />
          <View style={[Styles.p15]}>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.text} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+               <ButtonFiturMenu icon={<Feather name="users" size={30} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
-               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.text} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+               <ButtonFiturMenu icon={<Feather name="bar-chart" size={30} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
-               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.text} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+               <ButtonFiturMenu icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
-               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color={colors.text} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
+               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-outline" size={30} color={colors.icon} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
             </View>
             <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color={colors.text} />} text="Anggota" onPress={() => { router.push('/member') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-group-outline" size={30} color={colors.icon} />} text="Anggota" onPress={() => { router.push('/member') }} />
-               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color={colors.text} />} text="Jabatan" onPress={() => { router.push('/position') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie-outline" size={30} color={colors.icon} />} text="Jabatan" onPress={() => { router.push('/position') }} />
                {
-                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
+                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
                }
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   <>
-                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color={colors.text} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
+                     <ButtonFiturMenu icon={<Feather name="layers" size={30} color={colors.icon} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
-                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color={colors.text} />} text="Tema" onPress={() => { }} /> */}
+                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={30} color={colors.icon} />} text="Tema" onPress={() => { }} /> */}
-                     <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
+                     <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
                   </>
                }
             </View>

app/(application)/group/index.tsx

@@ -8,6 +8,7 @@ import InputSearch from "@/components/inputSearch";
 import MenuItemRow from "@/components/menuItemRow";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
@@ -131,22 +132,22 @@ export default function Index() {
    return (
       <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View style={[Styles.mb10]}>
-            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
          </View>
          <View style={[{ flex: 2 }, Styles.mt05]}>

app/(application)/home.tsx

@@ -1,10 +1,9 @@
-import CaraouselHome from "@/components/home/carouselHome";
+import CaraouselHome2 from "@/components/home/carouselHome2";
 import ChartDokumenHome from "@/components/home/chartDokumenHome";
 import ChartProgresHome from "@/components/home/chartProgresHome";
 import DisccussionHome from "@/components/home/discussionHome";
 import DivisionHome from "@/components/home/divisionHome";
 import EventHome from "@/components/home/eventHome";
-import FiturHome from "@/components/home/fiturHome";
 import { HeaderRightHome } from "@/components/home/headerRightHome";
 import ProjectHome from "@/components/home/projectHome";
 import Text from "@/components/Text";
@@ -13,9 +12,10 @@ import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
+import { LinearGradient } from "expo-linear-gradient";
 import { Stack } from "expo-router";
 import { useEffect, useState } from "react";
-import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { Dimensions, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -55,7 +55,7 @@ export default function Home() {
                title: 'Home',
                headerTitle: entities.village,
                header: () => (
-                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.primary, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
+                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
                      <Text style={Styles.textHeaderHome}>{entities.village}</Text>
                      <HeaderRightHome />
                   </View>
@@ -73,9 +73,22 @@ export default function Home() {
             showsVerticalScrollIndicator={false}
             style={{ backgroundColor: colors.background }}
          >
-            <CaraouselHome refreshing={refreshing} />
+            <LinearGradient
-            <View style={[Styles.ph15, Styles.mb100]}>
+               colors={[colors.header, colors.header, colors.header, colors.header, colors.homeGradient]}
-               <FiturHome />
+               style={{
+                  position: 'absolute',
+                  width: Dimensions.get('window').width * 1.5,
+                  height: Dimensions.get('window').width * 1.5,
+                  borderRadius: Dimensions.get('window').width * 0.5,
+                  top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
+                  left: -Dimensions.get('window').width * 0.25,
+                  zIndex: -1,
+               }}
+            />
+            {/* <CaraouselHome refreshing={refreshing} /> */}
+            <View style={[Styles.ph15]}>
+               <CaraouselHome2 refreshing={refreshing} />
+               {/* <FiturHome /> */}
                <ProjectHome refreshing={refreshing} />
                <DivisionHome refreshing={refreshing} />
                <ChartProgresHome refreshing={refreshing} />

app/(application)/member/[id].tsx

@@ -11,6 +11,7 @@ import { valueRoleUser } from "@/constants/RoleUser";
 import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { useTheme } from "@/providers/ThemeProvider";
+import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -102,7 +103,10 @@ export default function MemberDetail() {
                />
             }
          >
-            <View style={[Styles.wrapHeadViewMember]}>
+            <LinearGradient
+               colors={[colors.header, colors.homeGradient]}
+               style={[Styles.wrapHeadViewMember]}
+            >
                {
                   loading ?
                      <>
@@ -120,7 +124,7 @@ export default function MemberDetail() {
                      </>
 
                }
-            </View>
+            </LinearGradient>
             <View style={[Styles.p15]}>
                <View style={[Styles.rowSpaceBetween]}>
                   <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>

app/(application)/member/index.tsx

@@ -5,6 +5,7 @@ import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
@@ -108,22 +109,22 @@ export default function Index() {
    return (
       <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
-            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.text} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
             {
                (entityUser.role == "supadmin" || entityUser.role == "developer") &&

app/(application)/position/index.tsx

@@ -9,6 +9,7 @@ import LabelStatus from "@/components/labelStatus";
 import MenuItemRow from "@/components/menuItemRow";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
@@ -150,22 +151,22 @@ export default function Index() {
    return (
       <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
-            <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
             {
                (entityUser.role == "supadmin" || entityUser.role == "developer") &&

app/(application)/profile.tsx

@@ -10,6 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
+import { LinearGradient } from "expo-linear-gradient";
 import { useState } from "react";
 import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
@@ -68,7 +69,10 @@ export default function Profile() {
          />
          <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={{ flexDirection: 'column' }}>
-               <View style={[Styles.wrapHeadViewMember, { backgroundColor: colors.primary }]}>
+               <LinearGradient
+                  colors={[colors.header, colors.homeGradient]}
+                  style={[Styles.wrapHeadViewMember]}
+               >
                   <Pressable onPress={() => setPreview(true)}>
                      <Image
                         source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
@@ -78,7 +82,7 @@ export default function Profile() {
                   </Pressable>
                   <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
                   <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
-               </View>
+               </LinearGradient>
                <View style={[Styles.p15]}>
                   <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
                      <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tampilan</Text>

app/(application)/project/index.tsx

@@ -136,7 +136,7 @@ export default function ListProject() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : colors.text}
+                        color={statusFix == "0" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -150,7 +150,7 @@ export default function ListProject() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : colors.text}
+                        color={statusFix == "1" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -164,7 +164,7 @@ export default function ListProject() {
                   icon={
                      <Ionicons
                         name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : colors.text}
+                        color={statusFix == "2" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -178,7 +178,7 @@ export default function ListProject() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : colors.text}
+                        color={statusFix == "3" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }

components/AppHeader.tsx

@@ -1,4 +1,5 @@
 import Styles from '@/constants/Styles';
+import { useTheme } from "@/providers/ThemeProvider";
 import { useRouter } from 'expo-router';
 import { Platform, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -15,10 +16,12 @@ type Props = {
 export default function AppHeader({ title, right, showBack = true, onPressLeft, left }: Props) {
   const insets = useSafeAreaInsets();
   const router = useRouter();
+  const { colors } = useTheme();
 
   return (
-    <View style={[Styles.headerContainer, Platform.OS === 'ios' ? Styles.pb05 : Styles.pb13, { paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
+    <View style={[Styles.headerContainer, Platform.OS === 'ios' ? Styles.pb05 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
       <View style={Styles.headerApp}>
+        <View style={[Styles.rowItemsCenter]}>
           {showBack ? (
             <ButtonBackHeader onPress={onPressLeft} />
           ) :
@@ -27,8 +30,8 @@ export default function AppHeader({ title, right, showBack = true, onPressLeft,
                 <View style={Styles.headerSide} />
               )}
 
-        <Text style={Styles.headerTitle}>{title}</Text>
+          <Text style={[Styles.headerTitle, Styles.ml05]}>{title}</Text>
-
+        </View>
         <View style={Styles.headerSide}>{right}</View>
       </View>
     </View>

components/buttonBackHeader.tsx

@@ -9,7 +9,7 @@ export default function ButtonBackHeader({ onPress }: Props) {
    return (
       <>
          <ButtonHeader
-            item={<Feather name="chevron-left" size={20} color="white" />}
+            item={<Feather name="chevron-left" size={25} color="white" />}
             onPress={() => { onPress && onPress() }}
          />
       </>

components/buttonFiturMenu.tsx

@@ -18,7 +18,7 @@ export function ButtonFiturMenu({ onPress, icon, text }: Props) {
             <View style={[Styles.btnFiturMenu, { backgroundColor: colors.card, borderColor: colors.icon + '20', shadowColor: colors.text }]}>
                {icon}
             </View>
-            <Text style={[Styles.mt05]}>{text}</Text>
+            <Text style={[Styles.mt05, { color: colors.text }]}>{text}</Text>
          </View>
       </TouchableWithoutFeedback>
    )

components/buttonTab.tsx

@@ -1,7 +1,6 @@
-import { ColorsStatus } from "@/constants/ColorsStatus"
+import Styles from "@/constants/Styles";
-import Styles from "@/constants/Styles"
 import { useTheme } from "@/providers/ThemeProvider";
-import { TouchableOpacity } from "react-native"
+import { TouchableOpacity } from "react-native";
 import Text from "./Text";
 
 type Props = {
@@ -17,9 +16,9 @@ type Props = {
 export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
    const { colors } = useTheme();
    return (
-      <TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
+      <TouchableOpacity style={[Styles.btnTab, (active == value) && { backgroundColor: colors.tabActive }, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
          {icon}
-         <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.text }]}>{label}</Text>
+         <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.dimmed }]}>{label}</Text>
       </TouchableOpacity>
    )
 }

components/discussionItem.tsx

@@ -14,7 +14,7 @@ type Props = {
 export default function DiscussionItem({ title, user, date, onPress }: Props) {
    const { colors } = useTheme();
    return (
-      <Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={onPress}>
+      <Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter, Styles.mb10]}>
             <Ionicons name="chatbox-ellipses-outline" size={22} color={colors.text} style={Styles.mr10} />
             <View style={[{ flex: 1 }]}>
@@ -23,12 +23,12 @@ export default function DiscussionItem({ title, user, date, onPress }: Props) {
          </View>
          <View style={[Styles.rowSpaceBetween]}>
             <View style={[Styles.rowItemsCenter, { flex: 1 }]}>
-               <Feather name="user" size={18} color={colors.text} style={Styles.mr05} />
+               <Feather name="user" size={18} color={colors.dimmed} style={Styles.mr05} />
-               <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
+               <Text style={[Styles.textInformation, { color: colors.dimmed }]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
             </View>
             <View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}>
-               <Feather name="clock" size={18} color={colors.text} style={Styles.mr05} />
+               <Feather name="clock" size={18} color={colors.dimmed} style={Styles.mr05} />
-               <Text style={[Styles.textInformation]}>{date}</Text>
+               <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{date}</Text>
             </View>
          </View>
       </Pressable>

components/home/carouselHome2.tsx

@@ -0,0 +1,143 @@
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import { apiGetBanner, apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/bannerSlice";
+import { setEntityUser } from "@/lib/userSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Feather, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, } from "@expo/vector-icons";
+import { router } from "expo-router";
+import React, { useEffect } from "react";
+import { Dimensions, Image, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
+import { useDispatch, useSelector } from "react-redux";
+import { ButtonFiturMenu } from "../buttonFiturMenu";
+import Text from "../Text";
+
+export default function CaraouselHome2({ refreshing }: { refreshing: boolean }) {
+   const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme();
+   const ref = React.useRef<ICarouselInstance>(null);
+   const width = Dimensions.get("window").width;
+   const progress = useSharedValue<number>(0);
+   const dispatch = useDispatch()
+   const entities = useSelector((state: any) => state.banner)
+   const entityUser = useSelector((state: any) => state.user)
+
+   async function handleBannerView() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetBanner({ user: hasil }).then((data) => {
+         if (data.data.length > 0) {
+            dispatch(setEntities(data.data))
+         } else {
+            dispatch(setEntities([]))
+         }
+      })
+   }
+
+   async function handleUser() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetProfile({ id: hasil })
+      dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
+   }
+
+   useEffect(() => {
+      if (refreshing)
+         handleBannerView()
+   }, [refreshing]);
+
+   useEffect(() => {
+      handleBannerView()
+   }, [dispatch]);
+
+   useEffect(() => {
+      handleUser()
+   }, []);
+
+   return (
+      <View
+         style={[
+            Styles.mv15,
+            Styles.p15,
+            Styles.round05,
+            { backgroundColor: colors.card },
+            Styles.wrapHomeCarousel
+         ]}
+      >
+         {/* WRAPPER CAROUSEL */}
+         <View
+            style={{
+               justifyContent: 'center',  // ⬅️ vertical center
+               alignItems: 'center',
+            }}
+         >
+            {entities.length > 0 ? (
+               <Carousel
+                  ref={ref}
+                  width={width - 30} // ⬅️ biar ga nabrak padding hijau
+                  height={width / 2.6}
+                  data={entities}
+                  loop
+                  autoPlay
+                  autoPlayInterval={5000}
+                  onProgressChange={progress}
+                  renderItem={({ index }) => (
+                     <Image
+                        source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
+                        style={[
+                           Styles.caraoselContent,
+                           Styles.round05,
+                           {
+                              backgroundColor: colors.primary
+                           },
+                        ]}
+                        resizeMode="cover"
+                     />
+                  )}
+               />
+            ) : (
+               <View
+                  style={[
+                     Styles.caraoselContent,
+                     {
+                        height: width / 2.5,
+                        backgroundColor: colors.primary,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                     },
+                  ]}
+               >
+                  <Text style={[Styles.textDefault, Styles.cWhite]}>BANNER</Text>
+               </View>
+            )}
+         </View>
+
+         {/* FITUR */}
+         <View style={[Styles.mt15]}>
+            <View style={Styles.rowSpaceBetween}>
+               <ButtonFiturMenu
+                  icon={<Feather name="users" size={30} color={colors.icon} />}
+                  text="Divisi"
+                  onPress={() => router.push('/division?active=true')}
+               />
+               <ButtonFiturMenu
+                  icon={<Feather name="bar-chart" size={30} color={colors.icon} />}
+                  text="Kegiatan"
+                  onPress={() => router.push('/project?status=0')}
+               />
+               <ButtonFiturMenu
+                  icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />}
+                  text="Pengumuman"
+                  onPress={() => router.push('/announcement')}
+               />
+               <ButtonFiturMenu
+                  icon={<Ionicons name="grid-outline" size={30} color={colors.icon} />}
+                  text="Semua"
+                  onPress={() => router.push('/feature')}
+               />
+            </View>
+         </View>
+      </View>
+   )
+}

components/home/chartProgresHome.tsx

@@ -58,7 +58,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
                      data={data}
                      showText
                      showValuesAsTooltipText
-                     textColor={colors.text}
+                     textColor={'black'}
                      radius={120}
                      textSize={15}
                      focusOnPress={false}

components/home/discussionHome.tsx

@@ -7,6 +7,7 @@ import { View } from "react-native";
 import DiscussionItem from "../discussionItem";
 import Skeleton from "../skeleton";
 import Text from "../Text";
+import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
    id: string
@@ -21,6 +22,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
    const { decryptToken, token } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
+   const { colors } = useTheme();
 
 
    async function handleData(loading: boolean) {
@@ -48,7 +50,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
-         <View style={[Styles.wrapPaper]}>
+         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
             {
                loading ?
                   <>

components/home/fiturHome.tsx

@@ -13,10 +13,10 @@ export default function FiturHome() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
          <View style={[Styles.rowSpaceBetween]}>
-            <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+            <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
-            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+            <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
-            <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+            <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
-            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }} />
+            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color={colors.icon} />} text="Semua" onPress={() => { router.push('/feature') }} />
          </View>
       </View>
    )

components/home/headerRightHome.tsx

@@ -29,7 +29,7 @@ export function HeaderRightHome() {
 
 
    return (
-      <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
+      <View style={[Styles.rowSpaceBetween, { width: 90 }]}>
          <ButtonHeader item={<Feather name="search" size={18} color="white" />} onPress={() => { router.push('/search') }} />
          <ButtonHeader valueTop={notification > 0 ? true : false} item={<Feather name="bell" size={18} color="white" />} onPress={() => { router.push('/notification') }} />
          <ButtonHeader item={<Feather name="user" size={18} color="white" />} onPress={() => { router.push('/profile') }} />

components/home/projectHome.tsx

@@ -10,6 +10,7 @@ import PaperGridContent from "../paperGridContent";
 import ProgressBar from "../progressBar";
 import Skeleton from "../skeleton";
 import Text from "../Text";
+import { useTheme } from "@/providers/ThemeProvider";
 
 type Props = {
    id: string
@@ -26,6 +27,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
    const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
+   const { colors } = useTheme();
 
    async function handleData(loading: boolean) {
       try {
@@ -72,7 +74,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
                         <PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
                            <ProgressBar value={data[index].progress} category="carousel" />
                            <View style={[Styles.rowSpaceBetween]}>
-                              <Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
+                              <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data[index].createdAt}</Text>
                               <LabelStatus
                                  size="default"
                                  category={

components/labelStatus.tsx

@@ -1,4 +1,4 @@
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import { useTheme } from "@/providers/ThemeProvider";
 import Styles from "@/constants/Styles";
 import { View, StyleProp, ViewStyle } from "react-native";
 import Text from "./Text";
@@ -10,10 +10,20 @@ type Props = {
    style?: StyleProp<ViewStyle>
 }
 export default function LabelStatus({ category, text, size, style }: Props) {
+   const { colors } = useTheme();
+
+   const backgroundColor = {
+      primary: colors.primary,
+      success: colors.success,
+      warning: colors.warning,
+      error: colors.error,
+      secondary: colors.dimmed,
+   }[category] || 'gray'; // Removed ColorsStatus[category]?.backgroundColor as ColorsStatus is removed
+
    return (
       <View style={[
          size == "small" ? Styles.labelStatusSmall : Styles.labelStatus,
-         ColorsStatus[category],
+         { backgroundColor },
          Styles.round10,
          Styles.contentItemCenter,
          style

components/paperGridContent.tsx

@@ -18,8 +18,8 @@ export default function PaperGridContent({ content, children, title, headerColor
    const { colors } = useTheme();
    return (
       <Pressable onPress={onPress}>
-         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
+         <View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
-            <View style={[Styles.headerPaperGrid]}>
+            <View style={[Styles.headerPaperGrid, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
                <Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
             </View>
             <View style={[

components/wrapTab.tsx

@@ -0,0 +1,16 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import { View } from "react-native";
+
+type Props = {
+   children: React.ReactNode
+}
+
+export default function WrapTab({ children }: Props) {
+   const { colors } = useTheme()
+   return (
+      <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+         {children}
+      </View>
+   )
+}

constants/Colors.ts

@@ -4,22 +4,34 @@ const tintColorDark = '#fff';
 export const Colors = {
   light: {
     text: '#11181C',
-    background: '#f4f9fd',
+    background: '#f7f7f7ff',
     tint: tintColorLight,
     primary: '#19345E',
-    icon: '#687076',
+    icon: '#1F3C88',
     card: '#ffffff',
     tabIconDefault: '#687076',
-    tabIconSelected: tintColorLight,
+    tabActive: '#2563EB',
+    header: '#234881',
+    homeGradient: '#346CC4',
+    dimmed: '#6B7280',
+    success: '#40C057',
+    warning: '#FBBF24',
+    error: '#F87171',
   },
   dark: {
     text: '#ECEDEE',
-    background: '#151718',
+    background: '#0F1B2D',
     tint: tintColorDark,
     primary: '#19345E',
-    icon: '#9BA1A6',
+    icon: '#9DB9E8',
-    card: '#232526', // slightly lighter than background #151718
+    card: '#16233A', // slightly lighter than background #151718
     tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
+    tabActive: '#0166FE',
+    header: '#0E294C',
+    homeGradient: '#123A6F',
+    dimmed: '#9AAED1',
+    success: '#1F6F43',
+    warning: '#D97706',
+    error: '#DC2626',
   },
 };

constants/Headers.ts

@@ -1,4 +1,4 @@
-const bgColorDefault = '#19345E';
+const bgColorDefault = '#a5e816ff';
 
 export const Headers = {
    shadow: {

constants/Styles.ts

@@ -151,6 +151,9 @@ const Styles = StyleSheet.create({
    ml25: {
       marginLeft: 25
    },
+   p0: {
+      padding: 0
+   },
    pb05: {
       paddingBottom: 5
    },
@@ -202,9 +205,18 @@ const Styles = StyleSheet.create({
    p20: {
       padding: 20
    },
+   round05: {
+      borderRadius: 5
+   },
+   round08: {
+      borderRadius: 8
+   },
    round10: {
       borderRadius: 10
    },
+   round15: {
+      borderRadius: 15
+   },
    h100: {
       height: '100%'
    },
@@ -265,14 +277,12 @@ const Styles = StyleSheet.create({
       flexDirection: 'row'
    },
    btnIconHeader: {
-      backgroundColor: '#384288',
+      padding: 3,
-      padding: 7,
-      borderRadius: 100,
    },
    btnFiturMenu: {
-      backgroundColor: '#FCAA4B',
+      padding: 13,
-      padding: 10,
+      borderRadius: 15,
-      borderRadius: 100,
+      borderWidth: 1,
    },
    btnRound: {
       backgroundColor: '#19345E',
@@ -285,7 +295,7 @@ const Styles = StyleSheet.create({
    },
    btnTab: {
       alignItems: 'center',
-      paddingVertical: 10,
+      paddingVertical: 5,
       paddingHorizontal: 15,
       borderRadius: 20,
       flexDirection: 'row',
@@ -352,35 +362,36 @@ const Styles = StyleSheet.create({
    },
    wrapGridContent: {
       shadowColor: '#171717',
-      shadowOffset: { width: -2, height: 4 },
+      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.2,
+      shadowOpacity: 0.1,
-      shadowRadius: 3,
+      shadowRadius: 10,
-      elevation: 10,
+      elevation: 5,
-      borderRadius: 15,
+      borderRadius: 5,
       marginBottom: 15
    },
    wrapGridCaraousel: {
       width: '95%',
       height: 200,
       shadowColor: '#171717',
-      shadowOffset: { width: -2, height: 4 },
+      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.2,
+      shadowOpacity: 0.1,
-      shadowRadius: 3,
+      shadowRadius: 4,
-      elevation: 10,
+      elevation: 5,
-      borderRadius: 15,
+      borderRadius: 5,
+      marginLeft: 5
    },
    headerPaperGrid: {
       paddingVertical: 25,
       paddingHorizontal: 20,
       alignItems: 'center',
-      borderTopStartRadius: 15,
+      borderTopStartRadius: 5,
-      borderTopEndRadius: 15
+      borderTopEndRadius: 5
    },
    contentPaperGrid: {
       backgroundColor: 'white',
       height: 150,
-      borderBottomEndRadius: 15,
+      borderBottomEndRadius: 5,
-      borderBottomStartRadius: 15,
+      borderBottomStartRadius: 5,
       paddingHorizontal: 20,
       justifyContent: 'space-evenly'
    },
@@ -402,15 +413,20 @@ const Styles = StyleSheet.create({
    },
    contentBar: {
       height: 20,
-      backgroundColor: 'orange',
+      backgroundColor: '#3B82F6',
       borderRadius: 10,
    },
    wrapPaper: {
-      padding: 15,
+      padding: 10,
       backgroundColor: 'white',
-      borderRadius: 10,
+      borderRadius: 5,
-      borderWidth: 1,
+      // borderWidth: 1,
-      borderColor: '#d6d8f6',
+      // borderColor: '#d6d8f6',
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 5,
    },
    contentItemCenter: {
       justifyContent: 'center',
@@ -429,11 +445,10 @@ const Styles = StyleSheet.create({
       marginRight: 10
    },
    wrapItemDiscussion: {
-      padding: 10,
+      padding: 15,
-      borderRadius: 10,
+      borderRadius: 5,
       borderColor: '#d6d8f6',
-      borderWidth: 1,
+      borderBottomWidth: 1,
-      marginBottom: 10
    },
    wrapItemBorderBottom: {
       padding: 10,
@@ -543,7 +558,7 @@ const Styles = StyleSheet.create({
       marginBottom: 10,
       borderRadius: 20,
       padding: 5,
-      backgroundColor: 'white',
+      borderWidth: 1,
    },
    itemSelectModal: {
       padding: 10,
@@ -644,7 +659,7 @@ const Styles = StyleSheet.create({
    },
    headerTitle: {
       color: '#fff',
-      fontSize: 16,
+      fontSize: 18,
       fontWeight: '600',
    },
    headerSide: {
@@ -686,6 +701,13 @@ const Styles = StyleSheet.create({
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+   },
+   wrapHomeCarousel: {
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 5 },
+      shadowOpacity: 0.2,
+      shadowRadius: 5,
+      elevation: 50,
    }
 })