git.iko.soy/rowtype-yoga/psfp
on bbaf3fb help sign in
rowtype-yoga/psfp/client/src/Container/Landing.purs
137 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 (mkLandingPageBackground)
17import Scroll.Hook (useScrollYPosition)
18import Theme.Styles (makeStyles, useTheme)
19import Theme.Types (CSSTheme)
20import Typography.Header (mkH)
21import Unsafe.Coerce (unsafeCoerce)
22import Web.HTML (window)
23import Web.HTML.HTMLElement (getBoundingClientRect)
24import Web.HTML.HTMLElement as HTMLElement
26mkLandingPage ∷ Effect (ReactComponent {})
27mkLandingPage = do
28 useStyles <-
29 makeStyles \(theme ∷ CSSTheme) ->
30 { landing:
31 cssSafer
32 { width: "100vw"
33 , height: "100vh"
34 , gridArea: "landing"
35 }
36 , textLayer:
37 cssSafer
38 { position: "absolute"
39 , width: "100%"
40 , height: "100%"
41 , zIndex: 2
42 }
43 , topBar:
44 cssSafer
45 { width: "100%"
46 , display: "flex"
47 , flexDirection: "row"
48 , height: "90px"
49 , justifyContent: "center"
50 , alignItems: "space-around"
51 }
52 , logo:
53 cssSafer
54 { fill: theme.textColour
55 , width: "50px"
56 , height: "50px"
57 , marginTop: "33px"
58 }
59 , welcomeText:
60 cssSafer
61 { fontSize: "36pt"
62 , marginTop: "33px"
63 , marginLeft: "5vw"
64 }
65 , welcomeCopy:
66 cssSafer
67 { fontSize: "22pt"
68 , marginTop: "20px"
69 , marginLeft: "5vw"
70 , maxWidth: "400px"
71 }
72 , actionButton:
73 cssSafer
74 { fontSize: "40pt"
75 , marginLeft: "5vw"
76 }
77 , landingImage:
78 cssSafer
79 { position: "absolute"
80 , width: "100%"
81 , height: "100%"
82 }
83 }
84 h <- mkH
85 button <- mkButton
86 backgroundImage <- mkLandingPageBackground
87 component "LandingPage" \{ } -> React.do
88 classes <- useStyles
89 theme <- useTheme
90 ref <- useRef null
91 scrollY <- useScrollYPosition
92 pure
93 $ R.div
94 { ref
95 , className: classes.landing
96 , children:
97 [ element backgroundImage { className: classes.landingImage }
98 , R.div
99 { className: classes.textLayer
100 , children:
101 [ R.div
102 { className: classes.topBar
103 , children: [ element trianglelogoIcon { className: classes.logo } ]
104 }
105 , R.div { className: classes.welcomeText, children: [ R.text welcomeText ] }
106 , R.div { className: classes.welcomeCopy, children: [ R.text copyText ] }
107 , R.div
108 { className: classes.actionButton
109 , children:
110 [ element button
111 { buttonProps:
112 { onClick: 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 , children: [ 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!"