Page MenuHomePhabricator
Files F3697580

D12631.id41901.diff
No OneTemporary
Actions

D12631.id41901.diff
View Options

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 = true;
+
+const differentiationInfo = DISABLE_DIFFERENTIATION_INFO ? null : (
+ <DifferentiationInfo />
+);
+
function AppLanding(): React.Node {
usePreloadImageAssets(imageAssetMetaData);
const [hero] = imageAssetMetaData;
@@ -18,6 +25,7 @@
<main>
<Hero {...hero} />
<CompetitorComparison />
+ {differentiationInfo}
<InfoBlock {...keyserver} />
<InfoBlock {...team} />
<RequestAccess />
diff --git a/landing/competitor-comparison.css b/landing/competitor-comparison.css
--- a/landing/competitor-comparison.css
+++ b/landing/competitor-comparison.css
@@ -21,6 +21,7 @@
border-radius: 16px;
width: 560px;
max-width: 90vw;
+ margin-bottom: 48px;
}
.logoContainer {
@@ -59,7 +60,6 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
- margin-top: 48px;
}
/* 2*16(padding) + 3*432(cards) + 2*40(gap) */
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 css from './competitor-comparison.css';
+import {
+ competitors,
+ competitorData,
+ type FeatureComparison,
+} from './competitor-data.js';
+import CompetitorFeatureCard from './competitor-feature-card.react.js';
+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.competitorComparisonSection}>
+ <h1 className={headerClassName}>What makes Comm unique</h1>
+ <div className={css.featureCardsContainer}>{featureCards}</div>
+ </section>
+ );
+}
+
+export default DifferentiationInfo;

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 8, 2:03 PM (3 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2817852
Default Alt Text
D12631.id41901.diff (3 KB)

Event Timeline