feat: lots of work

frontend/src/Config/Helpers/ArticleFormat.elm

@@ -0,0 +1,210 @@
+module Config.Helpers.ArticleFormat exposing (..)
+
+import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.CardFormat exposing (..)
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
+import Html
+import Html.Attributes as H exposing (style)
+
+
+bodyFormat : List (Attribute msg)
+bodyFormat =
+    [ spacing 10
+    , paddingEach
+        { top = 10
+        , bottom = 0
+        , left = 0
+        , right = 0
+        }
+    ]
+
+
+chunkMaker : List String -> Element msg
+chunkMaker items =
+    column [ alignLeft, spacing 10 ] <|
+        List.map
+            (\item ->
+                paragraph
+                    [ F.color colourTheme.textLightGrey
+                    , paragraphSpacing
+                    , paragraphFontSize
+                    , F.alignLeft
+                    , width fill
+                    ]
+                    [ text item ]
+            )
+            items
+
+
+titleMaker : String -> Element msg
+titleMaker title =
+    el
+        [ paragraphSpacing
+        , paragraphFontSize
+        , F.bold
+        , F.center
+        , width fill
+        , F.color colourTheme.textLightOrange
+        , F.size 18
+        , paddingEach
+            { top = 10
+            , bottom = 10
+            , left = 0
+            , right = 0
+            }
+        ]
+    <|
+        text title
+
+
+highlightedBlockMaker : String -> List String -> Element msg
+highlightedBlockMaker title items =
+    column
+        [ paddingEach
+            { top = 15
+            , bottom = 15
+            , left = 20
+            , right = 20
+            }
+        , B.color colourTheme.backgroundLightGrey
+        , D.rounded 10
+        , width fill
+        , spacing 8
+        ]
+        [ paragraph
+            [ F.bold
+            , F.size 18
+            ]
+            [ text title ]
+        , column
+            []
+          <|
+            List.indexedMap
+                (\index item ->
+                    row
+                        [ spacing 10
+                        , width fill
+                        ]
+                        [ column
+                            [ width <| px 30
+                            , alignTop
+                            ]
+                            [ el [ alignRight, F.size 18 ] <| text "• " ]
+                        , column
+                            [ spacing 10
+                            , width fill
+                            , alignRight
+                            ]
+                            [ paragraph
+                                [ width fill
+                                , F.size 16
+                                , F.alignLeft
+                                ]
+                                [ row
+                                    [ alignLeft ]
+                                    [ paragraph [ alignLeft ]
+                                        [ text item
+                                        ]
+                                    ]
+                                ]
+                            ]
+                        ]
+                )
+                items
+        ]
+
+
+textEntry : String -> Element msg
+textEntry item =
+    el
+        [ alignLeft ]
+    <|
+        paragraph [] [ text item ]
+
+
+bulletPointMaker : List String -> Element msg
+bulletPointMaker items =
+    column [ spacing 10 ] <|
+        List.indexedMap
+            (\index item ->
+                row
+                    [ spacing 10
+                    , width fill
+                    ]
+                    [ column
+                        [ width <| px 30
+                        , alignTop
+                        ]
+                        [ el [ alignRight, F.size 18 ] <| text "• " ]
+                    , column
+                        [ spacing 10
+                        , width fill
+                        , alignRight
+                        ]
+                        [ paragraph
+                            [ width fill
+                            , F.size 16
+                            , F.alignLeft
+                            ]
+                            [ row
+                                [ alignLeft ]
+                                [ paragraph [ alignLeft ]
+                                    [ text item
+                                    ]
+                                ]
+                            ]
+                        ]
+                    ]
+            )
+            items
+
+
+numberMaker : List String -> Element msg
+numberMaker items =
+    column [ spacing 10 ] <|
+        List.indexedMap
+            (\index item ->
+                row
+                    [ spacing 10
+                    , width fill
+                    ]
+                    [ column
+                        [ width <| px 30
+                        , alignTop
+                        ]
+                        [ el [ alignRight ] <| text (String.fromInt (index + 1) ++ ". ") ]
+                    , column
+                        [ spacing 10
+                        , width fill
+                        , alignRight
+                        ]
+                        [ paragraph
+                            [ width fill
+                            , F.size 16
+                            , F.alignLeft
+                            ]
+                            [ row
+                                [ alignLeft ]
+                                [ paragraph [ alignLeft ]
+                                    [ text item
+                                    ]
+                                ]
+                            ]
+                        ]
+                    ]
+            )
+            items

