From 9d74b482beefa67b84e66abc754e352a1b9b3e10 Mon Sep 17 00:00:00 2001
From: munezeromicha <munezerontaganiramichel@gmail.com>
Date: Wed, 29 May 2024 14:57:43 +0200
Subject: [PATCH] fix-SignupAndLogin-screen-added

fix-SignupAndLogin-screen-added
---
 .../ActionMenu/Booking/SelectPayment.tsx      |   2 +-
 app/(app)/ActionMenu/Booking/_layout.tsx      |   1 +
 app/(auth)/SignIn&SignOut/LetsYouIn.tsx       | 142 +++++++---
 app/(auth)/SignIn&SignOut/SignInBlankForm.tsx | 265 ++++++++++++------
 app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx | 247 ++++++++++------
 assets/images/Booking/Card.tsx                |  41 +++
 assets/images/Booking/card.svg                |  40 +++
 components/Icons/Icons.ts                     | 101 ++++++-
 components/Icons/Scanner.png                  | Bin 0 -> 462 bytes
 package-lock.json                             |  13 +
 package.json                                  |   3 +-
 11 files changed, 647 insertions(+), 208 deletions(-)
 create mode 100644 assets/images/Booking/Card.tsx
 create mode 100644 assets/images/Booking/card.svg
 create mode 100644 components/Icons/Scanner.png

diff --git a/app/(app)/ActionMenu/Booking/SelectPayment.tsx b/app/(app)/ActionMenu/Booking/SelectPayment.tsx
index b240c228..b44bdd49 100644
--- a/app/(app)/ActionMenu/Booking/SelectPayment.tsx
+++ b/app/(app)/ActionMenu/Booking/SelectPayment.tsx
@@ -67,7 +67,7 @@ export default function SelectPayment() {
                 : Colors.others.white,
             opacity: 8,
           }}
-          onPress={() => {}}
+          onPress={() => router.push('(app)/ActionMenu/Booking/AddNewCard')}
           // shadowColor={Colors.main.primary._100}
         />
         <Button
diff --git a/app/(app)/ActionMenu/Booking/_layout.tsx b/app/(app)/ActionMenu/Booking/_layout.tsx
index 6015b3ad..313cb429 100644
--- a/app/(app)/ActionMenu/Booking/_layout.tsx
+++ b/app/(app)/ActionMenu/Booking/_layout.tsx
@@ -22,6 +22,7 @@ export default function BookingLayout() {
         <Stack.Screen name="Select-package" options={{ headerShown: false }} />
         <Stack.Screen name="Patient-details" options={{ headerShown: false }} />
         <Stack.Screen name="EnterYourPin" options={{ headerShown: false }} />
+        <Stack.Screen name="AddNewCard" options={{ headerShown: false }} />
         <Stack.Screen
           name="SelectPayment"
           options={{ header: () => <Header title="Payments" /> }}
diff --git a/app/(auth)/SignIn&SignOut/LetsYouIn.tsx b/app/(auth)/SignIn&SignOut/LetsYouIn.tsx
index 36752a7c..6a09c923 100644
--- a/app/(auth)/SignIn&SignOut/LetsYouIn.tsx
+++ b/app/(auth)/SignIn&SignOut/LetsYouIn.tsx
@@ -1,77 +1,144 @@
 import * as React from "react";
-import { StyleSheet, Text, View, Image, TouchableOpacity, Pressable } from "react-native";
-import { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Pressable,
+} from "react-native";
+import { useState, useContext } from "react";
 import { LeftArrow } from "@/components/UI/Icons";
 import { router } from "expo-router";
 import Typography from "../../../constants/Typography";
 import { Colors } from "../../../constants/Colors";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { StatusBar } from "expo-status-bar";
+import {
+  BackArrow,
+  blackArrow,
+  OrLine,
+  greyOrLine,
+  BlackApple,
+  WhiteApple,
+} from "@/components/Icons/Icons";
+import { SvgXml } from "react-native-svg";
 
 const LetsYouIn = () => {
   const [visible, setVisible] = React.useState(false);
   const hideDialog = () => setVisible(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme("dark");
 
   return (
-    <View style={styles.container}>
-      <Pressable 
-      onPress={()=> router.back()}
-      style={styles.arrow}>
-        <LeftArrow fillColor={"#23272f"} />
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF" },
+      ]}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
+      <Pressable onPress={() => router.back()} style={styles.arrow}>
+        <SvgXml xml={theme === "dark" ? BackArrow : blackArrow} />
       </Pressable>
 
       <Image source={require("../../../assets/icons/FrameOne.png")} />
 
-      <View style={styles.middlePart}>
-        <View style={styles.midPartOne}>
-          <Text
-            style={[Typography.heading._1, { color: Colors.grayScale._900 }]}
-          >
-            Let's you in
-          </Text>
-        </View>
+      <View style={styles.midPartOne}>
+        <Text
+          style={[
+            Typography.heading._1,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
+        >
+          Let's you in
+        </Text>
+      </View>
 
+      <View style={styles.middlePart}>
         <View style={styles.Buttons}>
-          <TouchableOpacity style={styles.middleButton}>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
             <Image source={require("../../../assets/icons/facebook.png")} />
-            <Text style={[Typography.semiBold.large]}>
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
               Continue with facebook
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.middleButton}>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
             <Image source={require("../../../assets/icons/Google.png")} />
-            <Text style={[Typography.semiBold.large]}>
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
               Continue with Google
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.middleButton}>
-            <Image source={require("../../../assets/icons/AppleIcon.png")} />
-            <Text style={[Typography.semiBold.large]}>Continue with Apple</Text>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
+            <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple } />
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
+              Continue with Apple
+            </Text>
           </TouchableOpacity>
         </View>
       </View>
 
-      <Image source={require("../../../assets/icons/OR.png")} />
+      <SvgXml xml={theme === "dark" ? OrLine : greyOrLine} />
 
-      <TouchableOpacity 
-      onPress={()=> router.push("/(auth)/SignIn&SignOut/YourProfile")}
-      style={styles.signinBtn}>
+      <TouchableOpacity
+        onPress={() => router.push("/(auth)/SignIn&SignOut/YourProfile")}
+        style={styles.signinBtn}
+      >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
           Sign in with password
         </Text>
       </TouchableOpacity>
 
-      <Text style={[Typography.regular.medium]}>
-        Don't have an account?
+      <View style={{ flexDirection: "row", gap: 5 }}>
+        <Text
+          style={[
+            Typography.regular.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
+          ]}
+        >
+          Don't have an account?
+        </Text>
         <Text
-          style={styles.signupText}
+          style={[Typography.semiBold.medium, { color: "#246DFB" }]}
           onPress={() =>
             router.replace("/(auth)/SignIn&SignOut/SignUpBlankForm")
           }
         >
           Sign up
         </Text>
-      </Text>
+      </View>
     </View>
   );
 };
