slate/pages/about.js

123 lines
3.2 KiB
JavaScript
Raw Normal View History

2022-06-18 07:41:54 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVGLogo from "~/common/logo";
import * as SVG from "~/common/svg";
import * as System from "~/components/system";
import * as Validations from "~/common/validations";
import * as Strings from "~/common/strings";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsiteHeader from "~/components/core/WebsiteHeader";
import WebsiteFooter from "~/components/core/WebsiteFooter";
import { css } from "@emotion/react";
const STYLES_ROOT = css`
width: 100%;
height: 100%;
2022-07-08 22:27:36 +03:00
min-height: calc(100vh - 61px);
2022-06-18 07:41:54 +03:00
background-color: ${Constants.semantic.bgLight};
color: ${Constants.semantic.textBlack};
2022-07-08 22:27:36 +03:00
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: ${Constants.sizes.mobile}px) {
min-height: calc(100vh - 112px);
}
2022-06-18 07:41:54 +03:00
`;
const STYLES_CONTAINER = css`
max-width: 700px;
margin: 0 auto;
2022-07-08 22:27:36 +03:00
padding: 24px 0 96px 0;
2022-06-18 07:41:54 +03:00
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
2022-07-08 22:27:36 +03:00
padding: 16px 16px 32px 16px;
2022-06-18 07:41:54 +03:00
}
`;
const STYLES_HEADING = css`
flex-shrink: 0;
color: ${Constants.semantic.textBlack};
flex-shrink: 0;
min-width: 50%;
max-width: 100%;
`;
const STYLES_HEADING1 = css`
${STYLES_HEADING};
font-family: ${Constants.font.bold};
font-size: 88px;
line-height: 88px;
letter-spacing: -0.05em;
margin-bottom: 25px;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: 64px;
line-height: 68px;
letter-spacing: -0.04em;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 48px;
line-height: 52px;
letter-spacing: -0.04em;
}
`;
const STYLES_HEADING2 = css`
${STYLES_HEADING};
font-family: ${Constants.font.semiBold};
font-size: 40px;
line-height: 40px;
letter-spacing: -0.035em;
margin: 40px 0;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: 48px;
line-height: 56px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 40px;
line-height: 48px;
margin-bottom: 32px;
}
`;
const STYLES_BODY = css`
font-family: ${Constants.font.text};
font-size: 20px;
line-height: 28px;
letter-spacing: -0.01em;
margin-bottom: 16px;
`;
export default function AboutUsPage() {
const title = `About Us - Slate`;
const description = "Your personal search engine";
const url = "https://slate.host/about";
const image =
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
return (
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
<div css={STYLES_ROOT}>
2022-07-08 22:27:36 +03:00
<WebsiteHeader />
2022-06-18 07:41:54 +03:00
<div css={STYLES_CONTAINER}>
<div css={STYLES_HEADING1}>About Us</div>
<div css={STYLES_BODY}>
Slate is a Chrome extension that helps you save, organize and search stuff you care
about on the web. Its a lightweight tool designed to make the internet feel a little
more personal.
</div>
<div css={STYLES_HEADING2}>The team</div>
<div css={STYLES_HEADING2}>Special thanks to</div>
</div>
</div>
<WebsiteFooter />
</WebsitePrototypeWrapper>
);
}