@t2ca/gatsby-theme-showcase 1.0.5 → 1.0.7

package/gatsby-config.js

@@ -13,6 +13,12 @@ module.exports = ({ contentPath = "data", basePath = "/" }) => ({
         path: contentPath,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: "./src/assets",
+      },
+    },
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     {

package/index.js

@@ -3,3 +3,5 @@ export { default as Layout } from "./src/components/layout"
 export { default as Alert } from "./src/components/alert"
 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"

package/package.json

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

package/src/components/hero.js

@@ -2,6 +2,7 @@
 import React from "react"
 import { jsx, Styled, Container } from "theme-ui"
 import { useSpring, animated } from "react-spring"
+import Wave from "./wave"
 
 export default props => {
   const titleProps = useSpring({
@@ -13,49 +14,37 @@ export default props => {
     <React.Fragment>
       <div
         sx={{
-          py: 6,
+          pt: 6,
           px: [4, 5],
           position: "relative",
           bg: `MainHero`,
-          minHeight: `screenHeight`, // 80vh
+          minHeight: `75vh`, // screenHeight
         }}
       >
         <Container>
           <animated.div style={titleProps}>
-            <Styled.h1 sx={{ fontSize: [6, 7] }}>{props.headingTop}</Styled.h1>
-            <Styled.h1 sx={{ fontSize: [6, 7] }}>
+            <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
+              {props.headingTop}
+            </Styled.h1>
+            <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
               {props.headingMiddle}
             </Styled.h1>
-            <Styled.h1 sx={{ fontSize: [6, 7] }}>
+            <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
               {props.headingBottom}
             </Styled.h1>
+            <div sx={{ width: [`5/6`, `2/3`] }}>
+              <Styled.p sx={{ fontSize: [1, 2], py: 4, lineHeight: 2.5 }}>
+                Partnering with us is a journey and not just a single
+                transaction. While working together we will help you navigate
+                the dynamic digital landscape and help you get ahead of your
+                competitors.
+              </Styled.p>
+            </div>
           </animated.div>
         </Container>
       </div>
-      <svg 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>
+
+      <Wave background="Menu" />
     </React.Fragment>
   )
 }

package/src/components/logo-banner.js

@@ -0,0 +1,127 @@
+/** @jsx jsx */
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import { jsx } from "theme-ui"
+import Img from "gatsby-image"
+import styled from "@emotion/styled"
+
+// import { colors, space, mediaQueries } from "../../utils/presets"
+// import { Name } from "./homepage-section"
+
+// const Section = styled(`section`)`
+//   overflow: hidden;
+//   padding: ${space[5]} 0;
+//   width: 100%;
+//   border-bottom: 1px solid ${colors.ui.border.subtle};
+
+//   ${mediaQueries.xl} {
+//     margin: -1px 0;
+//     padding: ${space[5]} 0;
+//   }
+
+//   ${mediaQueries.xxl} {
+//     padding: ${space[7]} 0;
+//   }
+// `
+
+// const Title = styled(`header`)`
+//   padding-right: ${space[6]};
+//   padding-left: ${space[6]};
+//   ${mediaQueries.md} {
+//     max-width: 30rem;
+//   }
+
+//   ${mediaQueries.lg} {
+//     margin-left: ${space[9]};
+//   }
+
+//   ${mediaQueries.xl} {
+//     padding-right: 5%;
+//     padding-left: 5%;
+//   }
+
+//   ${mediaQueries.xxl} {
+//     padding-right: 8%;
+//     padding-left: 8%;
+//   }
+// `
+
+// const LogoGroup = styled(`div`)`
+//   position: relative;
+//   display: grid;
+//   grid-auto-flow: column;
+//   grid-auto-columns: auto;
+//   grid-gap: 16;
+//   align-items: center;
+//   overflow-x: scroll;
+//   padding-left: 3;
+//   padding-bottom: 1;
+
+//   &::-webkit-scrollbar {
+//     display: none;
+//   }
+// `
+
+const LogoBanner = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allFile(
+        filter: {
+          extension: { regex: "/(jpg)|(png)|(jpeg)/" }
+          relativeDirectory: { eq: "tech-logos" }
+        }
+        sort: { fields: publicURL }
+      ) {
+        edges {
+          node {
+            base
+            childImageSharp {
+              fixed(quality: 75, height: 42, grayscale: true) {
+                ...GatsbyImageSharpFixed_tracedSVG
+              }
+            }
+          }
+        }
+      }
+    }
+  `)
+
+  return (
+    <section
+      sx={{
+        overflow: ` hidden`,
+        padding: 3,
+        width: `100%`,
+        borderBottom: `1px solid transparent`,
+        bg: `gray.1`,
+      }}
+    >
+      <div>{/*<div>Technologies we use</div>*/}</div>
+      <div
+        sx={{
+          position: "relative",
+          display: "grid",
+          gridAutoFlow: "column",
+          gridAutoColumns: "auto",
+          gridGap: 4,
+          alignItems: "center",
+          overflowX: "scroll",
+          paddingRight: 5,
+          paddingBottom: 1,
+          "&::-webkit-scrollbar": { display: "none" },
+        }}
+      >
+        {data.allFile.edges.map(({ node: image }) => (
+          <Img
+            alt={`${image.base.split(`.`)[0]}`}
+            fixed={image.childImageSharp.fixed}
+            key={image.base}
+            style={{ opacity: 0.5 }}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default LogoBanner

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

@@ -5,6 +5,7 @@ import { Link } from "gatsby"
 import Img from "gatsby-image"
 import { useSpring, animated } from "react-spring"
 import { FaArrowLeft } from "react-icons/fa"
+import Wave from "./wave"
 
 const Project = data => {
   const Image = animated(Img)
@@ -20,7 +21,7 @@ const Project = data => {
   })
 
   return (
-    <div>
+    <React.Fragment>
       <Container sx={{ px: [0, 4], py: 0 }}>
         <div
           sx={{
@@ -52,7 +53,9 @@ const Project = data => {
           />
         </div>
       </Container>
-    </div>
+
+      <Wave background="cBg" />
+    </React.Fragment>
   )
 }
 

package/src/components/wave.js

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+
+const Wave = ({ background = "mBg" }) => {
+  return (
+    <div sx={{ bg: `mBg` }}>
+      <svg
+        sx={{ bg: "mBg" }}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1440 200"
+      >
+        <path
+          sx={{ fill: background }}
+          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>
+  )
+}
+
+export default Wave

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

@@ -2,8 +2,6 @@ import theme from "@theme-ui/preset-tailwind"
 
 export default {
   ...theme.colors,
-  // primary: theme.colors.blue[5],
-  // primaryHover: theme.colors.blue[6],
   mBg: `#f8f9fa`,
   cBg: `#ffffff`,
   sBg: `#e2e8f0`,

package/src/templates/project.js

@@ -9,7 +9,11 @@ const ProjectTemplates = ({ data: { projectYaml }, location }) => {
   }
 
   return (
-    <Layout main={styles} header={styles} location={location}>
+    <Layout
+      main={{ ...styles, borderBottom: `inherit` }}
+      header={styles}
+      location={location}
+    >
       <Project {...projectYaml} />
     </Layout>
   )