frontend/src/Config/Pages/Services/Services/DebateAnalysis.elm

@@ -18,8 +18,53 @@ servicesDebateAnalysis =
     , serviceRate = "$80/hr"
     , serviceDescription =
         [ { point = "Have your own debates analyzed for constructive feedback." }
-        , { point = "Receive advice to improve as a debater." }
+        , { point = "Receive advice to improve your debate and public speaking skills." }
-        , { point = "Participate in mock debates, staged debates, and other exercises." }
+        , { point = "Gain valuable insights that help you become a stronger reasoner." }
         , { point = "Gain comfort with debate and verbal confrontation." }
         ]
+    , serviceArticle =
+        { articleTitles =
+            { title1 = "Benefits"
+            , title2 = "Requirements"
+            , title3 = ""
+            , title4 = ""
+            , title5 = ""
+            , title6 = ""
+            , title7 = ""
+            , title8 = ""
+            , title9 = ""
+            , title10 = ""
+            }
+        , articleParagraph =
+            [ "The Debate Analysis services offers personalized feedback to help you improve your debate skills. I work with clients by reviewing their pre-recorded debates, providing detailed critiques, and offering practical advice tailored to their style. Through this process, you'll gain valuable insights into areas of improvement, from your argument structure to your delivery and confidence."
+            ]
+        , articleListEntries =
+            { list1 =
+                [ "Have your own debates analyzed for constructive feedback. This allows you to receive targeted guidance on how to improve your debating technique and strategy."
+                , "Receive advice to improve as a debater. This service provides personalized recommendations to help you develop and refine your debating abilities."
+                , "Gain comfort with debate and verbal confrontation. The service aims to help you become more confident and adept at handling the challenges of public debate."
+                ]
+            , list2 =
+                [ "Your debate recording must be submitted at least three days prior to the session."
+                , "Your debate recording must not exceed one hour in length unless otherwise agreed to."
+                , "Your debate recording must be in either video or audio format, as text debates are ineligible."
+                ]
+            , list3 =
+                []
+            , list4 =
+                []
+            , list5 =
+                []
+            , list6 =
+                []
+            , list7 =
+                []
+            , list8 =
+                []
+            , list9 =
+                []
+            , list10 =
+                []
+            }
+        }
     }

frontend/src/Config/Pages/Services/Services/DebateCoaching.elm

@@ -0,0 +1,67 @@
+module Config.Pages.Services.Services.DebateCoaching exposing (..)
+
+import Config.Helpers.Converters exposing (formatName)
+import Config.Pages.Services.Types exposing (..)
+import Route.Path as Path
+
+
+servicesDebateCoaching : Service
+servicesDebateCoaching =
+    let
+        name : String
+        name =
+            "Debate Coaching"
+    in
+    { serviceImage = formatName name
+    , serviceLink = Path.toString Path.Services_Coaching
+    , serviceName = name
+    , serviceRate = "$60/hr"
+    , serviceDescription =
+        [ { point = "Participate in a structured course with five one-hour modules." }
+        , { point = "Learn critical thinking, debate strategy, formal logic, and more" }
+        , { point = "Receive personalized and generalizable advice." }
+        , { point = "Improve debate understanding and performance." }
+        ]
+    , serviceArticle =
+        { articleTitles =
+            { title1 = "What You Get"
+            , title2 = "What We Need"
+            , title3 = "Module 1"
+            , title4 = "Module 2"
+            , title5 = "Module 3"
+            , title6 = "Module 4"
+            , title7 = "Module 5"
+            , title8 = ""
+            , title9 = ""
+            , title10 = ""
+            }
+        , articleParagraph =
+            [ "This service is designed to help you "
+            ]
+        , articleListEntries =
+            { list1 =
+                [ "A five-module course covering critical thinking, debate strategy, and propositional logic, designed to strengthen your debating skills."
+                , "Personalized feedback and guidance to boost your strategic thinking, verbal comfort, and overall debate effectiveness."
+                , "Optional mock debates and staged confrontations, helping you gain experience and confidence in real-world debates."
+                ]
+            , list2 =
+                [""]
+             , list3 =
+                ["Learn about the most common logical fallacies.", ""]
+            , list4 =
+                []
+            , list5 =
+                []
+            , list6 =
+                []
+            , list7 =
+                []
+            , list8 =
+                []
+            , list9 =
+                []
+            , list10 =
+                []
+            }
+        }
+    }

