Homepage changes

client/components/ui/allProducts.tsx

@@ -0,0 +1,15 @@
+import { View } from "react-native";
+import ProductCard from "./productCard";
+
+export default function AllProducts() {
+    return (
+        <>
+            <View className="flex-row flex-wrap">
+                <ProductCard />
+                <ProductCard />
+                <ProductCard />
+                <ProductCard />
+            </View>
+        </>
+    );
+};

client/components/ui/allTopOffers.tsx

@@ -0,0 +1,9 @@
+import TopOffers from "./topOffers";
+
+export default function AllTopOffers() {
+    return (
+        <>
+            <TopOffers />
+        </>
+    );
+};

client/components/ui/category.tsx

@@ -0,0 +1,25 @@
+import { Image, Text, View } from "react-native";
+
+const src: Record<string, any> = {
+    vegetable: require("@/assets/images/vegetable-logo.png"),
+};
+
+type CategoryPropsType = {
+    title?: string;
+    imgName?: string,
+    imageMap?: Record<string, number>;
+};
+
+export default function Category({ title = "vegetable", imgName = "vegetable", imageMap = src }: CategoryPropsType) {
+    const imageSource = imageMap[imgName] || imageMap["vegetable"];
+    return (
+        <>
+            <View className="m-2">
+                <View className="bg-[#baf2d7] rounded-2xl">
+                    <Image source={imageSource} className="w-24 h-24" />
+                </View>
+                <Text className="capitalize text-center mt-1 text-base">{title}</Text>
+            </View>
+        </>
+    );
+};

client/components/ui/homeNav.tsx

@@ -0,0 +1,30 @@
+import { Text, View } from "react-native";
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Fontisto from '@expo/vector-icons/Fontisto';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+
+export default function HomeNav() {
+    return (
+        <>
+            <View className="w-full p-5 flex-row justify-between rounded-2xl bg-white" style={{ elevation: 10 }}>
+                <View className="items-center">
+                    <FontAwesome5 name="home" size={24} color="gray" />
+                    <Text className="text-gray-500">Home</Text>
+                </View>
+                <View className="items-center">
+                    <AntDesign name="tag" size={24} color="gray" />
+                    <Text className="text-gray-500">Deals</Text>
+                </View>
+                <View className="items-center">
+                    <Fontisto name="shopping-bag-1" size={24} color="gray" />
+                    <Text className="text-gray-500">Orders</Text>
+                </View>
+                <View className="items-center">
+                    <FontAwesome name="user" size={24} color="gray" />
+                    <Text className="text-gray-500">Account</Text>
+                </View>
+            </View>
+        </>
+    );
+};

client/components/ui/productCard.tsx

@@ -0,0 +1,22 @@
+import { Image, Text, View } from "react-native";
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+export default function ProductCard({ name = "orange", rate = 4.99, perkg = 4.55 }) {
+    return (
+        <>
+            <View className="relative m-2">
+                <Image source={require("@/assets/images/orange-with-bg.png")} className="w-48 h-64 rounded-2xl" />
+                <View className="absolute top-36 left-5 bottom-0 right-0 flex-row justify-between">
+                    <View className="top-1">
+                        <Text className="text-2xl font-base capitalize">{name}</Text>
+                        <Text className="text-lg text-gray-600">${perkg}/kg</Text>
+                        <Text className="text-xl font-medium mt-2">${rate}</Text>
+                    </View>
+                    <View className="top-11">
+                        <MaterialIcons name="add-shopping-cart" size={30} color="white" className="bg-[#ffa408] p-4 rounded-tl-2xl rounded-br-xl" />
+                    </View>
+                </View>
+            </View>
+        </>
+    );
+};

client/components/ui/shopByCategory.tsx

@@ -0,0 +1,28 @@
+import { ScrollView } from "react-native";
+import Category from "./category";
+
+export default function ShopByCategory() {
+    return (
+        <>
+            <ScrollView
+                className="flex-row"
+                horizontal={true}
+                showsHorizontalScrollIndicator={false}
+            >
+                {/* <Category title="fruit" imgName="logo" imageMap={{ logo: require("@/assets/images/icon.png") }} /> */}
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+                <Category />
+            </ScrollView>
+        </>
+    );
+};

