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;