3ZMWZYVM98N

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.js

@@ -4,13 +4,13 @@ import imageSrc from './img/1.png';
 import imageWork1 from './img/2.jpg';
 import imageWork2 from './img/3.jpg';
 import imageWork3 from './img/4.jpg';
-import socialLink1 from './img/fcebook.svg';
-import socialLink2 from './img/instaram.svg';
+import socialLink1 from './img/facebook.svg';
+import socialLink2 from './img/instagram.svg';
 import socialLink3 from './img/twitter.svg';
 import socialLink4 from './img/linledin.svg';
 
 
-//header
+//Header
 const Header = (props) => {
     return (
         <header class='container'>
@@ -34,7 +34,7 @@ const headerLink = [
     {id: 3, content: 'Contact', url: '#'}
 ];
 
-//about
+//About
 const About = ({title='title', description='description', link='#', linkText='link text', img}) =>
     <div className='about'>
     <div className="container">
@@ -51,7 +51,7 @@ const About = ({title='title', description='description', link='#', linkText='li
     </div>
 </div>
 
-//posts
+//Posts
 const TitleBlock = ({name='title', url="#", urlText}) =>
     <div className="container">
         <div className='posts-title'>
@@ -86,9 +86,9 @@ const posts = [
     {id: 2, title: 'Creating pixel perfect icons in Figma', urlTitle: '#', date: '20 Jul 2020', programs: 'Figma, Icon Design', urlPrograms:'#', text: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.'}
 ];
 
-//works
+//Works
 const WorkPost = ({img, urlPost='#', title='title', date='data', program='', text='text'}) =>
-        <div className="container">
+    <div className="container">
             <div className="posts-works__body">
                 <div className="posts-works__item works-block">
                     <a href={urlPost} className="works-block__img ibg">
@@ -104,9 +104,9 @@ const WorkPost = ({img, urlPost='#', title='title', date='data', program='', tex
                     </div>
                 </div>
             </div>
-        </div>
+    </div>
 
-//footer
+//Footer
 const Footer = (footerLinks) => {
     return (
         <footer className="footer">
@@ -124,10 +124,10 @@ const Footer = (footerLinks) => {
     );
 }
 const footerLinks = [
-    {id: 1, url: '#', img: socialLink1},
-    {id: 2, url: '#', img: socialLink2},
-    {id: 3, url: '#', img: socialLink3},
-    {id: 4, url: '#', img: socialLink4}
+    {id: 1, url: 'https://www.facebook.com/', img: socialLink1},
+    {id: 2, url: 'https://www.instagram.com/', img: socialLink2},
+    {id: 3, url: 'https://www.twitter.com/', img: socialLink3},
+    {id: 4, url: 'https://www.linkedin.com/', img: socialLink4}
 ];
 
 function App() {