init

src/styledComponents/about.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const Card = styled.a`
+  color: black;
+  text-decoration: none;
+  overflow: hidden;
+  margin-bottom: 20px;
+  min-height: 255px;
+`
+
+export const CardImg = styled.img`
+  margin: -50px 0;
+`
+
+export const CardBody = styled.div`
+  background: white;
+`
+
+export const FeaturedImg = styled.img`
+  display: block;
+  margin: 20px auto;
+`
+
+export const FeaturedDesc = styled.p`
+  color: rgb(244, 244, 244);
+  font-size: 0.8rem;
+  text-align: center;
+`

src/styledComponents/blog.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const StyledHeading = styled.h5`
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`

src/styledComponents/contact.css

@@ -0,0 +1,10 @@
+.contactFormStyles {
+  border-color: #e1e1e1;
+  background-color: #f8f8f8;
+  color: #919191;
+}
+
+.contactFormStyles:focus {
+  background-color: #f8f8f8;
+  box-shadow: none;
+}

src/styledComponents/contact.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+export const StyledHeading = styled.h3`
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+`
+
+export const StyledLabel = styled.label`
+  margin-bottom: 0;
+`
+
+export const ContactBackground = styled.img.attrs((props) => ({
+  alt: props.info || '',
+  title: props.info || ''
+}))`
+  max-width: 100%;
+`

src/styledComponents/faq.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { FcFaq } from 'react-icons/fc'
+
+const StyledFaq = styled.div`
+  margin-bottom: 20px;
+`
+
+const StyledQuestion = styled.h5`
+  color: #222;
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  text-transform: uppercase;
+`
+const StyledAnswer = styled.p`
+  color: #919191;
+`
+
+const IconHolderStyled = styled.div`
+  display: inline-block;
+  border: 1px solid #314351;
+  background-color: #314351;
+  border-radius: 50px;
+  padding: 15px 17px;
+  vertical-align: top;
+`
+
+const FaqDetails = styled.div`
+  display: inline-block;
+  width: calc(100% - 80px);
+  padding-left: 20px;
+  margin-bottom: 20px;
+`
+
+export const FAQ = ({ question, answer }) => (
+  <StyledFaq>
+    <IconHolderStyled>
+      <FcFaq size={40} />
+    </IconHolderStyled>
+    <FaqDetails>
+      <StyledQuestion>{question}</StyledQuestion>
+      <StyledAnswer>{answer}</StyledAnswer>
+    </FaqDetails>
+  </StyledFaq>
+)

src/styledComponents/index.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import styled from 'styled-components'
+import { ImArrowRight } from 'react-icons/im'
+
+export const CenteredText = styled.p`
+  text-align: center;
+  max-width: 300px;
+  display: block;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  line-height: 1;
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+`
+export const Art = styled.img.attrs((props) => ({
+  alt: props.info || '',
+  title: props.info || ''
+}))`
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+  padding: 20px;
+`
+
+const ArrowHolder = styled.div`
+  display: inline-block;
+  border-radius: 50px;
+  padding: 15px 17px;
+  color: white;
+  background-color: ${(props) =>
+    props.bgColor === 'red' ? '#ed1c1c' : '#90c445'};
+`
+const RightArrow = ({ bgColor = '' }) => (
+  <ArrowHolder bgColor={bgColor}>
+    <ImArrowRight size={24} />
+  </ArrowHolder>
+)
+const ReasonDesc = styled.p`
+  display: inline-block;
+  width: calc(100% - 60px);
+  vertical-align: top;
+  margin: 20px 0 0;
+  min-height: 60px;
+  line-height: 1;
+  padding-left: 20px;
+  text-transform: uppercase;
+`
+
+export const Reason = ({ text, bgColor = '' }) => (
+  <>
+    <RightArrow bgColor={bgColor} />
+    <ReasonDesc>{text}</ReasonDesc>
+  </>
+)
+
+const IconHolderStyled = styled.div`
+  display: inline-block;
+  border: 1px solid #314351;
+  color: #314351;
+  border-radius: 50px;
+  padding: 15px 17px;
+  vertical-align: top;
+`
+
+const IconHolder = ({ Icon }) => {
+  return (
+    <IconHolderStyled>
+      <Icon size={24} />
+    </IconHolderStyled>
+  )
+}
+
+const FeatureDetails = styled.div`
+  display: inline-block;
+  width: calc(100% - 60px);
+  padding-left: 20px;
+  margin-bottom: 20px;
+`
+const FeatureTitle = styled.h5`
+  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  text-transform: uppercase;
+`
+const FeatureDesc = styled.p`
+  opacity: 0.5;
+  font-size: 0.9rem;
+`
+
+export const Feature = ({ title, desc, Icon, className }) => (
+  <div className={className ?? 'col-md-4'}>
+    <IconHolder Icon={Icon} />
+    <FeatureDetails>
+      <FeatureTitle>{title}</FeatureTitle>
+      <FeatureDesc>{desc}</FeatureDesc>
+    </FeatureDetails>
+  </div>
+)
+
+export const ThumbnailWrapper = styled.div`
+  -webkit-box-flex: 0;
+  flex: 0 0 33.3333%;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  display: flex;
+  max-width: 33.3333%;
+  @media (min-width: 576px) {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  cursor: pointer;
+  &:hover {
+    opacity: 0.5;
+  }
+`