Add "About" page content

src/Pages/About.elm

@@ -1,13 +1,18 @@
-module Pages.About exposing (Model, Msg, Params, page)
+module Pages.About exposing (Params, Model, Msg, page)
+
+import Html exposing (Html, button, div, h2, h5, img, text, ul, li, a, p, span, i)
+import Html.Attributes exposing (src, style, class, alt, href)
 
-import Html exposing (..)
 import Spa.Document exposing (Document)
 import Spa.Page as Page exposing (Page)
-import Spa.Url exposing (Url)
+import Spa.Url as Url exposing (Url)
 
 
-type alias Params =
-    ()
+page : Page Params Model Msg
+page =
+    Page.static
+        { view = view
+        }
 
 
 type alias Model =
@@ -18,20 +23,45 @@ type alias Msg =
     Never
 
 
-page : Page Params Model Msg
-page =
-    Page.static
-        { view = view
-        }
-
 
 -- VIEW
 
 
+type alias Params =
+    ()
+
+
 view : Url Params -> Document Msg
 view { params } =
-    { title = "about"
-    , body =
-        [ text "about"
-        ]
-    }
+    let 
+        elm_link = a [ href "https://elm-lang.org/" ] [ text "Elm" ]
+        coopcloud_link = a [ href "https://coopcloud.tech/" ] [ text "Co-op Cloud" ]
+        source_link = a [ href "https://git.autonomic.zone/coop-cloud/abra-apps" ] [ text "source" ]
+    in
+        { title = "about"
+        , body = 
+            [ div [ class "pt-3" ]
+                [ div [ class "col-md-6 col-sm-10 mb-3 offset-md-3 offset-sm-1" ] 
+                    [ div [ class "card" ]
+                        [ div [ class "card-header" ]
+                            [ h2 [] [ text "abra apps" ]
+                            ]
+                        , div [ class "card-body" ]
+                            [ p [] 
+                                [
+                                    text "a lil "
+                                    , elm_link 
+                                    , text " single-page app to display "
+                                    , coopcloud_link
+                                    , text " apps. by @3wc ("
+                                    , source_link
+                                    , text ")"
+                                ]
+                            ]
+                        , div [ class "card-footer" ]
+                            []
+                        ]
+                    ]
+                ]
+            ]
+        }