git.iko.soy/rowtype-yoga/psfp
on 191a78d help sign in
rowtype-yoga/psfp/client/src/Container/Landing.purs
137 lines 4.3 kB history raw
1module Container.Landing where
3import Prelude
4import Button.Component (ButtonType(..), mkButton)
5import CSS.Safer (cssSafer)
6import Data.Foldable (for_)
7import Data.Nullable (null)
8import Effect (Effect)
9import Effect.Uncurried (runEffectFn1)
10import React.Basic.DOM as R
11import React.Basic.Events (handler_)
12import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
13import React.Basic.Hooks as React
14import SVG.Icon (trianglelogoIcon)
15import SVG.Image (mkLandingPageBackground)
16import Scroll.Hook (useScrollYPosition)
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 backgroundImage <- mkLandingPageBackground
86 component "LandingPage" \{} -> React.do
87 classes <- useStyles
88 theme <- useTheme
89 ref <- useRef null
90 scrollY <- useScrollYPosition
91 pure
92 $ R.div
93 { ref
94 , className: classes.landing
95 , children:
96 [ element backgroundImage { className: classes.landingImage }
97 , R.div
98 { className: classes.textLayer
99 , children:
100 [ R.div
101 { className: classes.topBar
102 , children: [ element trianglelogoIcon { className: classes.logo } ]
103 }
104 , R.div { className: classes.welcomeText, children: [ R.text welcomeText ] }
105 , R.div { className: classes.welcomeCopy, children: [ R.text copyText ] }
106 , R.div
107 { className: classes.actionButton
108 , children:
109 [ element button
110 { buttonProps:
111 { onClick:
112 handler_ do
113 maybeNode <- readRefMaybe ref
114 for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
115 height <- getBoundingClientRect n <#> _.height
116 win <- window
117 runEffectFn1 ((unsafeCoerce win).scrollTo)
118 { top: height, left: 0, behavior: "smooth" }
119 }
120 , buttonType: HighlightedButton
121 , kids: [ R.text buttonText ]
122 }
123 ]
124 }
125 ]
126 }
127 ]
128 }
130welcomeText ∷ String
131welcomeText = "Enter the college of Kleisli"
133copyText ∷ String
134copyText = "Learn how to tame and harness the compiler, whether you're a λ or a Λ"
136buttonText ∷ String
137buttonText = "I can't wait, let's go!"