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

src/styledComponents/index.tsx

@@ -0,0 +1,124 @@
+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;
+  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<ArtProps>((props) => ({
+  alt: props.info || '',
+  title: props.info || ''
+}))`
+  max-width: 100%;
+  height: auto;
+`
+
+const ArrowHolder = styled.div<{ bgColor?: string }>`
+  display: inline-block;
+  border-radius: 50px;
+  padding: 15px 17px;
+  color: white;
+  background-color: ${(props) =>
+    props.bgColor === 'red' ? '#ed1c1c' : '#90c445'};
+`
+const RightArrow: React.FC<{ bgColor?: string }> = ({ 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: React.FC<ReasonProps> = ({ 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 }: { Icon: IconType }) => {
+  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: React.FC<FeatureProps> = ({
+  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;
+  }
+`