diff --git a/apps/mobile/assets/images/lines-1.png b/apps/mobile/assets/images/lines-1.png new file mode 100644 index 00000000..29dd360f Binary files /dev/null and b/apps/mobile/assets/images/lines-1.png differ diff --git a/apps/mobile/assets/images/lines-2.png b/apps/mobile/assets/images/lines-2.png new file mode 100644 index 00000000..816da0be Binary files /dev/null and b/apps/mobile/assets/images/lines-2.png differ diff --git a/apps/mobile/assets/images/lines-3.png b/apps/mobile/assets/images/lines-3.png new file mode 100644 index 00000000..4a01121e Binary files /dev/null and b/apps/mobile/assets/images/lines-3.png differ diff --git a/apps/mobile/assets/images/lines-4.png b/apps/mobile/assets/images/lines-4.png new file mode 100644 index 00000000..2cffcca0 Binary files /dev/null and b/apps/mobile/assets/images/lines-4.png differ diff --git a/apps/mobile/src/components/shared/icons/logo.component.tsx b/apps/mobile/src/components/shared/icons/logo.component.tsx new file mode 100644 index 00000000..754d55e0 --- /dev/null +++ b/apps/mobile/src/components/shared/icons/logo.component.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { G, Path, Svg } from 'react-native-svg'; +import { View } from 'utils/wrappers/styled-react-native'; + +type Props = { + style: string; + stroke: string; +}; + +function LogoIcon({ style, stroke = '#000' }: Props) { + return ( + + + + + + + + + + + + ); +} + +export default LogoIcon; diff --git a/apps/mobile/src/components/shared/mono-icon/mono-icon.component.tsx b/apps/mobile/src/components/shared/mono-icon/mono-icon.component.tsx index d7a0222c..aa18c03a 100644 --- a/apps/mobile/src/components/shared/mono-icon/mono-icon.component.tsx +++ b/apps/mobile/src/components/shared/mono-icon/mono-icon.component.tsx @@ -57,10 +57,12 @@ export type IconName = | 'Clipboard' | 'Delete' | 'ArrowDownCircle' + | 'Lock' | 'UserCheck' | 'Heart' | 'Search' | 'User' + | 'Github' | 'Copy' | 'Send' | 'Minimize2' diff --git a/apps/mobile/src/components/welcome-screen/welcome-carousel.component.tsx b/apps/mobile/src/components/welcome-screen/welcome-carousel.component.tsx index 7fb77c72..85c262b3 100644 --- a/apps/mobile/src/components/welcome-screen/welcome-carousel.component.tsx +++ b/apps/mobile/src/components/welcome-screen/welcome-carousel.component.tsx @@ -1,24 +1,18 @@ import Carousel from 'components/shared/carousel/carousel.component'; -import { Text, View } from 'utils/wrappers/styled-react-native'; +import { View } from 'utils/wrappers/styled-react-native'; +import WelcomeSlide1 from './welcome-slide-1.component'; +import WelcomeSlide2 from './welcome-slide-2.componen'; +import WelcomeSlide3 from './welcome-slide-3component'; +import WelcomeSlide4 from './welcome-slide-4.component'; const WelcomeCarousel = () => { return ( - - - Hi, this carousel is yet to be built and will explain new users what the app is about - - - - page 2 - - - page 3 - - - page 4 - + + + + ); diff --git a/apps/mobile/src/components/welcome-screen/welcome-slide-1.component.tsx b/apps/mobile/src/components/welcome-screen/welcome-slide-1.component.tsx new file mode 100644 index 00000000..6d034cd4 --- /dev/null +++ b/apps/mobile/src/components/welcome-screen/welcome-slide-1.component.tsx @@ -0,0 +1,17 @@ +import LogoIcon from 'components/shared/icons/logo.component'; +import Title from 'components/shared/title/title.component'; +import { Image, Text, View } from 'utils/wrappers/styled-react-native'; + +const WelcomeSlide1 = () => { + return ( + + + + + Not a bank. + But feeling like one. + + ); +}; + +export default WelcomeSlide1; diff --git a/apps/mobile/src/components/welcome-screen/welcome-slide-2.componen.tsx b/apps/mobile/src/components/welcome-screen/welcome-slide-2.componen.tsx new file mode 100644 index 00000000..cccf43e8 --- /dev/null +++ b/apps/mobile/src/components/welcome-screen/welcome-slide-2.componen.tsx @@ -0,0 +1,23 @@ +import MonoIcon from 'components/shared/mono-icon/mono-icon.component'; +import Title from 'components/shared/title/title.component'; +import { Image, Text, View } from 'utils/wrappers/styled-react-native'; + +const WelcomeSlide2 = () => { + return ( + + + + + Non custodial. + You are in control. + + ); +}; + +export default WelcomeSlide2; diff --git a/apps/mobile/src/components/welcome-screen/welcome-slide-3component.tsx b/apps/mobile/src/components/welcome-screen/welcome-slide-3component.tsx new file mode 100644 index 00000000..cf4c87c6 --- /dev/null +++ b/apps/mobile/src/components/welcome-screen/welcome-slide-3component.tsx @@ -0,0 +1,25 @@ +import MonoIcon from 'components/shared/mono-icon/mono-icon.component'; +import Title from 'components/shared/title/title.component'; +import { Image, Text, View } from 'utils/wrappers/styled-react-native'; + +const WelcomeSlide3 = () => { + return ( + + + + + Secure. + + No single point of failure. + + + ); +}; + +export default WelcomeSlide3; diff --git a/apps/mobile/src/components/welcome-screen/welcome-slide-4.component.tsx b/apps/mobile/src/components/welcome-screen/welcome-slide-4.component.tsx new file mode 100644 index 00000000..0736a73c --- /dev/null +++ b/apps/mobile/src/components/welcome-screen/welcome-slide-4.component.tsx @@ -0,0 +1,26 @@ +import MonoIcon from 'components/shared/mono-icon/mono-icon.component'; +import Title from 'components/shared/title/title.component'; +import { Image, Text, View } from 'utils/wrappers/styled-react-native'; + +const WelcomeSlide4 = () => { + return ( + + + + + Open Source. + You can participate. + + ); +}; + +export default WelcomeSlide4;