mirror of
https://github.com/filecoin-project/slate.git
synced 2024-08-18 02:00:44 +03:00
landing page WIP
This commit is contained in:
tarafanlin
parent
4ae04243cc
commit
3cd42ac66d
@ -123,6 +123,7 @@ export const semantic = {
|
||||
borderDark: system.grayDark6,
|
||||
borderGrayDark: system.grayDark5,
|
||||
borderGrayLight4: system.grayLight4,
|
||||
borderGray: system.gray,
|
||||
|
||||
bgBlue: system.blueLight6,
|
||||
bgGreen: system.greenLight6,
|
||||
|
||||
@ -16,22 +16,22 @@ export const injectGlobalStyles = () => css`
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-regular';
|
||||
src: url('https://slate.textile.io/ipfs/bafkreic3hkcuwvrmf6trweqcjp62valsfjh3zvwacikoreynakgw67wrvy');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-semi-bold';
|
||||
src: url('https://slate.textile.io/ipfs/bafkreiaezvuz6wawoqyntfl4gbprol3e7majovgof3uxvhilvd2pgk4w54');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-bold';
|
||||
src: url('https://slate.textile.io/ipfs/bafybeigljfbymd52vnrie6qkcy4u4kplsz4yen2idpizhr3dvrgy7kufaq');
|
||||
src: url('../public/static/Inter-Regular.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-medium';
|
||||
src: url('https://slate.textile.io/ipfs/bafkreiapyxmqjwoowqpek2cjocouzxoalwlzwwbv3dscug3e5l2ok7xmqe');
|
||||
src: url('../public/static/Inter-Medium.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-semi-bold';
|
||||
src: url('../public/static/Inter-SemiBold.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-bold';
|
||||
src: url('../public/static/Inter-Bold.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
||||
@ -456,21 +456,39 @@ export const OldWallet = (props) => (
|
||||
|
||||
export const RightArrow = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
height={props.height}
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
style={{ display: "block", ...props.style }}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12H19" />
|
||||
<path d="M12 5L19 12L12 19" />
|
||||
</g>
|
||||
<path d="M3.33331 8H12.6666" />
|
||||
<path d="M8 3.33334L12.6667 8.00001L8 12.6667" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const LeftArrow = (props) => (
|
||||
<svg
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
style={{ display: "block", ...props.style }}
|
||||
>
|
||||
<path d="M12.6666 8H3.33331" />
|
||||
<path d="M7.99998 12.6667L3.33331 8.00001L7.99998 3.33334" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -2144,25 +2162,19 @@ export const Mail = (props) => (
|
||||
<svg
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
// tabIndex="0"
|
||||
{...props}
|
||||
style={{ display: "block", ...props.style }}
|
||||
>
|
||||
<path
|
||||
d="M2.667 2.667h10.666c.734 0 1.334.6 1.334 1.333v8c0 .733-.6 1.333-1.334 1.333H2.667c-.734 0-1.334-.6-1.334-1.333V4c0-.733.6-1.333 1.334-1.333z"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.25}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.667 4L8 8.667 1.333 4"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.25}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M2.667 2.667h10.666c.734 0 1.334.6 1.334 1.333v8c0 .733-.6 1.333-1.334 1.333H2.667c-.734 0-1.334-.6-1.334-1.333V4c0-.733.6-1.333 1.334-1.333z" />
|
||||
<path d="M14.667 4L8 8.667 1.333 4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -2346,18 +2358,37 @@ export const Twitter = (props) => (
|
||||
<svg
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
// tabIndex="0"
|
||||
{...props}
|
||||
style={{ display: "block", ...props.style }}
|
||||
>
|
||||
<path
|
||||
d="M15.333 2a7.268 7.268 0 01-2.093 1.02 2.987 2.987 0 00-5.24 2v.667a7.107 7.107 0 01-6-3.02s-2.667 6 3.333 8.666a7.76 7.76 0 01-4.666 1.334C6.667 16 14 12.667 14 5c0-.186-.018-.371-.053-.553A5.147 5.147 0 0015.333 2v0z"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.25}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path d="M15.333 2a7.268 7.268 0 01-2.093 1.02 2.987 2.987 0 00-5.24 2v.667a7.107 7.107 0 01-6-3.02s-2.667 6 3.333 8.666a7.76 7.76 0 01-4.666 1.334C6.667 16 14 12.667 14 5c0-.186-.018-.371-.053-.553A5.147 5.147 0 0015.333 2v0z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Discord = (props) => (
|
||||
<svg
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.25"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
// tabIndex="0"
|
||||
{...props}
|
||||
style={{ display: "block", ...props.style }}
|
||||
>
|
||||
<path d="M13.3887 3.12791C15.1297 5.7015 15.9928 8.59281 15.6906 11.9178C14.4201 12.8369 13.1883 13.4115 11.9724 13.8002C11.7518 13.4853 11.5474 13.1577 11.3618 12.8179C11.734 12.6667 12.0915 12.4913 12.4376 12.2894C12.6278 12.1786 12.6348 11.9138 12.4652 11.7878L12.4651 11.7878C12.3843 11.7278 12.3037 11.6645 12.2264 11.601L12.2265 11.6009L12.2233 11.5984C12.1372 11.5299 12.0161 11.5111 11.9095 11.5612C9.38898 12.7228 6.63066 12.7231 4.078 11.5602L4.07621 11.5594C3.97443 11.514 3.853 11.5281 3.76381 11.6016C3.68724 11.6646 3.60645 11.7275 3.52507 11.7883C3.35144 11.9179 3.369 12.1817 3.55395 12.2894L3.55566 12.2904C3.90054 12.4878 4.25806 12.6658 4.63123 12.8188C4.4486 13.1586 4.24414 13.4859 4.02019 13.8006C2.80951 13.4118 1.57769 12.8372 0.307019 11.9181C0.0539242 9.03634 0.612187 6.1225 2.60647 3.12827C3.55137 2.70026 4.55945 2.3801 5.61107 2.18744C5.72991 2.40661 5.85402 2.65872 5.94148 2.86842L6.01671 3.0488L6.20991 3.01933C7.38924 2.83947 8.58756 2.83935 9.79313 3.01945L9.98426 3.048L10.06 2.87022C10.1489 2.66171 10.2695 2.40603 10.3857 2.18764C11.4373 2.38081 12.4448 2.70078 13.3887 3.12791ZM10.243 2.16227L10.2455 2.16269L10.243 2.16227ZM0.315195 12.0082L0.315033 12.0064L0.315195 12.0082ZM12.1858 11.8575C12.1853 11.8578 12.1848 11.8581 12.1843 11.8583C12.1848 11.858 12.1853 11.8577 12.1859 11.8574L12.1858 11.8575ZM12.0563 13.9184L12.0555 13.9172L12.0563 13.9184ZM3.65876 8.60685C3.65876 9.60516 4.39501 10.466 5.34668 10.466C6.31169 10.466 7.03372 9.60469 7.03458 8.60864C7.04795 7.61406 6.31631 6.74773 5.34668 6.74773C4.38108 6.74773 3.65876 7.61003 3.65876 8.60685ZM8.97526 8.60685C8.97526 9.60516 9.71151 10.466 10.6632 10.466C11.6352 10.466 12.3502 9.60394 12.3511 8.60864C12.3644 7.61407 11.6328 6.74773 10.6632 6.74773C9.69755 6.74773 8.97526 7.61004 8.97526 8.60685Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
@ -1,28 +1,32 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: ${Constants.semantic.bgGrayLight};
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-family: ${Constants.font.text};
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01px;
|
||||
padding: 96px 24px;
|
||||
padding: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 40px 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -33,8 +37,10 @@ const STYLES_LINK = css`
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01px;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const STYLES_FLEX = css`
|
||||
@ -44,11 +50,36 @@ const STYLES_FLEX = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT_BLOCK = css`
|
||||
width: 25%;
|
||||
margin-bottom: 24px;
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 50%;
|
||||
const STYLES_FLEX_BLOCK = css`
|
||||
display: flex;
|
||||
width: 33.3%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FLEX_RIGHT = css`
|
||||
${STYLES_FLEX_BLOCK};
|
||||
justify-content: flex-end;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: start;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FLEX_CENTER = css`
|
||||
${STYLES_FLEX_BLOCK};
|
||||
justify-content: center;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: start;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FLEX_LEFT = css`
|
||||
${STYLES_FLEX_BLOCK};
|
||||
justify-content: flex-start;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: start;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -56,55 +87,41 @@ const STYLES_HR = css`
|
||||
background-color: ${Constants.semantic.borderGrayLight4};
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 12px 0;
|
||||
`;
|
||||
|
||||
const styleFlexFull = {
|
||||
justifyContent: `space-between`,
|
||||
};
|
||||
|
||||
export const WebsiteFooter = (props) => {
|
||||
const discordURL = "https://discord.gg/NRsUjpCypr";
|
||||
const twitterURL = "https://twitter.com/_slate";
|
||||
const githubURL = "https://github.com/filecoin-project/slate/issues/126";
|
||||
const extensionURL =
|
||||
"https://chrome.google.com/webstore/detail/slate-web-extension/gloembacbehhbfbkcfjmloikeeaebnoc";
|
||||
const mailtoSlate = "mailto:hello@slate.host?subject=Hello Slate Team";
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div>Slate - Your personal search engine</div>
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_FLEX}>
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<div>Resources</div>
|
||||
<a css={STYLES_LINK} href={extensionURL}>
|
||||
Slate for Chrome
|
||||
<div css={STYLES_FLEX_LEFT}>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/about-us">
|
||||
About Us
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href={githubURL} target="_blank">
|
||||
Github
|
||||
<a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/faq">
|
||||
FAQs
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<div>Contact & Support</div>
|
||||
<a css={STYLES_LINK} href={twitterURL} target="_blank">
|
||||
Twitter
|
||||
<div css={STYLES_FLEX_CENTER}>
|
||||
<span style={{ fontSize: `10px`, marginRight: `4px` }}>Ⓒ</span>2022 Slate. All rights
|
||||
reserved.
|
||||
</div>
|
||||
<div css={STYLES_FLEX_RIGHT}>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `16px` }} href="/terms">
|
||||
Terms of Service
|
||||
</a>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `16px` }} href={mailtoSlate} target="_blank">
|
||||
<SVG.Mail height={20} width={20} strokeWidth={1} />
|
||||
</a>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `12px` }} href={twitterURL} target="_blank">
|
||||
<SVG.Twitter height={20} width={20} strokeWidth={1} />
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href={discordURL} target="_blank">
|
||||
Discord
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_FLEX} style={styleFlexFull}>
|
||||
<div />
|
||||
<div>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `32px` }} href="/terms">
|
||||
Terms of service
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="/guidelines">
|
||||
Community guidelines
|
||||
<SVG.Discord height={21} width={24} strokeWidth={1} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,9 +10,8 @@ const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: ${Constants.semantic.bgBlurWhiteOP};
|
||||
backdrop-filter: blur(75px);
|
||||
z-index: ${Constants.zindex.header};
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
@ -23,7 +22,7 @@ const STYLES_CONTAINER = css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
font: ${Constants.font.medium};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
font-size: 14px;
|
||||
@ -31,29 +30,19 @@ const STYLES_CONTAINER = css`
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.01px;
|
||||
text-align: left;
|
||||
padding: 14px 24px;
|
||||
padding: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 14px 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.semantic.textBlack};
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const STYLES_LEFT = css`
|
||||
const STYLES_LOGO = css`
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const STYLES_RIGHT = css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
@ -83,35 +72,24 @@ const STYLES_BUTTON_PRIMARY_SMALL = css`
|
||||
border-radius: 8px;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
${STYLES_BUTTON};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
background-color: ${Constants.semantic.bgGrayLight};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY_SMALL = css`
|
||||
${STYLES_BUTTON_SECONDARY};
|
||||
padding: 1px 12px 3px;
|
||||
border-radius: 8px;
|
||||
const STYLES_IMG = css`
|
||||
height: 20px;
|
||||
`;
|
||||
|
||||
const WebsiteHeader = (props) => {
|
||||
const signInURL = "/_/auth";
|
||||
const slate = "../public/static/Slate_volumetric.png";
|
||||
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24 }}>
|
||||
Slate
|
||||
<div css={STYLES_LOGO}>
|
||||
<a href="../">
|
||||
<img css={STYLES_IMG} src={slate} alt="Slate volumetric logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_RIGHT}>
|
||||
<a css={STYLES_BUTTON_SECONDARY_SMALL} style={{ marginRight: 8 }} href="../_/auth">
|
||||
Sign in
|
||||
</a>
|
||||
<div>
|
||||
<a css={STYLES_BUTTON_PRIMARY_SMALL} href="../_/auth">
|
||||
Sign up
|
||||
Install Slate for Chrome
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -138,7 +138,7 @@ export default class GuidelinesPage extends React.Component {
|
||||
const title = `Slate: Community Guidelines`;
|
||||
const description =
|
||||
"We believe that our mission is best served in an environment that is friendly, safe, and accepting.";
|
||||
const url = "https://slate.host/guidelines-new";
|
||||
const url = "https://slate.host/guidelines";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
|
||||
1041
pages/index.js
1041
pages/index.js
File diff suppressed because it is too large
Load Diff
@ -1,183 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
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%;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 160px 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HERO_TEXT = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HEADING = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
flex-shrink: 0;
|
||||
color: ${Constants.semantic.textBlack};
|
||||
flex-shrink: 0;
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_HEADING1 = css`
|
||||
${STYLES_HEADING};
|
||||
font-size: 84px;
|
||||
line-height: 88px;
|
||||
letter-spacing: -0.05em;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
@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_BODY1 = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 10.8725px 57.9866px rgba(174, 176, 178, 0.3);
|
||||
max-width: calc(50% - 24px);
|
||||
`;
|
||||
|
||||
const STYLES_IMG_HERO = css`
|
||||
${STYLES_IMG};
|
||||
max-width: 100%;
|
||||
border: 12px solid ${Constants.semantic.textBlack};
|
||||
border-radius: 40px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
border: 8px solid ${Constants.semantic.textBlack};
|
||||
border-radius: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
cursor: poitner;
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: ${Constants.shadow.lightMedium};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.006px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY = css`
|
||||
${STYLES_BUTTON};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
background-color: ${Constants.system.blue};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY_BIG = css`
|
||||
${STYLES_BUTTON_PRIMARY};
|
||||
padding: 18px 28px 18px 24px;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY_BIG_HERO = css`
|
||||
${STYLES_BUTTON_PRIMARY_BIG};
|
||||
margin-bottom: 48px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_IMG = css`
|
||||
display: block;
|
||||
margin: 0 20px;
|
||||
width: 60%;
|
||||
border: ${Constants.semantic.borderGrayLight4};
|
||||
border-radius: 16px;
|
||||
box-shadow: ${Constants.shadow.darkMedium};
|
||||
`;
|
||||
|
||||
export default class SlateForChromePage extends React.Component {
|
||||
render() {
|
||||
const title = `Slate for Chrome`;
|
||||
const description = "Upload images to Slate from anywhere on the web";
|
||||
const url = "https://slate.host/slate-for-chrome";
|
||||
const image =
|
||||
"https://slate.textile.io/ipfs/bafybeidi6z774yoge5uowzwkdrrnrzi5bzqgzrwfizw4dg4xdjxfjoa5ei";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_HEADING1}>Slate web extension</div>
|
||||
<br />
|
||||
<div css={STYLES_BODY1}>
|
||||
Access Slate anytime, anywhere when you browse the Internet.
|
||||
</div>
|
||||
<a css={STYLES_BUTTON_PRIMARY_BIG_HERO}>Get Slate for Chrome</a>
|
||||
<img
|
||||
css={STYLES_IMG_HERO}
|
||||
src="https://slate.textile.io/ipfs/bafybeihsrxgjk5ax4wzbnfnq2kyg4djylrvpsbzrhitvnmcjixupbk5qjm"
|
||||
/>
|
||||
<img
|
||||
css={STYLES_FEATURE_IMG}
|
||||
style={{ margin: "-50% auto 48px auto" }}
|
||||
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<WebsiteFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -118,7 +118,7 @@ export default class TermsPage extends React.Component {
|
||||
render() {
|
||||
const title = `Slate: Terms of Service`;
|
||||
const description = "You must agree to our terms of service to use Slate.";
|
||||
const url = "https://slate.host/terms-new";
|
||||
const url = "https://slate.host/terms";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user