Page MenuHomePhabricator
Files F3372028

D8034.id27300.diff
No OneTemporary
Actions

D8034.id27300.diff
View Options

diff --git a/landing/competitor-comparison.css b/landing/competitor-comparison.css
new file mode 100644
--- /dev/null
+++ b/landing/competitor-comparison.css
@@ -0,0 +1,55 @@
+.competitorComparisonSection {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 48px 16px;
+}
+
+.headerText {
+ color: var(--white-80);
+ text-align: center;
+ margin-bottom: 72px;
+}
+
+.competitorsContainer {
+ overflow: hidden;
+ display: flex;
+ justify-content: space-between;
+ column-gap: 16px;
+ padding: 16px 32px;
+ background-color: var(--comparison-cards);
+ border-radius: 16px;
+ width: 560px;
+ max-width: 90vw;
+}
+
+.logoContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+}
+
+.competitorLogo {
+ opacity: 0.25;
+}
+
+.competitorLogo:hover {
+ opacity: 1;
+ cursor: pointer;
+}
+
+.activeCompetitorLogo {
+ opacity: 1;
+ transform: translateY(-2px);
+}
+
+.bump {
+ width: 80%;
+ height: 4px;
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
+ background-color: var(--violet-dark-100);
+ position: absolute;
+ bottom: -16px;
+}
diff --git a/landing/competitor-comparison.react.js b/landing/competitor-comparison.react.js
new file mode 100644
--- /dev/null
+++ b/landing/competitor-comparison.react.js
@@ -0,0 +1,59 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './competitor-comparison.css';
+import CompetitorLogo from './competitor-logo.react.js';
+import typography from './typography.css';
+
+const competitors = [
+ 'signal',
+ 'keybase',
+ 'telegram',
+ 'discord',
+ 'slack',
+ 'matrix',
+];
+
+function CompetitorComparison(): React.Node {
+ const [selectedCompetitorID, setSelectedCompetitorID] =
+ React.useState<string>('signal');
+
+ const competitorSelector = React.useMemo(
+ () =>
+ competitors.map(competitor => {
+ const competitorLogoClassName = classNames({
+ [css.competitorLogo]: true,
+ [css.activeCompetitorLogo]: selectedCompetitorID === competitor,
+ });
+ const bumpClassName = classNames({
+ [css.bump]: selectedCompetitorID === competitor,
+ });
+
+ return (
+ <div className={css.logoContainer} key={competitor}>
+ <div
+ className={competitorLogoClassName}
+ onClick={() => setSelectedCompetitorID(competitor)}
+ >
+ <CompetitorLogo name={competitor} />
+ </div>
+ <div className={bumpClassName} />
+ </div>
+ );
+ }),
+ [selectedCompetitorID],
+ );
+
+ const headerClassName = classNames([typography.heading1, css.headerText]);
+
+ return (
+ <section className={css.competitorComparisonSection}>
+ <h1 className={headerClassName}>See how Comm is different</h1>
+ <div className={css.competitorsContainer}>{competitorSelector}</div>
+ </section>
+ );
+}
+
+export default CompetitorComparison;

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 5:28 AM (20 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2588833
Default Alt Text
D8034.id27300.diff (2 KB)

Event Timeline