client/components/ui/topOffers.tsx

@@ -0,0 +1,22 @@
+import { Image, Pressable, Text, View } from "react-native";
+
+export default function TopOffers() {
+    return (
+        <>
+            <View className="p-5 bg-orange-100 rounded-3xl flex-row">
+                <View className="w-1/2">
+                    <Text className="capitalize text-xl text-blue-800 font-medium">Top deal!</Text>
+                    <Text className="capitalize text-2xl text-blue-900 font-semibold my-2">
+                        Fresh avocado upto 15% off
+                    </Text>
+                    <Pressable>
+                        <Text className="capitalize text-white bg-blue-900 px-4 py-2 my-4 rounded-full text-center w-36 font-medium">Shop now</Text>
+                    </Pressable>
+                </View>
+                <View className="w-1/2 justify-center items-center">
+                    <Image source={require("@/assets/images/avocado-image.png")} className="w-48 h-28" />
+                </View>
+            </View>
+        </>
+    );
+};

client/src/screens/HomeScreenNew.tsx

@@ -0,0 +1,81 @@
+import { View, SafeAreaView, Text, TextInput, Pressable, ScrollView } from "react-native";
+import ShopByCategory from "@/components/ui/shopByCategory";
+import HomeNav from "@/components/ui/homeNav";
+import AllProducts from "@/components/ui/allProducts";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import Fontisto from '@expo/vector-icons/Fontisto';
+import AllTopOffers from "@/components/ui/allTopOffers";
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+
+export default function HomeScreenNew() {
+    return (
+        <>
+            {/* Root Wrapper */}
+            <SafeAreaView className="p-6 pt-2 pb-24 flex-1 bg-white">
+                <ScrollView showsVerticalScrollIndicator={false}>
+                    {/* Location and profile wrapper */}
+                    <View className="flex-row justify-between mb-4">
+                        <View>
+                            <View className="flex-row">
+                                <FontAwesome name="location-arrow" size={24} color="#56daa3" />
+                                <Text className="text-2xl ml-2 font-medium">Delivery</Text>
+                            </View>
+                            <View>
+                                <Text className="text-lg text-gray-600">#622 Bacagon, Chandigarh</Text>
+                            </View>
+                        </View>
+                        <View className="justify-center">
+                            <FontAwesome name="user-circle" size={30} color="#5cdf9e" />
+                        </View>
+                    </View>
+                    {/* Search bar wrapper */}
+                    <View className="flex-row my-4">
+                        <View className="bg-gray-100 p-2 rounded-xl flex-1 flex-row items-center">
+                            <Pressable>
+                                <Fontisto name="search" size={24} color="black" className="mx-2" />
+                            </Pressable>
+                            <TextInput
+                                placeholder="Search Grocery"
+                                className="p-2 text-black text-lg"
+                            />
+                        </View>
+                        <View className="bg-[#e2f7f0] rounded-lg ml-4 p-2 px-4 justify-center">
+                            <Pressable>
+                                <FontAwesome6 name="sliders" size={24} color="#56daa3" />
+                            </Pressable>
+                        </View>
+                    </View>
+                    {/* Shop by category wrapper */}
+                    <View className="my-2">
+                        <Text className="text-2xl capitalize font-medium">Shop by category</Text>
+                        <View className="mt-4">
+                            <View>
+                                <ShopByCategory />
+                            </View>
+                        </View>
+                    </View>
+                    {/* Top deal & offers wrapper */}
+                    <View className="my-4 mx-2">
+                        <AllTopOffers />
+                    </View>
+                    {/* Top selling wrapper */}
+                    <View className="my-4">
+                        <View className="flex-row justify-between">
+                            <Text className="capitalize text-xl font-medium">Top selling</Text>
+                            <Pressable>
+                                <Text className="capitalize text-lg font-medium">See all</Text>
+                            </Pressable>
+                        </View>
+                        <View className="mt-5">
+                            <AllProducts />
+                        </View>
+                    </View>
+                </ScrollView>
+                {/* Nav wrapper */}
+                <View className="absolute bottom-6 left-6">
+                    <HomeNav />
+                </View>
+            </SafeAreaView>
+        </>
+    );
+};