frontend/src/Config/Pages/Services/Services/DebateTutoring.elm

@@ -1,25 +0,0 @@
-module Config.Pages.Services.Services.DebateTutoring exposing (..)
-
-import Config.Helpers.Converters exposing (formatName)
-import Config.Pages.Services.Types exposing (..)
-import Route.Path as Path
-
-
-servicesDebateTutoring : Service
-servicesDebateTutoring =
-    let
-        name : String
-        name =
-            "Debate Coaching"
-    in
-    { serviceImage = formatName name
-    , serviceLink = Path.toString Path.Services_Coaching
-    , serviceName = name
-    , serviceRate = "$60/hr"
-    , serviceDescription =
-        [ { point = "Participate in a structured course with five one-hour modules." }
-        , { point = "Learn critical thinking, debate strategy, formal logic, and more" }
-        , { point = "Receive personalized and generalizable advice." }
-        , { point = "Improve debate understanding and performance." }
-        ]
-    }

frontend/src/Config/Pages/Services/Services/ElmBuilds.elm

@@ -1,10 +1,11 @@
 module Config.Pages.Services.Services.ElmBuilds exposing (..)
 
-import Element exposing (..)
-import Config.Pages.Services.Types exposing (..)
 import Config.Helpers.Converters exposing (formatName)
+import Config.Pages.Services.Types exposing (..)
+import Element exposing (..)
 import Route.Path as Path
 
+
 servicesElmBuilds : Service
 servicesElmBuilds =
     let
@@ -22,4 +23,44 @@ servicesElmBuilds =
         , { point = "Help with integration and server integration." }
         , { point = "Receive unlimited revisions before finalization." }
         ]
+    , serviceArticle =
+        { articleTitles =
+            { title1 = "What You Get"
+            , title2 = "What We Need"
+            , title3 = ""
+            , title4 = ""
+            , title5 = ""
+            , title6 = ""
+            , title7 = ""
+            , title8 = ""
+            , title9 = ""
+            , title10 = ""
+            }
+        , articleParagraph =
+            []
+        , articleListEntries =
+            { list1 =
+                [ ""
+                ]
+            , list2 =
+                [ ""
+                ]
+            , list3 =
+                []
+            , list4 =
+                []
+            , list5 =
+                []
+            , list6 =
+                []
+            , list7 =
+                []
+            , list8 =
+                []
+            , list9 =
+                []
+            , list10 =
+                []
+            }
+        }
     }

frontend/src/Config/Pages/Services/Services/NixBuilds.elm

@@ -1,9 +1,10 @@
 module Config.Pages.Services.Services.NixBuilds exposing (..)
 
-import Config.Pages.Services.Types exposing (..)
 import Config.Helpers.Converters exposing (formatName)
+import Config.Pages.Services.Types exposing (..)
 import Route.Path as Path
 
+
 servicesNixBuilds : Service
 servicesNixBuilds =
     let
@@ -21,4 +22,44 @@ servicesNixBuilds =
         , { point = "Assistance with the Nix programming language." }
         , { point = "Receive unlimited revisions before finalization." }
         ]
+    , serviceArticle =
+        { articleTitles =
+            { title1 = "What You Get"
+            , title2 = "What We Need"
+            , title3 = ""
+            , title4 = ""
+            , title5 = ""
+            , title6 = ""
+            , title7 = ""
+            , title8 = ""
+            , title9 = ""
+            , title10 = ""
+            }
+        , articleParagraph =
+            []
+        , articleListEntries =
+            { list1 =
+                [ ""
+                ]
+            , list2 =
+                [ ""
+                ]
+            , list3 =
+                []
+            , list4 =
+                []
+            , list5 =
+                []
+            , list6 =
+                []
+            , list7 =
+                []
+            , list8 =
+                []
+            , list9 =
+                []
+            , list10 =
+                []
+            }
+        }
     }

