Third onboarding tour page

apps/user-profile/src/components/modules/UserOnboardingModal/PlatformOnboarding/PageThree/PageThree.js

@@ -0,0 +1,32 @@
+import { Typography } from "@devlaunchers/components/components/atoms";
+import RoleCard from "./RoleCard/RoleCard.js";
+import { PageThereeContainer, ThreeRoleCards } from "./StyledPageThree.js";
+
+export default function PageThree(){
+    return (
+        <PageThereeContainer>
+            <Typography type="h4">First off, What Role Best Describes You?</Typography>
+            <Typography type="subtitle">We'll use this to recommend open source projects for you to work on.</Typography>
+            <ThreeRoleCards>
+                <RoleCard
+                    iconImg="Onboarding"
+                    title="Developer"
+                    subtitle="You’re here to work on our codebase"
+                    theme="theme1"
+                />
+                <RoleCard
+                    iconImg="Onboarding"
+                    title="UX Designer"
+                    subtitle="You’re here to make our platform user friendly"
+                    theme="theme2"
+                />
+                <RoleCard
+                    iconImg="Onboarding"
+                    title=" Other"
+                    subtitle="You’re a surprise!"
+                    theme="theme3"
+                />
+            </ThreeRoleCards>               
+        </PageThereeContainer>
+    );
+}

apps/user-profile/src/components/modules/UserOnboardingModal/PlatformOnboarding/PageThree/StyledPageThree.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const PageThereeContainer = styled.div`
+    text-align: center;
+`
+
+export const ThreeRoleCards = styled.div`
+    display: flex;
+    flex-direction: row;
+`
+

apps/user-profile/src/components/modules/UserOnboardingModal/PlatformOnboarding/PageThree/index.js

@@ -0,0 +1 @@
+export {default} from "./PageThree";