Home page

.gitignore

@@ -0,0 +1 @@
+node_modules

client/App.tsx

@@ -1,24 +1,19 @@
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, ScrollView } from "react-native";
 
 import "./global.css";
 
-import TestingScreen from "./screens/TestingScreen";
+import Home from "./screens/home";
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <TestingScreen />
-    </View>
+    <ScrollView
+      className="flex-1 bg-white"
+      contentContainerClassName="items-center justify-start"
+      bounces={false}                
+      alwaysBounceVertical={false} 
+      overScrollMode="never"> 
+
+      <Home/>
+    </ScrollView>
   );
 }
-
-// className="flex-1 bg-white items-stretch justify-center"
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

client/components/Button.tsx

@@ -2,18 +2,20 @@ import { Text, TouchableOpacity, View } from "react-native";
 
 type ButtonProps = {
   label: string;
+  color?: string;
+  className?: string ;
   onPress: () => void;
 };
 
-export default function Button({ label, onPress }: ButtonProps) {
+export default function Button({ label, className, color, onPress }: ButtonProps) {
   return (
     <View className="items-center justify-center">
       <TouchableOpacity
         onPress={onPress}
         activeOpacity={0.7}
-        className="border border-[#121B49] p-[10px] rounded-[30px]"
+        className={`border border-[#121B49] p-[10px] rounded-[30px] ${className}`}
       >
-        <Text className="text-black">{label}</Text>
+        <Text className={`text-center ${color}`}>{label}</Text>
       </TouchableOpacity>
     </View>
   );

client/components/Card.tsx

@@ -1,19 +1,21 @@
 import React, { FC } from "react";
-import { View, Text } from "react-native";
+import { View, Text, ViewStyle} from "react-native";
 import { LucideIcon } from "lucide-react-native";
 
 type CardProps = {
   className?: string;
   icon?: LucideIcon;
   label: string;
   description?: string;
+  color?: string;
+  style?: ViewStyle;
 };
 
-const Card: FC<CardProps> = ({ className, icon: Icon, label, description }) => {
+const Card: FC<CardProps> = ({ className, icon: Icon, label, description, color}) => {
   return (
-    <View className={`bg-white border-gray-300 rounded-[8px] p-[20px] shadow-lg ${className}`}>
+    <View className={`bg-white border-gray-300 rounded-[8px] p-[21px] shadow-lg ${className}`}>
       <View className="flex-col mb-2 gap-4">
-        {Icon && <Icon size={24} color="#0F172A"  />}
+        {Icon && <Icon size={28} color={color}  />}
         <Text className="text-[24px] font-normal text-slate-900 mt-[13px]">{label}</Text>
       </View >
       {description && (

client/components/SearchBar.tsx

@@ -1,16 +1,29 @@
 import React, { forwardRef } from "react";
-import { TextInput, TextInputProps, View} from "react-native";
-
+import { View, TextInput, TextInputProps } from "react-native";
+import { Search } from "lucide-react-native";
 
 const SearchBar = forwardRef<TextInput, TextInputProps>(
   ({ className, ...props }, ref) => {
     return (
-      <View>
-        <TextInput className={`border-[0.5px] border-[#ccc] w-4/5 rounded-[10px] p-[14px] text-[18px] ${className}`} ref={ref} placeholderTextColor="#6b7280" {...props} />
+      <View
+        className={`flex-row items-center bg-white rounded-[4px] w-[359px] p-[16px] ${className}`}
+        style={{ gap: 8 }}
+      >
+        {/* Search Icon */}
+        <Search size={20} color="#575757" />
+
+        {/* Input Field */}
+        <TextInput
+          ref={ref}
+          className="flex-1 text-[16px] text-[#575757]"
+          placeholderTextColor="#A1A1A1"
+          {...props}
+        />
       </View>
     );
   }
 );
 
+SearchBar.displayName = "SearchBar";
 
 export default SearchBar;

client/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/metro-runtime": "~6.1.1",
     "expo": "~54.0.1",
+    "expo-linear-gradient": "~15.0.7",
     "expo-status-bar": "~3.0.7",
     "firebase": "^12.3.0",
     "lucide-react-native": "^0.545.0",
@@ -19,6 +20,8 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-reanimated": "^4.1.3",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.0",
     "tailwindcss": "^3.4.18"
   },

client/screens/TestingScreen.tsx

@@ -1,36 +1,44 @@
-import { StyleSheet, Text, View } from "react-native";
-import { useState } from "react";
+import React, { useState } from "react";
+import { ScrollView, View, Text } from "react-native";
 import { Star } from "lucide-react-native";
-
 import SearchBar from "../components/SearchBar";
 import Card from "../components/Card";
-
 import Button from "../components/Button";
+import Home from "./home"; 
 
 export default function App() {
   const [input, setInput] = useState("");
 
   return (
-    <View className="flex-1 bg-white items-center justify-center">
-      <Text>This is a testing page.</Text>
-      {/* Add New Components here */}
-      <SearchBar
-        className="mt-4 w-full"
-        placeholder="searching.."
-        value={input}
-        onChangeText={(text) => setInput(text)}
-      />
+    <ScrollView className="flex-1 bg-white">
+      <View className="items-center justify-center p-6">
+        <Text className="text-lg font-semibold mb-4">
+          This is a testing page.
+        </Text>
+
+
+        <Home />
+
+
+        <SearchBar
+          className="mt-4 w-full"
+          placeholder="searching.."
+          value={input}
+          onChangeText={(text) => setInput(text)}
+        />
+
+        <Card
+          icon={Star}
+          label="Health Insights"
+          description="View detailed analytics about your recent health data."
+          className="w-[90%] mt-8 mb-8"
+        />
 
-      <Card
-        icon={Star}
-        label="Health Insights"
-        description="View detailed analytics about your recent health data."
-        className="w-[90%] mt-8 mb-8"
-      />
-      <Button
-        label="Test Button"
-        onPress={() => console.log("✅", "The button was pressed!")}
-      />
-    </View>
+        <Button
+          label="Test Button"
+          onPress={() => console.log("✅", "The button was pressed!")}
+        />
+      </View>
+    </ScrollView>
   );
 }