frontend/src/Config/Pages/Services/Services/NutritionScience.elm

@@ -22,4 +22,44 @@ servicesNutritionScience =
         , { point = "Gain access to nutrition science interpretation cheat-sheets." }
         , { point = "Simplify and streamline the research appraisal process." }
         ]
+    , serviceArticle =
+        { articleTitles =
+            { title1 = "What You Get"
+            , title2 = "What We Need"
+            , title3 = ""
+            , title4 = ""
+            , title5 = ""
+            , title6 = ""
+            , title7 = ""
+            , title8 = ""
+            , title9 = ""
+            , title10 = ""
+            }
+        , articleParagraph =
+            []
+        , articleListEntries =
+            { list1 =
+                [ ""
+                ]
+            , list2 =
+                [ ""
+                ]
+            , list3 =
+                []
+            , list4 =
+                []
+            , list5 =
+                []
+            , list6 =
+                []
+            , list7 =
+                []
+            , list8 =
+                []
+            , list9 =
+                []
+            , list10 =
+                []
+            }
+        }
     }

frontend/src/Config/Pages/Services/Types.elm

@@ -1,5 +1,7 @@
 module Config.Pages.Services.Types exposing (..)
 
+import Element as E exposing (..)
+
 
 type alias Service =
     { serviceImage : String
@@ -7,6 +9,57 @@ type alias Service =
     , serviceName : String
     , serviceRate : String
     , serviceDescription : List Description
+    , serviceArticle : Article
+    }
+
+
+type alias Article =
+    { articleParagraph : List String
+    , articleTitles : Title
+    , articleListEntries : ArticleList
+    }
+
+
+type alias Title =
+    { title1 : String
+    , title2 : String
+    , title3 : String
+    , title4 : String
+    , title5 : String
+    , title6 : String
+    , title7 : String
+    , title8 : String
+    , title9 : String
+    , title10 : String
+    }
+
+
+type alias ArticleList =
+    { list1 : List String
+    , list2 : List String
+    , list3 : List String
+    , list4 : List String
+    , list5 : List String
+    , list6 : List String
+    , list7 : List String
+    , list8 : List String
+    , list9 : List String
+    , list10 : List String
+    }
+
+
+type alias Bulletpoint =
+    { entry : String
+    }
+
+
+type alias Numbered =
+    { entry : String
+    }
+
+
+type alias Highlighted =
+    { entry : String
     }
 
 

frontend/src/Config/Style/Icons/Icons.elm

@@ -549,6 +549,13 @@ nutriDex inner =
         { svgAttributes =
             [ SvgAttr.viewBox "0 0 269 254"
             , SvgAttr.fill "currentColor"
+
+            -- , SvgAttr.width "100%"
+            -- , SvgAttr.height "100%"
+            , SvgAttr.viewBox "0 0 269 254"
+            , SvgAttr.version "1.1"
+            , SvgAttr.xmlSpace "preserve"
+            , SvgAttr.style "fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"
             ]
         , svg =
             [ Svg.g
@@ -559,7 +566,9 @@ nutriDex inner =
                     ]
                     [ path
                         [ SvgAttr.d "M2438.06,573.79L2421.04,607.88"
-                        , SvgAttr.fill "currentColor"
+                        , SvgAttr.stroke "currentColor"
+                        , SvgAttr.fill "none"
+                        , SvgAttr.style "stroke-width:26.21px;"
                         ]
                         []
                     ]
@@ -568,7 +577,9 @@ nutriDex inner =
                     ]
                     [ path
                         [ SvgAttr.d "M2384.94,593.791L2428.07,593.791"
-                        , SvgAttr.fill "currentColor"
+                        , SvgAttr.fill "none"
+                        , SvgAttr.stroke "currentColor"
+                        , SvgAttr.style "stroke-width:15.37px;"
                         ]
                         []
                     ]
@@ -577,7 +588,9 @@ nutriDex inner =
                     ]
                     [ path
                         [ SvgAttr.d "M2439.01,851.153L2458.28,851.153"
-                        , SvgAttr.fill "currentColor"
+                        , SvgAttr.fill "none"
+                        , SvgAttr.stroke "currentColor"
+                        , SvgAttr.style "stroke-width:10.94px;"
                         ]
                         []
                     ]
