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

src/components/shared/container.tsx

@@ -1,10 +1,7 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
-import { PageProps } from 'gatsby'
 
-type DataProps = {
-  children?: React.ReactNode
-}
+import type { ContainerProps } from '../../types'
 
 const StyledDiv = styled.div`
   @media (min-width: 576px) {
@@ -13,6 +10,6 @@ const StyledDiv = styled.div`
   }
 `
 
-export const Container: React.FC<PageProps<DataProps>> = ({ children }) => {
+export const Container: React.FC<ContainerProps> = ({ children }) => {
   return <StyledDiv className="container">{children}</StyledDiv>
 }

src/components/shared/scheduleDemo.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 import { FaEnvelope } from 'react-icons/fa'
 
-export const StyledLink = styled((props) => <Link {...props} />)`
+export const StyledLink = styled(Link)`
   color: rgb(255, 255, 255);
   background-color: rgb(144, 196, 69);
   border-radius: 0px;

src/components/shared/section.tsx

@@ -1,25 +1,19 @@
-import React from 'react'
+import * as 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
-}
+import type { SectionProps } from '../../types'
 
-const StyledSection = styled.div`
+const StyledSection = styled.div<{ color?: string; bgColor?: string }>`
   position: relative;
   padding: 50px 0;
   color: ${(props) => props.color || 'white'};
   background-color: ${(props) => props.bgColor || '#314351'};
 `
 
-export const Section: React.FC<PageProps<DataProps>> = ({
+export const Section: React.FC<SectionProps> = ({
   children,
   bgColor,
   color,

src/components/shared/styledComponents.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 
+import type { SolidButtonProps, OutlineButtonProps } from '../../types'
+
 const BottomArrow = styled.div`
   width: 50px;
   height: 50px;
@@ -9,9 +11,6 @@ const BottomArrow = styled.div`
   background: inherit;
   transform: translateX(-50%) rotate(45deg);
   left: 50%;
-  // right: 0;
-  // margin-left: auto;
-  // margin-right: auto;
   z-index: 10;
 `
 const BottomArrowWrapper = styled.div`
@@ -29,16 +28,17 @@ export const BottomSectionArrow = () => (
   </BottomArrowWrapper>
 )
 
-export const SectionHeading = styled.h2`
+export const SectionHeading = styled.h2<{ center?: string }>`
   text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
   letter-spacing: 1px;
   font-weight: 400;
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   text-transform: uppercase;
 `
 
-export const SectionDesc = styled.p`
+export const SectionDesc = styled.p<{ center?: string; opacity?: string }>`
   text-align: ${(props) => (props.center === 'no' ? 'left' : 'center')};
   opacity: ${(props) => props.opacity ?? 0.6};
   a {
@@ -59,12 +59,12 @@ const StyledSolidButton = styled.button`
   }
 `
 
-export const SolidButton = ({
+export const SolidButton: React.FC<SolidButtonProps> = ({
   children,
   theme = 'light',
   type = 'submit',
   disabled = false,
-  onClick = undefined
+  onClick
 }) => (
   <StyledSolidButton
     type={type}
@@ -83,7 +83,7 @@ const StyledOutlineButton = styled.button`
   border-width: 2px;
 `
 
-export const OutlineButton = ({ children }) => (
+export const OutlineButton: React.FC<OutlineButtonProps> = ({ children }) => (
   <StyledOutlineButton type="button" className="btn btn-outline-light">
     {children}
   </StyledOutlineButton>