nodejs · benhalverson · May 10, 2020 · May 8, 2020 · May 8, 2020 · May 8, 2020
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,4 @@ coverage
 .vscode
 .history
 yarn.lock
+.idea/
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/images/feature-img-1.png b/src/images/feature-img-1.png
diff --git a/src/images/feature-img-2.png b/src/images/feature-img-2.png
diff --git a/src/images/feature-img-3.png b/src/images/feature-img-3.png
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -19,6 +19,35 @@ import logoImg4 from '../images/logos/netflix-logo.svg';
 import logoImg5 from '../images/logos/paypal-logo.svg';
 import InstallTabs from '../components/installTabs';
 
+import featureImg1 from '../images/feature-img-1.png';
+import featureImg2 from '../images/feature-img-2.png';
+import featureImg3 from '../images/feature-img-3.png';
+
+const nodeFeatureHeader1 = 'JavaScript';
+const nodeFeatureHeader2 = 'Open Source';
+const nodeFeatureHeader3 = 'Everywhere';
+
+const nodeFeature1 =
+  'Node.js provides support for the JavaScript programming language ';
+const nodeFeature2 =
+  'Node.js is open source and actively maintained by contributors all over the world ';
+const nodeFeature3 =
+  'Node.js has been adapted to work in a wide variety of places ';
+
+const NodeFeature = ({
+  img,
+  featureText,
+  featureHeader,
+}: Props): JSX.Element => {
+  return (
+    <div className="node-features__feature">
+      <img src={img} alt="node feature" />
+      <h4>{featureHeader}</h4>
+      <p>{featureText}</p>
+    </div>
+  );
+};
+
 export default function Index(): JSX.Element {
   const title = 'Run JavaScript Everywhere.';
   const subTitle =
@@ -40,6 +69,24 @@ export default function Index(): JSX.Element {
           <img className="dots" src={dotsIllustration} alt="" />
         </section>
 
+        <section className="node-features">
+          <NodeFeature
+            img={featureImg1}
+            featureText={nodeFeature1}
+            featureHeader={nodeFeatureHeader1}
+          />
+          <NodeFeature
+            img={featureImg2}
+            featureText={nodeFeature2}
+            featureHeader={nodeFeatureHeader2}
+          />
+          <NodeFeature
+            img={featureImg3}
+            featureText={nodeFeature3}
+            featureHeader={nodeFeatureHeader3}
+          />
+        </section>
+
         <section className="trusted-by">
           <h4 className="t-headline">
             Trusted by development teams around the world
@@ -61,3 +108,9 @@ export default function Index(): JSX.Element {
     </Layout>
   );
 }
+
+interface Props {
+  img: string;
+  featureText: string;
+  featureHeader: string;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -76,6 +76,20 @@
   }
 }
 
+.node-features {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 5em;
+}
+
+.node-features__feature {
+  max-width: 248px;
+  margin: 0 2em;
+  text-align: center;
+}
+
 .trusted-by {
   margin-bottom: var(--section-margin-bottom);
   text-align: center;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,3 +14,4 @@ coverage @@
     .vscode
     .history
     yarn.lock
+    .idea/