Page MenuHomePhabricator
Files F3697250

D12631.id41854.diff
No OneTemporary
Actions

D12631.id41854.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;
@@ -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;

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 8, 1:56 PM (3 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2817899
Default Alt Text
D12631.id41854.diff (4 KB)

Event Timeline