Page MenuHomePhabricator
Files F3738588

D7905.id26981.diff
No OneTemporary
Actions

D7905.id26981.diff
View Options

diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature-card.css
new file mode 100644
--- /dev/null
+++ b/landing/competitor-feature-card.css
@@ -0,0 +1,56 @@
+.container {
+ max-width: 432px;
+ background-color: var(--comparison-cards);
+ padding: 32px;
+ border-radius: 16px;
+}
+
+.container:hover {
+ cursor: pointer;
+ background-color: var(--comparison-cards-hovered);
+}
+
+.headingContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.headingText {
+ color: var(--white-100);
+}
+
+.comingSoonBadge {
+ background-color: #ebebeb14;
+ padding: 5px 10px;
+ border-radius: 16px;
+}
+
+.comingSoonText {
+ color: var(--white-100);
+ margin-left: 8px;
+}
+
+.comingSoonIcon {
+ color: var(--coming-soon-icon);
+}
+
+hr {
+ margin: 24px 0;
+ border-radius: 8px;
+ height: 1.5px;
+ background-color: var(--black-80);
+ border: none;
+}
+
+.descriptionText {
+ color: var(--white-80);
+ height: 80px;
+ margin-top: 8px;
+}
+
+.readMoreText {
+ color: var(--violet-dark-100);
+ margin-top: 16px;
+}
diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature-card.react.js
new file mode 100644
--- /dev/null
+++ b/landing/competitor-feature-card.react.js
@@ -0,0 +1,96 @@
+// @flow
+
+import { faWrench } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import CommLogo from './assets/comm-logo.react.js';
+import DiscordLogo from './assets/discord-logo.react.js';
+import KeybaseLogo from './assets/keybase-logo.react.js';
+import MatrixLogo from './assets/matrix-logo.react.js';
+import SignalLogo from './assets/signal-logo.react.js';
+import SlackLogo from './assets/slack-logo.react.js';
+import TelegramLogo from './assets/telegram-logo.react.js';
+import css from './competitor-feature-card.css';
+import typography from './typography.css';
+
+type Props = {
+ +competitorName: string,
+ +title: string,
+ +comingSoon: boolean,
+ +competitorDescription: string,
+ +commDescription: string,
+ +onClick: () => mixed,
+};
+
+function CompetitorFeatureCard(props: Props): React.Node {
+ const {
+ competitorName,
+ title,
+ comingSoon,
+ competitorDescription,
+ commDescription,
+ onClick,
+ } = props;
+
+ const headingClassName = classNames([typography.heading3, css.headingText]);
+ const comingSoonClassName = classNames([
+ typography.paragraph3,
+ css.comingSoonText,
+ ]);
+ const descriptionClassName = classNames([
+ typography.paragraph1,
+ css.descriptionText,
+ ]);
+ const readMoreClassName = classNames([
+ typography.paragraph2,
+ css.readMoreText,
+ ]);
+
+ let comingSoonBadge;
+ if (comingSoon) {
+ comingSoonBadge = (
+ <div className={css.comingSoonBadge}>
+ <FontAwesomeIcon
+ size="sm"
+ className={css.comingSoonIcon}
+ icon={faWrench}
+ />
+ <span className={comingSoonClassName}>Coming Soon</span>
+ </div>
+ );
+ }
+
+ let competitorLogo;
+ if (competitorName === 'Discord') {
+ competitorLogo = <DiscordLogo size={30} />;
+ } else if (competitorName === 'Keybase') {
+ competitorLogo = <KeybaseLogo size={30} />;
+ } else if (competitorName === 'Matrix') {
+ competitorLogo = <MatrixLogo size={30} />;
+ } else if (competitorName === 'Signal') {
+ competitorLogo = <SignalLogo size={30} />;
+ } else if (competitorName === 'Slack') {
+ competitorLogo = <SlackLogo size={30} />;
+ } else if (competitorName === 'Telegram') {
+ competitorLogo = <TelegramLogo size={30} />;
+ }
+
+ return (
+ <a className={css.container} onClick={onClick}>
+ <div className={css.headingContainer}>
+ <h1 className={headingClassName}>{title}</h1>
+ {comingSoonBadge}
+ </div>
+ {competitorLogo}
+ <p className={descriptionClassName}>{competitorDescription}</p>
+ <hr />
+ <CommLogo size={30} />
+ <p className={descriptionClassName}>{commDescription}</p>
+ <p className={readMoreClassName}>Read more</p>
+ </a>
+ );
+}
+
+export default CompetitorFeatureCard;
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -40,6 +40,8 @@
--page-background: #111111;
--light-dark-page-background: #1a1a1a;
--comparison-cards: #18181a;
+ --comparison-cards-hovered: #1c1c1f;
+ --coming-soon-icon: #dca008;
}
/* ===== GENERAL PAGE STYLES ===== */

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 10, 9:25 AM (8 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2847389
Default Alt Text
D7905.id26981.diff (4 KB)

Event Timeline