mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-26 10:34:09 +03:00
landing: styling tweaks
This commit is contained in:
tarafanlin
parent
903d46f330
commit
20479ccad2
@ -1,10 +1,5 @@
|
||||
export const Logo = (props) => (
|
||||
<svg
|
||||
{...props}
|
||||
fill="none"
|
||||
viewBox="0 0 236 79"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg {...props} fill="none" viewBox="0 0 236 79" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
|
||||
<path d="m217.464 54.8607c-6.06 0-11.06-4.3753-11.135-11.3369h28.241s.214-1.6208.214-3.6082c0-6.7976-1.92-12.0386-5.208-15.5818-3.289-3.5441-7.93-5.3723-13.337-5.3723-5.41 0-10.078 1.9779-13.392 5.6963-3.312 3.7168-5.258 9.1582-5.258 16.0648 0 6.9044 1.846 12.336 5.259 16.0428 3.414 3.7083 8.377 5.6701 14.567 5.6704 5.635.1002 11.16-1.6208 15.742-5.1302l.111-.0854-3.782-6.5418c-1.598 1.2996-3.652 2.3167-5.031 2.9079-1.778.7631-3.915 1.2744-6.991 1.2744zm6.112-25.5668c1.681 1.7391 2.622 4.2517 2.653 7.3749h-19.896c.109-2.7752 1.009-5.2854 2.644-7.1105 1.665-1.8584 3.948-3.0185 7.272-3.0185 3.28 0 5.618.9862 7.327 2.7541z" />
|
||||
<path d="m196.252 61.3278v-7.7171c-1.658.634-3.09 1.0078-4.02 1.1408-.81.1157-1.407.1123-1.907.1095-1.222 0-2.185-.1755-2.646-.7613-.234-.2976-.406-.7148-.518-1.3028-.113-.588-.164-1.3367-.164-2.2886v-22.8095h9.255v-7.9531h-9.255v-15.40329l-8.724 4.93807v42.30672c0 3.8975.938 6.6181 2.647 8.3634 1.709 1.7459 4.162 2.4879 7.129 2.4879 1.936 0 3.349-.0295 8.203-1.1107z" />
|
||||
@ -15,3 +10,4 @@ export const Logo = (props) => (
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
export default Logo;
|
||||
|
||||
@ -2,7 +2,6 @@ import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
font-family: ${Constants.font.text};
|
||||
@ -26,7 +25,7 @@ const STYLES_CONTAINER = css`
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.system.moonstone};
|
||||
color: ${Constants.system.darkGray};
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
line-height: 1.5;
|
||||
@ -39,26 +38,25 @@ const STYLES_LINK = css`
|
||||
const STYLES_LEFT = css`
|
||||
flex-shrink: 0;
|
||||
font-size: 1.563rem;
|
||||
color: ${Constants.system.white};
|
||||
color: ${Constants.system.c};
|
||||
`;
|
||||
|
||||
const STYLES_SLATE = css`
|
||||
flex-shrink: 0;
|
||||
padding: 0px 0px 8px 0px;
|
||||
font-size: 1.563rem;
|
||||
color: ${Constants.system.white};
|
||||
color: ${Constants.system.gray};
|
||||
`;
|
||||
|
||||
const STYLES_TRADEMARK = css`
|
||||
width: 80px;
|
||||
margin: -8px 16px 16px 0px;
|
||||
margin: 0px 16px 16px 0px;
|
||||
`;
|
||||
|
||||
const STYLES_CREDIT = css`
|
||||
flex-shrink: 0;
|
||||
padding: 8px 0px 8px 0px;
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.white};
|
||||
color: ${Constants.system.gray};
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
@ -81,11 +79,14 @@ const STYLES_RIGHT = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export default (props) => {
|
||||
export const NewWebsitePrototypeFooter = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_TRADEMARK}>
|
||||
<img width="88px" src="/static/landing/marketing-tesseract.png" />
|
||||
<img
|
||||
width="32px"
|
||||
src="https://bafkreigojwgoqkcpi4oyjoncmiuacg3zen7mlg75fkz27k5n32golvbkb4.ipfs.slate.textile.io/"
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_LEFT}>
|
||||
<div css={STYLES_SLATE}>
|
||||
@ -94,11 +95,11 @@ export default (props) => {
|
||||
</div>
|
||||
<div css={STYLES_CREDIT}>
|
||||
Powered by{" "}
|
||||
<a css={STYLES_LINK} href="https://textile.io">
|
||||
<a css={STYLES_LINK} href="https://textile.io" target="_blank">
|
||||
Textile
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a css={STYLES_LINK} href="https://filecoin.io">
|
||||
<a css={STYLES_LINK} href="https://filecoin.io" target="_blank">
|
||||
Filecoin
|
||||
</a>
|
||||
<br />
|
||||
@ -111,11 +112,11 @@ export default (props) => {
|
||||
<div style={{ marginRight: 88 }}>
|
||||
<p>Reach out</p>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate">
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://filecoin.io/slack">
|
||||
<a css={STYLES_LINK} href="https://filecoin.io/slack" target="_blank">
|
||||
Slack
|
||||
</a>
|
||||
</div>
|
||||
@ -124,15 +125,19 @@ export default (props) => {
|
||||
<div>
|
||||
<p>Resources</p>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate">
|
||||
Github
|
||||
<a css={STYLES_LINK} href="/" target="_blank">
|
||||
Design system
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
|
||||
View source
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="./community" target="_blank">
|
||||
Community Guidelines
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate/issues">
|
||||
<a css={STYLES_LINK} href="./privacy" target="_blank">
|
||||
Privacy
|
||||
</a>
|
||||
</div>
|
||||
@ -140,3 +145,5 @@ export default (props) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWebsitePrototypeFooter;
|
||||
|
||||
@ -2,11 +2,12 @@ import React, { useState } from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Logo } from "~/common/logo.js";
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 88px;
|
||||
@ -40,6 +41,7 @@ const STYLES_LINK = css`
|
||||
const STYLES_LEFT = css`
|
||||
flex-shrink: 0;
|
||||
padding: 12px 0;
|
||||
height: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_RIGHT = css`
|
||||
@ -54,7 +56,6 @@ const STYLES_RIGHT = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// Tara: [WIP] mobile burger menu
|
||||
const STYLES_BURGER = css`
|
||||
display: none;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -156,8 +157,9 @@ const STYLES_BURGER_BUN2_OPEN = css`
|
||||
|
||||
const STYLES_MENU = css`
|
||||
display: none;
|
||||
visibility: 0;
|
||||
opacity: 0;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
@ -170,6 +172,7 @@ const STYLES_MENU = css`
|
||||
right: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translateX(100%);
|
||||
transition-property: transform, opacity, visibility;
|
||||
|
||||
a {
|
||||
padding: 16px 0;
|
||||
@ -177,7 +180,7 @@ const STYLES_MENU = css`
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
|
||||
font-size: 2.441em;
|
||||
font-size: 1.563rem;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
@ -188,9 +191,10 @@ const STYLES_MENU = css`
|
||||
`;
|
||||
|
||||
const STYLES_MENU_OPEN = css`
|
||||
display: none;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: flex;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
@ -203,6 +207,7 @@ const STYLES_MENU_OPEN = css`
|
||||
right: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translateX(0);
|
||||
transition-property: transform, opacity, visibility;
|
||||
|
||||
a {
|
||||
padding: 16px 0;
|
||||
@ -210,7 +215,7 @@ const STYLES_MENU_OPEN = css`
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
|
||||
font-size: 2.441em;
|
||||
font-size: 1.563rem;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
@ -220,27 +225,21 @@ const STYLES_MENU_OPEN = css`
|
||||
}
|
||||
`;
|
||||
|
||||
export default (props) => {
|
||||
export const NewWebsitePrototypeHeader = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.semiBold }}>
|
||||
Slate {Constants.values.version}
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24 }}>
|
||||
<Logo style={{ width: 64 }} />
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_RIGHT}>
|
||||
<a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
|
||||
View Source
|
||||
</a>
|
||||
<a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
|
||||
Design System
|
||||
</a>
|
||||
<a css={STYLES_LINK} style={{ marginRight: 24 }} href="https://github.com/filecoin-project/slate">
|
||||
Community
|
||||
Get involved
|
||||
</a>
|
||||
<a css={STYLES_LINK} style={{ marginRight: 24 }} href="/_/system">
|
||||
Sign Up
|
||||
Sign up
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate">
|
||||
Download
|
||||
@ -253,9 +252,7 @@ export default (props) => {
|
||||
<div css={open ? STYLES_BURGER_BUN2_OPEN : STYLES_BURGER_BUN2} />
|
||||
</div>
|
||||
<div open={open} css={open ? STYLES_MENU_OPEN : STYLES_MENU}>
|
||||
<a href="/">View source</a>
|
||||
<a href="/">Design system</a>
|
||||
<a href="/">Community</a>
|
||||
<a href="/">Get involved</a>
|
||||
<a href="/">Sign up</a>
|
||||
<a href="/">Download</a>
|
||||
</div>
|
||||
@ -263,3 +260,5 @@ export default (props) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWebsitePrototypeHeader;
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
import TextLoop from "react-text-loop";
|
||||
import { motion, useViewportScroll, useTransform } from "framer-motion";
|
||||
// import { motion, useViewportScroll, useTransform } from "framer-motion";
|
||||
import { css, keyframes } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
@ -17,20 +16,23 @@ const STYLES_ROOT = css`
|
||||
justify-content: space-between;
|
||||
h1 {
|
||||
font-size: 3.815rem;
|
||||
line-height: 1.25;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
color: ${Constants.system.moonstone};
|
||||
color: ${Constants.system.darkGray};
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.441em;
|
||||
line-height: 1.25;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
color: ${Constants.system.moonstone};
|
||||
color: ${Constants.system.darkGray};
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.563em;
|
||||
padding: 0px 0px 32px 0px;
|
||||
color: ${Constants.system.moonstone};
|
||||
line-height: 1.5;
|
||||
padding: 0px 0px 16px 0px;
|
||||
color: ${Constants.system.darkGray};
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
@ -59,7 +61,7 @@ const STYLES_ROOT = css`
|
||||
h1 {
|
||||
font-size: 1.953rem;
|
||||
padding: 0px 0px 16px 0px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.25;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
@ -93,9 +95,9 @@ const STYLES_SECTION_HERO = css`
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: -88px 0px 0px 0px;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
background: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 40vh 24px 0 24px;
|
||||
padding: 40vh 24px 48px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
@ -118,7 +120,7 @@ const STYLES_SECTION_SLATE = css`
|
||||
flex-direction: column;
|
||||
padding: 88px;
|
||||
width: 100vw;
|
||||
background: ${Constants.system.pitchBlack};
|
||||
background: ${Constants.system.slate};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
@ -126,13 +128,13 @@ const STYLES_SECTION_SLATE = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_WALL = css`
|
||||
const STYLES_SECTION_PITCHBLACK = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 88px;
|
||||
width: 100vw;
|
||||
background: ${Constants.system.wall};
|
||||
background: ${Constants.system.pitchBlack};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
@ -149,7 +151,7 @@ const STYLES_IMAGE = css`
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
video {
|
||||
margin: 32px auto;
|
||||
margin: 32px auto 88px auto;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -180,7 +182,6 @@ const STYLES_IMAGE_SMALL = css`
|
||||
width: 32vw;
|
||||
height: auto;
|
||||
display: block;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
img {
|
||||
@ -188,7 +189,6 @@ const STYLES_IMAGE_SMALL = css`
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -197,16 +197,52 @@ const STYLES_MEDIA_LEFT = css`
|
||||
img {
|
||||
margin: 64px 0 0 -240px;
|
||||
width: 80vw;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
video {
|
||||
margin: 64px 0 0 -240px;
|
||||
border-radius: 4px;
|
||||
width: 80vw;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
img {
|
||||
margin: 24px 0 0 -80px;
|
||||
width: 80vw;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MEDIA_LEFT_OVERLAP = css`
|
||||
img {
|
||||
margin: -320px 0 0 -48px;
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
img {
|
||||
margin: 24px 0 0 -80px;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MEDIA_RIGHT_OVERLAP = css`
|
||||
img {
|
||||
float: right;
|
||||
margin-right: 240px;
|
||||
margin-top: -80px;
|
||||
width: 24vw;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
img {
|
||||
margin: 24px 0 0 80px;
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -217,10 +253,12 @@ const STYLES_TEXT_BLOCK = css`
|
||||
justify-content: space-between;
|
||||
width: 56vw;
|
||||
align-self: center;
|
||||
z-index: 10;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 88%;
|
||||
right: 24px;
|
||||
z-index: 10;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -381,15 +419,15 @@ const STYLES_SLATE_CARD_TITLE = css`
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_CTA_TITLE = css`
|
||||
font-size: 2.441em;
|
||||
font-size: 3.815rem;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
color: ${Constants.system.moonstone};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 0px;
|
||||
font-size: 1rem;
|
||||
font-size: 1.953rem;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -419,7 +457,7 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -429,11 +467,11 @@ export const getServerSideProps = async (context) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const MyComponent = () => <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} />;
|
||||
export const MyMotion = () => {
|
||||
const { scrollYProgress } = useViewportScroll();
|
||||
return <motion.div style={{ scaleX: scrollYProgress }} />;
|
||||
};
|
||||
// export const MyComponent = () => <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} />;
|
||||
// export const MyMotion = () => {
|
||||
// const { scrollYProgress } = useViewportScroll();
|
||||
// return <motion.div style={{ scaleX: scrollYProgress }} />;
|
||||
// };
|
||||
|
||||
export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
@ -443,20 +481,24 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
const description = "Welcome to the future of file sharing. Powered by Textile, Filecoin, IPFS.";
|
||||
const url = "https://slate.host";
|
||||
const image = "https://bafybeifedze7dm4zesvgekukziw23gbtfodxiz63nxgybbyo2koxeybmla.ipfs.slate.textile.io/";
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1>
|
||||
Welcome to
|
||||
A file storage network
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT}>the future of file sharing</span>
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
for you, your files, <br />
|
||||
and your friends
|
||||
</span>
|
||||
</h1>
|
||||
<h2>Powered by Textile, Filecoin, IPFS</h2>
|
||||
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
|
||||
Use Slate
|
||||
@ -464,10 +506,11 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div css={STYLES_IMAGE}>
|
||||
<video Autoplay="autoplay" Loop="loop" src="/static/landing/marketing-hero.mov" type="video/mov" />
|
||||
</div>
|
||||
{/* <div css={STYLES_TEXT_BLOCK}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2>
|
||||
Slate{" "}
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
@ -479,37 +522,17 @@ export default class IndexPage extends React.Component {
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT}>organize</span> it any way you like, <br />
|
||||
<span css={STYLES_HIGHLIGHT}>and share</span> it with the world securely.
|
||||
</h2>
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
|
||||
Use Slate
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</section>
|
||||
<section css={STYLES_SECTION_WALL}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1>
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>Store, organize, share</span>
|
||||
<br />
|
||||
</h1>
|
||||
<br />
|
||||
</h2>
|
||||
<h3>Powered by</h3>
|
||||
<h2>
|
||||
Slate{" "}
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>
|
||||
is a fully open-source file sharing network designed for research and collaboration.
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
Textile <br />
|
||||
Filecoin <br />
|
||||
IPFS
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>Store</span> your data,
|
||||
<br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>organize</span> it any way you like, <br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>and share</span> it with the world securely.
|
||||
</h2>
|
||||
<div css={STYLES_ACTIONS_RIGHT}>
|
||||
<div css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("/_")}>
|
||||
Use Slate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
@ -520,16 +543,17 @@ export default class IndexPage extends React.Component {
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
for your{" "}
|
||||
<TextLoop interval={1200}>
|
||||
<span>image</span>
|
||||
<span>video</span>
|
||||
<span>text</span>
|
||||
<span>URL</span>
|
||||
<span>images</span>
|
||||
<span>videos</span>
|
||||
<span>audios</span>
|
||||
<span>ePUBs</span>
|
||||
<span>PDFs</span>
|
||||
</TextLoop>
|
||||
</span>
|
||||
</h1>
|
||||
<h3>
|
||||
<span css={STYLES_HIGHLIGHT}>Easily upload </span>any kind of file to your storage system. <br />
|
||||
<span css={STYLES_HIGHLIGHT}>Organize</span> them any way you like with Slates.
|
||||
<span css={STYLES_HIGHLIGHT}>Organize</span> them any way you like with slates.
|
||||
</h3>
|
||||
</div>
|
||||
<div css={STYLES_IMAGE}>
|
||||
@ -545,11 +569,11 @@ export default class IndexPage extends React.Component {
|
||||
</h1>
|
||||
<h3>
|
||||
<span css={STYLES_HIGHLIGHT}>The Slate Chrome extension</span> lets you seamlessly upload files to your
|
||||
Slates from anywhere on the web.
|
||||
slates from anywhere on the web.
|
||||
</h3>
|
||||
</div>
|
||||
<div css={STYLES_MEDIA_LEFT}>
|
||||
<img src="/static/landing/marketing-extension.png" />
|
||||
<img src="https://bafybeiefyhindtituzzcncmdihxag6ypfqofpljqpp52ulcg5mjrepk6va.ipfs.slate.textile.io/" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -559,7 +583,7 @@ export default class IndexPage extends React.Component {
|
||||
<span css={STYLES_HIGHLIGHT}>Organize and publish</span>
|
||||
</h1>
|
||||
<h3>
|
||||
<span css={STYLES_HIGHLIGHT}>Modular interface</span> for your files, giving you complete flexibility.
|
||||
<span css={STYLES_HIGHLIGHT}>A modular interface</span> for your files, giving you complete flexibility.
|
||||
</h3>
|
||||
</div>
|
||||
<br />
|
||||
@ -568,7 +592,7 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2>
|
||||
<span css={STYLES_HIGHLIGHT}>Create moodboard</span>
|
||||
<span css={STYLES_HIGHLIGHT}>Create moodboards</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div css={STYLES_IMAGE}>
|
||||
@ -592,7 +616,7 @@ export default class IndexPage extends React.Component {
|
||||
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2>
|
||||
<span css={STYLES_HIGHLIGHT}>Share presentation</span>
|
||||
<span css={STYLES_HIGHLIGHT}>Share presentations</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div css={STYLES_IMAGE}>
|
||||
@ -607,12 +631,12 @@ export default class IndexPage extends React.Component {
|
||||
</h1>
|
||||
<h3>
|
||||
<span css={STYLES_HIGHLIGHT}>A file sharing network</span> built on top of a storage system making it
|
||||
possible to connect.
|
||||
possible to connect with other people on the Filecoin network.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_IMAGE_SMALL}>
|
||||
<img src="/static/landing/marketing-network.png" />
|
||||
<div css={STYLES_MEDIA_LEFT_OVERLAP}>
|
||||
<img src="https://bafybeifo7djff5cyfdedhnbnw6bdtdmkswlwtizyzrfri4v3sebuavrqu4.ipfs.slate.textile.io/" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -623,7 +647,7 @@ export default class IndexPage extends React.Component {
|
||||
<span css={STYLES_HIGHLIGHT}>trust, privacy, and security</span>
|
||||
</h1>
|
||||
<h3>
|
||||
<span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> — technologies built for
|
||||
<span css={STYLES_HIGHLIGHT}>Slate is built on Filecoin and IPFS</span> — technologies built around
|
||||
ownership and transparency for the future of the web.
|
||||
</h3>
|
||||
<div>
|
||||
@ -633,24 +657,21 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_IMAGE_SMALL}>
|
||||
<div css={STYLES_MEDIA_RIGHT_OVERLAP}>
|
||||
<img src="/static/landing/marketing-slate-cube.png" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE_WALL}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1>
|
||||
Join us <br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>in the open, secure network</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD_GRAY}>
|
||||
<a css={STYLES_SLATE_CARD_PARAGRAPH} href="https://slate.host/_" target="_blank">
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_CTA_TITLE}>A Slate</div>
|
||||
<div css={STYLES_SLATE_CARD_CTA_TITLE}>
|
||||
Join us <br />
|
||||
<span css={STYLES_HIGHLIGHT_BLACK}>in the open, secure network</span>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Start Slate</div>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>Create your first slate</div>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user