diff --git a/landing/download.css b/landing/download.css new file mode 100644 --- /dev/null +++ b/landing/download.css @@ -0,0 +1,37 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + padding: 72px 0 128px; +} + +.heading { + color: var(--white-80); + margin-bottom: 48px; +} + +.subheading { + max-width: 60ch; + margin: 0 auto; + padding: 0 32px 40px 32px; + color: var(--white-80); + text-align: center; +} + +.platfromHeader { + margin: 32px 0 8px; +} + +.buttonsContainer { + display: flex; + column-gap: 16px; + width: 280px; +} + +.buttonContentContainer { + display: flex; + justify-content: center; + align-items: center; + column-gap: 8px; + padding: 4px 0; +} diff --git a/landing/download.react.js b/landing/download.react.js new file mode 100644 --- /dev/null +++ b/landing/download.react.js @@ -0,0 +1,96 @@ +// @flow + +import { + faAppStoreIos, + faGooglePlay, + faApple, + faWindows, +} from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; + +import Button from './button.react.js'; +import css from './download.css'; +import typography from './typography.css'; + +const onClickiOS = () => { + window.open( + 'https://apps.apple.com/us/app/comm-messenger/id1574433435', + '_blank', + ); +}; + +const onClickAndroid = () => { + window.open( + 'https://play.google.com/store/apps/details?id=app.comm.android', + '_blank', + ); +}; + +const onClickMacOS = () => { + window.open( + 'https://electron-update.commtechnologies.org/download/dmg', + '_blank', + ); +}; + +const onClickWindows = () => { + window.open( + 'https://electron-update.commtechnologies.org/download/windows', + '_blank', + ); +}; + +function Download(): React.Node { + const headerClassName = classNames([typography.heading1, css.heading]); + const subheaderClassName = classNames([ + typography.subheading2, + css.subheading, + ]); + const platformHeaderTextClassName = classNames([ + typography.heading4, + css.platfromHeader, + ]); + + return ( +
+

Download Comm

+

+ Note that account creation is only possible on mobile. +

+

Mobile

+
+ + +
+

Desktop

+
+ + +
+
+ ); +} + +export default Download;