diff --git a/landing/landing.css b/landing/landing.css index 745add2b8..3beaa0215 100644 --- a/landing/landing.css +++ b/landing/landing.css @@ -1,195 +1,193 @@ html { background: radial-gradient(ellipse at bottom, #1f252e, #111827); background-attachment: fixed; font-family: 'IBM Plex Sans', sans-serif; color: white; word-break: break-word; max-width: 1920px; } h1, h2 { font-family: 'IBM Plex Mono', monospace; font-weight: 600; } -div.title_container { - grid-area: title_container; -} - h1.title { font-family: 'IBM Plex Sans', sans-serif; font-size: 24px; + grid-area: title_container; } h1 { font-size: 58px; } span.purple { color: #7e57c2; } h2 { font-size: 50px; } p { font-size: 24px; + line-height: 1.6em; } div.grid { display: grid; padding-top: 20px; padding-left: 80px; padding-right: 80px; padding-bottom: 40px; column-gap: 6em; grid-template-columns: 1fr 1fr; grid-template-areas: 'title_container title_container' 'hero_copy hero_image' 'server_image server_copy' 'keyserver_company keyserver_company' 'keyserver_copy read_the_docs' 'footer_logo subscribe_updates'; } div.grid > div + .starting_section { padding-top: 80px; } .section { padding-top: 80px; } div.hero_copy { grid-area: hero_copy; align-self: center; } div.hero_image { grid-area: hero_image; object-fit: scale-down; align-self: center; } div.server_copy { grid-area: server_copy; align-self: center; } div.server_image { grid-area: server_image; object-fit: scale-down; align-self: center; } div.keyserver_company { grid-area: keyserver_company; align-self: center; text-align: center; padding-top: 80px; } div.keyserver_copy { grid-area: keyserver_copy; align-self: center; padding-bottom: 40px; } div.read_the_docs { grid-area: read_the_docs; align-self: center; padding-bottom: 40px; } div.footer_logo { font-family: 'IBM Plex Sans', sans-serif; font-size: 24px; grid-area: footer_logo; align-self: center; font-weight: 600; } div.subscribe_updates { grid-area: subscribe_updates; } div.particles { z-index: -1; } @media (max-width: 1499px) { div.grid { padding-left: 60px; padding-right: 60px; } h1 { font-size: 42px; } h2 { font-size: 38px; } p { font-size: 20px; } } @media (max-width: 1099px) { div.grid { display: grid; padding-left: 3%; padding-right: 3%; grid-template-columns: minmax(auto, 540px); justify-content: center; grid-template-areas: 'title_container' 'hero_image' 'hero_copy' 'server_image' 'server_copy' 'keyserver_company' 'keyserver_copy' 'read_the_docs' 'subscribe_updates' 'footer_logo'; } h1 { font-size: 28px; } h2 { font-size: 24px; } p { font-size: 16px; } .section { padding-top: 20px; } div.keyserver_company { text-align: left; padding-top: 60px; } .keyserver_company > h1 { font-size: 24px; } div.keyserver_copy { padding-bottom: 0; } div.read_the_docs { padding-top: 20px; padding-bottom: 0; } } diff --git a/landing/landing.react.js b/landing/landing.react.js index b6930d999..92a55f623 100644 --- a/landing/landing.react.js +++ b/landing/landing.react.js @@ -1,151 +1,149 @@ // @flow import { create } from '@lottiefiles/lottie-interactivity'; import * as React from 'react'; import css from './landing.css'; import ReadDocsButton from './read-docs-btn.react'; import StarBackground from './star-background.react'; import SubscriptionForm from './subscription-form.react'; const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; function Landing(): React.Node { React.useEffect(() => { import('@lottiefiles/lottie-player'); }, []); const onEyeIllustrationLoad = React.useCallback(() => { create({ mode: 'scroll', player: '#eye-illustration', actions: [ { visibility: [0, 1], type: 'seek', frames: [0, 720], }, ], }); }, []); const onCloudIllustrationLoad = React.useCallback(() => { create({ mode: 'scroll', player: '#cloud-illustration', actions: [ { visibility: [0, 0.2], type: 'stop', frames: [0], }, { visibility: [0.2, 1], type: 'seek', frames: [0, 300], }, ], }); }, []); const [eyeNode, setEyeNode] = React.useState(null); useIsomorphicLayoutEffect(() => { if (!eyeNode) { return; } eyeNode.addEventListener('load', onEyeIllustrationLoad); return () => eyeNode.removeEventListener('load', onEyeIllustrationLoad); }, [eyeNode, onEyeIllustrationLoad]); const [cloudNode, setCloudNode] = React.useState(null); useIsomorphicLayoutEffect(() => { if (!cloudNode) { return; } cloudNode.addEventListener('load', onCloudIllustrationLoad); return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad); }, [cloudNode, onCloudIllustrationLoad]); return (
-
-

Comm

-
+

Comm

Reclaim your digital identity.

The internet is broken today. Private user data is owned by mega-corporations and farmed for their benefit.

E2E encryption has the potential to change this equation. But it's constrained by a crucial limitation.

Apps need servers.

Sophisticated applications rely on servers to do things that your devices simply can't.

That's why E2E encryption only works for simple chat apps today. There's no way to build a robust server layer that has access to your data without leaking that data to corporations.

Comm is the keyserver company.

In the future, people have their own servers.

Your keyserver is the home of your digital identity. It owns your private keys and your personal data. It's your password - manager, your crypto wallet, your digital surrogate, and your second + manager, your crypto bank, your digital surrogate, and your second brain.

Comm
); } export default Landing;