Differential D8132 Diff 29764 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 KeyserverFAQ from './keyserver-faq.react.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 RequestAccess from './request-access.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>
<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 today.		That’s why E2E encryption only works for simple chat apps
There’s no way to build a robust server layer that has access to		today. There’s no way to build a robust server layer that has
your data without leaking that data to corporations.		access to 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> company.		is the <span className={css.purple_accent}>keyserver </span>
		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 manager,		private keys and your personal data. It’s your password
your crypto bank, your digital surrogate, and your second brain.		manager, your crypto bank, your digital surrogate, and your second
		brain.
</p>		</p>
</div>		</div>
<div className={css.read_the_docs}>		<div className={css.read_the_docs}>
<ReadDocsButton />		<ReadDocsButton />
</div>		</div>
</div>		</div>
		<KeyserverFAQ />
		<RequestAccess />
		</div>
);		);
}		}

export default Keyservers;		export default Keyservers;