@@ -79,10 +146,10 @@ const LetsYouIn = () => {
 export default LetsYouIn;
 
 const styles = StyleSheet.create({
-  signupText: {
-    color: "#246BFD",
-    fontWeight: "600",
-  },
+  //   signupText: {
+  //     color: "#246BFD",
+  //     fontWeight: "600",
+  //   },
   signText: {
     fontSize: 16,
     color: "#FFFFFF",
@@ -95,6 +162,8 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     justifyContent: "center",
     alignItems: "center",
+    shadowColor: "#246BFD",
+    elevation: 10,
   },
   textBtn: {
     fontSize: 16,
@@ -104,7 +173,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 15,
     borderWidth: 1,
-    borderColor: "#eeeeee",
     justifyContent: "center",
     alignItems: "center",
     padding: 15,
@@ -127,7 +195,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   middlePart: {
-    gap: 30,
+    gap: 24,
   },
   arrow: {
     alignSelf: "flex-start",
@@ -141,7 +209,7 @@ const styles = StyleSheet.create({
     gap: 20,
     paddingTop: 24,
     paddingLeft: 24,
-    paddingBottom: 48,
+    paddingBottom: 24,
     paddingRight: 24,
     // borderWidth: 4,
     // borderColor: 'red',
diff --git a/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
index c935b6ae..ad67788f 100644
--- a/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
+++ b/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -13,8 +13,19 @@ import { Ionicons } from "@expo/vector-icons";
 import CheckBox from "expo-checkbox";
 import { LeftArrow } from "@/components/UI/Icons";
 import { router } from "expo-router";
-import Typography from '../../../constants/Typography';
-import {Colors} from '../../../constants/Colors';
+import Typography from "../../../constants/Typography";
+import { Colors } from "../../../constants/Colors";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { SvgXml } from "react-native-svg";
+import {
+  BackArrow,
+  BlackApple,
+  DarkContinueLine,
+  LightContinueLine,
+  WhiteApple,
+  blackArrow,
+} from "@/components/Icons/Icons";
+import { StatusBar } from "expo-status-bar";
 
 const Login = () => {
   const [email, setEmail] = useState("");
@@ -23,7 +34,8 @@ const Login = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [emailFocused, setEmailFocused] = useState(false);
   const [passwordFocused, setPasswordFocused] = useState(false);
-
+  const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme("dark");
 
   const handleEmailChange = (text: string) => {
     setEmail(text);
@@ -45,7 +57,7 @@ const Login = () => {
   const handlePasswordFocus = () => {
     setPasswordFocused(true);
     setEmailFocused(false);
-  }
+  };
 
   const handleEmailBlur = () => {
     setEmailFocused(false);
@@ -53,33 +65,61 @@ const Login = () => {
 
   const handlePasswordBlur = () => {
     setPasswordFocused(false);
-  }
+  };
 
   return (
-    <View style={styles.container}>
-    
-        <TouchableOpacity style={styles.arrow} onPress={() => router.replace("/(auth)/SignIn&SignOut/SignUpBlankForm")}>
-          <LeftArrow fillColor={"#23272f"} />
-        </TouchableOpacity>
-      
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF" },
+      ]}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
+
+      <TouchableOpacity
+        style={styles.arrow}
+        onPress={() => router.replace("/(auth)/SignIn&SignOut/SignUpBlankForm")}
+      >
+        <SvgXml xml={theme === "dark" ? BackArrow : blackArrow} />
+      </TouchableOpacity>
+
       <View>
         <Image source={require("../../../assets/icons/HeartPlus.png")} />
       </View>
 
-      <View style={styles.middlePart}>
-        <View style={styles.midPartOne}>
-          <Text style={[Typography.heading._3,{color:Colors.grayScale._900}]}>Login to Your Account</Text>
-        </View>
+      {/* <View style={styles.middlePart}> */}
+      <View style={styles.midPartOne}>
+        <Text
+          style={[
+            Typography.heading._3,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
+        >
+          Login to Your Account
+        </Text>
+        {/* </View> */}
       </View>
 
       <View style={styles.Buttons}>
-        <View style={[styles.inputOne, emailFocused && styles.inputOneFocused]}>
-          <Image source={require("../../../assets/icons/Message.png")} style={[styles.icon, emailFocused && styles.iconFocused]} />
+        <View
+          style={[
+            styles.inputOne,
+            emailFocused && styles.inputOneFocused,
+            {
+              backgroundColor:
+                theme === "dark" ? "#1F222A" : Colors.grayScale._50,
+            },
+          ]}
+        >
+          <Image
+            source={require("../../../assets/icons/Message.png")}
+            style={[styles.icon, emailFocused && styles.iconFocused]}
+          />
           <TextInput
             style={[styles.email, emailFocused && styles.emailFocused]}
             placeholder="Email"
             keyboardType="email-address"
-            placeholderTextColor="rgba(45, 45, 45, 0.5)"
+            placeholderTextColor="#9E9E9E"
             value={email}
             onChangeText={handleEmailChange}
             onFocus={handleEmailFocus}
@@ -87,33 +127,49 @@ const Login = () => {
           />
         </View>
 
-        <View style={[styles.inputOne, passwordFocused && styles.inputOneFocused]}>
-          <Image source={require("../../../assets/icons/Lock.png")} style={[styles.icon, passwordFocused && styles.iconFocused]} />
-          
-            <TextInput
-              style={[styles.email, passwordFocused && styles.emailFocused]}
-              placeholder="Password"
-              placeholderTextColor="rgba(45, 45, 45, 0.5)"
-              secureTextEntry={secureTextEntry}
-              value={password}
-              onChangeText={handlePasswordChange}
-              onFocus={handlePasswordFocus}
-              onBlur={handlePasswordBlur}
-            />
-            <View style={[styles.passwordInputContainer, passwordFocused && styles.passwordInputContainerFocused]}>
-              <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
-                <Ionicons
-                  name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
-                  size={24}
-                  color={passwordFocused ? "#246BFD" : "gray"}
-                  style={styles.eye}
-                />
-              </TouchableWithoutFeedback>
-            </View>
+        <View
+          style={[
+            styles.inputOne,
+            passwordFocused && styles.inputOneFocused,
+            {
+              backgroundColor:
+                theme === "dark" ? "#1F222A" : Colors.grayScale._50,
+            },
+          ]}
+        >
+          <Image
+            source={require("../../../assets/icons/Lock.png")}
+            style={[styles.icon, passwordFocused && styles.iconFocused]}
+          />
+
+          <TextInput
+            style={[styles.email, passwordFocused && styles.emailFocused]}
+            placeholder="Password"
+            placeholderTextColor="#9E9E9E"
+            secureTextEntry={secureTextEntry}
+            value={password}
+            onChangeText={handlePasswordChange}
+            onFocus={handlePasswordFocus}
+            onBlur={handlePasswordBlur}
+          />
+          <View
+            style={[
+              styles.passwordInputContainer,
+              passwordFocused && styles.passwordInputContainerFocused,
+            ]}
+          >
+            <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
+              <Ionicons
+                name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
+                size={24}
+                color={passwordFocused ? "#246BFD" : "gray"}
+                style={styles.eye}
+              />
+            </TouchableWithoutFeedback>
+          </View>
         </View>
       </View>
 
-
       <View style={styles.Check}>
         <CheckBox
           value={isChecked}
@@ -121,43 +177,94 @@ const Login = () => {
           style={styles.checkbox}
           color="#007bff"
         />
-        <Text style={[Typography.semiBold.medium, {color:Colors.grayScale._900}]}>Remember me</Text>
+        <Text
+          style={[
+            Typography.semiBold.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
+        >
+          Remember me
+        </Text>
       </View>
 
       <View>
-        <TouchableOpacity 
-        onPress={()=> router.push("/(app)/ActionMenu")}
-        style={styles.signinBtn}>
+        <TouchableOpacity
+          onPress={() => router.push("/(app)/ActionMenu")}
+          style={styles.signinBtn}
+        >
           <Text style={styles.signText}>Sign in</Text>
         </TouchableOpacity>
       </View>
 
-      <Pressable
-      onPress={()=> router.push("/(auth)/ForgotPassword&Reset/ForgotPassword")}
+      <TouchableOpacity
+        onPress={() =>
+          router.push("/(auth)/ForgotPassword&Reset/ForgotPassword")
+        }
       >
-        <Text style={[Typography.semiBold.large, {color:Colors.main.primary._500}]}>Forgot the password?</Text>
-      </Pressable>
+        <Text
+          style={[
+            Typography.semiBold.large,
+            { color: Colors.main.primary._500 },
+          ]}
+        >
+          Forgot the password?
+        </Text>
+      </TouchableOpacity>
 
       <View>
-        <Image source={require("../../../assets/icons/continue.png")} />
+        <SvgXml xml={theme === "dark" ? DarkContinueLine : LightContinueLine} />
       </View>
 
       <View style={styles.overCont}>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/facebook.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/Google.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/AppleIcon.png")} />
-        </View>
+      <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
+            <Image source={require("../../../assets/icons/facebook.png")} />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
+          >
+            <Image source={require("../../../assets/icons/Google.png")} />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
+          >
+            <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple} />
+
+          </View>
+        </TouchableOpacity>
       </View>
 
       <View style={styles.account}>
-        <Text style={[Typography.regular.medium]}>Don’t have an account? </Text>
         <Text
-          style={[Typography.semiBold.medium, {color:Colors.main.primary._500}]}
+          style={[
+            Typography.regular.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
+          ]}
+        >
+          Don’t have an account?{" "}
+        </Text>
+        <Text
+          style={[
+            Typography.semiBold.medium,
+            { color: Colors.main.primary._500 },
+          ]}
           onPress={() => router.push("/(auth)/SignIn&SignOut/SignUpBlankForm")}
         >
           Sign up
@@ -170,14 +277,13 @@ const Login = () => {
 export default Login;
 
 const styles = StyleSheet.create({
-
   inputOneFocused: {
     borderColor: "#246BFD",
     borderWidth: 2,
   },
   emailFocused: {
     color: "#212121",
-    fontSize: 16
+    fontSize: 16,
   },
   iconFocused: {
     tintColor: "#246BFD",
@@ -188,10 +294,10 @@ const styles = StyleSheet.create({
   icon: {
     tintColor: "#868a94",
   },
-  eye:{
-    marginRight: 10
+  eye: {
+    marginRight: 10,
   },
-  passwordIconContainer:{
+  passwordIconContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -248,7 +354,7 @@ const styles = StyleSheet.create({
   inputOne: {
     borderRadius: 16,
     backgroundColor: "#FAFAFA",
-    width: 380,
+    width: 360,
     height: 60,
     padding: 8,
     paddingHorizontal: 10,
@@ -268,13 +374,13 @@ const styles = StyleSheet.create({
   },
   signinBtn: {
     backgroundColor: "#246BFD",
-    width: 380,
+    width: 360,
     height: 58,
     borderRadius: 100,
     justifyContent: "center",
     alignItems: "center",
-    shadowColor: '#246BFD',
-    elevation: 15,
+    shadowColor: "#246BFD",
+    elevation: 10,
   },
   textBtn: {
     fontSize: 16,
@@ -289,9 +395,9 @@ const styles = StyleSheet.create({
     padding: 10,
     width: 380,
     borderRadius: 16,
-  },  
+  },
   Buttons: {
-    gap: 10,
+    gap: 20,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -314,21 +420,17 @@ const styles = StyleSheet.create({
   },
   account: {
     flexDirection: "row",
-    gap: 5
-  },
-  middlePart: {
-    gap: 30,
+    gap: 5,
   },
   arrow: {
-    alignSelf: "flex-start"
+    alignSelf: "flex-start",
   },
   container: {
     flex: 1,
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
-    gap: 15,
+    gap: 17,
     paddingTop: 24,
     paddingLeft: 24,
     paddingBottom: 48,
@@ -338,5 +440,4 @@ const styles = StyleSheet.create({
     color: "#246BFD",
     fontWeight: "600",
   },
-
 });
diff --git a/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
index 48207a0d..7739d070 100644
--- a/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
+++ b/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -19,6 +19,16 @@ import { router } from "expo-router";
 import Typography from "../../../constants/Typography";
 import { Colors } from "../../../constants/Colors";
 import { StatusBar } from "expo-status-bar";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import {
+  BackArrow,
+  blackArrow,
+  DarkContinueLine,
+  LightContinueLine,
+  BlackApple,
+  WhiteApple
+} from "@/components/Icons/Icons";
+import { SvgXml } from "react-native-svg";
 
 const Signup = () => {
   const [email, setEmail] = useState("");
@@ -27,6 +37,9 @@ const Signup = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [passwordFocused, setPasswordFocused] = useState(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
+
+  changeTheme("dark");
 
   const handleEmailChange = (text: string) => {
     setEmail(text);
@@ -42,25 +55,30 @@ const Signup = () => {
 
   const handleEmailFocused = () => {
     setIsFocused(true);
-  }
+  };
   const handleEmailBlur = () => {
     setIsFocused(false);
-  }
-  const handlePasswordFocused = () =>{
+  };
+  const handlePasswordFocused = () => {
     setPasswordFocused(true);
-  }
+  };
   const handlePasswordBlur = () => {
     setPasswordFocused(false);
-  }
+  };
 
   return (
-    <View style={styles.container}>
-      <StatusBar style="light"/>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF" },
+      ]}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
       <TouchableOpacity
         style={styles.arrow}
         onPress={() => router.replace("/(auth)/SignIn&SignOut/LetsYouIn")}
       >
-        <LeftArrow fillColor={"#23272f"} />
+        <SvgXml xml={theme === "dark" ? BackArrow : blackArrow} />
       </TouchableOpacity>
 
       <Image source={require("../../../assets/icons/HeartPlus.png")} />
@@ -68,7 +86,10 @@ const Signup = () => {
       <View style={styles.middlePart}>
         <View style={styles.midPartOne}>
           <Text
-            style={[Typography.heading._3, { color: Colors.grayScale._900 }]}
+            style={[
+              Typography.heading._3,
+              { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+            ]}
           >
             Create new account
           </Text>
@@ -77,44 +98,69 @@ const Signup = () => {
 
       <View style={styles.Buttons}>
         <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
           keyboardVerticalOffset={60}
         >
-          <View style={[styles.inputOne, isFocused && styles.inputOneFocused]}>
-            <Image source={require("../../../assets/icons/Message.png")} style={[styles.icon, isFocused && styles.iconFocused]}/>
-            <TextInput
-              style={[styles.email, isFocused && styles.emailFocused]}
-              placeholder="Email"
-              keyboardType="email-address"
-              placeholderTextColor="rgba(45, 45, 45, 0.5)"
-              value={email}
-              onChangeText={handleEmailChange}
-              onFocus={handleEmailFocused}
-              onBlur={handleEmailBlur}
-            />
-          </View>
+          <View style={{ gap: 20 }}>
+            <View
+              style={[
+                styles.inputOne,
+                isFocused && styles.inputOneFocused,
+                { backgroundColor: theme === "dark" ? "#1F222A" : Colors.grayScale._50 },
+              ]}
+            >
+              <Image
+                source={require("../../../assets/icons/Message.png")}
+                style={[styles.icon, isFocused && styles.iconFocused]}
+              />
+              <TextInput
+                style={[styles.email, isFocused && styles.emailFocused]}
+                placeholder="Email"
+                keyboardType="email-address"
+                placeholderTextColor="#9E9E9E"
+                value={email}
+                onChangeText={handleEmailChange}
+                onFocus={handleEmailFocused}
+                onBlur={handleEmailBlur}
+              />
+            </View>
 
-          <View style={[styles.inputOne, passwordFocused && styles.inputOneFocused]}>
-            <Image source={require("../../../assets/icons/Lock.png")} style={[styles.icon, passwordFocused && styles.iconFocused]}/>
-            <TextInput
-              style={styles.email}
-              placeholder="Password"
-              placeholderTextColor="rgba(45, 45, 45, 0.5)"
-              secureTextEntry={secureTextEntry}
-              value={password}
-              onChangeText={handlePasswordChange}
-              onFocus={handlePasswordFocused}
-              onBlur={handlePasswordBlur}
-            />
-            <View style={[styles.passwordInputContainer, passwordFocused && styles.passwordInputContainerFocused]}>
-              <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
-                <Ionicons
-                  name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
-                  size={24}
-                  color={passwordFocused ? "#246BFD" : "gray"}
-                  style={styles.eye}
-                />
-              </TouchableWithoutFeedback>
+            <View
+              style={[
+                styles.inputOne,
+                passwordFocused && styles.inputOneFocused,
+                { backgroundColor: theme === "dark" ? "#1F222A" : Colors.grayScale._50 },
+              ]}
+            >
+              <Image
+                source={require("../../../assets/icons/Lock.png")}
+                style={[styles.icon, passwordFocused && styles.iconFocused]}
+              />
+              <TextInput
+                style={styles.email}
+                placeholder="Password"
+                placeholderTextColor="#9E9E9E"
+                secureTextEntry={secureTextEntry}
+                value={password}
+                onChangeText={handlePasswordChange}
+                onFocus={handlePasswordFocused}
+                onBlur={handlePasswordBlur}
+              />
+              <View
+                style={[
+                  styles.passwordInputContainer,
+                  passwordFocused && styles.passwordInputContainerFocused,
+                ]}
+              >
+                <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
+                  <Ionicons
+                    name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
+                    size={24}
+                    color={passwordFocused ? "#246BFD" : "gray"}
+                    style={styles.eye}
+                  />
+                </TouchableWithoutFeedback>
+              </View>
             </View>
           </View>
         </KeyboardAvoidingView>
@@ -125,48 +171,84 @@ const Signup = () => {
           value={isChecked}
           onValueChange={setIsChecked}
           style={styles.checkbox}
-          
+          color="#246BFD"
         />
         <Text
-          style={[Typography.semiBold.medium, { color: Colors.grayScale._900 }]}
+          style={[
+            Typography.semiBold.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
         >
           Remember me
         </Text>
       </View>
 
-      <Pressable 
-      onPress={()=> router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
-      style={styles.signinBtn}>
+      <TouchableOpacity
+        onPress={() => router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
+        style={styles.signinBtn}
+      >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
           Sign up
         </Text>
-      </Pressable>
+      </TouchableOpacity>
 
-      <Image source={require("../../../assets/icons/continue.png")} />
+      <SvgXml xml={theme === "dark" ? DarkContinueLine : LightContinueLine} />
 
       <View style={styles.overCont}>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/facebook.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/Google.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/AppleIcon.png")} />
-        </View>
-      </View>
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
+            <Image source={require("../../../assets/icons/facebook.png")} />
+          </View>
+        </TouchableOpacity>
 
-      <View>
-        <Text style={[Typography.regular.medium]}>
-          Already have an account? 
-          <Text
-           style={[Typography.semiBold.medium, {color:Colors.main.primary._500, marginLeft: 10}]}
-            onPress={() =>
-              router.replace("/(auth)/SignIn&SignOut/SignInBlankForm")
-            }
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
           >
-            Sign In
-          </Text>
+            <Image source={require("../../../assets/icons/Google.png")} />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
+          >
+            <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple} />
+
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ gap: 3, flexDirection: "row" }}>
+        <Text
+          style={[
+            Typography.regular.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
+          ]}
+        >
+          Already have an account?
+        </Text>
+        <Text
+          style={[
+            Typography.semiBold.medium,
+            { color: Colors.main.primary._500, marginLeft: 10 },
+          ]}
+          onPress={() =>
+            router.replace("/(auth)/SignIn&SignOut/SignInBlankForm")
+          }
+        >
+          Sign In
         </Text>
       </View>
     </View>
@@ -176,14 +258,13 @@ const Signup = () => {
 export default Signup;
 
 const styles = StyleSheet.create({
-
   inputOneFocused: {
     borderColor: "#246BFD",
     borderWidth: 2,
   },
   emailFocused: {
     color: "#212121",
-    fontSize: 16
+    fontSize: 16,
   },
   iconFocused: {
     tintColor: "#246BFD",
@@ -228,7 +309,6 @@ const styles = StyleSheet.create({
     width: 80,
     height: 60,
     backgroundColor: "#FFFFFF",
-    borderColor: "#eeeeee",
     borderWidth: 1,
     borderRadius: 16,
     justifyContent: "center",
@@ -254,14 +334,14 @@ const styles = StyleSheet.create({
   },
   inputOne: {
     borderRadius: 16,
-    backgroundColor: "#FAFAFA",
-    width: 380,
+    width: 360,
     height: 60,
     padding: 8,
     flexDirection: "row",
     paddingLeft: 20,
     alignItems: "center",
     gap: 10,
+  
   },
   email: {
     fontSize: 16,
@@ -271,20 +351,15 @@ const styles = StyleSheet.create({
     color: "#246BFD",
     fontWeight: "600",
   },
-  // signText: {
-  //   fontSize: 16,
-  //   color: "#FFFFFF",
-  //   fontWeight: "bold",
-  // },
   signinBtn: {
     backgroundColor: "#246BFD",
-    width: "90%",
+    width: 360,
     height: 58,
     borderRadius: 100,
     justifyContent: "center",
     alignItems: "center",
     shadowColor: "#246BFD",
-    elevation: 15,
+    elevation: 10,
   },
   textBtn: {
     fontSize: 16,
@@ -301,7 +376,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
   },
   Buttons: {
-    gap: 10,
+    gap: 20,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -325,7 +400,7 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
+    // backgroundColor: "#FFFFFF",
     gap: 20,
     paddingTop: 24,
     paddingLeft: 24,
diff --git a/assets/images/Booking/Card.tsx b/assets/images/Booking/Card.tsx
new file mode 100644
index 00000000..c5660b3c
--- /dev/null
+++ b/assets/images/Booking/Card.tsx
@@ -0,0 +1,41 @@
+export const Card= `<svg width="424" height="287" viewBox="0 0 424 287" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1241_26802)">
+<g clip-path="url(#clip0_1241_26802)">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="url(#paint0_linear_1241_26802)"/>
+<g opacity="0.32">
+<path opacity="0.1" d="M262.831 -16.3608L391.137 60.0095V189.138L262.831 112.076V-16.3608Z" fill="white"/>
+<path opacity="0.2" d="M518.993 -16.2837L390.691 60.0066V189L518.993 112.018V-16.2837Z" fill="white"/>
+<path opacity="0.3" d="M262.831 -15.938L391.137 -93L519.442 -15.938V-15.3616L391.137 61.7004L262.831 -15.3616V-15.938Z" fill="white"/>
+<path opacity="0.1" d="M-99 56.8936L29.3056 133.264V262.392L-99 185.33V56.8936Z" fill="white"/>
+<path opacity="0.2" d="M157.162 56.9707L28.8601 133.261V262.254L157.162 185.273V56.9707Z" fill="white"/>
+<path opacity="0.3" d="M-99 57.3164L29.3056 -19.7456L157.611 57.3164V57.8928L29.3056 134.955L-99 57.8928V57.3164Z" fill="white"/>
+<path opacity="0.1" d="M209.111 15.7607L262.609 47.6037V101.444L209.111 69.3131V15.7607Z" fill="white"/>
+<path opacity="0.2" d="M315.919 15.793L262.423 47.6026V101.387L315.919 69.2891V15.793Z" fill="white"/>
+<path opacity="0.3" d="M209.111 15.9371L262.609 -16.1943L316.107 15.9371V16.1774L262.609 48.3088L209.111 16.1774V15.9371Z" fill="white"/>
+<path opacity="0.1" d="M253.951 221.316L307.449 253.159V307L253.951 274.868V221.316Z" fill="white"/>
+<path opacity="0.2" d="M360.759 221.348L307.263 253.158V306.942L360.759 274.844V221.348Z" fill="white"/>
+<path opacity="0.3" d="M253.951 221.492L307.449 189.361L360.947 221.492V221.733L307.449 253.864L253.951 221.733V221.492Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1241_26802" x="0" y="0" width="428" height="287" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="8"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.419608 0 0 0 0 0.992157 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1241_26802"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1241_26802" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1241_26802" x1="400" y1="255" x2="-4.26502" y2="68.6363" gradientUnits="userSpaceOnUse">
+<stop stop-color="#246BFD"/>
+<stop offset="1" stop-color="#5089FF"/>
+</linearGradient>
+<clipPath id="clip0_1241_26802">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
\ No newline at end of file
diff --git a/assets/images/Booking/card.svg b/assets/images/Booking/card.svg
new file mode 100644
index 00000000..c365305e
--- /dev/null
+++ b/assets/images/Booking/card.svg
@@ -0,0 +1,40 @@
+<svg width="424" height="287" viewBox="0 0 424 287" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1241_26802)">
+<g clip-path="url(#clip0_1241_26802)">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="url(#paint0_linear_1241_26802)"/>
+<g opacity="0.32">
+<path opacity="0.1" d="M262.831 -16.3608L391.137 60.0095V189.138L262.831 112.076V-16.3608Z" fill="white"/>
+<path opacity="0.2" d="M518.993 -16.2837L390.691 60.0066V189L518.993 112.018V-16.2837Z" fill="white"/>
+<path opacity="0.3" d="M262.831 -15.938L391.137 -93L519.442 -15.938V-15.3616L391.137 61.7004L262.831 -15.3616V-15.938Z" fill="white"/>
+<path opacity="0.1" d="M-99 56.8936L29.3056 133.264V262.392L-99 185.33V56.8936Z" fill="white"/>
+<path opacity="0.2" d="M157.162 56.9707L28.8601 133.261V262.254L157.162 185.273V56.9707Z" fill="white"/>
+<path opacity="0.3" d="M-99 57.3164L29.3056 -19.7456L157.611 57.3164V57.8928L29.3056 134.955L-99 57.8928V57.3164Z" fill="white"/>
+<path opacity="0.1" d="M209.111 15.7607L262.609 47.6037V101.444L209.111 69.3131V15.7607Z" fill="white"/>
+<path opacity="0.2" d="M315.919 15.793L262.423 47.6026V101.387L315.919 69.2891V15.793Z" fill="white"/>
+<path opacity="0.3" d="M209.111 15.9371L262.609 -16.1943L316.107 15.9371V16.1774L262.609 48.3088L209.111 16.1774V15.9371Z" fill="white"/>
+<path opacity="0.1" d="M253.951 221.316L307.449 253.159V307L253.951 274.868V221.316Z" fill="white"/>
+<path opacity="0.2" d="M360.759 221.348L307.263 253.158V306.942L360.759 274.844V221.348Z" fill="white"/>
+<path opacity="0.3" d="M253.951 221.492L307.449 189.361L360.947 221.492V221.733L307.449 253.864L253.951 221.733V221.492Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1241_26802" x="0" y="0" width="428" height="287" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="8"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.419608 0 0 0 0 0.992157 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1241_26802"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1241_26802" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1241_26802" x1="400" y1="255" x2="-4.26502" y2="68.6363" gradientUnits="userSpaceOnUse">
+<stop stop-color="#246BFD"/>
+<stop offset="1" stop-color="#5089FF"/>
+</linearGradient>
+<clipPath id="clip0_1241_26802">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/components/Icons/Icons.ts b/components/Icons/Icons.ts
index 6b9d59e2..bb1caf16 100644
--- a/components/Icons/Icons.ts
+++ b/components/Icons/Icons.ts
@@ -93,4 +93,103 @@ export const BigVideoIcon = `<svg width="28" height="28" viewBox="0 0 28 28" fil
 export const CameraIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.29 5.20994L13.79 6.70994C13.883 6.80367 13.9936 6.87806 14.1154 6.92883C14.2373 6.9796 14.368 7.00574 14.5 7.00574C14.632 7.00574 14.7627 6.9796 14.8846 6.92883C15.0064 6.87806 15.117 6.80367 15.21 6.70994C15.3618 6.55064 15.4567 6.34575 15.4803 6.12699C15.5038 5.90824 15.4545 5.68784 15.34 5.49994H19C19.2652 5.49994 19.5196 5.39458 19.7071 5.20705C19.8946 5.01951 20 4.76516 20 4.49994C20 4.23472 19.8946 3.98037 19.7071 3.79283C19.5196 3.6053 19.2652 3.49994 19 3.49994H15.34C15.4545 3.31204 15.5038 3.09164 15.4803 2.87289C15.4567 2.65413 15.3618 2.44923 15.21 2.28994C15.117 2.19621 15.0064 2.12182 14.8846 2.07105C14.7627 2.02028 14.632 1.99414 14.5 1.99414C14.368 1.99414 14.2373 2.02028 14.1154 2.07105C13.9936 2.12182 13.883 2.19621 13.79 2.28994L12.29 3.78994C12.199 3.88504 12.1276 3.99719 12.08 4.11994C11.98 4.3634 11.98 4.63648 12.08 4.87994C12.1276 5.00269 12.199 5.11484 12.29 5.20994ZM22.92 9.11994C22.8724 8.99719 22.801 8.88504 22.71 8.78994L21.21 7.28994C21.117 7.19621 21.0064 7.12182 20.8846 7.07105C20.7627 7.02028 20.632 6.99414 20.5 6.99414C20.368 6.99414 20.2373 7.02028 20.1154 7.07105C19.9936 7.12182 19.883 7.19621 19.79 7.28994C19.6382 7.44923 19.5433 7.65413 19.5197 7.87289C19.4962 8.09164 19.5455 8.31204 19.66 8.49994H16C15.7348 8.49994 15.4804 8.6053 15.2929 8.79283C15.1054 8.98037 15 9.23472 15 9.49994C15 9.76516 15.1054 10.0195 15.2929 10.207C15.4804 10.3946 15.7348 10.4999 16 10.4999H19.66C19.5455 10.6878 19.4962 10.9082 19.5197 11.127C19.5433 11.3457 19.6382 11.5506 19.79 11.7099C19.883 11.8037 19.9936 11.8781 20.1154 11.9288C20.2373 11.9796 20.368 12.0057 20.5 12.0057C20.632 12.0057 20.7627 11.9796 20.8846 11.9288C21.0064 11.8781 21.117 11.8037 21.21 11.7099L22.71 10.2099C22.801 10.1148 22.8724 10.0027 22.92 9.87994C23.02 9.63648 23.02 9.3634 22.92 9.11994ZM11 9.99994C10.2089 9.99994 9.43552 10.2345 8.77772 10.6741C8.11992 11.1136 7.60723 11.7383 7.30448 12.4692C7.00173 13.2001 6.92252 14.0044 7.07686 14.7803C7.2312 15.5562 7.61216 16.269 8.17157 16.8284C8.73098 17.3878 9.44372 17.7687 10.2196 17.9231C10.9956 18.0774 11.7998 17.9982 12.5307 17.6955C13.2616 17.3927 13.8864 16.88 14.3259 16.2222C14.7654 15.5644 15 14.7911 15 13.9999C15 12.9391 14.5786 11.9217 13.8284 11.1715C13.0783 10.4214 12.0609 9.99994 11 9.99994ZM11 15.9999C10.6044 15.9999 10.2178 15.8826 9.88886 15.6629C9.55996 15.4431 9.30362 15.1308 9.15224 14.7653C9.00087 14.3999 8.96126 13.9977 9.03843 13.6098C9.1156 13.2218 9.30608 12.8654 9.58579 12.5857C9.86549 12.306 10.2219 12.1155 10.6098 12.0384C10.9978 11.9612 11.3999 12.0008 11.7654 12.1522C12.1308 12.3036 12.4432 12.5599 12.6629 12.8888C12.8827 13.2177 13 13.6044 13 13.9999C13 14.5304 12.7893 15.0391 12.4142 15.4142C12.0391 15.7892 11.5304 15.9999 11 15.9999ZM20 12.9999C19.7348 12.9999 19.4804 13.1053 19.2929 13.2928C19.1054 13.4804 19 13.7347 19 13.9999V18.9999C19 19.2652 18.8946 19.5195 18.7071 19.707C18.5196 19.8946 18.2652 19.9999 18 19.9999H4C3.73478 19.9999 3.48043 19.8946 3.29289 19.707C3.10536 19.5195 3 19.2652 3 18.9999V10.9999C3 10.7347 3.10536 10.4804 3.29289 10.2928C3.48043 10.1053 3.73478 9.99994 4 9.99994H6C6.21932 10.0107 6.43607 9.94892 6.6168 9.82421C6.79753 9.69951 6.93219 9.51879 7 9.30994L7.54 7.68994C7.60251 7.49733 7.72202 7.32823 7.88273 7.20502C8.04344 7.08181 8.23776 7.0103 8.44 6.99994H10C10.2652 6.99994 10.5196 6.89458 10.7071 6.70705C10.8946 6.51951 11 6.26516 11 5.99994C11 5.73472 10.8946 5.48037 10.7071 5.29283C10.5196 5.1053 10.2652 4.99994 10 4.99994H8.44C7.80861 4.99971 7.19324 5.19871 6.68152 5.56858C6.16981 5.93845 5.78784 6.46034 5.59 7.05994L5.28 7.99994H4C3.20435 7.99994 2.44129 8.31601 1.87868 8.87862C1.31607 9.44123 1 10.2043 1 10.9999V18.9999C1 19.7956 1.31607 20.5587 1.87868 21.1213C2.44129 21.6839 3.20435 21.9999 4 21.9999H18C18.7956 21.9999 19.5587 21.6839 20.1213 21.1213C20.6839 20.5587 21 19.7956 21 18.9999V13.9999C21 13.7347 20.8946 13.4804 20.7071 13.2928C20.5196 13.1053 20.2652 12.9999 20 12.9999Z" fill="white"/>
 </svg>
-`
\ No newline at end of file
+`
+export const OrLine = `<svg width="340" height="26" viewBox="0 0 360 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="12.75" x2="155" y2="12.75" stroke="#35383F"/>
+<path d="M176.502 19.984C175.674 19.984 174.918 19.771 174.234 19.345C173.556 18.919 173.013 18.349 172.605 17.635C172.203 16.915 172.002 16.12 172.002 15.25C172.002 14.59 172.119 13.975 172.353 13.405C172.587 12.829 172.908 12.325 173.316 11.893C173.73 11.455 174.21 11.113 174.756 10.867C175.302 10.621 175.884 10.498 176.502 10.498C177.33 10.498 178.083 10.711 178.762 11.137C179.446 11.563 179.989 12.136 180.391 12.856C180.799 13.576 181.003 14.374 181.003 15.25C181.003 15.904 180.886 16.516 180.651 17.086C180.418 17.656 180.094 18.16 179.68 18.598C179.271 19.03 178.794 19.369 178.248 19.615C177.708 19.861 177.126 19.984 176.502 19.984ZM176.502 18.112C177 18.112 177.447 17.98 177.844 17.716C178.239 17.452 178.551 17.104 178.779 16.672C179.014 16.234 179.131 15.76 179.131 15.25C179.131 14.728 179.011 14.248 178.77 13.81C178.537 13.372 178.222 13.024 177.825 12.766C177.429 12.502 176.988 12.37 176.502 12.37C176.01 12.37 175.563 12.502 175.161 12.766C174.765 13.03 174.45 13.381 174.216 13.819C173.988 14.257 173.874 14.734 173.874 15.25C173.874 15.784 173.994 16.267 174.234 16.699C174.474 17.131 174.792 17.476 175.188 17.734C175.59 17.986 176.028 18.112 176.502 18.112ZM187.976 12.631C187.82 12.535 187.649 12.46 187.463 12.406C187.283 12.346 187.085 12.316 186.869 12.316C186.401 12.316 185.993 12.439 185.645 12.685C185.297 12.931 185.024 13.264 184.826 13.684C184.634 14.104 184.538 14.569 184.538 15.079V19.75H182.657V10.75H184.529V11.965C184.841 11.515 185.219 11.161 185.663 10.903C186.113 10.639 186.614 10.507 187.166 10.507C187.37 10.507 187.562 10.516 187.742 10.534C187.928 10.552 188.105 10.588 188.273 10.642L187.976 12.631Z" fill="white"/>
+<line x1="205" y1="12.75" x2="360" y2="12.75" stroke="#35383F"/>
+</svg>
+`
+export const greyOrLine = `<svg width="340" height="26" viewBox="0 0 360 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="12.75" x2="155" y2="12.75" stroke="#EEEEEE"/>
+<path d="M176.502 19.984C175.674 19.984 174.918 19.771 174.234 19.345C173.556 18.919 173.013 18.349 172.605 17.635C172.203 16.915 172.002 16.12 172.002 15.25C172.002 14.59 172.119 13.975 172.353 13.405C172.587 12.829 172.908 12.325 173.316 11.893C173.73 11.455 174.21 11.113 174.756 10.867C175.302 10.621 175.884 10.498 176.502 10.498C177.33 10.498 178.083 10.711 178.762 11.137C179.446 11.563 179.989 12.136 180.391 12.856C180.799 13.576 181.003 14.374 181.003 15.25C181.003 15.904 180.886 16.516 180.651 17.086C180.418 17.656 180.094 18.16 179.68 18.598C179.271 19.03 178.794 19.369 178.248 19.615C177.708 19.861 177.126 19.984 176.502 19.984ZM176.502 18.112C177 18.112 177.447 17.98 177.844 17.716C178.239 17.452 178.551 17.104 178.779 16.672C179.014 16.234 179.131 15.76 179.131 15.25C179.131 14.728 179.011 14.248 178.77 13.81C178.537 13.372 178.222 13.024 177.825 12.766C177.429 12.502 176.988 12.37 176.502 12.37C176.01 12.37 175.563 12.502 175.161 12.766C174.765 13.03 174.45 13.381 174.216 13.819C173.988 14.257 173.874 14.734 173.874 15.25C173.874 15.784 173.994 16.267 174.234 16.699C174.474 17.131 174.792 17.476 175.188 17.734C175.59 17.986 176.028 18.112 176.502 18.112ZM187.976 12.631C187.82 12.535 187.649 12.46 187.463 12.406C187.283 12.346 187.085 12.316 186.869 12.316C186.401 12.316 185.993 12.439 185.645 12.685C185.297 12.931 185.024 13.264 184.826 13.684C184.634 14.104 184.538 14.569 184.538 15.079V19.75H182.657V10.75H184.529V11.965C184.841 11.515 185.219 11.161 185.663 10.903C186.113 10.639 186.614 10.507 187.166 10.507C187.37 10.507 187.562 10.516 187.742 10.534C187.928 10.552 188.105 10.588 188.273 10.642L187.976 12.631Z" fill="#616161"/>
+<line x1="205" y1="12.75" x2="360" y2="12.75" stroke="#EEEEEE"/>
+</svg>
+`
+export const DarkContinueLine = `<svg width="360" height="26" viewBox="0 0 360 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="12.5996" x2="96" y2="12.5996" stroke="#35383F"/>
+<path d="M117.464 19.8336C116.636 19.8336 115.88 19.6206 115.196 19.1946C114.518 18.7686 113.975 18.1986 113.567 17.4846C113.165 16.7646 112.964 15.9696 112.964 15.0996C112.964 14.4396 113.081 13.8246 113.315 13.2546C113.549 12.6786 113.87 12.1746 114.278 11.7426C114.692 11.3046 115.172 10.9626 115.718 10.7166C116.264 10.4706 116.846 10.3476 117.464 10.3476C118.292 10.3476 119.045 10.5606 119.723 10.9866C120.407 11.4126 120.95 11.9856 121.352 12.7056C121.76 13.4256 121.964 14.2236 121.964 15.0996C121.964 15.7536 121.847 16.3656 121.613 16.9356C121.379 17.5056 121.055 18.0096 120.641 18.4476C120.233 18.8796 119.756 19.2186 119.21 19.4646C118.67 19.7106 118.088 19.8336 117.464 19.8336ZM117.464 17.9616C117.962 17.9616 118.409 17.8296 118.805 17.5656C119.201 17.3016 119.513 16.9536 119.741 16.5216C119.975 16.0836 120.092 15.6096 120.092 15.0996C120.092 14.5776 119.972 14.0976 119.732 13.6596C119.498 13.2216 119.183 12.8736 118.787 12.6156C118.391 12.3516 117.95 12.2196 117.464 12.2196C116.972 12.2196 116.525 12.3516 116.123 12.6156C115.727 12.8796 115.412 13.2306 115.178 13.6686C114.95 14.1066 114.836 14.5836 114.836 15.0996C114.836 15.6336 114.956 16.1166 115.196 16.5486C115.436 16.9806 115.754 17.3256 116.15 17.5836C116.552 17.8356 116.99 17.9616 117.464 17.9616ZM128.937 12.4806C128.781 12.3846 128.61 12.3096 128.424 12.2556C128.244 12.1956 128.046 12.1656 127.83 12.1656C127.362 12.1656 126.954 12.2886 126.606 12.5346C126.258 12.7806 125.985 13.1136 125.787 13.5336C125.595 13.9536 125.499 14.4186 125.499 14.9286V19.5996H123.618V10.5996H125.49V11.8146C125.802 11.3646 126.18 11.0106 126.624 10.7526C127.074 10.4886 127.575 10.3566 128.127 10.3566C128.331 10.3566 128.523 10.3656 128.703 10.3836C128.889 10.4016 129.066 10.4376 129.234 10.4916L128.937 12.4806ZM141.18 17.0436L142.854 17.9526C142.446 18.5226 141.927 18.9786 141.297 19.3206C140.673 19.6626 139.995 19.8336 139.263 19.8336C138.435 19.8336 137.679 19.6206 136.995 19.1946C136.317 18.7686 135.774 18.1986 135.366 17.4846C134.964 16.7646 134.763 15.9696 134.763 15.0996C134.763 14.4396 134.88 13.8246 135.114 13.2546C135.348 12.6786 135.669 12.1746 136.077 11.7426C136.491 11.3046 136.971 10.9626 137.517 10.7166C138.063 10.4706 138.645 10.3476 139.263 10.3476C139.995 10.3476 140.673 10.5186 141.297 10.8606C141.927 11.2026 142.446 11.6616 142.854 12.2376L141.18 13.1466C140.928 12.8466 140.634 12.6186 140.298 12.4626C139.962 12.3006 139.617 12.2196 139.263 12.2196C138.771 12.2196 138.324 12.3546 137.922 12.6246C137.526 12.8886 137.211 13.2396 136.977 13.6776C136.749 14.1096 136.635 14.5836 136.635 15.0996C136.635 15.6096 136.752 16.0836 136.986 16.5216C137.22 16.9536 137.535 17.3016 137.931 17.5656C138.333 17.8296 138.777 17.9616 139.263 17.9616C139.635 17.9616 139.989 17.8776 140.325 17.7096C140.661 17.5416 140.946 17.3196 141.18 17.0436ZM148.358 19.8336C147.53 19.8336 146.774 19.6206 146.09 19.1946C145.412 18.7686 144.869 18.1986 144.461 17.4846C144.059 16.7646 143.858 15.9696 143.858 15.0996C143.858 14.4396 143.975 13.8246 144.209 13.2546C144.443 12.6786 144.764 12.1746 145.172 11.7426C145.586 11.3046 146.066 10.9626 146.612 10.7166C147.158 10.4706 147.74 10.3476 148.358 10.3476C149.186 10.3476 149.939 10.5606 150.617 10.9866C151.301 11.4126 151.844 11.9856 152.246 12.7056C152.654 13.4256 152.858 14.2236 152.858 15.0996C152.858 15.7536 152.741 16.3656 152.507 16.9356C152.273 17.5056 151.949 18.0096 151.535 18.4476C151.127 18.8796 150.65 19.2186 150.104 19.4646C149.564 19.7106 148.982 19.8336 148.358 19.8336ZM148.358 17.9616C148.856 17.9616 149.303 17.8296 149.699 17.5656C150.095 17.3016 150.407 16.9536 150.635 16.5216C150.869 16.0836 150.986 15.6096 150.986 15.0996C150.986 14.5776 150.866 14.0976 150.626 13.6596C150.392 13.2216 150.077 12.8736 149.681 12.6156C149.285 12.3516 148.844 12.2196 148.358 12.2196C147.866 12.2196 147.419 12.3516 147.017 12.6156C146.621 12.8796 146.306 13.2306 146.072 13.6686C145.844 14.1066 145.73 14.5836 145.73 15.0996C145.73 15.6336 145.85 16.1166 146.09 16.5486C146.33 16.9806 146.648 17.3256 147.044 17.5836C147.446 17.8356 147.884 17.9616 148.358 17.9616ZM162.864 14.8836V19.5996H160.992V14.9196C160.992 14.4096 160.884 13.9476 160.668 13.5336C160.458 13.1136 160.167 12.7806 159.795 12.5346C159.429 12.2826 159.012 12.1566 158.544 12.1566C158.076 12.1566 157.665 12.2826 157.311 12.5346C156.963 12.7806 156.69 13.1136 156.492 13.5336C156.3 13.9476 156.204 14.4096 156.204 14.9196V19.5996H154.332V10.5996H156.204V11.8146C156.516 11.3586 156.894 11.0016 157.338 10.7436C157.782 10.4796 158.283 10.3476 158.841 10.3476C159.651 10.3476 160.353 10.5546 160.947 10.9686C161.547 11.3826 162.015 11.9316 162.351 12.6156C162.687 13.2996 162.858 14.0556 162.864 14.8836ZM169.8 12.4716H167.91L167.901 19.5996H166.029L166.038 12.4716H164.607V10.5996H166.038L166.029 7.77361H167.901L167.91 10.5996H169.8V12.4716ZM171.224 10.5996H173.096V19.5996H171.224V10.5996ZM172.169 9.11461C171.887 9.11461 171.65 9.02161 171.458 8.83561C171.266 8.64961 171.17 8.41561 171.17 8.13361C171.17 7.85761 171.266 7.62661 171.458 7.44061C171.65 7.24861 171.887 7.15261 172.169 7.15261C172.445 7.15261 172.679 7.24861 172.871 7.44061C173.063 7.62661 173.159 7.85761 173.159 8.13361C173.159 8.41561 173.063 8.64961 172.871 8.83561C172.679 9.02161 172.445 9.11461 172.169 9.11461ZM184.417 14.8836V19.5996H182.545V14.9196C182.545 14.4096 182.437 13.9476 182.221 13.5336C182.011 13.1136 181.72 12.7806 181.348 12.5346C180.982 12.2826 180.565 12.1566 180.097 12.1566C179.629 12.1566 179.218 12.2826 178.864 12.5346C178.516 12.7806 178.243 13.1136 178.045 13.5336C177.853 13.9476 177.757 14.4096 177.757 14.9196V19.5996H175.885V10.5996H177.757V11.8146C178.069 11.3586 178.447 11.0016 178.891 10.7436C179.335 10.4796 179.836 10.3476 180.394 10.3476C181.204 10.3476 181.906 10.5546 182.5 10.9686C183.1 11.3826 183.568 11.9316 183.904 12.6156C184.24 13.2996 184.411 14.0556 184.417 14.8836ZM186.601 15.2976V10.5996H188.473V15.2616C188.473 15.7716 188.578 16.2366 188.788 16.6566C189.004 17.0706 189.295 17.4036 189.661 17.6556C190.033 17.9016 190.456 18.0246 190.93 18.0246C191.392 18.0246 191.797 17.9016 192.145 17.6556C192.499 17.4036 192.772 17.0706 192.964 16.6566C193.162 16.2366 193.261 15.7716 193.261 15.2616V10.5996H195.133V19.5996H193.261V18.3756C192.949 18.8256 192.571 19.1826 192.127 19.4466C191.683 19.7106 191.182 19.8426 190.624 19.8426C189.82 19.8426 189.115 19.6386 188.509 19.2306C187.909 18.8166 187.444 18.2646 187.114 17.5746C186.784 16.8846 186.613 16.1256 186.601 15.2976ZM201.325 19.8336C200.497 19.8336 199.741 19.6206 199.057 19.1946C198.379 18.7686 197.836 18.1986 197.428 17.4846C197.026 16.7646 196.825 15.9696 196.825 15.0996C196.825 14.4396 196.942 13.8246 197.176 13.2546C197.41 12.6786 197.731 12.1746 198.139 11.7426C198.553 11.3046 199.033 10.9626 199.579 10.7166C200.125 10.4706 200.707 10.3476 201.325 10.3476C202.015 10.3476 202.648 10.4916 203.224 10.7796C203.8 11.0616 204.292 11.4546 204.7 11.9586C205.108 12.4566 205.408 13.0326 205.6 13.6866C205.792 14.3346 205.849 15.0246 205.771 15.7566H198.832C198.91 16.1706 199.06 16.5456 199.282 16.8816C199.51 17.2116 199.798 17.4726 200.146 17.6646C200.5 17.8566 200.893 17.9556 201.325 17.9616C201.781 17.9616 202.195 17.8476 202.567 17.6196C202.945 17.3916 203.254 17.0766 203.494 16.6746L205.393 17.1156C205.033 17.9136 204.49 18.5676 203.764 19.0776C203.038 19.5816 202.225 19.8336 201.325 19.8336ZM198.769 14.3256H203.881C203.821 13.8936 203.668 13.5036 203.422 13.1556C203.182 12.8016 202.879 12.5226 202.513 12.3186C202.153 12.1086 201.757 12.0036 201.325 12.0036C200.899 12.0036 200.503 12.1056 200.137 12.3096C199.777 12.5136 199.477 12.7926 199.237 13.1466C199.003 13.4946 198.847 13.8876 198.769 14.3256ZM216.5 19.5996H214.637L211.622 10.5996H213.458L215.582 16.9176L217.688 10.5996H219.578L221.684 16.9176L223.799 10.5996H225.635L222.629 19.5996H220.748L218.624 13.2366L216.5 19.5996ZM227.233 10.5996H229.105V19.5996H227.233V10.5996ZM228.178 9.11461C227.896 9.11461 227.659 9.02161 227.467 8.83561C227.275 8.64961 227.179 8.41561 227.179 8.13361C227.179 7.85761 227.275 7.62661 227.467 7.44061C227.659 7.24861 227.896 7.15261 228.178 7.15261C228.454 7.15261 228.688 7.24861 228.88 7.44061C229.072 7.62661 229.168 7.85761 229.168 8.13361C229.168 8.41561 229.072 8.64961 228.88 8.83561C228.688 9.02161 228.454 9.11461 228.178 9.11461ZM236.896 12.4716H235.006L234.997 19.5996H233.125L233.134 12.4716H231.703V10.5996H233.134L233.125 7.77361H234.997L235.006 10.5996H236.896V12.4716ZM246.856 14.8926V19.5996H244.984V14.9286C244.984 14.4186 244.876 13.9536 244.66 13.5336C244.45 13.1136 244.168 12.7806 243.814 12.5346C243.46 12.2886 243.067 12.1656 242.635 12.1656C242.167 12.1656 241.768 12.2886 241.438 12.5346C241.108 12.7806 240.853 13.1136 240.673 13.5336C240.499 13.9536 240.412 14.4186 240.412 14.9286V19.5996H238.531V6.09961H240.403V11.6526C240.655 11.1666 240.985 10.8306 241.393 10.6446C241.807 10.4526 242.281 10.3566 242.815 10.3566C243.625 10.3566 244.33 10.5636 244.93 10.9776C245.53 11.3916 245.998 11.9436 246.334 12.6336C246.67 13.3176 246.844 14.0706 246.856 14.8926Z" fill="white"/>
+<line x1="264" y1="12.5996" x2="360" y2="12.5996" stroke="#35383F"/>
+</svg>
+`
+export const LightContinueLine = `<svg width="360" height="26" viewBox="0 0 360 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="12.6" x2="96" y2="12.6" stroke="#EEEEEE"/>
+<path d="M117.464 19.834C116.636 19.834 115.88 19.621 115.196 19.195C114.518 18.769 113.975 18.199 113.567 17.485C113.165 16.765 112.964 15.97 112.964 15.1C112.964 14.44 113.081 13.825 113.315 13.255C113.549 12.679 113.87 12.175 114.278 11.743C114.692 11.305 115.172 10.963 115.718 10.717C116.264 10.471 116.846 10.348 117.464 10.348C118.292 10.348 119.045 10.561 119.723 10.987C120.407 11.413 120.95 11.986 121.352 12.706C121.76 13.426 121.964 14.224 121.964 15.1C121.964 15.754 121.847 16.366 121.613 16.936C121.379 17.506 121.055 18.01 120.641 18.448C120.233 18.88 119.756 19.219 119.21 19.465C118.67 19.711 118.088 19.834 117.464 19.834ZM117.464 17.962C117.962 17.962 118.409 17.83 118.805 17.566C119.201 17.302 119.513 16.954 119.741 16.522C119.975 16.084 120.092 15.61 120.092 15.1C120.092 14.578 119.972 14.098 119.732 13.66C119.498 13.222 119.183 12.874 118.787 12.616C118.391 12.352 117.95 12.22 117.464 12.22C116.972 12.22 116.525 12.352 116.123 12.616C115.727 12.88 115.412 13.231 115.178 13.669C114.95 14.107 114.836 14.584 114.836 15.1C114.836 15.634 114.956 16.117 115.196 16.549C115.436 16.981 115.754 17.326 116.15 17.584C116.552 17.836 116.99 17.962 117.464 17.962ZM128.937 12.481C128.781 12.385 128.61 12.31 128.424 12.256C128.244 12.196 128.046 12.166 127.83 12.166C127.362 12.166 126.954 12.289 126.606 12.535C126.258 12.781 125.985 13.114 125.787 13.534C125.595 13.954 125.499 14.419 125.499 14.929V19.6H123.618V10.6H125.49V11.815C125.802 11.365 126.18 11.011 126.624 10.753C127.074 10.489 127.575 10.357 128.127 10.357C128.331 10.357 128.523 10.366 128.703 10.384C128.889 10.402 129.066 10.438 129.234 10.492L128.937 12.481ZM141.18 17.044L142.854 17.953C142.446 18.523 141.927 18.979 141.297 19.321C140.673 19.663 139.995 19.834 139.263 19.834C138.435 19.834 137.679 19.621 136.995 19.195C136.317 18.769 135.774 18.199 135.366 17.485C134.964 16.765 134.763 15.97 134.763 15.1C134.763 14.44 134.88 13.825 135.114 13.255C135.348 12.679 135.669 12.175 136.077 11.743C136.491 11.305 136.971 10.963 137.517 10.717C138.063 10.471 138.645 10.348 139.263 10.348C139.995 10.348 140.673 10.519 141.297 10.861C141.927 11.203 142.446 11.662 142.854 12.238L141.18 13.147C140.928 12.847 140.634 12.619 140.298 12.463C139.962 12.301 139.617 12.22 139.263 12.22C138.771 12.22 138.324 12.355 137.922 12.625C137.526 12.889 137.211 13.24 136.977 13.678C136.749 14.11 136.635 14.584 136.635 15.1C136.635 15.61 136.752 16.084 136.986 16.522C137.22 16.954 137.535 17.302 137.931 17.566C138.333 17.83 138.777 17.962 139.263 17.962C139.635 17.962 139.989 17.878 140.325 17.71C140.661 17.542 140.946 17.32 141.18 17.044ZM148.358 19.834C147.53 19.834 146.774 19.621 146.09 19.195C145.412 18.769 144.869 18.199 144.461 17.485C144.059 16.765 143.858 15.97 143.858 15.1C143.858 14.44 143.975 13.825 144.209 13.255C144.443 12.679 144.764 12.175 145.172 11.743C145.586 11.305 146.066 10.963 146.612 10.717C147.158 10.471 147.74 10.348 148.358 10.348C149.186 10.348 149.939 10.561 150.617 10.987C151.301 11.413 151.844 11.986 152.246 12.706C152.654 13.426 152.858 14.224 152.858 15.1C152.858 15.754 152.741 16.366 152.507 16.936C152.273 17.506 151.949 18.01 151.535 18.448C151.127 18.88 150.65 19.219 150.104 19.465C149.564 19.711 148.982 19.834 148.358 19.834ZM148.358 17.962C148.856 17.962 149.303 17.83 149.699 17.566C150.095 17.302 150.407 16.954 150.635 16.522C150.869 16.084 150.986 15.61 150.986 15.1C150.986 14.578 150.866 14.098 150.626 13.66C150.392 13.222 150.077 12.874 149.681 12.616C149.285 12.352 148.844 12.22 148.358 12.22C147.866 12.22 147.419 12.352 147.017 12.616C146.621 12.88 146.306 13.231 146.072 13.669C145.844 14.107 145.73 14.584 145.73 15.1C145.73 15.634 145.85 16.117 146.09 16.549C146.33 16.981 146.648 17.326 147.044 17.584C147.446 17.836 147.884 17.962 148.358 17.962ZM162.864 14.884V19.6H160.992V14.92C160.992 14.41 160.884 13.948 160.668 13.534C160.458 13.114 160.167 12.781 159.795 12.535C159.429 12.283 159.012 12.157 158.544 12.157C158.076 12.157 157.665 12.283 157.311 12.535C156.963 12.781 156.69 13.114 156.492 13.534C156.3 13.948 156.204 14.41 156.204 14.92V19.6H154.332V10.6H156.204V11.815C156.516 11.359 156.894 11.002 157.338 10.744C157.782 10.48 158.283 10.348 158.841 10.348C159.651 10.348 160.353 10.555 160.947 10.969C161.547 11.383 162.015 11.932 162.351 12.616C162.687 13.3 162.858 14.056 162.864 14.884ZM169.8 12.472H167.91L167.901 19.6H166.029L166.038 12.472H164.607V10.6H166.038L166.029 7.77398H167.901L167.91 10.6H169.8V12.472ZM171.224 10.6H173.096V19.6H171.224V10.6ZM172.169 9.11497C171.887 9.11497 171.65 9.02197 171.458 8.83597C171.266 8.64997 171.17 8.41597 171.17 8.13398C171.17 7.85798 171.266 7.62698 171.458 7.44097C171.65 7.24898 171.887 7.15298 172.169 7.15298C172.445 7.15298 172.679 7.24898 172.871 7.44097C173.063 7.62698 173.159 7.85798 173.159 8.13398C173.159 8.41597 173.063 8.64997 172.871 8.83597C172.679 9.02197 172.445 9.11497 172.169 9.11497ZM184.417 14.884V19.6H182.545V14.92C182.545 14.41 182.437 13.948 182.221 13.534C182.011 13.114 181.72 12.781 181.348 12.535C180.982 12.283 180.565 12.157 180.097 12.157C179.629 12.157 179.218 12.283 178.864 12.535C178.516 12.781 178.243 13.114 178.045 13.534C177.853 13.948 177.757 14.41 177.757 14.92V19.6H175.885V10.6H177.757V11.815C178.069 11.359 178.447 11.002 178.891 10.744C179.335 10.48 179.836 10.348 180.394 10.348C181.204 10.348 181.906 10.555 182.5 10.969C183.1 11.383 183.568 11.932 183.904 12.616C184.24 13.3 184.411 14.056 184.417 14.884ZM186.601 15.298V10.6H188.473V15.262C188.473 15.772 188.578 16.237 188.788 16.657C189.004 17.071 189.295 17.404 189.661 17.656C190.033 17.902 190.456 18.025 190.93 18.025C191.392 18.025 191.797 17.902 192.145 17.656C192.499 17.404 192.772 17.071 192.964 16.657C193.162 16.237 193.261 15.772 193.261 15.262V10.6H195.133V19.6H193.261V18.376C192.949 18.826 192.571 19.183 192.127 19.447C191.683 19.711 191.182 19.843 190.624 19.843C189.82 19.843 189.115 19.639 188.509 19.231C187.909 18.817 187.444 18.265 187.114 17.575C186.784 16.885 186.613 16.126 186.601 15.298ZM201.325 19.834C200.497 19.834 199.741 19.621 199.057 19.195C198.379 18.769 197.836 18.199 197.428 17.485C197.026 16.765 196.825 15.97 196.825 15.1C196.825 14.44 196.942 13.825 197.176 13.255C197.41 12.679 197.731 12.175 198.139 11.743C198.553 11.305 199.033 10.963 199.579 10.717C200.125 10.471 200.707 10.348 201.325 10.348C202.015 10.348 202.648 10.492 203.224 10.78C203.8 11.062 204.292 11.455 204.7 11.959C205.108 12.457 205.408 13.033 205.6 13.687C205.792 14.335 205.849 15.025 205.771 15.757H198.832C198.91 16.171 199.06 16.546 199.282 16.882C199.51 17.212 199.798 17.473 200.146 17.665C200.5 17.857 200.893 17.956 201.325 17.962C201.781 17.962 202.195 17.848 202.567 17.62C202.945 17.392 203.254 17.077 203.494 16.675L205.393 17.116C205.033 17.914 204.49 18.568 203.764 19.078C203.038 19.582 202.225 19.834 201.325 19.834ZM198.769 14.326H203.881C203.821 13.894 203.668 13.504 203.422 13.156C203.182 12.802 202.879 12.523 202.513 12.319C202.153 12.109 201.757 12.004 201.325 12.004C200.899 12.004 200.503 12.106 200.137 12.31C199.777 12.514 199.477 12.793 199.237 13.147C199.003 13.495 198.847 13.888 198.769 14.326ZM216.5 19.6H214.637L211.622 10.6H213.458L215.582 16.918L217.688 10.6H219.578L221.684 16.918L223.799 10.6H225.635L222.629 19.6H220.748L218.624 13.237L216.5 19.6ZM227.233 10.6H229.105V19.6H227.233V10.6ZM228.178 9.11497C227.896 9.11497 227.659 9.02197 227.467 8.83597C227.275 8.64997 227.179 8.41597 227.179 8.13398C227.179 7.85798 227.275 7.62698 227.467 7.44097C227.659 7.24898 227.896 7.15298 228.178 7.15298C228.454 7.15298 228.688 7.24898 228.88 7.44097C229.072 7.62698 229.168 7.85798 229.168 8.13398C229.168 8.41597 229.072 8.64997 228.88 8.83597C228.688 9.02197 228.454 9.11497 228.178 9.11497ZM236.896 12.472H235.006L234.997 19.6H233.125L233.134 12.472H231.703V10.6H233.134L233.125 7.77398H234.997L235.006 10.6H236.896V12.472ZM246.856 14.893V19.6H244.984V14.929C244.984 14.419 244.876 13.954 244.66 13.534C244.45 13.114 244.168 12.781 243.814 12.535C243.46 12.289 243.067 12.166 242.635 12.166C242.167 12.166 241.768 12.289 241.438 12.535C241.108 12.781 240.853 13.114 240.673 13.534C240.499 13.954 240.412 14.419 240.412 14.929V19.6H238.531V6.09997H240.403V11.653C240.655 11.167 240.985 10.831 241.393 10.645C241.807 10.453 242.281 10.357 242.815 10.357C243.625 10.357 244.33 10.564 244.93 10.978C245.53 11.392 245.998 11.944 246.334 12.634C246.67 13.318 246.844 14.071 246.856 14.893Z" fill="#757575"/>
+<line x1="264" y1="12.6" x2="360" y2="12.6" stroke="#EEEEEE"/>
+</svg>`
+
+export const BlackApple = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5941_7896)">
+<path d="M17.2729 0.611986C17.2219 0.554986 15.3844 0.634486 13.7854 2.36999C12.1864 4.10399 12.4324 6.09299 12.4684 6.14399C12.5044 6.19499 14.7484 6.27449 16.1809 4.25699C17.6134 2.23949 17.3239 0.670486 17.2729 0.611986ZM22.2439 18.2115C22.1719 18.0675 18.7564 16.3605 19.0744 13.0785C19.3924 9.79499 21.5869 8.89499 21.6214 8.79749C21.6559 8.69999 20.7259 7.61249 19.7404 7.06199C19.0168 6.67386 18.216 6.4515 17.3959 6.41099C17.2339 6.40649 16.6714 6.26849 15.5149 6.58499C14.7529 6.79349 13.0354 7.46849 12.5629 7.49549C12.0889 7.52249 10.6789 6.71249 9.16239 6.49799C8.19189 6.31049 7.16289 6.69449 6.42639 6.98999C5.69139 7.28399 4.29339 8.12099 3.31539 10.3455C2.33739 12.5685 2.84889 16.0905 3.21489 17.1855C3.58089 18.279 4.15239 20.0715 5.12439 21.3795C5.98839 22.8555 7.13439 23.88 7.61289 24.228C8.09139 24.576 9.44139 24.807 10.3774 24.3285C11.1304 23.8665 12.4894 23.601 13.0264 23.6205C13.5619 23.64 14.6179 23.8515 15.6994 24.429C16.5559 24.7245 17.3659 24.6015 18.1774 24.2715C18.9889 23.94 20.1634 22.683 21.5344 20.1345C22.0549 18.9495 22.2919 18.309 22.2439 18.2115Z" fill="black"/>
+<path d="M17.2729 0.611986C17.2219 0.554986 15.3844 0.634486 13.7854 2.36999C12.1864 4.10399 12.4324 6.09299 12.4684 6.14399C12.5044 6.19499 14.7484 6.27449 16.1809 4.25699C17.6134 2.23949 17.3239 0.670486 17.2729 0.611986ZM22.2439 18.2115C22.1719 18.0675 18.7564 16.3605 19.0744 13.0785C19.3924 9.79499 21.5869 8.89499 21.6214 8.79749C21.6559 8.69999 20.7259 7.61249 19.7404 7.06199C19.0168 6.67386 18.216 6.4515 17.3959 6.41099C17.2339 6.40649 16.6714 6.26849 15.5149 6.58499C14.7529 6.79349 13.0354 7.46849 12.5629 7.49549C12.0889 7.52249 10.6789 6.71249 9.16239 6.49799C8.19189 6.31049 7.16289 6.69449 6.42639 6.98999C5.69139 7.28399 4.29339 8.12099 3.31539 10.3455C2.33739 12.5685 2.84889 16.0905 3.21489 17.1855C3.58089 18.279 4.15239 20.0715 5.12439 21.3795C5.98839 22.8555 7.13439 23.88 7.61289 24.228C8.09139 24.576 9.44139 24.807 10.3774 24.3285C11.1304 23.8665 12.4894 23.601 13.0264 23.6205C13.5619 23.64 14.6179 23.8515 15.6994 24.429C16.5559 24.7245 17.3659 24.6015 18.1774 24.2715C18.9889 23.94 20.1634 22.683 21.5344 20.1345C22.0549 18.9495 22.2919 18.309 22.2439 18.2115Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_5941_7896">
+<rect width="24" height="24" fill="white" transform="translate(0.5 0.599976)"/>
+</clipPath>
+</defs>
+</svg>
+`
+export const WhiteApple = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_114_3417)">
+<path d="M17.2729 0.762011C17.2219 0.705011 15.3844 0.784511 13.7854 2.52001C12.1864 4.25401 12.4324 6.24301 12.4684 6.29401C12.5044 6.34501 14.7484 6.42451 16.1809 4.40701C17.6134 2.38951 17.3239 0.820511 17.2729 0.762011ZM22.2439 18.3615C22.1719 18.2175 18.7564 16.5105 19.0744 13.2285C19.3924 9.94501 21.5869 9.04501 21.6214 8.94751C21.6559 8.85001 20.7259 7.76251 19.7404 7.21201C19.0168 6.82389 18.216 6.60152 17.3959 6.56101C17.2339 6.55651 16.6714 6.41851 15.5149 6.73501C14.7529 6.94351 13.0354 7.61851 12.5629 7.64551C12.0889 7.67251 10.6789 6.86251 9.16239 6.64801C8.19189 6.46051 7.16289 6.84451 6.42639 7.14001C5.69139 7.43401 4.29339 8.27101 3.31539 10.4955C2.33739 12.7185 2.84889 16.2405 3.21489 17.3355C3.58089 18.429 4.15239 20.2215 5.12439 21.5295C5.98839 23.0055 7.13439 24.03 7.61289 24.378C8.09139 24.726 9.44139 24.957 10.3774 24.4785C11.1304 24.0165 12.4894 23.751 13.0264 23.7705C13.5619 23.79 14.6179 24.0015 15.6994 24.579C16.5559 24.8745 17.3659 24.7515 18.1774 24.4215C18.9889 24.09 20.1634 22.833 21.5344 20.2845C22.0549 19.0995 22.2919 18.459 22.2439 18.3615Z" fill="white"/>
+<path d="M17.2729 0.762011C17.2219 0.705011 15.3844 0.784511 13.7854 2.52001C12.1864 4.25401 12.4324 6.24301 12.4684 6.29401C12.5044 6.34501 14.7484 6.42451 16.1809 4.40701C17.6134 2.38951 17.3239 0.820511 17.2729 0.762011ZM22.2439 18.3615C22.1719 18.2175 18.7564 16.5105 19.0744 13.2285C19.3924 9.94501 21.5869 9.04501 21.6214 8.94751C21.6559 8.85001 20.7259 7.76251 19.7404 7.21201C19.0168 6.82389 18.216 6.60152 17.3959 6.56101C17.2339 6.55651 16.6714 6.41851 15.5149 6.73501C14.7529 6.94351 13.0354 7.61851 12.5629 7.64551C12.0889 7.67251 10.6789 6.86251 9.16239 6.64801C8.19189 6.46051 7.16289 6.84451 6.42639 7.14001C5.69139 7.43401 4.29339 8.27101 3.31539 10.4955C2.33739 12.7185 2.84889 16.2405 3.21489 17.3355C3.58089 18.429 4.15239 20.2215 5.12439 21.5295C5.98839 23.0055 7.13439 24.03 7.61289 24.378C8.09139 24.726 9.44139 24.957 10.3774 24.4785C11.1304 24.0165 12.4894 23.751 13.0264 23.7705C13.5619 23.79 14.6179 24.0015 15.6994 24.579C16.5559 24.8745 17.3659 24.7515 18.1774 24.4215C18.9889 24.09 20.1634 22.833 21.5344 20.2845C22.0549 19.0995 22.2919 18.459 22.2439 18.3615Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_114_3417">
+<rect width="24" height="24" fill="white" transform="translate(0.5 0.75)"/>
+</clipPath>
+</defs>
+</svg>
+`
+export const Amazon = `<svg width="61" height="19" viewBox="0 0 61 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8956 6.80406C24.5409 7.34459 24.3618 7.98184 24.3828 8.62834L24.3808 8.62582C24.3808 10.5463 25.5974 11.5069 27.163 11.5126C27.7436 11.5457 28.3237 11.4415 28.856 11.2079C29.3888 10.9743 29.859 10.6178 30.2281 10.1681C30.5053 10.6411 30.8672 11.0593 31.2948 11.4017C31.3647 11.4393 31.4432 11.4555 31.5217 11.4478C31.6003 11.4401 31.6747 11.4089 31.7353 11.3585L31.7384 11.3615C32.1105 11.0362 32.784 10.4479 33.1618 10.1349C33.1942 10.1034 33.2203 10.0657 33.2388 10.024C33.2568 9.98234 33.2665 9.93748 33.2671 9.89205C33.2681 9.84657 33.2599 9.80129 33.2429 9.75905C33.2265 9.71675 33.2014 9.67826 33.1695 9.64563C32.7301 9.18295 32.4817 8.57109 32.474 7.93276V5.05203C32.474 4.95751 32.4745 4.86357 32.475 4.77031V4.7702V4.7701V4.76999L32.475 4.76784C32.4809 3.65987 32.4864 2.64721 31.6531 1.87272C30.8595 1.24097 29.8657 0.914944 28.8529 0.953795C27.084 0.953795 25.1056 1.60698 24.6949 3.78031C24.6857 3.82414 24.6857 3.86952 24.6949 3.91331C24.7047 3.95709 24.7227 3.99831 24.7483 4.03474C24.7745 4.07118 24.8079 4.10212 24.8458 4.12509C24.8843 4.14806 24.927 4.1625 24.9716 4.16826L26.7724 4.36046C26.8561 4.34679 26.9331 4.3065 26.9916 4.24555C27.0501 4.1846 27.0871 4.10613 27.0978 4.02221C27.1702 3.68734 27.3617 3.39061 27.6363 3.18659C27.9115 2.98256 28.2513 2.88559 28.5921 2.9136C28.7913 2.90393 28.99 2.94273 29.1712 3.0265C29.3524 3.11027 29.5105 3.23623 29.6327 3.39436C29.839 3.80739 29.9181 4.27269 29.8606 4.73084V4.96621C29.684 4.98641 29.4986 5.0054 29.3076 5.02496L29.3074 5.02497C28.3318 5.12487 27.2086 5.23989 26.3643 5.6086C25.7637 5.84603 25.2504 6.26348 24.8956 6.80406ZM0.516307 6.80706C0.161595 7.34713 -0.0180709 7.98366 0.00143568 8.62986V8.62934C0.00143568 10.5478 1.22111 11.5069 2.78626 11.5126C3.36735 11.5462 3.94793 11.4421 4.48077 11.2085C5.01361 10.9748 5.48382 10.6182 5.8529 10.1681C6.12959 10.6416 6.49149 11.0599 6.92012 11.4017C6.98891 11.44 7.06745 11.4568 7.14547 11.4493C7.22401 11.4419 7.29845 11.4106 7.35902 11.36L7.36467 11.363C7.73529 11.0372 8.40775 10.4505 8.78967 10.1365C8.82201 10.1046 8.84819 10.0665 8.86616 10.0246C8.88361 9.98257 8.89337 9.93766 8.89337 9.89207C8.89388 9.84644 8.88515 9.8008 8.86821 9.75856C8.85127 9.71632 8.82561 9.67808 8.79327 9.64565C8.3518 9.18401 8.10181 8.57189 8.0936 7.93279V5.05206C8.0936 4.95456 8.09414 4.85769 8.09468 4.76154C8.10091 3.65604 8.1066 2.64576 7.27637 1.87274C6.48225 1.24084 5.48792 0.914813 4.47358 0.953819C2.70464 0.953819 0.73242 1.607 0.315595 3.78033C0.307381 3.82401 0.307895 3.86929 0.317135 3.91282C0.326375 3.95635 0.344341 3.99746 0.370008 4.03379C0.395674 4.07007 0.428528 4.10045 0.466514 4.12362C0.504501 4.1468 0.547107 4.16201 0.59074 4.16828L2.39921 4.36049C2.48185 4.34594 2.55783 4.30545 2.61532 4.24455C2.67333 4.1837 2.70977 4.10553 2.72004 4.02223C2.79345 3.68742 2.98492 3.39058 3.26007 3.18661C3.53521 2.98264 3.87504 2.88582 4.21589 2.91362C4.41558 2.90422 4.61423 2.94281 4.79544 3.02653C4.97716 3.11024 5.13527 3.23641 5.25795 3.39438C5.46226 3.80808 5.54028 4.27302 5.48279 4.73086V4.96875C5.30128 4.98989 5.1103 5.00969 4.91336 5.03011H4.91335C3.94229 5.13077 2.82621 5.24647 1.98546 5.61263C1.38435 5.84985 0.871533 6.26705 0.516307 6.80706ZM46.7988 1.03955C44.1092 1.03955 42.6175 3.33616 42.6172 6.28502C42.6175 9.21847 44.0887 11.5731 46.7988 11.5752C49.4019 11.5752 51.0517 9.27971 51.0517 6.38741C51.0594 3.39388 49.5615 1.03955 46.7988 1.03955ZM37.8052 17.3258C38.2287 16.2815 39.1702 13.9379 38.7256 13.3685C38.2887 12.8089 35.8613 13.0913 34.7112 13.2251L34.6518 13.232C34.3089 13.2726 34.2591 12.975 34.5651 12.7623C36.5624 11.3691 39.8354 11.7717 40.2148 12.2403C40.5942 12.709 40.1183 15.9754 38.24 17.5285C38.1615 17.601 38.0609 17.6441 37.9546 17.6513C37.8068 17.6523 37.7226 17.528 37.8057 17.3237L37.8052 17.3258ZM8.59975 12.9572C8.27327 12.6637 8.56536 12.2627 8.9596 12.4944C13.7695 15.2264 19.2062 16.6595 24.7363 16.6534C28.8697 16.6346 32.9589 15.8033 36.7719 14.2063C37.3633 13.9602 37.854 14.5974 37.2781 15.0213C33.7874 17.5801 28.728 18.9424 24.3698 18.9424C18.5538 18.9743 12.9333 16.8413 8.59975 12.9572ZM45.3565 5.98758V6.02238C45.3563 7.19469 45.356 9.6196 46.7989 9.6196C48.245 9.6196 48.3138 7.62557 48.3081 6.40914C48.3389 5.5615 48.245 4.71365 48.0299 3.89329C47.9714 3.61938 47.8163 3.37589 47.593 3.20727C47.3697 3.03861 47.0931 2.95664 46.8138 2.97591C45.4453 2.97642 45.3565 4.8262 45.3565 5.98558V5.98758ZM2.72193 8.30845C2.72193 9.1081 3.13722 9.64693 3.85126 9.64693C4.12127 9.63568 4.38307 9.55202 4.60945 9.40452C4.83532 9.25703 5.01806 9.05126 5.13716 8.8088C5.43643 8.20151 5.55758 7.5214 5.48622 6.84802V6.44953C4.13975 6.44696 2.71988 6.73234 2.71988 8.30593L2.72193 8.30845ZM27.0948 8.30864C27.0948 9.10829 27.5127 9.64713 28.2283 9.64713C28.4978 9.63515 28.759 9.55118 28.9844 9.40374C29.2103 9.2563 29.3925 9.05089 29.5116 8.80899C29.8109 8.2017 29.932 7.52159 29.8607 6.84821V6.44972C28.5126 6.44715 27.0928 6.73253 27.0928 8.30613L27.0948 8.30864ZM57.6427 11.2883C57.7022 11.3429 57.7787 11.3754 57.8588 11.3807L59.7278 11.3847C59.8131 11.3851 59.8962 11.3553 59.9619 11.3004C60.0276 11.2454 60.0718 11.169 60.0867 11.0846V5.11387V5.11099C60.0867 4.19336 60.0867 2.92067 59.5995 2.16088C59.3665 1.80037 59.0431 1.50713 58.6617 1.31072C58.2803 1.1143 57.8542 1.02128 57.4261 1.04122C56.1443 1.04122 55.4107 1.66074 54.8928 2.95631H54.8635V1.50744C54.8435 1.43308 54.8009 1.36684 54.7408 1.31873C54.6808 1.27063 54.6069 1.2435 54.5304 1.24046H52.8066C52.7188 1.23784 52.6336 1.26775 52.5669 1.32475C52.5007 1.38179 52.458 1.46165 52.4473 1.54861L52.4493 11.0359C52.4514 11.1254 52.4868 11.2112 52.5494 11.2753C52.6115 11.3394 52.6967 11.3769 52.7861 11.3807H54.6341C54.6803 11.382 54.7265 11.3742 54.7701 11.3576C54.8137 11.3409 54.8533 11.3159 54.8871 11.2838C54.921 11.2518 54.9482 11.2134 54.9672 11.1709C54.9862 11.1283 54.9965 11.0825 54.998 11.0359V5.9314C54.9621 5.31717 55.0632 4.70263 55.2947 4.13271C55.3825 3.91594 55.5314 3.72918 55.7223 3.59469C55.9138 3.46025 56.1397 3.38353 56.3727 3.37438C57.5538 3.37438 57.5421 4.66163 57.5329 5.67562C57.5321 5.76254 57.5313 5.84746 57.5313 5.92939V11.0805C57.5436 11.1604 57.5831 11.2338 57.6427 11.2883ZM20.5435 11.3769C20.4547 11.3721 20.371 11.3341 20.3094 11.2705C20.2473 11.207 20.2114 11.1224 20.2088 11.0336V6.00545C20.236 5.41209 20.2191 4.81754 20.1575 4.2268C20.1195 3.97386 19.9835 3.74588 19.7787 3.59294C19.5738 3.44006 19.3172 3.37474 19.0646 3.41076C18.8239 3.41775 18.5898 3.49494 18.3927 3.63313C18.195 3.77127 18.0426 3.96419 17.9533 4.18816C17.7987 4.7808 17.7407 5.39441 17.7813 6.00545V11.0336C17.7803 11.0798 17.77 11.1253 17.7515 11.1676C17.7325 11.2099 17.7058 11.2482 17.6725 11.28C17.6391 11.3119 17.6001 11.3367 17.557 11.3533C17.5138 11.37 17.4676 11.3781 17.422 11.3769H15.5647C15.4759 11.3728 15.3917 11.3352 15.3296 11.2715C15.267 11.2078 15.2311 11.1228 15.229 11.0336V6.00545C15.229 5.89928 15.2307 5.78811 15.2325 5.67399C15.2484 4.65072 15.2679 3.39123 14.0797 3.39123C12.7947 3.39123 12.7973 4.79731 12.7993 5.88117L12.7994 6.00545V11.0346C12.7979 11.0807 12.7876 11.126 12.7691 11.1682C12.7506 11.2103 12.7239 11.2483 12.6906 11.28C12.6572 11.3118 12.6177 11.3368 12.5746 11.3533C12.5314 11.3699 12.4858 11.3781 12.4396 11.3769H10.5787C10.4951 11.3742 10.415 11.3413 10.3539 11.2841C10.2928 11.2268 10.2543 11.1488 10.2461 11.0653V1.58098C10.2471 1.53488 10.2569 1.48966 10.2759 1.44747C10.2943 1.40527 10.321 1.36735 10.3544 1.33559C10.3878 1.30378 10.4273 1.27885 10.4704 1.2623C10.513 1.24576 10.5592 1.23748 10.6054 1.23872H12.3384C12.4236 1.24103 12.5053 1.27479 12.5674 1.33353C12.63 1.39232 12.6685 1.47203 12.6757 1.55739V2.79499H12.7075C12.8631 2.27158 13.188 1.81471 13.6315 1.49665C14.0745 1.17859 14.6115 1.01743 15.1561 1.03844C16.3203 1.03844 17.0498 1.59912 17.5693 2.79499C17.7454 2.34337 18.0369 1.94612 18.4147 1.64322C18.7931 1.34032 19.2438 1.14251 19.7227 1.06959C20.2016 0.996664 20.6909 1.05104 21.1421 1.22767C21.5928 1.40425 21.9896 1.69707 22.2914 2.07583C22.795 2.75875 22.7793 3.70772 22.7645 4.60455C22.762 4.75445 22.7596 4.90289 22.7596 5.04839L22.7575 11.0336C22.7565 11.0798 22.7462 11.1254 22.7272 11.1676C22.7088 11.2099 22.6821 11.2477 22.6487 11.2796C22.6153 11.3114 22.5758 11.3367 22.5332 11.3533C22.4901 11.37 22.4439 11.378 22.3977 11.3769H20.5435ZM34.3877 9.4172V10.7943L34.3857 10.7923C34.3882 10.8782 34.4216 10.9601 34.4801 11.0232C34.5386 11.0862 34.6177 11.1262 34.7034 11.1351C34.7445 11.1349 34.785 11.1238 34.8215 11.1035C35.8194 10.5903 36.9246 10.3221 38.0467 10.3206C39.1684 10.3191 40.2746 10.5845 41.2741 11.095C41.3244 11.1153 41.3793 11.123 41.4327 11.1171C41.4866 11.1111 41.5384 11.0917 41.5826 11.0608C41.6272 11.03 41.6637 10.9887 41.6883 10.9404C41.713 10.8921 41.7253 10.8381 41.7237 10.7838V9.33543C41.7201 9.22669 41.6878 9.12052 41.6303 9.02827C41.5728 8.93602 41.4917 8.86073 41.3962 8.80945C40.3208 8.25488 39.1176 7.99798 37.9102 8.06571L41.0805 3.573C41.3757 3.16855 41.5425 2.91606 41.5425 2.72129V1.55847C41.5436 1.51221 41.5348 1.46673 41.5169 1.42397C41.4994 1.38127 41.4732 1.34226 41.4399 1.31004C41.4065 1.27787 41.3675 1.25269 41.3244 1.23629C41.2807 1.2199 41.2345 1.2126 41.1883 1.21471H35.0797C35.0345 1.21312 34.9888 1.22108 34.9467 1.23778C34.9041 1.25449 34.8656 1.27982 34.8333 1.3121C34.8009 1.34432 34.7758 1.38255 34.7589 1.425C34.7419 1.4674 34.7342 1.51288 34.7358 1.55847V2.91601C34.7347 2.96206 34.7435 3.00749 34.7609 3.05004C34.7784 3.09259 34.8045 3.13098 34.8379 3.16295C34.8708 3.19491 34.9098 3.22015 34.9529 3.23623C34.996 3.25232 35.0422 3.25931 35.0884 3.25679H38.2808L34.6115 8.48625C34.4457 8.76736 34.3682 9.09143 34.3877 9.4172Z" fill="white"/>
+</svg>
+`
+export const MasterCard = `<svg width="59" height="37" viewBox="0 0 59 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M40.4585 36.0494C50.4139 36.0494 58.4845 27.9788 58.4845 18.0235C58.4845 8.06764 50.4139 -0.00244141 40.4585 -0.00244141C30.5032 -0.00244141 22.4326 8.06764 22.4326 18.0235C22.4326 27.9788 30.5032 36.0494 40.4585 36.0494Z" fill="white"/>
+<path opacity="0.859468" d="M18.0259 36.0494C27.9817 36.0494 36.0518 27.9788 36.0518 18.0235C36.0518 8.06764 27.9817 -0.00244141 18.0259 -0.00244141C8.07061 -0.00244141 0 8.06764 0 18.0235C0 27.9788 8.07061 36.0494 18.0259 36.0494Z" fill="white"/>
+</svg>
+`
+export const WhiteScanner = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 14.9398H1.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.0676 10.0274V8.2622C24.0676 5.8577 22.1181 3.9082 19.7125 3.9082H18.3066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.93164 10.0274V8.2622C3.93164 5.8577 5.88114 3.9082 8.28681 3.9082H9.72881" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.0676 14.9385V19.6915C24.0676 22.0971 22.1181 24.0466 19.7125 24.0466H18.3066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.93164 14.9385V19.6915C3.93164 22.0971 5.88114 24.0466 8.28681 24.0466H9.72881" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+export const GreyScanner = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 14.9403H1.75" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.0686 10.0279V8.26269C24.0686 5.85819 22.1191 3.90869 19.7135 3.90869H18.3076" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.93164 10.0279V8.26269C3.93164 5.85819 5.88114 3.90869 8.28681 3.90869H9.72881" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.0686 14.939V19.692C24.0686 22.0976 22.1191 24.0471 19.7135 24.0471H18.3076" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.93164 14.939V19.692C3.93164 22.0976 5.88114 24.0471 8.28681 24.0471H9.72881" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+export const GreyCalendar = `<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.29102 10.6463C1.29102 4.84964 3.22352 2.91797 9.01935 2.91797C14.816 2.91797 16.7485 4.84964 16.7485 10.6463C16.7485 16.443 14.816 18.3746 9.01935 18.3746C3.22352 18.3746 1.29102 16.443 1.29102 10.6463Z" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.52051 7.77018H16.5272" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6903 11.0509H12.6978" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.02424 11.0509H9.03174" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.35042 11.0509H5.35792" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6903 14.2609H12.6978" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.02424 14.2609H9.03174" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.35042 14.2609H5.35792" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.36 1.7085V4.42683" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.68717 1.7085V4.42683" stroke="#212121" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
+export const WhiteCalendar = `<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.29102 10.6463C1.29102 4.84964 3.22352 2.91797 9.01935 2.91797C14.816 2.91797 16.7485 4.84964 16.7485 10.6463C16.7485 16.443 14.816 18.3746 9.01935 18.3746C3.22352 18.3746 1.29102 16.443 1.29102 10.6463Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.52051 7.77018H16.5272" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6903 11.0514H12.6978" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.02424 11.0514H9.03174" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.35042 11.0514H5.35792" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6903 14.2624H12.6978" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.02424 14.2624H9.03174" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.35042 14.2624H5.35792" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.36 1.70898V4.42732" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.68717 1.70898V4.42732" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
diff --git a/components/Icons/Scanner.png b/components/Icons/Scanner.png
new file mode 100644
index 0000000000000000000000000000000000000000..116463a73318a4bf0df1d2d630c189bec55401e5
GIT binary patch
literal 462
zcmV;<0WtoGP)<h;3K|Lk000e1NJLTq000^Q000&U1^@s6-iVB~00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0b@x-K~#7F<yFy5
z!!Qs%NBt+A0DA($1e6UJ0VXJHKqsIZv>VV3Xg5eF=w*X2L3mGbsBszz5f=&Zq$gYM
zyF0t_`5B2|t<5pa!8>D2-ZV{(`9f7UastrLpj&Yctzy`NOXxM!Wl>Oppab{}z9Vqw
z14|i3O&w`k%)vM23PmO;Vkz)DyN!4BT?BdfZ#bl>;}hLeH>L=|Smt0M@UdGD3*CUb
zF-5{+7)qS1=oP}E!%hy82*|~6d(|s+ZcMrfPPD-;N=bw)%a|)!zJCmZ{(6=6&Yu(Y
z1Rt%!C78<bD()o>E<p?OX*%X~&M8i}l0-nRHFAFT<*)V8-!DWj8!E&uE+i3f!7eaV
zy+V9`_}bDjWhA^O&5(25D+DY-r7cq^KZLh-8lQsOZrz;N2}Lx(ZSd0*ET$YtY%#n@
z+w{5jAdL<5%Vp@?5qvNKq;0&xLqIb1(h6K4{yH|$58FYY$!{mYK>z>%07*qoM6N<$
Ef*$s_lmGw#

literal 0
HcmV?d00001

diff --git a/package-lock.json b/package-lock.json
index 621d9f99..41489301 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "eas-cli": "^8.0.0",
         "expo": "~51.0.8",
         "expo-av": "^14.0.5",
+        "expo-barcode-scanner": "~13.0.1",
         "expo-camera": "^15.0.9",
         "expo-checkbox": "~3.0.0",
         "expo-font": "~12.0.4",
@@ -14356,6 +14357,18 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-barcode-scanner": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/expo-barcode-scanner/-/expo-barcode-scanner-13.0.1.tgz",
+      "integrity": "sha512-xBGLT1An2gpAMIQRTLU3oHydKohX8r8F9/ait1Fk9Vgd0GraFZbP4IiT7nHMlaw4H6E7Muucf7vXpGV6u7d4HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-image-loader": "~4.7.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-camera": {
       "version": "15.0.9",
       "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-15.0.9.tgz",
diff --git a/package.json b/package.json
index aa2db4fe..d58a4179 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,8 @@
     "run": "^1.5.0",
     "sdk": "^0.5.0",
     "start": "^5.1.0",
-    "vector-icons": "^0.1.0"
+    "vector-icons": "^0.1.0",
+    "expo-barcode-scanner": "~13.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",