2022-06-16 20:58:21 +03:00
|
|
|
|
import * as React from "react";
|
|
|
|
|
import * as Constants from "~/common/constants";
|
|
|
|
|
import * as SVG from "~/common/svg";
|
|
|
|
|
|
|
|
|
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
|
|
|
|
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
|
|
|
|
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
2022-10-03 18:54:00 +03:00
|
|
|
|
import Link from "next/link";
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
import { css } from "@emotion/react";
|
2022-06-21 02:09:29 +03:00
|
|
|
|
import { useGuideKeyCommands } from "./guide/guide";
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
const STYLES_ROOT = css`
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
min-height: calc(100vh - 61px);
|
2022-06-16 20:58:21 +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-16 20:58:21 +03:00
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const STYLES_CONTAINER = css`
|
|
|
|
|
max-width: 700px;
|
|
|
|
|
margin: 0 auto;
|
2022-07-15 06:05:06 +03:00
|
|
|
|
padding: min(2.5vw, 120px) 0 24px 0;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
|
max-width: 480px;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
padding: 16px 16px 24px 16px;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
2022-06-21 02:09:29 +03:00
|
|
|
|
const STYLES_IMG = css`
|
2022-07-15 06:05:06 +03:00
|
|
|
|
width: 88%;
|
2022-10-03 18:54:00 +03:00
|
|
|
|
height: auto;
|
2022-07-15 06:05:06 +03:00
|
|
|
|
margin-bottom: 8px;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
|
2022-10-03 18:54:00 +03:00
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-08 22:27:36 +03:00
|
|
|
|
@keyframes hero-fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(5%);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 100%;
|
|
|
|
|
transform: translateY(0%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
animation: hero-fade-in 300ms ease-in-out;
|
2022-06-21 02:09:29 +03:00
|
|
|
|
`;
|
|
|
|
|
|
2022-06-16 20:58:21 +03:00
|
|
|
|
const STYLES_HEADING = css`
|
|
|
|
|
font-family: ${Constants.font.bold};
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
min-width: 50%;
|
|
|
|
|
max-width: 100%;
|
2022-07-15 06:05:06 +03:00
|
|
|
|
line-height: min(100px, 6vw);
|
|
|
|
|
font-size: min(100px, 6vw);
|
2022-06-16 20:58:21 +03:00
|
|
|
|
letter-spacing: -0.05em;
|
2022-07-15 06:05:06 +03:00
|
|
|
|
margin-bottom: 21px;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
@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;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
margin-bottom: 13px;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
}
|
2022-07-08 22:27:36 +03:00
|
|
|
|
|
|
|
|
|
@keyframes heading-fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(25%);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(25%);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 100%;
|
|
|
|
|
transform: translateY(0%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
animation: heading-fade-in 400ms ease-in-out;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const STYLES_BODY = css`
|
2022-07-08 22:27:36 +03:00
|
|
|
|
font-family: ${Constants.font.medium};
|
2022-06-16 20:58:21 +03:00
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 28px;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
letter-spacing: -0.015em;
|
2022-07-15 06:05:06 +03:00
|
|
|
|
margin-bottom: 20px;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
2022-07-08 22:27:36 +03:00
|
|
|
|
@keyframes body-fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(50%);
|
2022-06-16 20:58:21 +03:00
|
|
|
|
}
|
2022-07-08 22:27:36 +03:00
|
|
|
|
50% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(50%);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 100%;
|
|
|
|
|
transform: translateY(0%);
|
2022-06-16 20:58:21 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
2022-07-08 22:27:36 +03:00
|
|
|
|
animation: body-fade-in 600ms ease-in-out;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
2022-07-08 22:27:36 +03:00
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
letter-spacing: -0.01em;
|
|
|
|
|
margin-bottom: 16px;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const STYLES_BUTTON = css`
|
|
|
|
|
cursor: poitner;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex-grow: 0;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 18px 32px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
font-family: ${Constants.font.medium};
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 20px;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
letter-spacing: -0.015em;
|
2022-06-16 20:58:21 +03:00
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: pointer;
|
2022-07-08 22:27:36 +03:00
|
|
|
|
margin-right: 16px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
@keyframes button-fade-in {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(50%);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
opacity: 0%;
|
|
|
|
|
transform: translateY(50%);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 100%;
|
|
|
|
|
transform: translateY(0%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
animation: button-fade-in 700ms ease-in-out;
|
|
|
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
letter-spacing: -0.01em;
|
|
|
|
|
padding: 14px 20px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const STYLES_PRIMARY_BUTTON = css`
|
|
|
|
|
${STYLES_BUTTON}
|
2022-07-18 22:49:33 +03:00
|
|
|
|
background-color: ${Constants.system.highlighter};
|
|
|
|
|
color: ${Constants.semantic.textBlack};
|
2022-06-16 20:58:21 +03:00
|
|
|
|
`;
|
|
|
|
|
|
2022-07-08 22:27:36 +03:00
|
|
|
|
const STYLES_SECONDARY_BUTTON = css`
|
|
|
|
|
${STYLES_BUTTON}
|
|
|
|
|
background-color: none;
|
|
|
|
|
border: 2px solid ${Constants.semantic.borderGray};
|
|
|
|
|
color: ${Constants.semantic.textBlack};
|
|
|
|
|
`;
|
|
|
|
|
|
2022-06-16 20:58:21 +03:00
|
|
|
|
export default function InstallPage() {
|
|
|
|
|
const title = `Install Slate for Chrome - Slate`;
|
|
|
|
|
const description = "Install Slate from Chrome web store";
|
|
|
|
|
const url = "https://slate.host/get-slate";
|
2023-01-16 13:58:53 +03:00
|
|
|
|
const image = `${Constants.gateways.ipfs}/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4`;
|
2022-10-03 18:54:00 +03:00
|
|
|
|
const next = "/_/data";
|
2022-06-21 02:09:29 +03:00
|
|
|
|
const prev = "../guide/new-tab";
|
2022-10-03 18:54:00 +03:00
|
|
|
|
|
2022-06-21 02:09:29 +03:00
|
|
|
|
useGuideKeyCommands(next, prev);
|
2022-06-16 20:58:21 +03:00
|
|
|
|
|
|
|
|
|
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-16 20:58:21 +03:00
|
|
|
|
<div css={STYLES_CONTAINER}>
|
2022-10-03 18:54:00 +03:00
|
|
|
|
<div style={{ width: "100%" }}>
|
|
|
|
|
<img
|
|
|
|
|
css={STYLES_IMG}
|
|
|
|
|
src="../public/static/slate-jumper.png"
|
|
|
|
|
alt="extension jumper"
|
|
|
|
|
width="616"
|
|
|
|
|
height="278"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<h1 css={STYLES_HEADING}>
|
2022-07-08 22:27:36 +03:00
|
|
|
|
Get started — <br />
|
|
|
|
|
it’s free.
|
2022-10-03 18:54:00 +03:00
|
|
|
|
</h1>
|
|
|
|
|
<p css={STYLES_BODY}>
|
2022-07-08 22:27:36 +03:00
|
|
|
|
Slate is currently free to use, we’ll add premium features later on for you to use.
|
2022-10-03 18:54:00 +03:00
|
|
|
|
</p>
|
|
|
|
|
<a href="/_/data" css={STYLES_PRIMARY_BUTTON}>
|
2022-07-08 22:27:36 +03:00
|
|
|
|
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
|
|
|
|
</a>
|
2022-10-03 18:54:00 +03:00
|
|
|
|
<a
|
|
|
|
|
css={STYLES_SECONDARY_BUTTON}
|
|
|
|
|
target="_blank"
|
|
|
|
|
rel="noreferrer"
|
|
|
|
|
href={Constants.extensionLink.chrome}
|
|
|
|
|
>
|
2022-07-08 22:27:36 +03:00
|
|
|
|
Get Slate from Chrome store
|
2022-06-16 20:58:21 +03:00
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<WebsiteFooter />
|
|
|
|
|
</WebsitePrototypeWrapper>
|
|
|
|
|
);
|
|
|
|
|
}
|