diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js --- a/landing/asset-meta-data.js +++ b/landing/asset-meta-data.js @@ -1,14 +1,94 @@ // @flow +import classNames from 'classnames'; +import * as React from 'react'; + +import css from './landing.css'; +import typography from './typography.css'; + +const paragraphClassName = classNames([typography.subheading2, css.paragraph]); + export type ImageAsset = { +alt: string, +url: string, }; +export type Asset = { + +containerClassName: string, + +colorHeader: boolean, + +headerTextContent: string, + +infoBlockContent: React.Node, + +navLinkDestination: string, + +linkTextContent: string, +}; + export const assetsCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net'; -export const imageAssetMetaData = [ +export const imageAssetMetaData: $ReadOnlyArray = [ { alt: 'hero image showcasing Comm', url: `${assetsCacheURLPrefix}/hero`, }, ]; + +export const assetMetaData: $ReadOnlyArray = [ + { + containerClassName: css.keyserverInfo, + colorHeader: true, + headerTextContent: 'Own your data with keyservers', + infoBlockContent: ( + <> +

+ Comm’s central innovation is the idea of the keyserver: a + personal, private server. +

+

+ E2E-encrypted apps today are limited because they have to do + everything locally, on the user’s device. In contrast, + unencrypted apps are able to rely on servers in the cloud to handle + queries and background processing, in turn allowing these apps to + support more sophisticated functionality. +

+

+ But what if people had their own servers? Keyservers enable Comm to + offer the best of both worlds: Signal-level privacy with a + Telegram-level feature set. +

+ + ), + navLinkDestination: '/keyservers', + linkTextContent: 'Learn more about keyservers', + }, + { + containerClassName: css.teamInfo, + colorHeader: false, + headerTextContent: 'Our story and vision', + infoBlockContent: ( + <> +

+ Comm was founded by  + + Ashoat + + +  after his experiences trying to add E2E encryption to a social + calendaring app exposed the limits of contemporary cryptographic + approaches. He realized why E2E apps were so limited in + functionality: the lack of a server layer meant that everything had + to be done on a phone. + +

+

+ Comm’s vision is a world where people own their own data. We + believe that in the future, everybody will have a server. +

+ + ), + navLinkDestination: '/team', + linkTextContent: 'Learn more about our team', + }, +]; diff --git a/landing/landing.css b/landing/landing.css --- a/landing/landing.css +++ b/landing/landing.css @@ -25,3 +25,32 @@ .pageContentContainer { position: relative; } + +.keyserverInfo { + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--light-dark-page-background); +} + +.teamInfo { + display: flex; + flex-direction: column; + align-items: center; +} + +.paragraph { + color: var(--white-100); + margin-bottom: 40px; +} + +.link { + color: inherit; + text-decoration: underline; + transition: color 150ms; +} + +.link:hover { + color: var(--violet-dark-100); + transition: color 150ms; +} diff --git a/landing/use-pre-load-image-assets.react.js b/landing/use-pre-load-image-assets.react.js --- a/landing/use-pre-load-image-assets.react.js +++ b/landing/use-pre-load-image-assets.react.js @@ -4,7 +4,7 @@ import { type ImageAsset } from './asset-meta-data.js'; -function usePreloadImageAssets(assets: ImageAsset[]) { +function usePreloadImageAssets(assets: $ReadOnlyArray) { React.useEffect(() => { const testWEBP = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'; const testImg = new Image();