Page MenuHomePhorge
Files F32088714

keyservers.react.js
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

keyservers.react.js
View Options

// @flow
import { create } from '@lottiefiles/lottie-interactivity';
import classNames from 'classnames';
import * as React from 'react';
import { useIsomorphicLayoutEffect } from 'lib/hooks/isomorphic-layout-effect.react.js';
import { assetsCacheURLPrefix } from './asset-meta-data.js';
import KeyserverFAQ from './keyserver-faq.react.js';
import css from './keyservers.css';
import ReadDocsButton from './read-docs-btn.react.js';
import RequestAccess from './request-access.react.js';
import typography from './typography.css';
function Keyservers(): React.Node {
React.useEffect(() => {
void 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<?HTMLElement>(null);
useIsomorphicLayoutEffect(() => {
if (!eyeNode) {
return undefined;
}
eyeNode.addEventListener('load', onEyeIllustrationLoad);
return () => eyeNode.removeEventListener('load', onEyeIllustrationLoad);
}, [eyeNode, onEyeIllustrationLoad]);
const [cloudNode, setCloudNode] = React.useState<?HTMLElement>(null);
useIsomorphicLayoutEffect(() => {
if (!cloudNode) {
return undefined;
}
cloudNode.addEventListener('load', onCloudIllustrationLoad);
return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);
}, [cloudNode, onCloudIllustrationLoad]);
const headingClassName = classNames([typography.heading1, css.heading]);
const descriptionClassName = classNames([
typography.subheading2,
css.description,
]);
const heroHeadingClassName = classNames([headingClassName, css.heroText]);
const heroDescriptionClassName = classNames([
descriptionClassName,
css.heroText,
]);
return (
<main>
<section className={css.heroSection}>
<div className={css.heroContainer}>
<div className={css.heroImage}>
<lottie-player
id="eye-illustration"
ref={setEyeNode}
mode="normal"
src={`${assetsCacheURLPrefix}/animated_eye.json`}
speed={1}
/>
</div>
<h1 className={heroHeadingClassName}>
Reclaim your
<span className={css.purpleGradient}> digital&nbsp;identity</span>
</h1>
<p className={heroDescriptionClassName}>
The Internet is broken today. Private user data is owned by
mega-corporations and farmed for their benefit.
</p>
<p className={heroDescriptionClassName}>
E2E encryption has the potential to change this equation. But
it&rsquo;s constrained by a crucial limitation.
</p>
</div>
</section>
<section className={css.serversSection}>
<div className={css.serversContainer}>
<div className={css.serversImage}>
<lottie-player
id="cloud-illustration"
ref={setCloudNode}
mode="normal"
src={`${assetsCacheURLPrefix}/animated_cloud.json`}
speed={1}
/>
</div>
<div className={css.serversCopy}>
<h1 className={headingClassName}>Apps need servers.</h1>
<p className={descriptionClassName}>
Sophisticated applications rely on servers to do things that your
devices simply can&rsquo;t.
</p>
<p className={descriptionClassName}>
That&rsquo;s why E2E encryption only works for simple chat apps
today. There&rsquo;s no way to build a robust server layer that
has access to your data without leaking that data to corporations.
</p>
</div>
</div>
</section>
<section className={css.keyserverCompanySection}>
<div className={css.keyserverCompanyContainer}>
<div className={css.keyserverCompanyCopy}>
<h1 className={headingClassName}>
Comm is the
<span className={css.purpleGradient}> keyserver </span>
company.
</h1>
<p className={descriptionClassName}>
In the future, people have their own servers.
</p>
<p className={descriptionClassName}>
Your keyserver is the home of your digital identity. It owns your
private keys and your personal data. It&rsquo;s your password
manager, your crypto bank, your digital surrogate, and your second
brain.
</p>
</div>
<div className={css.readTheDocs}>
<ReadDocsButton />
</div>
</div>
</section>
<KeyserverFAQ />
<RequestAccess />
</main>
);
}
export default Keyservers;

File Metadata

Mime Type
text/x-java
Expires
Sun, Dec 7, 7:53 AM (1 d, 4 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5630016
Default Alt Text
keyservers.react.js (5 KB)

Event Timeline