@@ -595,7 +608,9 @@ nutriDex inner =
                     ]
                     [ path
                         [ SvgAttr.d "M2344.65,603.881L2362.65,634.203L2338.66,673.941L2384.94,673.941"
-                        , SvgAttr.fill "currentColor"
+                        , SvgAttr.fill "none"
+                        , SvgAttr.stroke "currentColor"
+                        , SvgAttr.style "stroke-width:15.37px;"
                         ]
                         []
                     ]
@@ -604,8 +619,9 @@ nutriDex inner =
                     ]
                     [ path
                         [ SvgAttr.d "M2423.66,877.745L2456.6,877.745"
-                        , SvgAttr.style "none"
+                        , SvgAttr.fill "none"
-                        , SvgAttr.fill "currentColor"
+                        , SvgAttr.stroke "currentColor"
+                        , SvgAttr.style "stroke-width:10.94px;"
                         ]
                         []
                     ]

frontend/src/Pages/Services.elm

@@ -11,7 +11,7 @@ import Config.Pages.Headers.Helpers exposing (headerMaker)
 import Config.Pages.Headers.Pages.Services exposing (servicesHeader)
 import Config.Pages.Services.Helpers exposing (..)
 import Config.Pages.Services.Services.DebateAnalysis exposing (..)
-import Config.Pages.Services.Services.DebateTutoring exposing (..)
+import Config.Pages.Services.Services.DebateCoaching exposing (..)
 import Config.Pages.Services.Services.ElmBuilds exposing (..)
 import Config.Pages.Services.Services.NixBuilds exposing (..)
 import Config.Pages.Services.Services.NutritionScience exposing (..)
@@ -123,7 +123,7 @@ servicesList device =
                     List.map serviceMaker
               )
                 [ servicesDebateAnalysis
-                , servicesDebateTutoring
+                , servicesDebateCoaching
                 , servicesNutritionScience
                 , servicesNixBuilds
                 , servicesElmBuilds

frontend/src/Pages/Services/Analysis.elm

@@ -1,9 +1,30 @@
 module Pages.Services.Analysis exposing (Model, Msg, page)
 
+import Config.Helpers.ArticleFormat exposing (..)
+import Config.Helpers.CardFormat exposing (..)
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.Response exposing (pageList, topLevelContainer)
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Pages.Services.Services.DebateAnalysis exposing (..)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
 import Effect exposing (Effect)
-import Route exposing (Route)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
 import Html
+import Html.Attributes as H exposing (style)
+import Layouts
 import Page exposing (Page)
+import Route exposing (Route)
+import Route.Path as Path
 import Shared
 import View exposing (View)
 
@@ -14,8 +35,14 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
+        |> Page.withLayout toLayout
+
+
+toLayout : Model -> Layouts.Layout Msg
+toLayout model =
+    Layouts.Navbar {}
 
 
 
@@ -63,6 +90,53 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
-    View.fromString "Pages.Services.Analysis"
+    { title = "services (analysis)"
+    , attributes = []
+    , element = analysisContainer shared.device
+    }
+
+
+analysisContainer : Device -> Element msg
+analysisContainer device =
+    topLevelContainer (analysisList device)
+
+
+analysisList : Device -> Element msg
+analysisList device =
+    column pageList <|
+        List.concat
+            (case ( device.class, device.orientation ) of
+                _ ->
+                    [ [ serviceMaker ] ]
+            )
+
+
+serviceMaker : Element msg
+serviceMaker =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper servicesDebateAnalysis.serviceName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ column
+                                bodyFormat
+                                [ chunkMaker servicesDebateAnalysis.serviceArticle.articleParagraph
+                                , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title1
+
+                                -- , highlightedBlockMaker
+                                , numberMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list1
+                                , titleMaker servicesDebateAnalysis.serviceArticle.articleTitles.title2
+                                , bulletPointMaker servicesDebateAnalysis.serviceArticle.articleListEntries.list2
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]

frontend/src/Pages/Services/Coaching.elm

@@ -1,19 +1,34 @@
 module Pages.Services.Coaching exposing (Model, Msg, page)
 
--- import Config.Pages.Services.Coaching.Helpers exposing (instructionMaker)
+import Config.Helpers.ArticleFormat exposing (..)
-
+import Config.Helpers.CardFormat exposing (..)
-import Config.Data.Identity exposing (pageNames)
+import Config.Helpers.Format exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
         , topLevelContainer
         )
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Pages.Services.Services.DebateCoaching exposing (servicesDebateCoaching)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
 import Effect exposing (Effect)
 import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
 import Html
