Homescreen Added

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 (
-    <View style={styles.container}>
-    <Welcomescreen/>
-   
+    <View >
+
+
     </View>
   );
 }
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
+

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

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

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

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

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

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

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

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 (
+    <View style={styles.container}>
+      <Text style={styles.sehajText}>Sehaj #{sehajNumber}</Text>
+      <Text style={styles.dateText}>{completionDate}</Text>
+    </View>
+  );
+};
+
+export default CompletedPathCard;

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 (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.sehajText}>Sehaj #{sheajPathNumber}</Text>
+        <Text style={styles.angText}>
+          Ang <Text style={styles.angNumber}>{angNumber}</Text>
+        </Text>
+      </View>
+      <View style={styles.progressContainer}>
+        <Svg width={size} height={size}>
+          <Defs>
+            <LinearGradient id="filledGrad" x1="16.15%" y1="85.35%" x2="85.35%" y2="16.15%">
+              <Stop offset="0%" stopColor="#2459AD" />
+              <Stop offset="100%" stopColor="#0D2346" />
+            </LinearGradient>
+            <LinearGradient id="unfilledGrad" x1="16.15%" y1="85.35%" x2="85.35%" y2="16.15%">
+              <Stop offset="0%" stopColor="rgba(36, 89, 173, 0.1)" />
+              <Stop offset="100%" stopColor="rgba(13, 35, 70, 0.1)" />
+            </LinearGradient>
+          </Defs>
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            fill="none"
+            stroke="url(#unfilledGrad)"
+            strokeWidth={strokeWidth}
+          />
+          <Path
+            d={calculateArcPath(center, center, radius, startAngle, endAngle)}
+            fill="none"
+            stroke="url(#filledGrad)"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+          />
+        </Svg>
+      </View>
+    </View>
+  );
+};
+
+export default ProgressCard;