created and styled features 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",
@@ -8556,6 +8557,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",
@@ -28144,6 +28153,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
       "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
+    "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",

public/index.html

@@ -18,6 +18,7 @@
       href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i"
       rel="stylesheet"
     />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,3 +1,4 @@
+import "font-awesome/css/font-awesome.min.css";
 import "./sass/main.scss";
 import Sidebar from "./commons/sidebar";
 import Header from "./commons/header";

src/commons/features.jsx

@@ -1,3 +1,56 @@
 export default function Features() {
-  return <section className="features">Features</section>;
+  return (
+    <section className="features">
+      <div className="feature">
+        <i class="feature__icon fa fa-globe"></i>
+        <h4 className="heading-4 heading-4--dark">World's best luxury homes</h4>
+        <p className="feature__text">
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex
+          inventore, quidem tempora repellendus.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-trophy"></i>
+        <h4 className="heading-4 heading-4--dark">Only the best properties.</h4>
+        <p className="feature__text">
+          Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus
+          rerum sed a eligendi aut quia.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-map"></i>
+        <h4 className="heading-4 heading-4--dark">
+          All homes in top locations
+        </h4>
+        <p className="feature__text">
+          Tenetur distinctio necessitatibus pariatur voluptatibus quidem
+          consequatur harum.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-key"></i>
+        <h4 className="heading-4 heading-4--dark">New home in one week</h4>
+        <p className="feature__text">
+          Vero ipsum sapiente molestias accusamus rerum. Lorem, ipsum dolor sit
+          amet consectetur adipisicing elit.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-line-chart"></i>
+        <h4 className="heading-4 heading-4--dark">Top 1% realtors</h4>
+        <p className="feature__text">
+          Quidem consequatur harum, voluptatum mollitia quae. Tenetur distinctio
+          necessitatibus pariatur voluptatibus.
+        </p>
+      </div>
+      <div className="feature">
+        <i class="feature__icon fa fa-lock"></i>
+        <h4 className="heading-4 heading-4--dark">Secure payments on nexter</h4>
+        <p className="feature__text">
+          Pariatur voluptatibus quidem consequatur harum, voluptatum mollitia
+          quae.
+        </p>
+      </div>
+    </section>
+  );
 }

src/sass/_features.scss

@@ -1,4 +1,28 @@
 .features {
-  background-color: $color-grey-dark-2;
   grid-column: center-start / center-end;
+
+  margin: 15rem 0;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+  gap: 60px;
+  align-items: start;
+}
+
+.feature {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  row-gap: 1.5rem;
+  column-gap: 2.5rem;
+
+  &__icon {
+    color: $color-primary;
+    font-size: 4.5rem;
+    grid-row: 1 / span 2;
+    transform: translateY(-1rem);
+  }
+
+  &__text {
+    font-size: 1.7rem;
+  }
 }

src/sass/_typography.scss

@@ -0,0 +1,29 @@
+%heading {
+  font-family: $font-display;
+  font-weight: 400;
+}
+
+.heading-1 {
+  @extend %heading;
+}
+
+.heading-2 {
+  @extend %heading;
+}
+
+.heading-3 {
+  @extend %heading;
+}
+
+.heading-4 {
+  @extend %heading;
+  font-size: 1.9rem;
+
+  &--light {
+    color: $color-grey-light-1;
+  }
+
+  &--dark {
+    color: $color-grey-dark-1;
+  }
+}