+import Html.Attributes as H exposing (style)
 import Layouts
 import Page exposing (Page)
 import Route exposing (Route)
+import Route.Path as Path
 import Shared
 import View exposing (View)
 
@@ -81,22 +96,50 @@ subscriptions model =
 
 view : Shared.Model -> Model -> View Msg
 view shared model =
-    { title = pageNames.pageContact ++ " ( )"
+    { title = "services (coaching)"
     , attributes = []
-    , element = coachContainer shared.device
+    , element = coachingContainer shared.device
     }
 
 
-coachContainer : Device -> Element msg
+coachingContainer : Device -> Element msg
-coachContainer device =
+coachingContainer device =
-    topLevelContainer (coachList device)
+    topLevelContainer (coachingList device)
 
 
-coachList : Device -> Element msg
+coachingList : Device -> Element msg
-coachList device =
+coachingList device =
     column pageList <|
         List.concat
             (case ( device.class, device.orientation ) of
                 _ ->
-                    [ [] ]
+                    [ [ serviceMaker ] ]
             )
+
+
+serviceMaker : Element msg
+serviceMaker =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper servicesDebateCoaching.serviceName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ column
+                                bodyFormat
+                                [ chunkMaker servicesDebateCoaching.serviceArticle.articleParagraph
+                                , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title1
+                                , highlightedBlockMaker servicesDebateCoaching.serviceArticle.articleTitles.title3 servicesDebateCoaching.serviceArticle.articleListEntries.list3
+                                , numberMaker servicesDebateCoaching.serviceArticle.articleListEntries.list1
+                                , titleMaker servicesDebateCoaching.serviceArticle.articleTitles.title2
+                                , bulletPointMaker servicesDebateCoaching.serviceArticle.articleListEntries.list2
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]

frontend/src/Pages/Services/Elm.elm

@@ -1,9 +1,34 @@
 module Pages.Services.Elm exposing (Model, Msg, page)
 
+import Config.Helpers.ArticleFormat exposing (..)
+import Config.Helpers.CardFormat exposing (..)
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.Response
+    exposing
+        ( pageList
+        , topLevelContainer
+        )
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Pages.Services.Services.ElmBuilds exposing (servicesElmBuilds)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
 import Effect exposing (Effect)
-import Route exposing (Route)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
 import Html
+import Html.Attributes as H exposing (style)
+import Layouts
 import Page exposing (Page)
+import Route exposing (Route)
+import Route.Path as Path
 import Shared
 import View exposing (View)
 
@@ -14,8 +39,14 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
+        |> Page.withLayout toLayout
+
+
+toLayout : Model -> Layouts.Layout Msg
+toLayout model =
+    Layouts.Navbar {}
 
 
 
@@ -63,6 +94,51 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
-    View.fromString "Pages.Services.Elm"
+    { title = "services (elmBuilds)"
+    , attributes = []
+    , element = elmBuildsContainer shared.device
+    }
+
+
+elmBuildsContainer : Device -> Element msg
+elmBuildsContainer device =
+    topLevelContainer (elmBuildsList device)
+
+
+elmBuildsList : Device -> Element msg
+elmBuildsList device =
+    column pageList <|
+        List.concat
+            (case ( device.class, device.orientation ) of
+                _ ->
+                    [ [ serviceMaker ] ]
+            )
+
+
+serviceMaker : Element msg
+serviceMaker =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper servicesElmBuilds.serviceName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ column
+                                bodyFormat
+                                [--     chunkMaker
+                                 -- , titleMaker
+                                 -- , highlightedBlockMaker
+                                 -- , bulletPointMaker
+                                 -- , numberMaker
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]

frontend/src/Pages/Services/Nix.elm

@@ -1,9 +1,34 @@
 module Pages.Services.Nix exposing (Model, Msg, page)
 
+import Config.Helpers.ArticleFormat exposing (..)
+import Config.Helpers.CardFormat exposing (..)
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.Response
+    exposing
+        ( pageList
+        , topLevelContainer
+        )
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Pages.Services.Services.NixBuilds exposing (servicesNixBuilds)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
 import Effect exposing (Effect)
-import Route exposing (Route)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
 import Html
+import Html.Attributes as H exposing (style)
+import Layouts
 import Page exposing (Page)
+import Route exposing (Route)
+import Route.Path as Path
 import Shared
 import View exposing (View)
 
@@ -14,8 +39,15 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
+        |> Page.withLayout toLayout
+
+
+toLayout : Model -> Layouts.Layout Msg
+toLayout model =
+    Layouts.Navbar {}
+
 
 
 
@@ -63,6 +95,51 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
-    View.fromString "Pages.Services.Nix"
+    { title = "services (nixConfigs)"
+    , attributes = []
+    , element = elmBuildsContainer shared.device
+    }
+
+
+elmBuildsContainer : Device -> Element msg
+elmBuildsContainer device =
+    topLevelContainer (elmBuildsList device)
+
+
+elmBuildsList : Device -> Element msg
+elmBuildsList device =
+    column pageList <|
+        List.concat
+            (case ( device.class, device.orientation ) of
+                _ ->
+                    [ [ serviceMaker ] ]
+            )
+
+
+serviceMaker : Element msg
+serviceMaker =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper servicesNixBuilds.serviceName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ column
+                                bodyFormat
+                                [--     chunkMaker
+                                 -- , titleMaker
+                                 -- , highlightedBlockMaker
+                                 -- , bulletPointMaker
+                                 -- , numberMaker
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]

frontend/src/Pages/Services/Nutrition.elm

@@ -1,9 +1,34 @@
 module Pages.Services.Nutrition exposing (Model, Msg, page)
 
+import Config.Helpers.ArticleFormat exposing (..)
+import Config.Helpers.CardFormat exposing (..)
+import Config.Helpers.Format exposing (..)
+import Config.Helpers.Response
+    exposing
+        ( pageList
+        , topLevelContainer
+        )
+import Config.Helpers.ToolTip exposing (..)
+import Config.Pages.Headers.Types exposing (..)
+import Config.Pages.Services.Services.NutritionScience exposing (servicesNutritionScience)
+import Config.Style.Colour exposing (colourTheme)
+import Config.Style.Transitions
+    exposing
+        ( hoverFontDarkOrange
+        , transitionStyleFast
+        , transitionStyleSlow
+        )
 import Effect exposing (Effect)
-import Route exposing (Route)
+import Element as E exposing (..)
+import Element.Background as B
+import Element.Border as D
+import Element.Font as F
 import Html
+import Html.Attributes as H exposing (style)
+import Layouts
 import Page exposing (Page)
+import Route exposing (Route)
+import Route.Path as Path
 import Shared
 import View exposing (View)
 
@@ -14,8 +39,14 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
+        |> Page.withLayout toLayout
+
+
+toLayout : Model -> Layouts.Layout Msg
+toLayout model =
+    Layouts.Navbar {}
 
 
 
@@ -63,6 +94,51 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
+view : Shared.Model -> Model -> View Msg
-view model =
+view shared model =
-    View.fromString "Pages.Services.Nutrition"
+    { title = "services (nutritionChat)"
+    , attributes = []
+    , element = nutritionContainer shared.device
+    }
+
+
+nutritionContainer : Device -> Element msg
+nutritionContainer device =
+    topLevelContainer (nutritionList device)
+
+
+nutritionList : Device -> Element msg
+nutritionList device =
+    column pageList <|
+        List.concat
+            (case ( device.class, device.orientation ) of
+                _ ->
+                    [ [ serviceMaker ] ]
+            )
+
+
+serviceMaker : Element msg
+serviceMaker =
+    row
+        topLevelBox
+        [ cardMaker
+            [ cardTitleMaker (String.toUpper servicesNutritionScience.serviceName)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ cardSubTitleMaker
+                            [ column
+                                bodyFormat
+                                [--     chunkMaker
+                                 -- , titleMaker
+                                 -- , highlightedBlockMaker
+                                 -- , bulletPointMaker
+                                 -- , numberMaker
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+        ]