Created HOC wrapper for sections

Signed-off-by: DeviousLab <deviouslab@gmail.com>

frontend/src/components/Navigation.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Navigation = ({ active }) => {
+  return (
+    <div className="app__navigation">
+      {['home', 'about', 'skills', 'work', 'testimonials', 'contact'].map((item, index) => (
+          <a 
+          href={`#${item}`}
+          key={item+index} 
+          className="app__navigation-dot"
+          style={active === item ? { backgroundColor: '#313bac' } : {}}
+          />
+      ))}
+    </div>
+  )
+}
+
+export default Navigation

frontend/src/components/SocialMedia.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { BsTwitter, BsInstagram } from 'react-icons/bs'
+import { FaFacebookF } from 'react-icons/fa'
+
+const SocialMedia = () => {
+  return (
+    <div className="app__social">
+      <div>
+        <BsTwitter />
+      </div>
+      <div>
+        <BsInstagram />
+      </div>
+      <div>
+        <FaFacebookF />
+      </div>
+    </div>
+  )
+}
+
+export default SocialMedia

frontend/src/components/index.js

@@ -0,0 +1,3 @@
+export { default as Navigation } from './Navigation';
+export { default as SocialMedia } from './SocialMedia';
+export { default as Navbar } from '../components/Navbar/Navbar';

frontend/src/containers/About/About.jsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 
 import './About.scss'
 import { urlFor, client } from '../../client'
+import { AppWrap } from '../../wrapper'
 
 const About = () => {
   const [talents, setTalents] = useState([])
@@ -40,4 +41,4 @@ const About = () => {
   )
 }
 
-export default About
+export default AppWrap(About, 'about')

frontend/src/containers/Header/Header.jsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 
 import './Header.scss'
 import { images } from '../../constants'
+import { AppWrap } from '../../wrapper'
 
 const scaleVariance = {
   whileInView: {
@@ -67,4 +68,4 @@ const Header = () => {
 }
 
 
-export default Header
+export default AppWrap(Header, 'home')

frontend/src/wrapper/AppWrap.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Navigation, SocialMedia } from '../components'
+
+const AppWrap = (Component, idName, classNames) => function HOC() {
+  return (
+    <div id={idName} className={`app__container ${classNames}`}>
+      <SocialMedia />
+      <div className="app__wrapper app__flex">
+        <Component />
+
+        <div className="copyright">
+          <p className="p-text">&copy;2022 MICAEL</p>
+          <p className="p-text">All rights reserved</p>
+        </div>
+      </div>
+      <Navigation active={idName} />
+    </div>
+  )
+}
+
+export default AppWrap

frontend/src/wrapper/index.js

@@ -0,0 +1 @@
+export { default as AppWrap } from './AppWrap';