@t2ca/gatsby-theme-showcase 1.0.8 → 1.0.9

package/index.js

@@ -5,3 +5,5 @@ export { default as Card } from "./src/components/card"
 export { default as Button } from "./src/components/button"
 export { default as LogoBanner } from "./src/components/logo-banner"
 export { default as Wave } from "./src/components/wave"
+export { default as Hero } from "./src/components/hero"
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

package/src/components/hero.js

@@ -2,9 +2,13 @@
 import React from "react"
 import { jsx, Styled, Container } from "theme-ui"
 import { useSpring, animated } from "react-spring"
-import Wave from "./wave"
 
-export default props => {
+export default ({
+  headingTop,
+  headingMiddle,
+  headingBottom,
+  minHeight = `100vh`,
+}) => {
   const titleProps = useSpring({
     from: { opacity: 0, transform: "translate3d(0, -200px, 0)" },
     to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
@@ -18,19 +22,19 @@ export default props => {
           px: [4, 5],
           position: "relative",
           bg: `MainHero`,
-          minHeight: `75vh`, // screenHeight
+          minHeight: minHeight, // screenHeight
         }}
       >
         <Container>
           <animated.div style={titleProps}>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingTop}
+              {headingTop}
             </Styled.h1>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingMiddle}
+              {headingMiddle}
             </Styled.h1>
             <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
-              {props.headingBottom}
+              {headingBottom}
             </Styled.h1>
             <div sx={{ width: [`5/6`, `2/3`] }}>
               <Styled.p sx={{ fontSize: [1, 2], py: 4, lineHeight: 2.5 }}>
@@ -43,8 +47,6 @@ export default props => {
           </animated.div>
         </Container>
       </div>
-
-      <Wave background="Menu" />
     </React.Fragment>
   )
 }

package/src/components/layout.js

@@ -129,7 +129,7 @@ const Layout = props => {
 
           </div>*/}
 
-          {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}
+          {/* {props.location.pathname === "/" ? <Hero isDark={isDark} /> : null}*/}
 
           <div
             sx={{

package/src/components/project.js

@@ -29,6 +29,7 @@ const Project = data => {
             px: ["1.5rem", "3rem"],
             zIndex: "1",
             position: "relative",
+            minHeight: `75vh`, // screenHeight
           }}
         >
           <animated.div style={titleProps}>
@@ -55,6 +56,12 @@ const Project = data => {
       </Container>
 
       <Wave background="cBg" />
+
+      <div sx={{ bg: `mBg` }}>
+        <Container>
+          <Image fluid={data.laptop.childImageSharp.fluid} sx={{}} />
+        </Container>
+      </div>
     </React.Fragment>
   )
 }

package/src/gatsby-plugin-theme-ui/styles.js

@@ -7,13 +7,12 @@ export default {
   Header: {
     primary: {
       bg: `Menu`,
-      // borderBottom: `1px solid transparent`,
+      borderBottom: `1px solid transparent`,
       // position: "fixed",
       // top: 0,
       // width: "100%",
       // zIndex: 10,
       // borderColor: `rgb(212, 212, 213)`,
-
       // borderColor: `rgb(212, 212, 213)`,
     },
     secondary: {

package/src/templates/project.js

@@ -3,17 +3,13 @@ import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import Project from "../components/project"
 
-const ProjectTemplates = ({ data: { projectYaml }, location }) => {
+const ProjectTemplates = ({ data: { projectYaml } }) => {
   const styles = {
     variant: "styles.Header.secondary",
   }
 
   return (
-    <Layout
-      main={{ ...styles, borderBottom: `inherit` }}
-      header={styles}
-      location={location}
-    >
+    <Layout main={{ ...styles, borderBottom: `inherit` }} header={styles}>
       <Project {...projectYaml} />
     </Layout>
   )
@@ -32,6 +28,13 @@ export const query = graphql`
           }
         }
       }
+      laptop {
+        childImageSharp {
+          fluid {
+            ...GatsbyImageSharpFluid_withWebp_tracedSVG
+          }
+        }
+      }
     }
   }
 `