diff --git a/client/assets/images/avocado-image.png b/client/assets/images/avocado-image.png
new file mode 100644
index 0000000..f9eb00c
Binary files /dev/null and b/client/assets/images/avocado-image.png differ
diff --git a/client/assets/images/orange-with-bg.png b/client/assets/images/orange-with-bg.png
new file mode 100644
index 0000000..f9139a3
Binary files /dev/null and b/client/assets/images/orange-with-bg.png differ
diff --git a/client/assets/images/orange.png b/client/assets/images/orange.png
new file mode 100644
index 0000000..f01d171
Binary files /dev/null and b/client/assets/images/orange.png differ
diff --git a/client/assets/images/vegetable-logo.png b/client/assets/images/vegetable-logo.png
new file mode 100644
index 0000000..a0ac99a
Binary files /dev/null and b/client/assets/images/vegetable-logo.png differ
diff --git a/client/components/ui/allProducts.tsx b/client/components/ui/allProducts.tsx
new file mode 100644
index 0000000..89ca858
--- /dev/null
+++ b/client/components/ui/allProducts.tsx
@@ -0,0 +1,15 @@
+import { View } from "react-native";
+import ProductCard from "./productCard";
+
+export default function AllProducts() {
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/allTopOffers.tsx b/client/components/ui/allTopOffers.tsx
new file mode 100644
index 0000000..87a684c
--- /dev/null
+++ b/client/components/ui/allTopOffers.tsx
@@ -0,0 +1,9 @@
+import TopOffers from "./topOffers";
+
+export default function AllTopOffers() {
+ return (
+ <>
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/category.tsx b/client/components/ui/category.tsx
new file mode 100644
index 0000000..d7a350e
--- /dev/null
+++ b/client/components/ui/category.tsx
@@ -0,0 +1,25 @@
+import { Image, Text, View } from "react-native";
+
+const src: Record = {
+ vegetable: require("@/assets/images/vegetable-logo.png"),
+};
+
+type CategoryPropsType = {
+ title?: string;
+ imgName?: string,
+ imageMap?: Record;
+};
+
+export default function Category({ title = "vegetable", imgName = "vegetable", imageMap = src }: CategoryPropsType) {
+ const imageSource = imageMap[imgName] || imageMap["vegetable"];
+ return (
+ <>
+
+
+
+
+ {title}
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/homeNav.tsx b/client/components/ui/homeNav.tsx
new file mode 100644
index 0000000..039a30f
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ Home
+
+
+
+ Deals
+
+
+
+ Orders
+
+
+
+ Account
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/productCard.tsx b/client/components/ui/productCard.tsx
new file mode 100644
index 0000000..c5fc05b
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+ {name}
+ ${perkg}/kg
+ ${rate}
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/shopByCategory.tsx b/client/components/ui/shopByCategory.tsx
new file mode 100644
index 0000000..d5482b5
--- /dev/null
+++ b/client/components/ui/shopByCategory.tsx
@@ -0,0 +1,28 @@
+import { ScrollView } from "react-native";
+import Category from "./category";
+
+export default function ShopByCategory() {
+ return (
+ <>
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/components/ui/topOffers.tsx b/client/components/ui/topOffers.tsx
new file mode 100644
index 0000000..1063d7b
--- /dev/null
+++ b/client/components/ui/topOffers.tsx
@@ -0,0 +1,22 @@
+import { Image, Pressable, Text, View } from "react-native";
+
+export default function TopOffers() {
+ return (
+ <>
+
+
+ Top deal!
+
+ Fresh avocado upto 15% off
+
+
+ Shop now
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/client/src/screens/HomeScreenNew.tsx b/client/src/screens/HomeScreenNew.tsx
new file mode 100644
index 0000000..1716ded
--- /dev/null
+++ b/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 */}
+
+
+ {/* Location and profile wrapper */}
+
+
+
+
+ Delivery
+
+
+ #622 Bacagon, Chandigarh
+
+
+
+
+
+
+ {/* Search bar wrapper */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Shop by category wrapper */}
+
+ Shop by category
+
+
+
+
+
+
+ {/* Top deal & offers wrapper */}
+
+
+
+ {/* Top selling wrapper */}
+
+
+ Top selling
+
+ See all
+
+
+
+
+
+
+
+ {/* Nav wrapper */}
+
+
+
+
+
+ );
+};
\ No newline at end of file