Landing Page UI Design

StressPrediction/App.js

-import { StyleSheet, View } from 'react-native';
-import AddData from './src';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import LandingPage from './src/landingPage';
+import AddData from './src/index';
 
 export default function App() {
+  const [showAddData, setShowAddData] = useState(false);
+
+  const handleGoToAddData = () => {
+    setShowAddData(true);
+  };
+
+  const handleGoBack = () => {
+    setShowAddData(false);
+  };
+
   return (
-    <View style={styles.container}>
-      <AddData />
+    <View style={{ flex: 1 }}>
+      {!showAddData ? (
+        <LandingPage onGoToAddData={handleGoToAddData} />
+      ) : (
+        <AddData onGoBack={handleGoBack} />
+      )}
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

StressPrediction/package-lock.json

@@ -8,11 +8,18 @@
       "name": "stressprediction",
       "version": "1.0.0",
       "dependencies": {
+        "@react-native-community/masked-view": "^0.1.11",
+        "@react-navigation/native": "^6.1.16",
+        "@react-navigation/native-stack": "^6.9.25",
         "expo": "~50.0.13",
         "expo-status-bar": "~1.11.1",
         "firebase": "^9.6.11",
         "react": "18.2.0",
-        "react-native": "0.73.5"
+        "react-native": "0.73.5",
+        "react-native-gesture-handler": "^2.15.0",
+        "react-native-reanimated": "^3.8.0",
+        "react-native-safe-area-context": "^4.9.0",
+        "react-native-screens": "^3.29.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0"
@@ -2007,6 +2014,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -6179,6 +6197,16 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@react-native-community/masked-view": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz",
+      "integrity": "sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==",
+      "deprecated": "Repository was moved to @react-native-masked-view/masked-view",
+      "peerDependencies": {
+        "react": ">=16.0",
+        "react-native": ">=0.57"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.73.1",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.73.1.tgz",
@@ -6612,6 +6640,99 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-navigation/core": {
+      "version": "6.4.15",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.15.tgz",
+      "integrity": "sha512-/ti6dulU68bsR3+zM9rlrqOUG8x7Xor35B4W1sA/AbDC0b1veexMGUQHXeyF+qh/3loG8JTwBUgTsPXkoLO2mw==",
+      "dependencies": {
+        "@react-navigation/routers": "^6.1.9",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.9"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "1.3.29",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.29.tgz",
+      "integrity": "sha512-sMkqqQHlxdBxrBVw6E2a3LJjb9Hrb1ola8+zRgJn4Ox8iKtjqtWEdg349DPWU77VpIekcMLsqQvEtZox3XkXgA==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.1.16",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.16.tgz",
+      "integrity": "sha512-nlP9RrpNs0ogMQpYXURIIMZYOYvg51jvcC3wfE9GFKQO0Av+GsvWd/kPtliWzWmtFwPnqiu5dw4bCvNtfsB3bA==",
+      "dependencies": {
+        "@react-navigation/core": "^6.4.15",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "6.9.25",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.25.tgz",
+      "integrity": "sha512-bhJ5NC9RxJyG8O3kLA2Axv699Wih8MoPCUWD6bWFIwLC/k02bXOQd/a19hEJqlFd+YLA343z897yybpHtcEhZQ==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.29",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -6660,6 +6781,11 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.45",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -7884,6 +8010,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -8419,6 +8553,11 @@
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.11.1.tgz",
       "integrity": "sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg=="
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -8525,6 +8664,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -8891,6 +9038,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -11991,6 +12151,23 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -12080,6 +12257,17 @@
         }
       }
     },
+    "node_modules/react-freeze": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
+      "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12139,6 +12327,64 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz",
+      "integrity": "sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.8.0.tgz",
+      "integrity": "sha512-xoG4+nf+lSmzv37mjTUIT0gYNEIr2Mb8WXgmqR8deCJk8CC6lXT0HRpshTPVAF00LvdzrD2W/rCpiBdHN5FW2w==",
+      "dependencies": {
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-transform-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.9.0.tgz",
+      "integrity": "sha512-/OJD9Pb8IURyvn+1tWTszWPJqsbZ4hyHBU9P0xhOmk7h5owSuqL0zkfagU0pg7Vh0G2NKQkaPpUKUMMCUMDh/w==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-screens": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.29.0.tgz",
+      "integrity": "sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==",
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -12800,6 +13046,14 @@
         "node": "*"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -12875,6 +13129,14 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -13492,6 +13754,14 @@
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
       "integrity": "sha512-EGXjXJZhIHiQMK2pQukuFcL303nskqIRzWvPvV5O8miOfwoUb9G+a/Cld60kUyeaybEI94wvVClT10DtfeAExA=="
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -13547,6 +13817,11 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

StressPrediction/package.json

@@ -9,11 +9,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/native": "^6.1.16",
+    "@react-navigation/native-stack": "^6.9.25",
     "expo": "~50.0.13",
     "expo-status-bar": "~1.11.1",
     "firebase": "^9.6.11",
     "react": "18.2.0",
-    "react-native": "0.73.5"
+    "react-native": "0.73.5",
+    "react-native-gesture-handler": "^2.15.0",
+    "react-native-reanimated": "^3.8.0",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-screens": "^3.29.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

StressPrediction/src/index.js

-import { View, Text, StyleSheet, TextInput, Button } from 'react-native'
-import React, { useState } from 'react'
-import { db } from '../config'
-import { ref, set } from 'firebase/database'
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, Button, Image } from 'react-native';
+import { db } from '../config';
+import { ref, set } from 'firebase/database';
 
-const AddData = () => {
+const AddData = ({ onGoBack }) => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
 
-    //function to add data to forebase realtime db
   const dataAddOn = () => {
-        set(ref(db, 'posts/' + title),{
+    set(ref(db, 'posts/' + title), {
       title: title,
       body: body,
     });
-        setTitle('')
-        setBody('')
-    }
+    setTitle('');
+    setBody('');
+  };
 
   return (
     <View style={styles.container}>
-            <Text style={styles.header}>Stress Tracker & Wellness Companion</Text>
+      <Text style={styles.header}>STRESS TRACKER </Text>
+      <Image
+        source={require('../images/Home.jpg')}
+        style={styles.image}
+      />
       <TextInput
-              placeholder='Job Satisfication'
+        placeholder='Job Satisfaction'
         value={title}
         onChangeText={(text) => setTitle(text)}
         style={styles.input}
@@ -36,11 +39,15 @@ const AddData = () => {
         title='Add Data'
         onPress={dataAddOn}
       />
+      <Button 
+        title='Back to Landing Page'
+        onPress={onGoBack}
+      />
     </View>
-    )
-}
+  );
+};
 
-export default AddData
+export default AddData;
 
 const styles = StyleSheet.create({
   container: {
@@ -48,18 +55,22 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   header:{
-        fontSize:20,
-        textAlign:'center',
-        marginTop:50,
-        color:'red',
+    fontSize: 40,
+    textAlign: 'center',
+    marginTop: 50,
+    color: 'black',
     fontWeight: 'bold'
   },
   input:{
-        borderWidth:1,
-        borderColor:'black',
-        margin:10,
-        padding:10,
-        fontSize:18,
-        borderRadius:6,
+    borderWidth: 1,
+    borderColor: 'black',
+    margin: 10,
+    padding: 10,
+    fontSize: 18,
+    borderRadius: 6,
+  },
+  image: {
+    width: '100%',
+    height: 200,
   }
-  });
+});
\ No newline at end of file

StressPrediction/src/landingPage.js

+import React, { useRef, useEffect } from 'react';
+import { View, Text, TouchableOpacity, ImageBackground, StyleSheet, Animated } from 'react-native';
+
+const LandingPage = ({ onGoToAddData }) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text>S T R E S S      T R A C K E R</Text>
+      <ImageBackground
+        source={require('../images/img.jpg')}
+        style={styles.backgroundImage}
+      >
+        <Animated.View
+          style={{
+            opacity: fadeAnim,
+          }}
+        >
+        </Animated.View>
+      </ImageBackground>
+      <View style={styles.rectangle}>
+        <Animated.View
+          style={{
+            opacity: fadeAnim,
+          }}
+        >
+          <TouchableOpacity style={styles.button} onPress={onGoToAddData}>
+            <Text style={styles.buttonText}>GET STARTED</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backgroundImage: {
+    width: 400,
+    height: 400,
+    resizeMode: 'cover',
+    overflow: 'hidden',
+    borderRadius: 300,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rectangle: {
+    width: '100%',
+    height: 50,
+    backgroundColor: '#F0B27A',
+    position: 'absolute',
+    bottom: 0,
+    borderTopLeftRadius: 40,
+    borderTopRightRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    backgroundColor: '#F0B27A', 
+    padding: 10,
+    borderRadius: 5,
+  },
+  buttonText: {
+    color: '#273746',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});
+
+export default LandingPage;