connect all routes together and adds remaining routes

src/elm/Components/GrayButton.elm

@@ -9,5 +9,5 @@ grayButton : ( String, String ) -> Html Msg
 grayButton ( name, route ) =
     a
         [ href ("#" ++ route), class "center tc no-underline fw1" ]
-        [ div [ class "white w-30-l w-40-m w-60 bg-gray fw2 center mt4 mb5 pa3 br4 fw1 f5 no-underline open-sans" ] [ text name ]
+        [ div [ class "white w-30-l w-40-m w-60 bg-gray fw2 center mv4 pa3 br4 fw1 f5 no-underline open-sans" ] [ text name ]
         ]

src/elm/Components/Questions.elm

@@ -22,7 +22,7 @@ questionTemplate model ( title, back ) =
             [ article [ class " w-90 center pv1" ]
                 [ h2 [ class "mid-gray raleway" ] [ text "One video is worth 1000 (written!) words..." ]
                 , p [ class "mid-gray raleway fw1" ] [ text "In this section we would like you to make a short video or voice recording of yourself, telling us in your own words what you are looking for." ]
-                , h3 [ class "center tc dark-gray pv4" ] [ text title ]
+                , h3 [ class "center tc dark-gray pv4 ph5-ns" ] [ text title ]
                 , div [ class "flex flex-row flex-wrap center tc w-75 justify-between mr1" ]
                     [ div [ class "w-50-ns w-100 mid-gray flex flex-column mv2 pointer", onClick <| ToggleVideo model.videoStage ]
                         [ img [ src "./assets/rec_video.svg", class "h5 mb2" ] []

src/elm/Routes/AboutYou.elm

@@ -153,5 +153,5 @@ aboutYou model =
                     ]
                 ]
             ]
-        , grayButton ( "Next", "nextRole" )
+        , grayButton ( "Next", "next-role" )
         ]

src/elm/Routes/ChallengingProject.elm

@@ -0,0 +1,19 @@
+module Routes.ChallengingProject exposing (..)
+
+import Components.GrayButton exposing (..)
+import Components.Questions exposing (..)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Types exposing (..)
+
+
+challengingProject : Model -> Html Msg
+challengingProject model =
+    div []
+        [ questionTemplate model
+            ( "What was the most challenging project you have worked on, and how did you contribute?"
+            , "personal-intro"
+            )
+        , grayButton ( "Submit", "thank-you" )
+        ]

src/elm/Routes/NextRole.elm

@@ -1,5 +1,6 @@
 module Routes.NextRole exposing (..)
 
+import Components.GrayButton exposing (..)
 import Components.Questions exposing (..)
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -12,6 +13,10 @@ nextRole model =
     div []
         [ questionTemplate model
             ( "What are you looking for in your next role?"
-            , "aboutYou"
+            , "about-you"
             )
+        , grayButton ( "Next Question", "personal-intro" )
+        , a [ href "#thank-you" ]
+            [ div [ class "tc mb5" ] [ text "No thanks, I just want to send the form" ]
+            ]
         ]

src/elm/Routes/PersonalIntro.elm

@@ -0,0 +1,22 @@
+module Routes.PersonalIntro exposing (..)
+
+import Components.GrayButton exposing (..)
+import Components.Questions exposing (..)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Types exposing (..)
+
+
+personalIntro : Model -> Html Msg
+personalIntro model =
+    div []
+        [ questionTemplate model
+            ( "Please give us a small personal intro (60 second overview, hobbies, interests, what you enjoy outside of work)"
+            , "next-role"
+            )
+        , grayButton ( "Next Question", "challenging-project" )
+        , a [ href "#thank-you" ]
+            [ div [ class "tc mb5" ] [ text "No thanks, I just want to send the form" ]
+            ]
+        ]

src/elm/State.elm

@@ -11,7 +11,7 @@ import Types exposing (..)
 
 initModel : Model
 initModel =
-    { route = ThankYou
+    { route = AboutYou
     , videoStage = StagePreRecord
     , videoMessage = ""
     , messageLength = 0
@@ -32,12 +32,18 @@ getRoute hash =
         "#about-you" ->
             AboutYou
 
-        "#nextRole" ->
+        "#next-role" ->
             NextRole
 
         "#thank-you" ->
             ThankYou
 
+        "#personal-intro" ->
+            PersonalIntro
+
+        "#challenging-project" ->
+            ChallengingProject
+
         _ ->
             FourOhFour
 

src/elm/Types.elm

@@ -12,6 +12,8 @@ type Route
     | FourOhFour
     | NextRole
     | ThankYou
+    | PersonalIntro
+    | ChallengingProject
 
 
 type alias Model =

src/elm/View.elm

@@ -3,9 +3,11 @@ module View exposing (..)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Routes.AboutYou exposing (..)
+import Routes.ChallengingProject exposing (..)
 import Routes.FourOhFour exposing (..)
 import Routes.Home exposing (..)
 import Routes.NextRole exposing (..)
+import Routes.PersonalIntro exposing (..)
 import Routes.ThankYou exposing (..)
 import Types exposing (..)
 
@@ -29,6 +31,12 @@ view model =
 
                 ThankYou ->
                     thankYou model
+
+                PersonalIntro ->
+                    personalIntro model
+
+                ChallengingProject ->
+                    challengingProject model
     in
     div [ class "w-100 fixed overflow-y-scroll top-0 bottom-0 bg-light-blue m0-auto cover", id "container" ]
         [ page