second section

src/About.css

@@ -0,0 +1,64 @@
+.about {
+    min-height: 436px;
+}
+.about__wrapper {
+        padding: 101px 0 97px 0;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;     
+}
+.about__item {
+        width: 360px;
+        min-height: 67px;
+        margin: 19px 21px 97px 17px;
+        font-family: Lato;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.13;
+        letter-spacing: 0.8px;
+        text-align: center;
+        color: #000;
+}
+.about__item  h3 {
+            font-family: Lato;
+            font-size: 18px;
+            font-weight: bold;
+            line-height: 1.67;
+            letter-spacing: 0.9px;
+            color: #000;
+            text-transform: uppercase;
+}
+.about__item  span {
+            font-family: Lato;
+            font-size: 16px;
+            font-weight: 300;
+            line-height: 1.33;
+            letter-spacing: 0.8px;
+            text-align: left;
+            color:#999999; 
+}   
+
+.about__img {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 107px;
+        height: 107px;
+        margin: 0 auto;
+        border:2px solid black ;
+        border-radius: 100%;
+        margin-bottom: 20px;
+}
+.about__divider {
+        width: 88px;
+        height: 1px;
+        margin: 0 auto;
+        background-color:#f57365;
+}
+.about__divider_app {
+            margin: 0;
+            margin-bottom: 19px;
+}
+.about__divider_food {
+            margin-bottom: 40px;
+}

src/About.js

@@ -0,0 +1,40 @@
+import './About.css';
+
+
+
+const Aboutitem = ({textHeader = 'Title', textDescription = "description", imgLink = '#'}) => {
+    return  <div class="about__item">
+                <div class="about__img"><img width="60"
+                    height="60" src={imgLink} alt="donat"/></div>
+                    <div class="about__divider"></div>
+                <h3>{textHeader}</h3>
+                <span>{textDescription}</span>
+            </div>
+}
+
+
+
+const About = () => {
+    return <section class="about">
+            <div class="container">
+                <div class="about__wrapper">
+                    
+                   <Aboutitem textHeader = 'GET INSPIRED' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
+                        Pellentesque vel enim a elit viverra elementuma.
+                        Aliquam erat volutpat.' imgLink ='icons/donat.png'/>
+
+                    <Aboutitem textHeader = 'GET REWARDED' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
+                            Pellentesque vel enim a elit viverra elementuma.
+                             Aliquam erat volutpat.' imgLink ='icons/money.png'/>
+
+                    <Aboutitem textHeader = 'GET SOCIAL' textDescription = 'Lorem ipsum dolor sit amet, consectetur adipisc 
+                            Pellentesque vel enim a elit viverra elementuma.
+                             Aliquam erat volutpat.' imgLink ='icons/kok.png'/>
+
+                </div>
+            </div>
+        </section>
+}
+
+
+export default About;

src/App.js

@@ -1,6 +1,7 @@
 //import React from 'react'; or 
 import {Component, StrictMode} from 'react';  //  destruct sintax
 import './App.css';
+import About from './About';
 
 //using another sintax class
 
@@ -60,8 +61,9 @@ function App() {
       <div>
           <StrictMode>
               <Header/>
+              <About/>
           </StrictMode>
       </div>
     );
 }
-export default App;
+export default App;