@t2ca/gatsby-theme-showcase 1.0.6 → 1.0.8

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.6",
+  "version": "1.0.8",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

package/src/components/header.js

@@ -16,6 +16,7 @@ export default ({
   nav,
   name,
   menuList,
+  type,
 }) => {
   const toggleColorMode = e => {
     e.preventDefault()

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: `80vh`, // screenHeight
+          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",
+          paddingLeft: 2,
+          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

@@ -4,36 +4,24 @@ import { jsx } from "theme-ui"
 import { Link } from "gatsby"
 import isAbsoluteURL from "is-absolute-url"
 
-const styles = {
-  display: "inline-block",
-  px: 0,
-  py: 0,
-  color: "primary",
-  margin: 3,
-  textDecoration: "none",
-  borderBottom: `2px solid transparent`,
-  lineHeight: 2,
-  transition: `all .5s ease-in;`,
-  "&.active": {
-    borderBottom: `1px solid transparent`,
-    borderColor: "secondary",
-    color: "secondary",
-    cursor: "default",
-  },
-  "&:hover:not(.active)": {
-    borderColor: "primary",
-  },
-}
-
-export default ({ href, ...props }) => {
+export default ({ href, type = "basic", ...props }) => {
   const isExternal = isAbsoluteURL(href || "")
   if (isExternal) {
     return (
-      <a href={href} sx={styles}>
+      <a href={href} sx={props.styles}>
         {props}
       </a>
     )
   }
   const to = props.to || href
-  return <Link {...props} to={to} sx={styles} activeClassName="active" />
+  return (
+    <Link
+      {...props}
+      to={to}
+      sx={{
+        variant: `links.${type}`,
+      }}
+      activeClassName="active"
+    />
+  )
 }

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)
@@ -21,69 +22,39 @@ const Project = data => {
 
   return (
     <React.Fragment>
-      <div>
-        <Container sx={{ px: [0, 4], py: 0 }}>
-          <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}
             sx={{
-              py: "15rem",
-              px: ["1.5rem", "3rem"],
-              zIndex: "1",
-              position: "relative",
+              position: "absolute !important",
+              top: "0",
+              left: "10vw",
+              right: "0",
+              bottom: "0",
+              zIndex: "-1",
             }}
-          >
-            <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>
+          />
+        </div>
+      </Container>
 
-            <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>
+      <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/gatsby-plugin-theme-ui/index.js

@@ -52,6 +52,89 @@ export default merge(
         width: `full`,
       },
     },
+    links: {
+      primary: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        lineHeight: 1.75,
+        position: `relative`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          height: "1px",
+          width: 0,
+          bottom: 0,
+          left: 0,
+          bg: "primary",
+          transition: `all .25s ease-in-out 0s`,
+        },
+        "&:hover:not(.active)::after": {
+          width: `100%`,
+        },
+      },
+      secondary: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        lineHeight: 1.75,
+        position: `relative`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          width: "100%",
+          height: "1px",
+          bottom: "0",
+          left: "0",
+          visibility: "hidden",
+          transform: "scaleX(0)",
+          transition: "all 0.25s ease-in-out 0s",
+          bg: "primary",
+        },
+        "&:hover:not(.active)::after": {
+          visibility: "visible",
+          transform: "scaleX(1)",
+        },
+      },
+      basic: {
+        display: "inline-block",
+        px: 0,
+        py: 0,
+        color: "primary",
+        margin: 3,
+        textDecoration: "none",
+        borderBottom: `2px solid transparent`,
+        lineHeight: 2,
+        transition: `all .5s ease-in;`,
+        "&.active": {
+          borderBottom: `1px solid transparent`,
+          borderColor: "secondary",
+          color: "secondary",
+          cursor: "default",
+        },
+        "&:hover:not(.active)": {
+          borderColor: "primary",
+        },
+      },
+    },
     alerts: {
       error: {
         borderRadius: `sm`,

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>
   )