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