created feature-box component and section

src/App.js

@@ -1,12 +1,14 @@
 import "./App.scss";
 import About from "./commons/about-section/about";
-import Header from "./commons/header/header";
+import Feature from "./commons/feature-section/feature";
+import Header from "./commons/header/header.jsx";
 
 function App() {
   return (
     <div>
       <Header />
       <About />
+      <Feature />
     </div>
   );
 }

src/App.scss

@@ -9,8 +9,9 @@
 
 @import "./sass/components/button";
 @import "./sass/components/composition";
-
+@import "./sass/components/feature-box";
 @import "./sass/layout/header";
+
 @import "./sass/layout/grid";
 
 @import "./sass/pages/home";

src/commons/feature-section/feature.jsx

@@ -0,0 +1,58 @@
+function Feature() {
+  return (
+    <section className="section-features">
+      <div className="row">
+        <div className="col-1-of-4">
+          <div className="feature-box">
+            <i className="feature-box__icon fa fa-globe" />
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Explore the world
+            </h3>
+            <p className="feature-box__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+              iure ipsum facere quia quis dolorum laboriosam omnis esse.
+            </p>
+          </div>
+        </div>
+        <div className="col-1-of-4">
+          <div className="feature-box">
+            <i className="feature-box__icon fa fa-compass" />
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Meet nature
+            </h3>
+            <p className="feature-box__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+              iure ipsum facere quia quis dolorum laboriosam omnis esse.
+            </p>
+          </div>
+        </div>
+        <div className="col-1-of-4">
+          <div className="feature-box">
+            <i className="feature-box__icon fa fa-map" />
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Find your way
+            </h3>
+            <p className="feature-box__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+              iure ipsum facere quia quis dolorum laboriosam omnis esse.
+            </p>
+          </div>
+        </div>
+        <div className="col-1-of-4">
+          <div className="feature-box">
+            <i className="feature-box__icon fa fa-heart" />
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Live a healthier life
+            </h3>
+            <p className="feature-box__text">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
+              iure ipsum facere quia quis dolorum laboriosam omnis esse.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Feature;

src/index.js

@@ -1,14 +1,15 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
+import "../node_modules/font-awesome/css/font-awesome.min.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

src/sass/components/_feature-box.scss

@@ -0,0 +1,26 @@
+.feature-box {
+  background-color: rgba($color-white, 0.8);
+  font-size: 1.5rem;
+  padding: 2.5rem;
+  text-align: center;
+  border-radius: 0.3rem;
+  box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15);
+  transition: transform 0.3s;
+
+  &__icon {
+    font-size: 6rem;
+    margin-bottom: 0.5rem;
+    display: inline-block;
+    background-image: linear-gradient(
+      to right,
+      $color-primary-light,
+      $color-primary-dark
+    );
+    background-clip: text;
+    color: transparent;
+  }
+
+  &:hover {
+    transform: translateY(-1.5rem) scale(1.03);
+  }
+}

src/sass/pages/_home.scss

@@ -3,3 +3,21 @@
   padding: 25rem 0;
   margin-top: -20vh;
 }
+
+.section-features {
+  padding: 20rem 0;
+  background-image: linear-gradient(
+      to right bottom,
+      rgba($color-primary-light, 0.8),
+      rgba($color-primary-dark, 0.8)
+    ),
+    url(../../commons/images/nat-4.jpg);
+  background-size: cover;
+  margin-top: -12rem;
+
+  transform: skewY(-7deg);
+
+  & > * {
+    transform: skewY(7deg);
+  }
+}