git.iko.soy/rowtype-yoga/psfp
on 97117af 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.Helpers (jsx)
12import React.Basic.Hooks (ReactComponent, component, element, readRefMaybe, useRef)
13import React.Basic.Hooks as React
14import Unsafe.Coerce (unsafeCoerce)
15import Web.HTML (window)
16import Web.HTML.HTMLElement (getBoundingClientRect)
17import Web.HTML.HTMLElement as HTMLElement
18import Yoga.Button.Component (ButtonType(..), mkButton)
19import Yoga.SVG.Icon (trianglelogoIcon)
20import Yoga.SVG.Image (mkLandingPageBackground)
21import Yoga.Scroll.Hook (useScrollYPosition)
22import Yoga.Theme.Styles (makeStylesJSS, useTheme)
23import Yoga.Theme.Types (CSSTheme)
24import Yoga.Typography.Header (mkH)
26mkLandingPage ∷ Effect (ReactComponent {})
27mkLandingPage = do
28 useStyles <-
29 makeStylesJSS
30 $ jssClasses \(theme ∷ CSSTheme) ->
31 { landing:
32 jss
33 { width: "100vw"
34 , height: "100vh"
35 , gridArea: "landing"
36 }
37 , textLayer:
38 jss
39 { position: "absolute"
40 , width: "100%"
41 , height: "100%"
42 , zIndex: 2
43 }
44 , topBar:
45 jss
46 { width: "100%"
47 , display: "flex"
48 , flexDirection: "row"
49 , height: "90px"
50 , justifyContent: "center"
51 , alignItems: "space-around"
52 }
53 , logo:
54 jss
55 { fill: theme.textColour
56 , width: "50px"
57 , height: "50px"
58 , marginTop: "33px"
59 }
60 , welcomeText:
61 jss
62 { fontSize: "36pt"
63 , marginTop: "33px"
64 , marginLeft: "5vw"
65 }
66 , welcomeCopy:
67 jss
68 { fontSize: "22pt"
69 , marginTop: "20px"
70 , marginLeft: "5vw"
71 , maxWidth: "400px"
72 }
73 , actionButton:
74 jss
75 { marginLeft: "5vw"
76 , display: "flex"
77 }
78 , actualActionButton:
79 jss
80 { paddingLeft: "10px"
81 , paddingRight: "10px"
82 }
83 , landingImage:
84 jss
85 { position: "absolute"
86 , maxWidth: "none"
87 , width: "100%"
88 , height: "100%"
89 }
90 }
91 h <- mkH
92 button <- mkButton
93 backgroundImage <- mkLandingPageBackground
94 component "LandingPage" \{} -> React.do
95 classes <- useStyles {}
96 theme <- useTheme
97 ref <- useRef null
98 scrollY <- useScrollYPosition
99 pure
100 $ R.div
101 { ref
102 , className: classes.landing
103 , children:
104 [ element backgroundImage { className: classes.landingImage }
105 , R.div
106 { className: classes.textLayer
107 , children:
108 [ R.div
109 { className: classes.topBar
110 , children: [ element trianglelogoIcon { className: classes.logo } ]
111 }
112 , R.div { className: classes.welcomeText, children: [ R.text welcomeText ] }
113 , R.div { className: classes.welcomeCopy, children: [ R.text copyText ] }
114 , R.div
115 { className: classes.actionButton
116 , children:
117 [ jsx button
118 { onClick:
119 handler_ do
120 maybeNode <- readRefMaybe ref
121 for_ (maybeNode >>= HTMLElement.fromNode) \n -> do
122 height <- getBoundingClientRect n <#> _.height
123 win <- window
124 runEffectFn1 ((unsafeCoerce win).scrollTo)
125 { top: height, left: 0, behavior: "smooth" }
126 , buttonType: HighlightedButton
127 , className: classes.actualActionButton
128 }
129 [ R.text buttonText ]
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!"