init

src/components/shared/container.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import styled from 'styled-components'
+import { PageProps } from 'gatsby'
+
+type DataProps = {
+  children?: React.ReactNode
+}
+
+const StyledDiv = styled.div`
+  @media (min-width: 576px) {
+    max-width: 1310px;
+    padding: 0px 50px;
+  }
+`
+
+export const Container: React.FC<PageProps<DataProps>> = ({ children }) => {
+  return <StyledDiv className="container">{children}</StyledDiv>
+}

src/components/shared/index.ts

@@ -0,0 +1,3 @@
+export { Container } from './container'
+export { Section } from './section'
+export { ScheduleDemo } from './scheduleDemo'

src/components/shared/scheduleDemo.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import styled from 'styled-components'
+
+import { FaEnvelope } from 'react-icons/fa'
+
+export const StyledLink = styled((props) => <Link {...props} />)`
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 196, 69);
+  border-radius: 0px;
+  padding: 50px 10px;
+  width: 100%;
+  margin: 0px;
+  border: none;
+  position: relative;
+  display: block;
+  text-decoration: none;
+  font-size: 1.3rem;
+  line-height: 1.2em;
+  text-align: center;
+  max-width: 100%;
+  font-family: Montserrat, HelveticaNeue, 'Helvetica Neue', Helvetica, Arial;
+
+  svg {
+    opacity: 0;
+    transition: all 0.5s ease;
+  }
+  &:hover {
+    color: white;
+    background-color: #314351;
+    svg {
+      opacity: 1;
+    }
+  }
+
+  transition: all 0.3s ease;
+`
+
+const iconStyles = { marginTop: '-2px', marginLeft: '5px' }
+const textStyles = { opacity: '0.7', fontSize: '1rem', margin: '12px auto 0' }
+
+export const ScheduleDemo = () => {
+  return (
+    <StyledLink to="/contact">
+      <span>
+        Schedule a Free Demo <FaEnvelope size={18} style={iconStyles} />
+      </span>
+      <p style={textStyles}>
+        Contact us for a free demonstration of Data Controller.
+      </p>
+    </StyledLink>
+  )
+}

src/components/shared/section.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { PageProps } from 'gatsby'
+import { BottomSectionArrow } from './styledComponents'
+import { Container } from './'
+
+type DataProps = {
+  children?: React.ReactNode
+  color?: string
+  bgColor?: string
+  bottomArrow?: boolean
+}
+
+const StyledSection = styled.div`
+  position: relative;
+  padding: 50px 0;
+  color: ${(props) => props.color || 'white'};
+  background-color: ${(props) => props.bgColor || '#314351'};
+`
+
+export const Section: React.FC<PageProps<DataProps>> = ({
+  children,
+  bgColor,
+  color,
+  bottomArrow = true
+}) => {
+  return (
+    <StyledSection bgColor={bgColor} color={color}>
+      <Container>{children}</Container>
+      {bottomArrow && <BottomSectionArrow />}
+    </StyledSection>
+  )
+}

src/components/shared/styledComponents.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const BottomArrow = styled.div`
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  bottom: 10px;
+  background: inherit;
+  transform: translateX(-50%) rotate(45deg);
+  left: 50%;
+  // right: 0;
+  // margin-left: auto;
+  // margin-right: auto;
+  z-index: 10;
+`
+const BottomArrowWrapper = styled.div`
+  width: 100%;
+  height: 20px;
+  position: absolute;
+  overflow: hidden;
+  margin-top: 50px;
+  background-color: inherit;
+`
+
+export const BottomSectionArrow = () => (
+  <BottomArrowWrapper>
+    <BottomArrow />
+  </BottomArrowWrapper>
+)
+
+export const SectionHeading = styled.h2`
+  text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
+  letter-spacing: 1px;
+  font-weight: 400;
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  text-transform: uppercase;
+`
+
+export const SectionDesc = styled.p`
+  text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
+  opacity: ${(props) => props.opacity ?? 0.6};
+  a {
+    color: inherit;
+  }
+`
+const StyledSolidButton = styled.button`
+  padding: 0.75rem 1.5rem;
+  font-size: 0.75rem;
+  border-width: 2px;
+  width: 100%;
+  max-width: 250px;
+  &:hover {
+    opacity: 0.9;
+  }
+  &.btn-dark {
+    background-color: #2e4252;
+  }
+`
+
+export const SolidButton = ({
+  children,
+  theme = 'light',
+  type = 'submit',
+  onClick = undefined
+}) => (
+  <StyledSolidButton
+    type={type}
+    className={`btn btn-${theme}`}
+    onClick={onClick}
+  >
+    {children}
+  </StyledSolidButton>
+)
+
+const StyledOutlineButton = styled.button`
+  margin: 50px 0;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.75rem;
+  border-width: 2px;
+`
+
+export const OutlineButton = ({ children }) => (
+  <StyledOutlineButton type="button" className="btn btn-outline-light">
+    {children}
+  </StyledOutlineButton>
+)