feat: feed feature, typescript, remove google, fix errs & warns

src/styledComponents/blog.tsx

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

src/styledComponents/contact.js

@@ -1,17 +0,0 @@
-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/contact.tsx

@@ -0,0 +1,20 @@
+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<{ info?: string }>(
+  (props) => ({
+    alt: props.info || '',
+    title: props.info || ''
+  })
+)`
+  max-width: 100%;
+`

src/styledComponents/faq.tsx

@@ -1,15 +1,18 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
 import { FcFaq } from 'react-icons/fc'
 
+import type { FaqProps } from '../types'
+
 const StyledFaq = styled.div`
   margin-bottom: 20px;
 `
 
 const StyledQuestion = styled.h5`
   color: #222;
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   text-transform: uppercase;
 `
@@ -33,7 +36,7 @@ const FaqDetails = styled.div`
   margin-bottom: 20px;
 `
 
-export const FAQ = ({ question, answer }) => (
+export const FAQ: React.FC<FaqProps> = ({ question, answer }) => (
   <StyledFaq>
     <IconHolderStyled>
       <FcFaq size={40} />

src/styledComponents/index.tsx

@@ -1,6 +1,9 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import { ImArrowRight } from 'react-icons/im'
+import type { IconType } from 'react-icons'
+
+import type { ArtProps, ReasonProps, FeatureProps } from '../types'
 
 export const CenteredText = styled.p`
   text-align: center;
@@ -9,20 +12,19 @@ export const CenteredText = styled.p`
   margin: 0 auto;
   font-size: 1.2rem;
   line-height: 1;
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
 `
-export const Art = styled.img.attrs((props) => ({
+export const Art = styled.img.attrs<ArtProps>((props) => ({
   alt: props.info || '',
   title: props.info || ''
 }))`
   max-width: 100%;
-  display: block;
-  margin: 0 auto;
-  padding: 20px;
+  height: auto;
 `
 
-const ArrowHolder = styled.div`
+const ArrowHolder = styled.div<{ bgColor?: string }>`
   display: inline-block;
   border-radius: 50px;
   padding: 15px 17px;
@@ -30,7 +32,7 @@ const ArrowHolder = styled.div`
   background-color: ${(props) =>
     props.bgColor === 'red' ? '#ed1c1c' : '#90c445'};
 `
-const RightArrow = ({ bgColor = '' }) => (
+const RightArrow: React.FC<{ bgColor?: string }> = ({ bgColor = '' }) => (
   <ArrowHolder bgColor={bgColor}>
     <ImArrowRight size={24} />
   </ArrowHolder>
@@ -46,7 +48,7 @@ const ReasonDesc = styled.p`
   text-transform: uppercase;
 `
 
-export const Reason = ({ text, bgColor = '' }) => (
+export const Reason: React.FC<ReasonProps> = ({ text, bgColor = '' }) => (
   <>
     <RightArrow bgColor={bgColor} />
     <ReasonDesc>{text}</ReasonDesc>
@@ -62,7 +64,7 @@ const IconHolderStyled = styled.div`
   vertical-align: top;
 `
 
-const IconHolder = ({ Icon }) => {
+const IconHolder = ({ Icon }: { Icon: IconType }) => {
   return (
     <IconHolderStyled>
       <Icon size={24} />
@@ -77,7 +79,8 @@ const FeatureDetails = styled.div`
   margin-bottom: 20px;
 `
 const FeatureTitle = styled.h5`
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   text-transform: uppercase;
 `
@@ -86,7 +89,12 @@ const FeatureDesc = styled.p`
   font-size: 0.9rem;
 `
 
-export const Feature = ({ title, desc, Icon, className }) => (
+export const Feature: React.FC<FeatureProps> = ({
+  title,
+  desc,
+  Icon,
+  className
+}) => (
   <div className={className ?? 'col-md-4'}>
     <IconHolder Icon={Icon} />
     <FeatureDetails>