Merge pull request #52 from Superlight-Labs/38-finish-welcome-page-sl…

…ider

feat(app): create basic welcome slider screens (#38)

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 (
+    <View className={style + ' pb-3 pl-3 pr-1.5 pt-1.5 '}>
+      <Svg width="48" height="48" fill="none" viewBox="0 0 18 14">
+        <Path
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeWidth="1.19"
+          d="M3.633 6.962a3.863 3.863 0 01.088-2.105A3.914 3.914 0 016.825 2.22a3.892 3.892 0 012.098.25 3.856 3.856 0 011.651 1.307c.418.58.323.673.323.673"></Path>
+        <Path
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeWidth="1.19"
+          d="M10.133 4.705c.933-.425 2.151-.38 2.842-.18a3.915 3.915 0 012.752 3.002 3.86 3.86 0 01-.175 2.1"></Path>
+        <G filter="url(#filter0_d_503_17)">
+          <Path
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeWidth="1.19"
+            d="M1.92 7.804a3.097 3.097 0 013.21-.595"></Path>
+        </G>
+        <Path
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeWidth="1.19"
+          d="M5.062 13.094a3.097 3.097 0 01-3.196-.67 3.164 3.164 0 01.054-4.62 3.097 3.097 0 013.21-.595 3.12 3.12 0 011.356 1.027"></Path>
+        <Path
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.19"
+          d="M7.623 13.082c.137-.232.56-.694 1.15-.694.74 0 .411.347 1.315.173.904-.173.74-.694 1.643-1.04.904-.348.575.346 1.315.173.591-.14 1.122-.52 1.314-.694"></Path>
+      </Svg>
+    </View>
+  );
+}
+
+export default LogoIcon;

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'

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 (
     <View className="flex flex-1 flex-col">
       <Carousel>
-        <View className="flex w-full flex-1 flex-col items-center justify-center">
-          <Text>
-            Hi, this carousel is yet to be built and will explain new users what the app is about
-          </Text>
-        </View>
-        <View className="flex w-full flex-1 flex-col items-center justify-center">
-          <Text>page 2</Text>
-        </View>
-        <View className="flex w-full flex-1 flex-col items-center justify-center">
-          <Text>page 3</Text>
-        </View>
-        <View className="flex w-full flex-1 flex-col items-center justify-center">
-          <Text>page 4</Text>
-        </View>
+        <WelcomeSlide1 />
+        <WelcomeSlide2 />
+        <WelcomeSlide3 />
+        <WelcomeSlide4 />
       </Carousel>
     </View>
   );

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 (
+    <View className="flex w-full flex-1 flex-col items-center">
+      <LogoIcon stroke="#fff" style="absolute top-20 z-10 bg-black rounded-xl shadow-black" />
+      <Image className="h-72 w-screen" source={require('../../../assets/images/lines-1.png')} />
+
+      <Title style="text-4xl text-slate-400 font-manrope-bold mt-16">Not a bank.</Title>
+      <Text className="mt-2 text-center font-manrope-bold text-4xl">But feeling like one.</Text>
+    </View>
+  );
+};
+
+export default WelcomeSlide1;

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 (
+    <View className="flex w-full flex-1 flex-col items-center">
+      <MonoIcon
+        color="white"
+        iconName="UserCheck"
+        height={30}
+        width={30}
+        style="p-4 absolute -top-6 z-10 bg-black rounded-xl shadow-black "
+      />
+      <Image className="h-72 w-screen" source={require('../../../assets/images/lines-2.png')} />
+
+      <Title style="text-4xl text-slate-400 font-manrope-bold mt-16">Non custodial.</Title>
+      <Text className="mt-2 text-center font-manrope-bold text-4xl">You are in control.</Text>
+    </View>
+  );
+};
+
+export default WelcomeSlide2;

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 (
+    <View className="flex w-full flex-1 flex-col items-center">
+      <MonoIcon
+        color="white"
+        iconName="Lock"
+        height={30}
+        width={30}
+        style="p-4 absolute top-16 z-10 bg-black rounded-xl shadow-black "
+      />
+      <Image className="h-72 w-screen" source={require('../../../assets/images/lines-3.png')} />
+
+      <Title style="text-4xl text-slate-400 font-manrope-bold mt-16">Secure.</Title>
+      <Text className="mt-4 text-center font-manrope-bold text-4xl">
+        No single point of failure.
+      </Text>
+    </View>
+  );
+};
+
+export default WelcomeSlide3;

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 (
+    <View className="flex w-full flex-1 flex-col items-center">
+      <MonoIcon
+        color="white"
+        iconName="Github"
+        height={30}
+        width={30}
+        style="p-4 absolute top-36 z-10 bg-black rounded-xl shadow-black "
+      />
+      <Image
+        className="h-72 w-screen pb-4"
+        source={require('../../../assets/images/lines-4.png')}
+      />
+
+      <Title style="text-4xl text-slate-400 font-manrope-bold mt-16">Open Source.</Title>
+      <Text className="mt-4 text-center font-manrope-bold text-4xl">You can participate.</Text>
+    </View>
+  );
+};
+
+export default WelcomeSlide4;