mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-20 23:51:31 +03:00
451 lines
14 KiB
JavaScript
451 lines
14 KiB
JavaScript
import * as React from "react";
|
|
import * as Constants from "~/common/constants";
|
|
import * as Actions from "~/common/actions";
|
|
import * as System from "~/components/system";
|
|
import { motion, useViewportScroll, useTransform } from "framer-motion";
|
|
import { css, keyframes } from "@emotion/react";
|
|
|
|
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 { Fade } from "react-slideshow-image";
|
|
|
|
const STYLES_HERO_SECTION = css`
|
|
text-align: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-top: 30vh;
|
|
background-image: url("");
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
transition: width 2s, height 4s;
|
|
`;
|
|
const STYLES_HERO_TEXT = css`
|
|
text-align: center;
|
|
color: ${Constants.system.black};
|
|
width: 80vw;
|
|
margin: auto;
|
|
`;
|
|
|
|
const STYLES_ROOT = css`
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
h1{
|
|
font-size: 4.768rem;
|
|
padding: 0px 0px 32px 0px;
|
|
width: 100%;
|
|
}
|
|
h2{
|
|
font-size: 1.953rem;
|
|
width: 48%;
|
|
}
|
|
p{
|
|
font-size: 1rem;
|
|
color: ${Constants.system.black};
|
|
}
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
h1{
|
|
font-size: 2.441rem;
|
|
}
|
|
h2{
|
|
font-size: 1.25rem;
|
|
}
|
|
p{
|
|
font-size: 0.78rem;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const STYLES_FOREGROUND_H1 = css`
|
|
font-size: 4.768rem;
|
|
color: ${Constants.system.foreground};
|
|
padding: 0px 0px 32px 0px;
|
|
width: 64%;
|
|
`;
|
|
|
|
const STYLES_FOREGROUND_H2 = css`
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.foreground};
|
|
width: 48%;
|
|
`;
|
|
|
|
const STYLES_HERO = css`
|
|
padding: 88px 24px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: ${Constants.system.foreground};
|
|
`;
|
|
const STYLES_SECTION_WHITE = css`
|
|
padding: 88px 24px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: ${Constants.system.white};
|
|
`;
|
|
|
|
const STYLES_SECTION_GRAY = css`
|
|
padding: 88px 24px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: ${Constants.system.gray};
|
|
`;
|
|
|
|
const STYLES_SECTION_FOREGROUND = css`
|
|
padding: 88px 24px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: ${Constants.system.foreground};
|
|
position: relative;
|
|
`;
|
|
|
|
const STYLES_SECTION_FRONT = css`
|
|
padding: 88px 24px 24px 24px;
|
|
margin: 0px;
|
|
position: relative;
|
|
z-index : 2;
|
|
}
|
|
`;
|
|
|
|
const STYLES_VIEWS_TEXT = css`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.black};
|
|
text-decoration: none;
|
|
margin: 30vh 0px;
|
|
}
|
|
`;
|
|
|
|
const STYLES_VIEWS_IMAGES = css`
|
|
display: inline-flex;
|
|
position: absolute;
|
|
img{
|
|
max-width: 500px;
|
|
height: auto;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const STYLES_SECTION_BACK = css`
|
|
margin: 0px 0px 0px 0px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 0px;
|
|
position: absolute;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
`;
|
|
|
|
const STYLES_SECTION_MEDIA = css`
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
`;
|
|
|
|
const STYLES_MEDIA = css`
|
|
max-width: 100%;
|
|
max-height: 100vh;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
`;
|
|
|
|
const STYLES_SIMPLE_FLOW_CONTAINER = css `
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100vw;
|
|
justify-content: space-around;
|
|
padding-top: 20vh;
|
|
align-items: center;
|
|
`;
|
|
|
|
const STYLES_ARROW_CONTAINER = css `
|
|
width: 200px;
|
|
`;
|
|
|
|
const STYLES_SECTION_TEXT = css`
|
|
display: block;
|
|
max-width: 980px;
|
|
`;
|
|
|
|
const STYLES_SECTION_SVG_CONTAINER = css`
|
|
display: flex;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const STYLES_STROKE_KF = keyframes`
|
|
from { stroke-dashoffset: 1; }
|
|
to { stroke-dashoffset: 0;}
|
|
`;
|
|
|
|
const STYLES_SVG_AN = css`
|
|
animation: ${STYLES_STROKE_KF} 5s ease-in-out infinite alternate;
|
|
`;
|
|
|
|
const STYLES_CONTR_CONTAINER = css `
|
|
display: flex;
|
|
`;
|
|
const STYLES_CONTR_LIST = css `
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100vw;
|
|
list-style: none;
|
|
`;
|
|
|
|
const STYLES_CONTR_LI0 = css `
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.black};
|
|
text-decoration: none;
|
|
padding-bottom: 1.5rem;
|
|
`;
|
|
const STYLES_CONTR_LI1 = css `
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.black};
|
|
text-decoration: none;
|
|
opacity: .76;
|
|
padding-bottom: 1.5rem;
|
|
`;
|
|
const STYLES_CONTR_LI2 = css `
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.black};
|
|
text-decoration: none;
|
|
opacity: .56;
|
|
padding-bottom: 1.5rem;
|
|
`;
|
|
const STYLES_CONTR_LI3 = css `
|
|
font-size: 1.953rem;
|
|
color: ${Constants.system.black};
|
|
text-decoration: none;
|
|
opacity: .26;
|
|
padding-bottom: 1.5rem;
|
|
`;
|
|
const STYLES_MEDIA_LEFT = css`
|
|
position: absolute;
|
|
right: 16%;
|
|
bottom: 24px
|
|
`;
|
|
|
|
const fadeImages = [
|
|
"/static/media/image.jpg",
|
|
"/static/media/sound.jpg",
|
|
"/static/media/code.jpg",
|
|
"/static/media/text.jpg",
|
|
"/static/media/url.jpg",
|
|
];
|
|
|
|
const viewsImages = [
|
|
"/static/media/slate-views-moodboard.png",
|
|
"/static/media/slate-views-canvas.png",
|
|
"/static/media/slate-views-presentation.png",
|
|
"/static/media/slate-views-blog.png",
|
|
];
|
|
|
|
export const getServerSideProps = async (context) => {
|
|
return {
|
|
props: { ...context.query },
|
|
};
|
|
};
|
|
|
|
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() {
|
|
const response = await Actions.health();
|
|
console.log("HEALTH_CHECK", response);
|
|
|
|
|
|
}
|
|
render() {
|
|
const title = `Slate`;
|
|
const description = "The place for all of your assets. Powered by Textile and Filecoin.";
|
|
const url = "https://slate.host";
|
|
|
|
|
|
|
|
return (
|
|
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
|
<div css={STYLES_ROOT}>
|
|
<WebsitePrototypeHeader />
|
|
<section css={STYLES_HERO_SECTION}>
|
|
|
|
<div css={STYLES_HERO_TEXT}>
|
|
|
|
|
|
<System.H1>Slate is the gateway to Filecoin.</System.H1>
|
|
<br/>
|
|
<System.H2>By creating a safe, open, and moddable storage system that is easy to use, we create paths to a new network of designed around trust.</System.H2>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
<section css={STYLES_SECTION_WHITE}>
|
|
<h1>Simple, intuitive</h1>
|
|
<h2>Break way from abstract visualizations of your files.<br/>Securely organize your data in a relatable way</h2>
|
|
<div css={STYLES_SIMPLE_FLOW_CONTAINER}>
|
|
<div>{/*<ButtonPrimary>Upload File</ButtonPrimary> Figure out hoiw to pull in correctly*/}<button>Upload File</button></div>
|
|
<div css={STYLES_ARROW_CONTAINER}>
|
|
<svg viewBox="0 0 350 100">
|
|
<defs>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7"
|
|
refX="0" refY="1.5" orient="auto" fill="#1b1f23">
|
|
<polygon points="0 0, 5 1.5, 0 3" />
|
|
</marker>
|
|
</defs>
|
|
<line x1="5" y1="50" x2="250" y2="50" stroke="#1b1f23"
|
|
stroke-width="8" marker-end="url(#arrowhead)" />
|
|
</svg>
|
|
</div>
|
|
<div><p>Slate securely stores your file</p></div>
|
|
<div css={STYLES_ARROW_CONTAINER}>
|
|
<svg viewBox="0 0 350 100">
|
|
<defs>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7"
|
|
refX="0" refY="1.5" orient="auto" fill="#1b1f23">
|
|
<polygon points="0 0, 5 1.5, 0 3" />
|
|
</marker>
|
|
</defs>
|
|
<line x1="5" y1="50" x2="250" y2="50" stroke="#1b1f23"
|
|
stroke-width="8" marker-end="url(#arrowhead)" />
|
|
</svg>
|
|
</div>
|
|
<div><p>Share!</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_FOREGROUND}>
|
|
<h1>Private & Secure</h1>
|
|
<h2>All your files are encryped. Only accessible by you and the people you choose to share.</h2>
|
|
<div css={STYLES_MEDIA_LEFT}>
|
|
<img src="/static/privacy.png" />
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section css={STYLES_SECTION_MEDIA}>
|
|
|
|
<div css={STYLES_SECTION_BACK}>
|
|
<Fade
|
|
arrows={false}
|
|
duration={2400}
|
|
transitionDuration={800}
|
|
pauseOnHover={false}
|
|
>
|
|
<div className="each-fade" css={STYLES_MEDIA}>
|
|
<img src={fadeImages[0]} />
|
|
</div>
|
|
<div className="each-fade" css={STYLES_MEDIA}>
|
|
<img src={fadeImages[1]}/>
|
|
</div>
|
|
<div className="each-fade" css={STYLES_MEDIA}>
|
|
<img src={fadeImages[2]}/>
|
|
</div>
|
|
<div className="each-fade" css={STYLES_MEDIA}>
|
|
<img src={fadeImages[3]}/>
|
|
</div>
|
|
<div className="each-fade" css={STYLES_MEDIA}>
|
|
<img src={fadeImages[4]}/>
|
|
</div>
|
|
</Fade>
|
|
</div>
|
|
|
|
<div css={STYLES_SECTION_FRONT}>
|
|
<h1 css={STYLES_FOREGROUND_H1}>
|
|
Easily store any{" "}
|
|
<TextLoop interval={3200}>
|
|
<span>image</span>
|
|
<span>sound</span>
|
|
<span>code</span>
|
|
<span>text</span>
|
|
<span>URL</span>
|
|
</TextLoop>
|
|
</h1>
|
|
<h2 css={STYLES_FOREGROUND_H2}>
|
|
Slate is the first decentralized storage system made for everyone. You can store any form of information on Slate.
|
|
</h2>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section css={STYLES_SECTION_FOREGROUND}>
|
|
<h1>Making a Slate</h1>
|
|
<h2>Slates give you rich previews and different layouts to view your files.</h2>
|
|
<div css={STYLES_VIEWS_TEXT} >
|
|
<TextLoop interval={3200}>
|
|
<span>Create moodboards</span>
|
|
<span>Organize research</span>
|
|
<span>Share presentations</span>
|
|
<span>Create a Blog</span>
|
|
<span>URL</span>
|
|
</TextLoop>
|
|
</div>
|
|
<div css={STYLES_VIEWS_IMAGES}>
|
|
<Fade
|
|
arrows={false}
|
|
duration={2400}
|
|
transitionDuration={800}
|
|
pauseOnHover={true}
|
|
>
|
|
<div className="each-fade" >
|
|
<img src={viewsImages[0]} />
|
|
</div>
|
|
<div className="each-fade" >
|
|
<img src={viewsImages[1]} />
|
|
</div>
|
|
<div className="each-fade" >
|
|
<img src={viewsImages[2]}/>
|
|
</div>
|
|
<div className="each-fade" >
|
|
<img src={viewsImages[3]}/>
|
|
</div>
|
|
</Fade>
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_WHITE}>
|
|
<h1>Share with</h1>
|
|
<h2>Words about things</h2>
|
|
<div css={STYLES_VIEWS_IMAGES}>
|
|
<img src="/static/media/slate-share.gif" alt="" />
|
|
</div>
|
|
</section>
|
|
|
|
<section css={STYLES_SECTION_FOREGROUND}>
|
|
<h1>Open Source</h1>
|
|
<h2 css={STYLES_SECTION_TEXT}>"Collaboration makes better software". <br/><br/>Pair that with Filecoin's transparent marketplace as Slates's foundation. And you got yourself real nice power couple right there.</h2>
|
|
<div css={STYLES_SECTION_SVG_CONTAINER}>
|
|
<svg viewBox="-15 125 750 750" width="800" height="800">
|
|
<path css={STYLES_SVG_AN} stroke="#b2b2b2" fill="none" strokeWidth="3" strokeDasharray="1 1" pathLength="1"
|
|
d="m 398.40437,595.27818 c 40.32082,-14.97419 61.36968,-43.81349 61.36968,-93.44762 0,-49.63413 -41.82527,-93.37059 -94.0866,-93.45552 -55.14896,-0.0896 -96.75182,43.64 -96.0866,93.45552 0.66523,49.81551 24.42164,82.95509 62.44642,94.93898 L 264.68924,762.47972 C 174.536,739.14196 82.84508,632.78774 82.84508,501.83056 c 0,-155.10914 124.63284,-280.84993 280.84238,-280.84993 156.20954,0 282.84239,125.74079 282.84239,280.84993 0,132.99462 -90.82075,237.8649 -182.89748,261.11527 z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div css={STYLES_CONTR_CONTAINER}>
|
|
<ul css={STYLES_CONTR_LIST}>
|
|
<li css={STYLES_CONTR_LI0}>Jimmylee<br/>github.com/jimmylee</li>
|
|
<li css={STYLES_CONTR_LI1}>Martinalong<br/>github.com/martinalong</li>
|
|
<li css={STYLES_CONTR_LI2}>William Felker<br/>github.com/gndclouds</li>
|
|
<li css={STYLES_CONTR_LI3}>Uonai<br/>github.com/uonai</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<WebsitePrototypeFooter />
|
|
</div>
|
|
</WebsitePrototypeWrapper>
|
|
);
|
|
}
|
|
} |