git.iko.soy/rowtype-yoga/psfp
on c810fc0 help sign in
rowtype-yoga/psfp/client/src/Container/Landing.purs
143 lines 4.5 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 { marginLeft: "5vw"
74 , display: "flex"
75 }
76 , actualActionButton:
77 cssSafer
78 { paddingLeft: "10px"
79 , paddingRight: "10px"
80 }
81 , landingImage:
82 cssSafer
83 { position: "absolute"
84 , width: "100%"
85 , height: "100%"
86 }
87 }
88 h <- mkH
89 button <- mkButton
90 backgroundImage <- mkLandingPageBackground
91 component "LandingPage" \{} -> React.do
92 classes <- useStyles
93 theme <- useTheme
94 ref <- useRef null
95 scrollY <- useScrollYPosition
96 pure
97 $ R.div
98 { ref
99 , className: classes.landing
100 , children:
101 [ element backgroundImage { className: classes.landingImage }
102 , R.div
103 { className: classes.textLayer
104 , children:
105 [ R.div
106 { className: classes.topBar
107 , children: [ element trianglelogoIcon { className: classes.logo } ]
108 }
109 , R.div { className: classes.welcomeText, children: [ R.text welcomeText ] }
110 , R.div { className: classes.welcomeCopy, children: [ R.text copyText ] }
111 , R.div
112 { className: classes.actionButton
113 , children:
114 [ element button
115 { buttonProps:
116 { onClick:
117 handler_ do
118 maybeNode <- readRefMaybe ref
119 for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
120 height <- getBoundingClientRect n <#> _.height
121 win <- window
122 runEffectFn1 ((unsafeCoerce win).scrollTo)
123 { top: height, left: 0, behavior: "smooth" }
124 }
125 , buttonType: HighlightedButton
126 , kids: [ R.text buttonText ]
127 , className: classes.actualActionButton
128 }
129 ]
130 }
131 ]
132 }
133 ]
134 }
136welcomeText ∷ String
137welcomeText = "Enter the college of Kleisli"
139copyText ∷ String
140copyText = "Learn how to tame and harness the compiler, whether you're a λ or a Λ"
142buttonText ∷ String
143buttonText = "I can't wait, let's go!"