@t2ca/gatsby-theme-showcase 1.0.25 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/hero.js +76 -12
package/package.json
CHANGED
package/src/components/hero.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import React from "react"
|
|
3
|
-
import {
|
|
3
|
+
// import { useStaticQuery, graphql } from "gatsby"
|
|
4
|
+
// import Img from "gatsby-image"
|
|
5
|
+
import { jsx, Styled, Container, Flex, Box } from "theme-ui"
|
|
4
6
|
import { useSpring, animated } from "react-spring"
|
|
5
7
|
|
|
6
8
|
export default ({
|
|
7
9
|
headingTop,
|
|
8
10
|
headingMiddle,
|
|
9
11
|
headingBottom,
|
|
12
|
+
background = `MainHero`,
|
|
13
|
+
color,
|
|
10
14
|
minHeight = `100vh`,
|
|
11
15
|
}) => {
|
|
12
16
|
const titleProps = useSpring({
|
|
@@ -14,6 +18,23 @@ export default ({
|
|
|
14
18
|
to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
|
|
15
19
|
})
|
|
16
20
|
|
|
21
|
+
// const data = useStaticQuery(graphql`
|
|
22
|
+
// query {
|
|
23
|
+
// skyLine: allFile(filter: { relativePath: { eq: "c-skyline.png" } }) {
|
|
24
|
+
// nodes {
|
|
25
|
+
// base
|
|
26
|
+
// childImageSharp {
|
|
27
|
+
// fluid(quality: 75) {
|
|
28
|
+
// ...GatsbyImageSharpFluid_tracedSVG
|
|
29
|
+
// }
|
|
30
|
+
// }
|
|
31
|
+
// }
|
|
32
|
+
// }
|
|
33
|
+
// }
|
|
34
|
+
// `)
|
|
35
|
+
|
|
36
|
+
// const skyLine = data.skyLine.nodes[0].childImageSharp.fluid
|
|
37
|
+
|
|
17
38
|
return (
|
|
18
39
|
<React.Fragment>
|
|
19
40
|
<div
|
|
@@ -21,23 +42,66 @@ export default ({
|
|
|
21
42
|
pt: 6,
|
|
22
43
|
px: [4, 5],
|
|
23
44
|
position: "relative",
|
|
24
|
-
bg:
|
|
45
|
+
bg: background,
|
|
25
46
|
minHeight: minHeight, // screenHeight
|
|
26
47
|
}}
|
|
27
48
|
>
|
|
28
49
|
<Container sx={{ py: 3, px: 4 }}>
|
|
29
50
|
<animated.div style={titleProps}>
|
|
30
|
-
<
|
|
31
|
-
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
51
|
+
<Flex
|
|
52
|
+
sx={{
|
|
53
|
+
display: [`block`, `flex`],
|
|
54
|
+
alignItems: `center`,
|
|
55
|
+
justifyContent: `center`,
|
|
56
|
+
width: `100%`,
|
|
57
|
+
}}
|
|
58
|
+
>
|
|
59
|
+
<Flex
|
|
60
|
+
sx={{
|
|
61
|
+
// alignItems: `center`,
|
|
62
|
+
// justifyContent: `center`,
|
|
63
|
+
flexDirection: `column`,
|
|
64
|
+
flexBasis: `100%`,
|
|
65
|
+
color: color,
|
|
66
|
+
// flex: `1 0 0`,
|
|
67
|
+
}}
|
|
68
|
+
>
|
|
69
|
+
<Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
|
|
70
|
+
{headingTop}
|
|
71
|
+
</Styled.h1>
|
|
72
|
+
<Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
|
|
73
|
+
{headingMiddle}
|
|
74
|
+
</Styled.h1>
|
|
75
|
+
<Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
|
|
76
|
+
{headingBottom}
|
|
77
|
+
</Styled.h1>
|
|
78
|
+
</Flex>
|
|
79
|
+
{/* <Flex
|
|
80
|
+
sx={{
|
|
81
|
+
// px: 6,
|
|
82
|
+
display: [`none`, `initial`],
|
|
83
|
+
// alignItems: `center`,
|
|
84
|
+
// justifyContent: `center`,
|
|
85
|
+
flexDirection: `column`,
|
|
86
|
+
flexBasis: `100%`,
|
|
87
|
+
// flex: `2 0 0`,
|
|
88
|
+
// alignSelf: `flex-end`,
|
|
89
|
+
".gatsby-image-wrapper": {
|
|
90
|
+
minWidth: `200px`,
|
|
91
|
+
},
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
<Img
|
|
95
|
+
fluid={skyLine}
|
|
96
|
+
alt="Skyline"
|
|
97
|
+
sx={{ px: 4, mx: 4, width: `600px` }}
|
|
98
|
+
/>
|
|
99
|
+
</Flex>*/}
|
|
100
|
+
</Flex>
|
|
39
101
|
<div sx={{ width: [`5/6`, `2/3`] }}>
|
|
40
|
-
<Styled.p
|
|
102
|
+
<Styled.p
|
|
103
|
+
sx={{ fontSize: [1, 2], py: 4, lineHeight: 2.5, color: color }}
|
|
104
|
+
>
|
|
41
105
|
Partnering with us is a journey and not just a single
|
|
42
106
|
transaction. While working together we will help you navigate
|
|
43
107
|
the dynamic digital landscape and help you get ahead of your
|