diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js index 7c5cfe233..b8b9608b4 100644 --- a/landing/app-landing.react.js +++ b/landing/app-landing.react.js @@ -1,40 +1,25 @@ // @flow import * as React from 'react'; import { assetMetaData } from './asset-meta-data.js'; import HeroContent from './hero-content.react.js'; -import InfoBlock from './info-block.react.js'; import css from './landing.css'; import Picture from './Picture.react.js'; import usePreloadAssets from './use-pre-load-assets.react.js'; function AppLanding(): React.Node { usePreloadAssets(assetMetaData); - const [ - hero, - federated, - customizable, - encrypted, - sovereign, - openSource, - lessNoisy, - ] = assetMetaData; + const [hero] = assetMetaData; return (
- - - - - -
); } export default AppLanding; diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js index cff212511..c8f0e1d9b 100644 --- a/landing/asset-meta-data.js +++ b/landing/asset-meta-data.js @@ -1,80 +1,24 @@ // @flow import css from './landing.css'; export type Asset = { +alt: string, +url: string, +title: string, +description: string, +imageStyle: string, +infoStyle: string, }; export const assetsCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net'; export const assetMetaData = [ { alt: 'a mobile phone screen highlighting chat and DAO voting', url: `${assetsCacheURLPrefix}/Header`, imageStyle: css.heroImage, infoStyle: css.heroInfo, title: 'Header', description: '', }, - { - alt: 'a mobile phone screen highlighting chat organization', - url: `${assetsCacheURLPrefix}/Federated`, - imageStyle: css.federatedImage, - infoStyle: css.federatedInfo, - title: 'Federated', - description: `Comm is a protocol paired with an app. - Each community hosts its own backend, - which we call a keyserver. - Our keyserver software is built to be forked.`, - }, - { - alt: 'a web app screen highlighting web3 apps in Comm', - url: `${assetsCacheURLPrefix}/Customizable`, - imageStyle: css.customizableImage, - infoStyle: css.customizableInfo, - title: 'Customizable', - description: `Write mini-apps and custom modules in React. - Skin your community. Customize your tabs and your home page.`, - }, - { - alt: 'a mobile phone screen highlighting a conversation', - url: `${assetsCacheURLPrefix}/E2E-encrypted`, - imageStyle: css.encryptedImage, - infoStyle: css.encryptedInfo, - title: 'E2E-encrypted', - description: `Comm started as a project to build a private, decentralized - alternative to Discord. Privacy is in our DNA.`, - }, - { - alt: 'a mobile phone user information screen', - url: `${assetsCacheURLPrefix}/Sovereign`, - imageStyle: css.sovereignImage, - infoStyle: css.sovereignInfo, - title: 'Sovereign', - description: `Log in with your wallet. Use ENS as your username. On Comm, - your identity and data are yours to control.`, - }, - { - alt: 'a web app screen highlighting web3 apps in Comm', - url: `${assetsCacheURLPrefix}/Open-Source`, - imageStyle: css.openSourceImage, - infoStyle: css.openSourceInfo, - title: 'Open Source', - description: `All of our code is open source. Keyservers, iOS/Android app, our - cloud services… all of it. We believe in open platforms.`, - }, - { - alt: 'a mobile phone notification options screen', - url: `${assetsCacheURLPrefix}/Less-Noisy`, - imageStyle: css.lessNoisyImage, - infoStyle: css.lessNoisyInfo, - title: 'Less Noisy', - description: `We let each user decide what they want to follow with detailed - notif controls and a powerful unified inbox.`, - }, ]; diff --git a/landing/landing.css b/landing/landing.css index 62cb1138e..46748054e 100644 --- a/landing/landing.css +++ b/landing/landing.css @@ -1,159 +1,78 @@ .container { background: radial-gradient(ellipse at bottom, #1f252e, #111827) fixed; font-family: var(--sans-serif); -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: white; word-break: break-word; height: 100%; position: relative; z-index: var(--landing-page-z-index); } .innerContainer { background-color: var(--page-background); margin: 0; padding: 0; height: 100%; overflow: auto; } .innerContainerMobileNav { overflow-y: hidden; } .pageContentContainer { position: relative; } .wrapper { transition-property: max-width; transition: 300ms; max-width: 1850px; margin-left: auto; margin-right: auto; display: grid; align-items: center; padding-top: 7vh; padding-bottom: 235px; grid-template-columns: 40px repeat(12, 1fr) 40px; grid-template-rows: repeat(auto-fill, 1fr); column-gap: 1.5%; row-gap: 75px; - grid-template-areas: - '. hImg hImg hImg hImg . hInfo hInfo hInfo hInfo hInfo hInfo hInfo .' - '. fImg fImg fImg fImg fImg . fInfo fInfo fInfo fInfo fInfo fInfo .' - '. cInfo cInfo cInfo cInfo cInfo cInfo . cImg cImg cImg cImg cImg cImg' - '. eImg eImg eImg eImg eImg . eInfo eInfo eInfo eInfo eInfo eInfo .' - '. sInfo sInfo sInfo sInfo sInfo sInfo . sImg sImg sImg sImg sImg .' - 'oImg oImg oImg oImg oImg oImg . oInfo oInfo oInfo oInfo oInfo oInfo .' - '. lInfo lInfo lInfo lInfo lInfo lInfo . lImg lImg lImg lImg lImg .'; + grid-template-areas: '. hImg hImg hImg hImg . hInfo hInfo hInfo hInfo hInfo hInfo hInfo .'; } @media screen and (max-width: 1099px) { .wrapper { margin-left: auto; margin-right: auto; display: grid; align-items: center; padding-top: 7vh; padding-bottom: 235px; grid-template-columns: 16px repeat(6, 1fr) 16px; grid-template-rows: repeat(auto-fill, 1fr); column-gap: 1.5%; row-gap: 75px; - grid-template-areas: - '. hInfo hInfo hInfo hInfo hInfo hInfo .' - '. fInfo fInfo fInfo fInfo fInfo fInfo .' - '. fImg fImg fImg fImg fImg fImg .' - '. cInfo cInfo cInfo cInfo cInfo cInfo .' - '. cImg cImg cImg cImg cImg cImg cImg' - '. eInfo eInfo eInfo eInfo eInfo eInfo .' - '. eImg eImg eImg eImg eImg eImg .' - '. sInfo sInfo sInfo sInfo sInfo sInfo .' - '. sImg sImg sImg sImg sImg sImg .' - '. oInfo oInfo oInfo oInfo oInfo oInfo .' - 'oImg oImg oImg oImg oImg oImg oImg .' - '. lInfo lInfo lInfo lInfo lInfo lInfo .' - '. lImg lImg lImg lImg lImg lImg .'; + grid-template-areas: '. hInfo hInfo hInfo hInfo hInfo hInfo .'; } .heroImage { display: none; } .heroInfo { display: flex; flex-direction: column; padding-bottom: 1.5rem; } - - .federatedImage { - justify-self: center; - } - - .encryptedImage { - justify-self: center; - max-width: 585px; - } - - .sovereignImage { - justify-self: center; - } } .heroImage { grid-area: hImg; } .heroInfo { grid-area: hInfo; } - -.federatedImage { - grid-area: fImg; -} - -.federatedInfo { - grid-area: fInfo; -} - -.customizableImage { - grid-area: cImg; -} - -.customizableInfo { - grid-area: cInfo; -} - -.encryptedImage { - grid-area: eImg; -} - -.encryptedInfo { - grid-area: eInfo; -} - -.sovereignImage { - grid-area: sImg; -} - -.sovereignInfo { - grid-area: sInfo; -} - -.openSourceImage { - grid-area: oImg; -} - -.openSourceInfo { - grid-area: oInfo; -} - -.lessNoisyImage { - grid-area: lImg; -} - -.lessNoisyInfo { - grid-area: lInfo; -}