diff --git a/App.js b/App.js index a70323c..be42c66 100644 --- a/App.js +++ b/App.js @@ -1,19 +1,25 @@ import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; +import { useFonts } from 'expo-font'; import Welcomescreen from "./App/screens/Welcomescreen" export default function App() { + let [fontsLoaded] = useFonts({ + 'BrandonGrotesque-Regular': require('./App/assets/fonts/brandon-grotesque-regular.otf'), + 'BrandonGrotesque-Bold': require('./App/assets/fonts/brandon-grotesque-bold.otf'), + 'BrandonGrotesque-Light': require('./App/assets/fonts/brandon-grotesque-light.otf'), + 'BrandonGrotesque-Medium': require('./App/assets/fonts/brandon-grotesque-medium.otf'), + 'BrandonGrotesque-Black': require('./App/assets/fonts/brandon-grotesque-black.otf'), + }); + + if (!fontsLoaded) { + return null; + } + return ( - - - + + + ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#fff", - alignItems: "center", - justifyContent: "center", - }, -}); \ No newline at end of file + diff --git a/App/assets/background.png b/App/assets/background.png new file mode 100644 index 0000000..fbedc3c Binary files /dev/null and b/App/assets/background.png differ diff --git a/App/assets/fonts/brandon-grotesque-black.otf b/App/assets/fonts/brandon-grotesque-black.otf new file mode 100644 index 0000000..2147801 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-black.otf differ diff --git a/App/assets/fonts/brandon-grotesque-black.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-black.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-black.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-bold.otf b/App/assets/fonts/brandon-grotesque-bold.otf new file mode 100644 index 0000000..e199ab1 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-bold.otf differ diff --git a/App/assets/fonts/brandon-grotesque-bold.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-bold.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-bold.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-light-italic.otf b/App/assets/fonts/brandon-grotesque-light-italic.otf new file mode 100644 index 0000000..bb30651 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-light-italic.otf differ diff --git a/App/assets/fonts/brandon-grotesque-light-italic.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-light-italic.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-light-italic.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-light.otf b/App/assets/fonts/brandon-grotesque-light.otf new file mode 100644 index 0000000..9cb1bc8 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-light.otf differ diff --git a/App/assets/fonts/brandon-grotesque-light.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-light.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-light.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-medium.otf b/App/assets/fonts/brandon-grotesque-medium.otf new file mode 100644 index 0000000..e0b9027 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-medium.otf differ diff --git a/App/assets/fonts/brandon-grotesque-medium.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-medium.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-medium.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-regular.otf b/App/assets/fonts/brandon-grotesque-regular.otf new file mode 100644 index 0000000..8388864 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-regular.otf differ diff --git a/App/assets/fonts/brandon-grotesque-regular.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-regular.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-regular.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/brandon-grotesque-thin.otf b/App/assets/fonts/brandon-grotesque-thin.otf new file mode 100644 index 0000000..c2bcb23 Binary files /dev/null and b/App/assets/fonts/brandon-grotesque-thin.otf differ diff --git a/App/assets/fonts/brandon-grotesque-thin.otf:Zone.Identifier b/App/assets/fonts/brandon-grotesque-thin.otf:Zone.Identifier new file mode 100644 index 0000000..c47ad4d --- /dev/null +++ b/App/assets/fonts/brandon-grotesque-thin.otf:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=C:\Users\sidda\Downloads\Brandon-Grotesque-Font.zip diff --git a/App/assets/fonts/recoleta-regular.otf b/App/assets/fonts/recoleta-regular.otf new file mode 100644 index 0000000..b351cf8 Binary files /dev/null and b/App/assets/fonts/recoleta-regular.otf differ diff --git a/App/assets/fullBackground.png b/App/assets/fullBackground.png new file mode 100644 index 0000000..c1f39f3 Binary files /dev/null and b/App/assets/fullBackground.png differ diff --git a/App/assets/plus-waves.png b/App/assets/plus-waves.png new file mode 100644 index 0000000..3950a98 Binary files /dev/null and b/App/assets/plus-waves.png differ diff --git a/App/components/CompletedPathCard.js b/App/components/CompletedPathCard.js new file mode 100644 index 0000000..604025e --- /dev/null +++ b/App/components/CompletedPathCard.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { View, Text, StyleSheet, useWindowDimensions } from 'react-native'; + +const CompletedPathCard = ({ sehajNumber, completionDate }) => { + const { width: screenWidth } = useWindowDimensions(); + + const styles = StyleSheet.create({ + container: { + width: screenWidth < 768 ? 130 : 156, + height: screenWidth < 768 ? 107 : 128, + backgroundColor: 'white', + borderRadius: 15, + padding: 15, + justifyContent: 'center', + alignItems: 'center', + shadowColor: '#11336A', + shadowOffset: { width: 15, height: 15 }, + shadowOpacity: 0.1, + shadowRadius: 45, + elevation: 15, + }, + sehajText: { + fontFamily: 'BrandonGrotesque-Bold', + fontSize: screenWidth < 768 ? 16 : 18, + lineHeight: screenWidth < 768 ? 24 : 26, + textAlign: 'center', + color: '#11336A', + }, + dateText: { + fontFamily: 'BrandonGrotesque-Regular', + fontSize: screenWidth < 768 ? 14 : 16, + lineHeight: screenWidth < 768 ? 20 : 22, + textAlign: 'center', + color: '#666666', + marginTop: 4, + }, + }); + + return ( + + Sehaj #{sehajNumber} + {completionDate} + + ); +}; + +export default CompletedPathCard; \ No newline at end of file diff --git a/App/components/ProgressCard.js b/App/components/ProgressCard.js new file mode 100644 index 0000000..7d3262e --- /dev/null +++ b/App/components/ProgressCard.js @@ -0,0 +1,123 @@ +import React from 'react'; +import { View, Text, StyleSheet, useWindowDimensions } from 'react-native'; +import Svg, { Circle, Path, LinearGradient, Stop, Defs } from 'react-native-svg'; + +const ProgressCard = ({ sheajPathNumber, angNumber, progress }) => { + const { width: screenWidth, height: screenHeight } = useWindowDimensions(); + + const styles = StyleSheet.create({ + container: { + width: screenWidth < 768 ? 199 : 239, + height: screenWidth < 768 ? 220 : 264, + backgroundColor: 'white', + borderRadius: 15, + padding: screenWidth < 768 ? 20 : 24, + justifyContent: 'space-between', + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 3, + }, + textContainer: { + alignItems: 'center', + marginBottom: screenWidth < 768 ? 2 : 4, + }, + sehajText: { + fontFamily: 'BrandonGrotesque-Bold', + fontSize: screenWidth < 768 ? 18 : 22, + lineHeight: screenWidth < 768 ? 26 : 31, + textAlign: 'center', + color: '#11336A', + }, + angText: { + fontFamily: 'BrandonGrotesque-Regular', + fontSize: screenWidth < 768 ? 14 : 17, + lineHeight: screenWidth < 768 ? 20 : 24, + textAlign: 'center', + color: '#666666', + }, + angNumber: { + fontFamily: 'BrandonGrotesque-Bold', + color: '#11336A', + }, + progressContainer: { + width: screenWidth < 768 ? 53 : 72, + height: screenWidth < 768 ? 53 : 72, + justifyContent: 'center', + alignItems: 'center', + marginTop: 'auto', + marginBottom: 'auto', + }, + }); + + const size = screenWidth < 768 ? 53 : 72; + const strokeWidth = screenWidth < 768 ? 12 : 14; + const center = size / 2; + const radius = (size - strokeWidth) / 2; + + const calculateArcPath = (x, y, radius, startAngle, endAngle) => { + const start = polarToCartesian(x, y, radius, endAngle); + const end = polarToCartesian(x, y, radius, startAngle); + const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; + return [ + "M", start.x, start.y, + "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y + ].join(" "); + }; + + const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { + const angleInRadians = ((angleInDegrees - 90) % 360) * Math.PI / 180.0; + return { + x: centerX + (radius * Math.cos(angleInRadians)), + y: centerY + (radius * Math.sin(angleInRadians)) + }; + }; + + const progressAngle = 360 * (progress / 100); + const startAngle = 0; + const endAngle = progressAngle; + + return ( + + + Sehaj #{sheajPathNumber} + + Ang {angNumber} + + + + + + + + + + + + + + + + + + + + ); +}; + +export default ProgressCard; \ No newline at end of file diff --git a/App/screens/HomeScreen.js b/App/screens/HomeScreen.js new file mode 100644 index 0000000..4a603ff --- /dev/null +++ b/App/screens/HomeScreen.js @@ -0,0 +1,200 @@ +import React from 'react'; +import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, ImageBackground } from 'react-native'; +import Svg, { Rect, LinearGradient, Stop, Defs } from 'react-native-svg'; +import ProgressCard from '../components/ProgressCard'; +import CompletedPathCard from '../components/CompletedPathCard'; +import { typography } from '../styles/typography'; + + +const HomeScreen = () => { + + + + + const inProgressPaths = [ + { number: 14, ang: 745, progress: 65 }, + { number: 15, ang: 1145, progress: 25 }, + { number: 16, ang: 500, progress: 40 }, + { number: 17, ang: 800, progress: 80 }, + ]; + + const completedPaths = [ + { number: 11, date: "4th Aug 2024" }, + { number: 10, date: "13th Jan 2024" }, + { number: 9, date: "11th Oct 2023" }, + ]; + + return ( + + + + It's a fine day to start a new Sehaj Path! + + + + + + + + + + + + + + START + + + + + + Sehaj Path in Progress: + + + {inProgressPaths.map((path, index) => ( + + + + ))} + + + + Sehaj Paths Completed: + + + {completedPaths.map((path, index) => ( + + + + ))} + + + + ); +}; + +const styles = StyleSheet.create({ + screenBorder: { + borderWidth: 4, + borderColor: '#FDC6064D', + borderStyle: 'solid', + }, + backgroundImage: { + flex: 1, + width: '100%', + height: '100%', + }, + container: { + flex: 1, + + backgroundColor: 'rgba(245, 245, 245, 0.1)', + padding: 20, + }, + header: { + ...typography.recoletaRegular, + fontSize: 24, + color: '#11336A', + textAlign: 'center', + marginBottom: 20, + marginTop: 40, + + }, + startButtonContainer: { + width: 112, + height: 48, + alignSelf: 'center', + marginBottom: 30, + }, + startButton: { + width: 112, + height: 48, + backgroundColor: 'transparent', + }, + startButtonContent: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'transparent', + }, + startButtonText: { + ...typography.balooRegular, + color: 'white', + fontSize: 16, + marginRight: 5, + }, + plusWaves: { + width: 20, + height: 20, + marginLeft: 5, + }, + sectionTitleContainer: { + alignItems: 'center', + marginBottom: 15, + marginTop: 20, + }, + sectionTitle: { + fontFamily: 'BrandonGrotesque-Medium', + fontSize: 14, + fontWeight: '390', + lineHeight: 20, + textAlign: 'center', + color: '#11336A', + }, + horizontalScroll: { + flexDirection: 'row', + marginBottom: 40, + }, + cardWrapper: { + marginRight: 15, + }, + completedCardWrapper: { + marginRight: 15, + marginBottom: 15, + }, + completedText: { + ...typography.bold, + fontSize: 16, + color: '#11336A', + }, + completedAngText: { + ...typography.regular, + fontSize: 14, + color: '#666666', + }, + screenBorder: { + width: 393, + height: 852, + position: 'absolute', + top: -444, + left: 1564, + borderRadius: 15, + borderTopWidth: 4, + borderTopColor: 'rgba(253, 198, 6, 0.3)', + borderRightWidth: 0, + borderBottomWidth: 0, + borderLeftWidth: 0, + opacity: 1, + } +}); + +export default HomeScreen; \ No newline at end of file diff --git a/App/styles/typography.js b/App/styles/typography.js new file mode 100644 index 0000000..800111a --- /dev/null +++ b/App/styles/typography.js @@ -0,0 +1,41 @@ +import { StyleSheet } from 'react-native'; + +export const typography = StyleSheet.create({ + regular: { + fontFamily: 'BrandonGrotesque-Regular', + }, + bold: { + fontFamily: 'BrandonGrotesque-Bold', + }, + light: { + fontFamily: 'BrandonGrotesque-Light', + }, + medium: { + fontFamily: 'BrandonGrotesque-Medium', + }, + black: { + fontFamily: 'BrandonGrotesque-Black', + }, + balooRegular: { + fontFamily: 'BalooPaaji2-Regular', + }, + balooMedium: { + fontFamily: 'BalooPaaji2-Medium', + }, + balooBold: { + fontFamily: 'BalooPaaji2-Bold', + }, + balooExtraBold: { + fontFamily: 'BalooPaaji2-ExtraBold', + }, + balooSemiBold: { + fontFamily: 'BalooPaaji2-SemiBold', + }, + recoletaRegular: { + fontFamily: 'Recoleta-Regular', + }, + +}); + + + diff --git a/app.json b/app.json index 4ed6b53..5a727b8 100644 --- a/app.json +++ b/app.json @@ -27,4 +27,4 @@ "expo-font" ] } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 54f847e..dfd7013 100644 --- a/package.json +++ b/package.json @@ -9,20 +9,22 @@ "web": "expo start --web" }, "dependencies": { + "@expo-google-fonts/work-sans": "^0.2.3", "@expo/metro-runtime": "~3.2.3", - "@react-navigation/native": "^6.1.9", - "@react-navigation/stack": "^6.3.20", + "@react-navigation/native": "^6.1.18", + "@react-navigation/stack": "^6.4.1", "axios": "^1.7.7", - "expo": "~51.0.28", + "expo-font": "^12.0.10", "expo-linear-gradient": "^13.0.2", - "expo-status-bar": "~1.12.1", - "react-native-svg": "^15.6.0", + "expo": "~51.0.28", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.5", - "react-native-safe-area-context": "4.8.2", - "react-native-screens": "~3.29.0", + "react-native-circular-progress-indicator": "^4.4.2", + "react-native-safe-area-context": "4.10.5", + "react-native-screens": "3.31.1", + "react-native-svg": "^15.7.1", "react-native-web": "~0.19.10" }, "devDependencies": {