diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -4,11 +4,18 @@
 
 import { imageAssetMetaData, assetMetaData } from './asset-meta-data.js';
 import CompetitorComparison from './competitor-comparison.react.js';
+import DifferentiationInfo from './differentiation-info.react.js';
 import Hero from './hero.react.js';
 import InfoBlock from './info-block.react.js';
 import RequestAccess from './request-access.react.js';
 import usePreloadImageAssets from './use-pre-load-image-assets.react.js';
 
+const DISABLE_DIFFERENTIATION_INFO = false;
+
+const differentiationInfo = DISABLE_DIFFERENTIATION_INFO ? null : (
+  <DifferentiationInfo />
+);
+
 function AppLanding(): React.Node {
   usePreloadImageAssets(imageAssetMetaData);
   const [hero] = imageAssetMetaData;
@@ -17,6 +24,7 @@
   return (
     <main>
       <Hero {...hero} />
+      {differentiationInfo}
       <CompetitorComparison />
       <InfoBlock {...keyserver} />
       <InfoBlock {...team} />
diff --git a/landing/differentiation-info.css b/landing/differentiation-info.css
new file mode 100644
--- /dev/null
+++ b/landing/differentiation-info.css
@@ -0,0 +1,44 @@
+.sectionContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 16px;
+}
+
+.headerText {
+  color: var(--white-80);
+  text-align: center;
+  margin-bottom: 72px;
+}
+
+.cardsContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+}
+
+.cardContainer {
+  max-width: 432px;
+  background-color: var(--comparison-cards);
+  padding: 32px;
+  border-radius: 16px;
+  transition: background-color 150ms;
+}
+
+.cardContainer:hover {
+  background-color: var(--comparison-cards-hovered);
+}
+
+/* 2*16(padding) + 3*432(cards) + 2*40(gap) */
+@media screen and (max-width: 1408px) {
+  .cardsContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 2*16(padding) + 2*432(cards) + 40(gap) */
+@media screen and (max-width: 936px) {
+  .cardsContainer {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
diff --git a/landing/differentiation-info.react.js b/landing/differentiation-info.react.js
new file mode 100644
--- /dev/null
+++ b/landing/differentiation-info.react.js
@@ -0,0 +1,62 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import {
+  competitors,
+  competitorData,
+  type FeatureComparison,
+} from './competitor-data.js';
+import CompetitorFeatureCard from './competitor-feature-card.react.js';
+import css from './differentiation-info.css';
+import FeatureModal from './feature-modal.react.js';
+import typography from './typography.css';
+
+function DifferentiationInfo(): React.Node {
+  const { pushModal } = useModalContext();
+
+  const generalCompetitorData = competitorData[competitors.GENERAL];
+
+  const onFeatureCardClick = React.useCallback(
+    (feature: FeatureComparison) => {
+      pushModal(
+        <FeatureModal competitor={generalCompetitorData} feature={feature} />,
+      );
+    },
+    [pushModal, generalCompetitorData],
+  );
+
+  const featureCards = React.useMemo(
+    () =>
+      generalCompetitorData.featureComparison.map(feature => (
+        <CompetitorFeatureCard
+          key={`${generalCompetitorData.id}_${feature.title}`}
+          competitorID={generalCompetitorData.id}
+          title={feature.title}
+          comingSoon={feature.comingSoon}
+          competitorDescription={feature.competitorDescriptionShort}
+          commDescription={feature.commDescriptionShort}
+          onClick={() => onFeatureCardClick(feature)}
+        />
+      )),
+    [
+      generalCompetitorData.featureComparison,
+      generalCompetitorData.id,
+      onFeatureCardClick,
+    ],
+  );
+
+  const headerClassName = classNames([typography.heading1, css.headerText]);
+
+  return (
+    <section className={css.sectionContainer}>
+      <h1 className={headerClassName}>Learn about Comm</h1>
+      <div className={css.cardsContainer}>{featureCards}</div>
+    </section>
+  );
+}
+
+export default DifferentiationInfo;