created feature-box component and section

package-lock.json

@@ -10,6 +10,7 @@
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
+        "font-awesome": "^4.7.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
@@ -8499,6 +8500,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -28052,6 +28061,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.0.tgz",
       "integrity": "sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

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 React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import reportWebVitals from "./reportWebVitals";
-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);
+  }
+}