make pretty

docs/public/style.css

@@ -318,6 +318,22 @@ hr { border: 0; }
   transition: border 200ms ease-in-out;
 }
 
+.button {
+  padding: 0.7em 1.2em;
+  background: var(--color--white);
+  border: 1px solid var(--color--grey-300);
+  color: var(--color--green);
+  border-radius: 0.25em;
+  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
+  transform-origin: center;
+  font-weight: var(--weight--bold);
+}
+
+.button:hover {
+  opacity: 0.8;
+  transform: translateY(-2px);
+}
+
 .dropdown__link {
   padding: 1rem;
   transition: background-color 200ms ease-in-out;
@@ -511,8 +527,9 @@ hr { border: 0; }
   text-shadow: 0 0 0.5em rgb(0 0 0 / 25%);
 }
 
-.home__section:nth-child(2n) .markdown {
-  margin-left: auto;
+.home__section > .col {
+  position: relative;
+  z-index: 1;
 }
 
 .home__section-icon {
@@ -522,6 +539,7 @@ hr { border: 0; }
   right: calc(50% + 18rem);
   font-size: 8em;
   z-index: 2;
+  overflow: visible;
 }
 
 .home__section:nth-child(2n + 1)  .home__section-icon {

docs/scripts/generate-index.js

@@ -43,8 +43,6 @@ const main = () =>
                 acc[line.substring(2)] = 1
               } else if (line.startsWith('## ')) {
                 acc[line.substring(3)] = 2
-              } else if (line.startsWith('### ')) {
-                acc[line.substring(4)] = 3
               }
 
               return acc

docs/src/Pages/Home_.elm

@@ -1,6 +1,7 @@
 module Pages.Home_ exposing (Model, Msg, page)
 
 import Gen.Params.Home_ exposing (Params)
+import Gen.Route exposing (Route)
 import Html
 import Html.Attributes as Attr
 import Page
@@ -37,8 +38,9 @@ view =
                 }
             ]
         , alternatingMarkdownSections
-            [ ( "😌", """
-## Build reliable single page applications
+            [ ( "🌳"
+              , """
+## Build reliable applications with Elm
 
 With __elm-spa__, you can create production-ready applications with one command:
 
@@ -46,38 +48,61 @@ With __elm-spa__, you can create production-ready applications with one command:
 npx elm-spa new
 ```
 
-No need to configure webpack, gulp, or any other NPM dev tools. This single __zero-configuration__ CLI comes with a live-reloading dev server, production-ready build command, and even a few scaffolding commands for new and existing applications.
-""" )
-            , ( "\u{1FA84}", """
+No need to configure webpack, gulp, or any other NPM dev tools. This __zero-configuration__ CLI comes with a live-reloading dev server, production-ready build commands, and even a few scaffolding commands for new and existing applications.
+"""
+              , [ ( "Explore the CLI", Gen.Route.Guide__Section_ { section = "cli" } )
+                ]
+              )
+            , ( "\u{1FA84}"
+              , """
 ## Automatic routing
 
 With __elm-spa__, routing is automatically generated for you based on a standard file-structure convention. This means you'll be able to navigate any project, making it great for onboarding new hires or collaborating with a team!
-""" )
-            , ( "🔒", """
+"""
+              , [ ( "Learn how routing works", Gen.Route.Guide__Section_ { section = "routing" } )
+                ]
+              )
+            , ( "🔒"
+              , """
 ## User authentication
 
 The latest release comes with an easy way to setup user authentication. Use the `Page.protected` API to easily guarantee only logged-in users can view certain pages.
-""" )
-            , ( "🧠", """
+"""
+              , [ ( "See it in action", Gen.Route.Examples__Section_ { section = "04-authentication" } )
+                ]
+              )
+            , ( "🧠"
+              , """
 ## Ready to learn more?
 
-Awesome! Check out [the official guide](/guide) to learn the concepts, or start by looking at a collection of examples.
-        """ )
+Awesome! Check out the official guide to learn the concepts, or start by looking at a collection of examples.
+        """
+              , [ ( "Read the guide", Gen.Route.Guide )
+                , ( "View examples", Gen.Route.Examples )
+                ]
+              )
             ]
         ]
     }
 
 
-alternatingMarkdownSections : List ( String, String ) -> Html msg
+alternatingMarkdownSections : List ( String, String, List ( String, Route ) ) -> Html msg
 alternatingMarkdownSections sections =
     let
-        viewSection ( emoji, str ) =
+        viewSection i ( emoji, str, buttons ) =
             Html.section [ Attr.class "home__section" ]
-                [ Html.div [ Attr.class "container relative", Attr.style "padding" "8em 1rem" ]
+                [ Html.div [ Attr.class "container relative row", Attr.style "padding" "8em 1rem", Attr.classList [ ( "align-right", modBy 2 i == 1 ) ] ]
                     [ Html.div [ Attr.class "home__section-icon" ] [ Html.text emoji ]
-                    , UI.markdown { withHeaderLinks = False } str
+                    , Html.div [ Attr.class "col gap-lg" ]
+                        [ UI.markdown { withHeaderLinks = False } str
+                        , Html.div [ Attr.class "row gap-md" ]
+                            (List.map
+                                (\( label, route ) -> Html.a [ Attr.class "button", Attr.href (Gen.Route.toHref route) ] [ Html.text label ])
+                                buttons
+                            )
+                        ]
                     ]
                 ]
     in
     Html.main_ [ Attr.class "col" ]
-        (List.map viewSection sections)
+        (List.indexedMap viewSection sections)