git.iko.soy/rowtype-yoga/psfp
on e418926 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 Yoga.Button.Component (ButtonType(..), mkButton)
5import Yoga.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 Yoga.SVG.Icon (trianglelogoIcon)
15import Yoga.SVG.Image (mkLandingPageBackground)
16import Yoga.Scroll.Hook (useScrollYPosition)
17import Yoga.Theme.Styles (makeStyles, useTheme)
18import Yoga.Theme.Types (CSSTheme)
19import Yoga.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!"