Differential D7757 Diff 29715 landing/keyservers.react.js

Changeset View

Standalone View

landing/keyservers.react.js

// @flow		// @flow

import { create } from '@lottiefiles/lottie-interactivity';		import { create } from '@lottiefiles/lottie-interactivity';
import * as React from 'react';		import * as React from 'react';

import { useIsomorphicLayoutEffect } from 'lib/hooks/isomorphic-layout-effect.react.js';		import { useIsomorphicLayoutEffect } from 'lib/hooks/isomorphic-layout-effect.react.js';

import { assetsCacheURLPrefix } from './asset-meta-data.js';		import { assetsCacheURLPrefix } from './asset-meta-data.js';
import css from './keyservers.css';		import css from './keyservers.css';
import ReadDocsButton from './read-docs-btn.react.js';		import ReadDocsButton from './read-docs-btn.react.js';
import StarBackground from './star-background.react.js';

function Keyservers(): React.Node {		function Keyservers(): React.Node {
React.useEffect(() => {		React.useEffect(() => {
import('@lottiefiles/lottie-player');		import('@lottiefiles/lottie-player');
}, []);		}, []);

const onEyeIllustrationLoad = React.useCallback(() => {		const onEyeIllustrationLoad = React.useCallback(() => {
create({		create({
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	useIsomorphicLayoutEffect(() => {
if (!cloudNode) {		if (!cloudNode) {
return undefined;		return undefined;
}		}
cloudNode.addEventListener('load', onCloudIllustrationLoad);		cloudNode.addEventListener('load', onCloudIllustrationLoad);
return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);		return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);
}, [cloudNode, onCloudIllustrationLoad]);		}, [cloudNode, onCloudIllustrationLoad]);

return (		return (
<div>
<StarBackground />
<div className={css.body_grid}>		<div className={css.body_grid}>
<div className={`${css.hero_image} ${css.starting_section}`}>		<div className={`${css.hero_image} ${css.starting_section}`}>
<lottie-player		<lottie-player
id="eye-illustration"		id="eye-illustration"
ref={setEyeNode}		ref={setEyeNode}
mode="normal"		mode="normal"
src={`${assetsCacheURLPrefix}/animated_eye.json`}		src={`${assetsCacheURLPrefix}/animated_eye.json`}
speed={1}		speed={1}
/>		/>
</div>		</div>
<div className={`${css.hero_copy} ${css.section}`}>		<div className={`${css.hero_copy} ${css.section}`}>
<h1 className={css.mono}>		<h1 className={css.mono}>
Reclaim your		Reclaim your
<span className={css.purple_accent}> digital identity.</span>		<span className={css.purple_accent}> digital identity.</span>
</h1>		</h1>
<p>		<p>
The Internet is broken today. Private user data is owned by		The Internet is broken today. Private user data is owned by
mega-corporations and farmed for their benefit.		mega-corporations and farmed for their benefit.
</p>		</p>
<p>		<p>
E2E encryption has the potential to change this equation. But		E2E encryption has the potential to change this equation. But
it’s constrained by a crucial limitation.		it’s constrained by a crucial limitation.
</p>		</p>
</div>		</div>

<div className={`${css.server_image} ${css.starting_section}`}>		<div className={`${css.server_image} ${css.starting_section}`}>
<lottie-player		<lottie-player
id="cloud-illustration"		id="cloud-illustration"
ref={setCloudNode}		ref={setCloudNode}
mode="normal"		mode="normal"
src={`${assetsCacheURLPrefix}/animated_cloud.json`}		src={`${assetsCacheURLPrefix}/animated_cloud.json`}
speed={1}		speed={1}
/>		/>
</div>		</div>
<div className={`${css.server_copy} ${css.section}`}>		<div className={`${css.server_copy} ${css.section}`}>
<h1 className={css.mono}>Apps need servers.</h1>		<h1 className={css.mono}>Apps need servers.</h1>
<p>		<p>
Sophisticated applications rely on servers to do things that your		Sophisticated applications rely on servers to do things that your
devices simply can’t.		devices simply can’t.
</p>		</p>
<p>		<p>
That’s why E2E encryption only works for simple chat apps		That’s why E2E encryption only works for simple chat apps today.
today. There’s no way to build a robust server layer that has		There’s no way to build a robust server layer that has access to
access to your data without leaking that data to corporations.		your data without leaking that data to corporations.
</p>		</p>
</div>		</div>

<div className={css.keyserver_company}>		<div className={css.keyserver_company}>
<h1>		<h1>
Comm		Comm
<span className={css.mono}>		<span className={css.mono}>
{' '}		{' '}
is the <span className={css.purple_accent}>keyserver</span>{' '}		is the <span className={css.purple_accent}>keyserver</span> company.
company.
</span>		</span>
</h1>		</h1>
</div>		</div>

<div className={css.keyserver_copy}>		<div className={css.keyserver_copy}>
<p>In the future, people have their own servers.</p>		<p>In the future, people have their own servers.</p>
<p>		<p>
Your keyserver is the home of your digital identity. It owns your		Your keyserver is the home of your digital identity. It owns your
private keys and your personal data. It’s your password		private keys and your personal data. It’s your password manager,
manager, your crypto bank, your digital surrogate, and your second		your crypto bank, your digital surrogate, and your second brain.
brain.
</p>		</p>
</div>		</div>
<div className={css.read_the_docs}>		<div className={css.read_the_docs}>
<ReadDocsButton />		<ReadDocsButton />
</div>		</div>
</div>		</div>
</div>
);		);
}		}

export default Keyservers;		export default Keyservers;