feat: add divlo.fr

components/Interests/InterestParagraph.tsx

@@ -0,0 +1,20 @@
+import htmlParser from 'html-react-parser'
+
+export interface InterestParagraphProps {
+  title: string
+  description: string
+}
+
+export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
+  const { title, description } = props
+
+  return (
+    <>
+      <p className='text-center'>
+        <strong className='important'>{title}</strong>
+        <br />
+        <span className='paragraph-color'>{htmlParser(description)}</span>
+      </p>
+    </>
+  )
+}

components/Interests/InterestsList/InterestItem.tsx

@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { Tooltip } from 'components/design/Tooltip'
+
+interface InterestItemProps {
+  title: string
+  fontAwesomeIcon: IconDefinition
+}
+
+export const InterestItem: React.FC<InterestItemProps> = props => {
+  const { fontAwesomeIcon, title } = props
+
+  return (
+    <>
+      <li className='interest-item'>
+        <Tooltip title={title}>
+          <FontAwesomeIcon
+            className='color-primary'
+            style={{
+              cursor: 'pointer',
+              height: '100%',
+              width: '100%',
+              display: 'block'
+            }}
+            icon={fontAwesomeIcon}
+          />
+        </Tooltip>
+      </li>
+
+      <style jsx>
+        {`
+          .interest-item {
+            margin: 7px 5px;
+            width: 34px;
+            height: 34px;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Interests/InterestsList/index.tsx

@@ -0,0 +1,45 @@
+import { faCode, faMicrochip } from '@fortawesome/free-solid-svg-icons'
+import { faGit } from '@fortawesome/free-brands-svg-icons'
+
+import { InterestItem } from './InterestItem'
+
+export const InterestsList: React.FC = () => {
+  return (
+    <>
+      <div className='container-list'>
+        <ul className='interests-list'>
+          <InterestItem
+            title='Developer Full Stack Junior'
+            fontAwesomeIcon={faCode}
+          />
+          <InterestItem
+            title='Passionate about High-Tech'
+            fontAwesomeIcon={faMicrochip}
+          />
+          <InterestItem
+            title='Open-Source enthusiast'
+            fontAwesomeIcon={faGit}
+          />
+        </ul>
+      </div>
+
+      <style jsx>
+        {`
+          .container-list {
+            display: flex;
+            justify-content: center;
+            margin: 15px 0 15px 0;
+          }
+          .interests-list {
+            display: flex;
+            justify-content: space-around;
+            padding: 0;
+            margin: 0;
+            width: 60%;
+            list-style: none;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Interests/index.tsx

@@ -0,0 +1,23 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { InterestParagraph, InterestParagraphProps } from './InterestParagraph'
+import { InterestsList } from './InterestsList'
+
+export const Interests: React.FC = () => {
+  const { t } = useTranslation()
+
+  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
+    returnObjects: true
+  })
+
+  return (
+    <>
+      <div className='col-24'>
+        {paragraphs.map((paragraph, index) => {
+          return <InterestParagraph key={index} {...paragraph} />
+        })}
+        <InterestsList />
+      </div>
+    </>
+  )
+}