- implement i18n

- translation dynamic for sections
- added articles for SEO

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,6 @@
 import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
+import { useTranslation } from 'react-i18next';
 import sections from '../../../data/leftSections';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
@@ -48,18 +49,24 @@ const getComponent = (id) => {
 };
 
 const LeftSidebar = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="flex">
       <LeftNavbar />
 
       <div id="LeftSidebar" className={styles.container}>
-        {sections.map(({ id, name, event }) => {
+        {sections.map(({ id, event }) => {
           const Component = getComponent(id);
 
           return (
             <Fragment key={id}>
               <Element name={id}>
-                <Component id={id} name={name} event={event} />
+                <Component
+                  id={id}
+                  name={t(`builder.sections.${id}`)}
+                  event={event}
+                />
               </Element>
               <hr />
             </Fragment>