@t2ca/gatsby-theme-showcase 1.0.5 → 1.0.6

package/package.json

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

package/src/components/hero.js

@@ -17,7 +17,7 @@ export default props => {
           px: [4, 5],
           position: "relative",
           bg: `MainHero`,
-          minHeight: `screenHeight`, // 80vh
+          minHeight: `80vh`, // screenHeight
         }}
       >
         <Container>

package/src/components/nav-link.js

@@ -9,10 +9,10 @@ const styles = {
   px: 0,
   py: 0,
   color: "primary",
-  margin: 4,
+  margin: 3,
   textDecoration: "none",
   borderBottom: `2px solid transparent`,
-  lineHeight: 5,
+  lineHeight: 2,
   transition: `all .5s ease-in;`,
   "&.active": {
     borderBottom: `1px solid transparent`,

package/src/components/project.js

@@ -20,39 +20,71 @@ const Project = data => {
   })
 
   return (
-    <div>
-      <Container sx={{ px: [0, 4], py: 0 }}>
-        <div
-          sx={{
-            py: "15rem",
-            px: ["1.5rem", "3rem"],
-            zIndex: "1",
-            position: "relative",
-          }}
-        >
-          <animated.div style={titleProps}>
-            <Styled.a as={Link} to="/projects/">
-              <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
-              Back to showcase
-            </Styled.a>
-            <Styled.h1>{data.title}</Styled.h1>
-          </animated.div>
-
-          <Image
-            fluid={data.hero.childImageSharp.fluid}
-            style={imgProps}
+    <React.Fragment>
+      <div>
+        <Container sx={{ px: [0, 4], py: 0 }}>
+          <div
             sx={{
-              position: "absolute !important",
-              top: "0",
-              left: "10vw",
-              right: "0",
-              bottom: "0",
-              zIndex: "-1",
+              py: "15rem",
+              px: ["1.5rem", "3rem"],
+              zIndex: "1",
+              position: "relative",
             }}
-          />
-        </div>
-      </Container>
-    </div>
+          >
+            <animated.div style={titleProps}>
+              <Styled.a as={Link} to="/projects/">
+                <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
+                Back to showcase
+              </Styled.a>
+              <Styled.h1>{data.title}</Styled.h1>
+            </animated.div>
+
+            <Image
+              fluid={data.hero.childImageSharp.fluid}
+              style={imgProps}
+              sx={{
+                position: "absolute !important",
+                top: "0",
+                left: "10vw",
+                right: "0",
+                bottom: "0",
+                zIndex: "-1",
+              }}
+            />
+          </div>
+        </Container>
+      </div>
+      <div sx={{ bg: `gray.1` }}>
+        <svg
+          sx={{ bg: "pink.1" }}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 200"
+        >
+          <path
+            sx={{ fill: "Menu" }}
+            d="M0,96L40,112C80,128,160,160,240,170.7C320,181,400,171,480,160C560,149,640,139,720,112C800,85,880,43,960,37.3C1040,32,1120,64,1200,96C1280,128,1360,160,1400,176L1440,192L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"
+          ></path>
+          <g transform="translate(0.000000, 44.000000)">
+            <path
+              sx={{ fill: "waveX" }}
+              d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+              opacity="0.100000001"
+            ></path>
+            <path
+              sx={{ fill: "waveY" }}
+              d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
+              opacity="0.100000001"
+            ></path>
+            <path
+              sx={{ fill: "waveZ" }}
+              d="M920,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+              id="Path-4"
+              opacity="0.200000003"
+            ></path>
+          </g>
+        </svg>
+      </div>
+    </React.Fragment>
   )
 }