git.iko.soy/rowtype-yoga/psfp
on 133b502 help sign in
rowtype-yoga/psfp/src/Container/Landing.purs
140 lines 4.3 kB history raw
1module Container.Landing where
3import Prelude
5import Button.Component (ButtonType(..), mkButton)
6import CSS.Safer (cssSafer)
7import Data.Foldable (for_)
8import Data.Nullable (null)
9import Effect (Effect)
10import Effect.Uncurried (runEffectFn1)
11import React.Basic.DOM as R
12import React.Basic.Events (handler_)
13import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
14import React.Basic.Hooks as React
15import SVG.Icon (trianglelogoIcon)
16import SVG.Image (landingPageDark, landingPageLight)
17import Theme.Styles (makeStyles, useTheme)
18import Theme.Types (CSSTheme)
19import Typography.Header (mkH)
20import Unsafe.Coerce (unsafeCoerce)
21import Web.HTML (window)
22import Web.HTML.HTMLElement (getBoundingClientRect)
23import Web.HTML.HTMLElement as HTMLElement
25mkLandingPage ∷ Effect (ReactComponent {})
26mkLandingPage = do
27 useStyles <-
28 makeStyles \(theme ∷ CSSTheme) ->
29 { landing:
30 cssSafer
31 { width: "100vw"
32 , height: "100vh"
33 , gridArea: "landing"
34 }
35 , textLayer:
36 cssSafer
37 { position: "absolute"
38 , width: "100%"
39 , height: "100%"
40 , zIndex: 2
41 }
42 , topBar:
43 cssSafer
44 { width: "100%"
45 , display: "flex"
46 , flexDirection: "row"
47 , height: "90px"
48 , justifyContent: "center"
49 , alignItems: "space-around"
50 }
51 , logo:
52 cssSafer
53 { fill: theme.textColour
54 , width: "50px"
55 , height: "50px"
56 , marginTop: "33px"
57 }
58 , welcomeText:
59 cssSafer
60 { fontSize: "36pt"
61 , marginTop: "33px"
62 , marginLeft: "5vw"
63 }
64 , welcomeCopy:
65 cssSafer
66 { fontSize: "22pt"
67 , marginTop: "20px"
68 , marginLeft: "5vw"
69 , maxWidth: "400px"
70 }
71 , actionButton:
72 cssSafer
73 { fontSize: "40pt"
74 , marginLeft: "5vw"
75 }
76 , landingImage:
77 cssSafer
78 { position: "absolute"
79 , width: "100%"
80 , height: "100%"
81 }
82 }
83 h <- mkH
84 button <- mkButton
85 component "LandingPage" \{ } -> React.do
86 classes <- useStyles
87 theme <- useTheme
88 ref <- useRef null
89 let
90 backgroundImage =
91 if theme.isLight then
92 landingPageLight
93 else
94 landingPageDark
95 pure
96 $ R.div
97 { ref
98 , className: classes.landing
99 , children:
100 [ element backgroundImage { className: classes.landingImage }
101 , R.div
102 { className: classes.textLayer
103 , children:
104 [ R.div
105 { className: classes.topBar
106 , children: [ element trianglelogoIcon { className: classes.logo } ]
107 }
108 , R.div { className: classes.welcomeText, children: [ R.text welcomeText ] }
109 , R.div { className: classes.welcomeCopy, children: [ R.text copyText ] }
110 , R.div
111 { className: classes.actionButton
112 , children:
113 [ element button
114 { buttonProps:
115 { onClick: handler_ do
116 maybeNode <- readRefMaybe ref
117 for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
118 height <- getBoundingClientRect n <#> _.height
119 win <- window
120 runEffectFn1 ((unsafeCoerce win).scrollTo)
121 { top: height, left: 0, behavior: "smooth"}
122 }
123 , buttonType: HighlightedButton
124 , children: [ R.text buttonText ]
125 }
126 ]
127 }
128 ]
129 }
130 ]
131 }
133welcomeText ∷ String
134welcomeText = "Enter the college of Kleisli"
136copyText ∷ String
137copyText = "Learn how to tame and harness the compiler, whether you're a λ or a Λ"
139buttonText ∷ String
140buttonText = "I can't wait, let's go!"