feat: add divlo.fr

components/Skills/SkillsSection.tsx

@@ -0,0 +1,44 @@
+import { ShadowContainer } from 'components/design/ShadowContainer'
+
+export interface SkillsSectionProps {
+  title: string
+  children: React.ReactNode
+}
+
+export const SkillsSection: React.FC<SkillsSectionProps> = props => {
+  const { title, children } = props
+
+  return (
+    <>
+      <ShadowContainer>
+        <div className='container-fluid'>
+          <div className='row row-padding'>
+            <div className='col-24'>
+              <div className='skills-header'>
+                <h3 className='important'>{title}</h3>
+              </div>
+              <div className='skills-body'>{children}</div>
+            </div>
+          </div>
+        </div>
+      </ShadowContainer>
+
+      <style jsx>{`
+        .skills-header {
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          margin-bottom: 15px;
+        }
+        .skills-header > h3 {
+          margin-bottom: 15px;
+        }
+        .skills-body {
+          display: flex;
+          justify-content: space-around;
+          flex-flow: row wrap;
+          padding-top: 1.5rem;
+        }
+      `}
+      </style>
+    </>
+  )
+}