git.iko.soy/rowtype-yoga/psfp
on 2a33c3c help sign in
rowtype-yoga/psfp/blog/src/purescript/Landing.purs
143 lines 4.6 kB history raw
1module Landing where
3import Prelude
4import Data.Foldable (for_)
5import Data.Nullable (null)
6import Effect (Effect)
7import Effect.Uncurried (runEffectFn1)
8import Icon.Logo (logo)
9import React.Basic.DOM as R
10import React.Basic.Emotion as E
11import React.Basic.Events (handler_)
12import React.Basic.Hooks (ReactComponent, reactComponent, 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 ((/>), (</*), (</*>), (</>))
19import Yoga.Block as Block
20import Yoga.Block.Atom.Button.Types as ButtonType
21import Yoga.Block.Container.Style (colour)
22import Yoga.SVG.Image (mkLandingPageBackground)
23import Yoga.Scroll.Hook (useScrollYPosition)
25classes =
26 { landing:
27 E.css
28 { width: E.str "100vw"
29 , height: E.str "100vh"
30 , gridArea: E.str "landing"
31 }
32 , textLayer:
33 E.css
34 { position: E.str "absolute"
35 , width: E.str "100%"
36 , height: E.str "100%"
37 , zIndex: E.int 2
38 }
39 , topBar:
40 E.css
41 { width: E.str "100%"
42 , display: E.str "flex"
43 , flexDirection: E.str "row"
44 , height: E.str "90px"
45 , justifyContent: E.str "center"
46 , alignItems: E.str "space-around"
47 }
48 , logo:
49 E.css
50 { fill: E.str colour.text
51 , width: E.str "50px"
52 , height: E.str "50px"
53 , marginTop: E.str "33px"
54 }
55 , welcomeText:
56 E.css
57 { fontSize: E.str "36pt"
58 , marginTop: E.str "33px"
59 , marginLeft: E.str "5vw"
60 }
61 , welcomeCopy:
62 E.css
63 { fontSize: E.str "22pt"
64 , marginTop: E.str "20px"
65 , marginLeft: E.str "5vw"
66 , maxWidth: E.str "400px"
67 }
68 , actionButton:
69 E.css
70 { marginLeft: E.str "5vw"
71 , display: E.str "flex"
72 }
73 , actualActionButton:
74 E.css
75 { paddingLeft: E.str "10px"
76 , paddingRight: E.str "10px"
77 }
78 , landingImage:
79 E.css
80 { position: E.str "absolute"
81 , maxWidth: E.str "none"
82 , width: E.str "100%"
83 , height: E.str "100%"
84 }
85 }
87mkLandingPage ∷ Effect (ReactComponent {})
88mkLandingPage = do
89 backgroundImage <- mkLandingPageBackground
90 reactComponent "LandingPage" \{} -> React.do
91 ref <- useRef null
92 scrollY <- useScrollYPosition
93 pure
94 $ E.element R.div'
95 { ref
96 , css: classes.landing
97 , className: "landing-page"
98 , children:
99 [ E.element backgroundImage { className: "landing-image", css: classes.landingImage }
100 , E.element R.div'
101 { className: "text-layer"
102 , css: classes.textLayer
103 , children:
104 [ E.element R.div'
105 { className: "top-bar"
106 , css: classes.topBar
107 , children: [ Block.icon </*> { className: "logo", css: E.css { marginTop: E.var "--s0" }, size: E.var "--s3", icon: logo } ]
108 }
109 , E.element R.div' { className: "welcome-text", css: classes.welcomeText, children: [ R.text welcomeText ] }
110 , E.element R.div' { className: "welcome-copy", css: classes.welcomeCopy, children: [ R.text copyText ] }
111 , E.element R.div'
112 { css: classes.actionButton
113 , className: "action-button"
114 , children:
115 [ Block.button
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 , buttonType: ButtonType.Primary
125 , css: classes.actualActionButton
126 , className: "Heinzer"
127 }
128 /> [ R.text buttonText ]
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!"