2020-07-09 06:19:08 +03:00
import * as React from "react" ;
2020-07-16 08:48:51 +03:00
import * as Constants from "~/common/constants" ;
2021-11-18 01:04:17 +03:00
import * as SVGLogo from "~/common/logo" ;
import * as SVG from "~/common/svg" ;
import * as System from "~/components/system" ;
2021-12-06 15:20:29 +03:00
import * as Validations from "~/common/validations" ;
import * as Strings from "~/common/strings" ;
2020-07-09 06:19:08 +03:00
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper" ;
2021-11-18 01:04:17 +03:00
import WebsiteHeader from "~/components/core/WebsiteHeader" ;
import WebsiteFooter from "~/components/core/WebsiteFooter" ;
2020-09-11 09:23:28 +03:00
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react" ;
2021-12-06 15:20:29 +03:00
import { useForm } from "~/common/hooks" ;
import { motion , AnimateSharedLayout } from "framer-motion" ;
2022-02-07 14:35:36 +03:00
import { AuthField } from "~/components/core/Auth/components" ;
2020-09-11 09:23:28 +03:00
2021-11-18 01:04:17 +03:00
const INTEGRATION = [
2020-09-11 09:23:28 +03:00
{
2021-11-18 01:04:17 +03:00
title : "Chrome" ,
body : "Connect to your browser history and bookmarks." ,
2022-01-25 06:10:58 +03:00
logo :
"https://slate.textile.io/ipfs/bafkreiamdcnqxcga7dj4fur7nqd57pbey7s6znnj4o2zpbkmsydp6rspdy" ,
2020-09-11 09:23:28 +03:00
} ,
{
2021-11-18 01:04:17 +03:00
title : "Twitter" ,
body : "Search your twitter bookmarks." ,
2022-01-25 06:10:58 +03:00
logo :
"https://slate.textile.io/ipfs/bafkreihtujowfnffw5jxvdo7gqazo4oy3q3q4u4z2jflx5ygmpaj7pgtnu" ,
2020-09-11 09:23:28 +03:00
} ,
{
2021-11-18 01:04:17 +03:00
title : "MetaMask" ,
body : "Keep all of your NFTs in one place." ,
2022-01-25 06:10:58 +03:00
logo :
"https://slate.textile.io/ipfs/bafkreiecbn5pjuebdelsehul6sqmxs5kk74mijmo6ybts3hfg5tr2p4rti" ,
2021-11-18 01:04:17 +03:00
} ,
{
title : "And more later" ,
last : true ,
} ,
] ;
const FAQ = [
{
2022-01-26 07:21:25 +03:00
title : "What makes Slate different from other bookmarking / storage tools?" ,
2022-01-25 06:10:58 +03:00
text :
"Slate is designed to automatically save and organize things for you to help you remember things and explore things you care about in an entirely new way." ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
title : "Is my data safe / private?" ,
text :
"Short answer — yes. We use all the industry standards to protect your data and ensure that you have complete control over who is able to see anything in your account. We do not sell and never will sell your data to any third-party." ,
2021-11-18 01:04:17 +03:00
} ,
{
title : "How much does Slate cost?" ,
2022-01-25 06:10:58 +03:00
text :
"Slate is free for everyone to use. We plan on adding premium tools and functionality to enhance your internet experience some time in 2022. " ,
2021-11-18 01:04:17 +03:00
} ,
] ;
const BANNER = [
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/tara/neon-genesis-evangelion?cid=bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi" ,
2021-11-18 01:04:17 +03:00
name : "@tara" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/biodivlibrary/the-mushroom-book?cid=bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a" ,
2021-11-18 01:04:17 +03:00
name : "@biodivlibrary" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/jin/cryptovoxels-history?cid=bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu" ,
2021-11-18 01:04:17 +03:00
name : "@jin" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/ng/numero?cid=bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou" ,
2021-11-18 01:04:17 +03:00
name : "@ng" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/thesimpsons/clips?cid=bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34" ,
2021-11-18 01:04:17 +03:00
name : "@thesimpsons" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/bitgraves/september?cid=bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti" ,
2021-11-18 01:04:17 +03:00
name : "@bitgraves" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/nypl/japan-kimbei-kusakabe?cid=bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm" ,
2021-11-18 01:04:17 +03:00
name : "@nypl" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/atlas/cartography?cid=bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa" ,
2021-11-18 01:04:17 +03:00
name : "@atlas" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/museosabiertos/palais-de-glace-fotografia?cid=bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki" ,
2021-11-18 01:04:17 +03:00
name : "@museosabiertos" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/gndclouds/animation?cid=bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4" ,
2021-11-18 01:04:17 +03:00
name : "@gndclouds" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/cindy/sw-sans?cid=bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e" ,
2021-11-18 01:04:17 +03:00
name : "@cindy" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/haris/archive?cid=bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi" ,
2021-11-18 01:04:17 +03:00
name : "@haris" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/guji/%E5%8C%97%E4%BA%AC%E7%9A%87%E5%9F%8E%E5%BB%BA%E7%AD%91%E8%A3%85%E9%A5%B0?cid=bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly" ,
2021-11-18 01:04:17 +03:00
name : "@guji" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly" ,
2021-11-18 01:04:17 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
link :
"https://slate.host/martina/reaction-gifs?cid=bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki" ,
2021-11-18 01:04:17 +03:00
name : "@martina" ,
2022-01-25 06:10:58 +03:00
img :
"https://slate.textile.io/ipfs/bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki" ,
2021-11-18 01:04:17 +03:00
} ,
] ;
const OBJECTPREVIEWS = [
{
2022-01-25 06:10:58 +03:00
title : "Nils Frahm - Old Friends New Friends" ,
link : (
< img
style = { { height : 12 , marginRight : 4 } }
src = "https://slate.textile.io/ipfs/bafkreig6vbqgunqmja4vt6rrpojbtf24dnkgt2lxcvpl4x7gtnn7rqbp4a"
/ >
) ,
type : "Soundcloud" ,
2020-10-07 23:54:53 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafkreic5z2j6kz4qn4zgcv2wakvgok7bgn2tdsrirrcbmcngbty3m4n7fi" ,
URL :
"https://slate.host/slate/objects?cid=bafybeicdrezbs4xtdgwmhef52fwu5dkw2bv3m6sbfbd7wikleszezufeci" ,
2020-09-11 09:23:28 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
title : "zancan - Lushtemples" ,
link : (
< img
style = { { height : 12 , marginRight : 4 } }
src = "https://slate.textile.io/ipfs/bafkreiayzflrhnmknrbe6w6fyp6anepb2sdik23g7zid4gadmtpjizpnuu"
/ >
) ,
type : "hicetnunc.art" ,
2021-11-18 01:04:17 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafkreia7ir22cbomueh6amuypurqyggqnxsbdirapljxgeoju7m656cvve" ,
URL :
"https://slate.host/slate/objects?cid=bafybeig5mukv6kzfcwphudok6wksjxkglfb2akvt3yzhnqcooj2juwegiu" ,
2020-09-11 09:23:28 +03:00
} ,
{
2021-11-18 01:04:17 +03:00
title : "OP-Z Synthesizer" ,
2022-01-25 06:10:58 +03:00
link : < SVG . Link height = { 12 } style = { { marginRight : 4 } } / > ,
type : "JPEG" ,
2020-10-07 23:54:53 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafkreiagkyoslopcxar5pt4vum4ngkbqnqzspa4kbeyltlxpsh7a6xb3mm" ,
URL :
"https://slate.host/slate/objects?cid=bafybeiaaqrbqdgytuk362qe7oezw5vvkue5yhmp5oxdxw76clvnvp7w2yu" ,
2020-09-11 09:23:28 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
title : "Hermann Hesse - Demian" ,
link : < SVG . Link height = { 12 } style = { { marginRight : 4 } } / > ,
type : "PDF" ,
2020-10-07 23:54:53 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafkreierp2ddmptriabymjse2mu772hftl7zrl63akbthl42cl6yvsiddu" ,
URL :
"https://slate.host/slate/objects?cid=bafybeietqtoktbmkxlsfrhhcdodbjd7bixkjvrxxxjsy6s7tdqwuicxhw4" ,
2020-09-11 09:23:28 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
title : "ASMR prime numbers" ,
link : (
< img
style = { { height : 12 , marginRight : 4 } }
src = "https://slate.textile.io/ipfs/bafkreieb7zmiss2rlnlhhkwbgxlc7szmzsq3yars7ujjflhwq6it2low5m"
/ >
) ,
type : "Youtube" ,
2020-10-07 23:54:53 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafkreiaars3ztdupanomdsy2o3ok6xr6gcjmwc2situnquggiz5x2xokgy" ,
URL :
"https://slate.host/slate/objects?cid=bafybeigaet3w3yvpchwup33tr3oyhpu3ckjnrbqq7a7kxoqwp3drzxsmvm" ,
2020-09-11 09:23:28 +03:00
} ,
{
2022-01-25 06:10:58 +03:00
title : "r/dostoevsky - Fyodor Dostoevsky" ,
link : (
< img
style = { { height : 12 , marginRight : 4 } }
src = "https://slate.textile.io/ipfs/bafkreigmnfr6bnermvxegkrfg2lfy7pzifopbtnttql4jn2j33vzopw4e4"
/ >
) ,
type : "Reddit" ,
2020-10-07 23:54:53 +03:00
preview :
2022-01-25 06:10:58 +03:00
"https://slate.textile.io/ipfs/bafybeiafyuacznehtudad5hxzhbri4snjucrsnna2nzjifocebazy6xkt4" ,
URL :
"https://slate.host/slate/objects?cid=bafybeidmxr5vebmqthxsxdy7w5laxb45y6rdg27vjhf5pauu2iyjng7b6e" ,
2020-09-14 03:48:47 +03:00
} ,
2020-09-11 09:23:28 +03:00
] ;
2020-07-16 08:48:51 +03:00
const STYLES _ROOT = css `
2020-10-06 22:16:21 +03:00
width : 100 % ;
2021-11-18 01:04:17 +03:00
height : 100 % ;
overflow : hidden ;
min - height : 100 vh ;
background - color : $ { Constants . semantic . bgLight } ;
color : $ { Constants . semantic . textGrayDark } ;
2020-09-06 23:26:08 +03:00
` ;
2020-10-06 22:16:21 +03:00
const STYLES _CONTAINER = css `
2021-11-18 01:04:17 +03:00
max - width : 1080 px ;
2020-10-06 22:16:21 +03:00
margin : 0 auto ;
2022-01-25 06:10:58 +03:00
padding : 80 px 24 px ;
2020-09-06 23:26:08 +03:00
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
max - width : 480 px ;
padding : 96 px 16 px ;
2020-09-06 23:26:08 +03:00
}
` ;
2021-11-18 01:04:17 +03:00
const STYLES _CONTAINER _FLEX = css `
$ { STYLES _CONTAINER } ;
display : flex ;
align - items : center ;
justify - content : space - between ;
2020-09-06 23:26:08 +03:00
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
display : block ;
2020-09-06 23:26:08 +03:00
}
` ;
2021-11-18 01:04:17 +03:00
const STYLES _HERO _TEXT = css `
display : flex ;
2022-01-25 06:10:58 +03:00
flex - direction : column ;
2021-11-18 01:04:17 +03:00
align - items : center ;
2022-01-25 06:10:58 +03:00
text - align : left ;
max - width : 640 px ;
margin : 0 auto ;
2020-09-06 23:26:08 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _TEXT = css `
max - width : calc ( 50 % - 24 px ) ;
margin : 48 px 0 ;
2020-09-06 23:26:08 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2021-11-18 01:04:17 +03:00
max - width : 100 % ;
2020-09-06 23:26:08 +03:00
}
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
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 : 84 px ;
line - height : 88 px ;
letter - spacing : - 0.05 em ;
2022-01-25 06:10:58 +03:00
text - align : center ;
2020-09-06 23:26:08 +03:00
2020-10-06 22:16:21 +03:00
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
2021-11-18 01:04:17 +03:00
font - size : 64 px ;
line - height : 68 px ;
letter - spacing : - 0.04 em ;
2020-09-06 23:26:08 +03:00
}
2020-09-07 00:50:28 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2021-11-18 01:04:17 +03:00
font - size : 48 px ;
line - height : 52 px ;
letter - spacing : - 0.04 em ;
2020-09-07 00:50:28 +03:00
}
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _HEADING2 = css `
$ { STYLES _HEADING } ;
font - size : 56 px ;
line - height : 64 px ;
letter - spacing : - 0.035 em ;
margin - bottom : 30 px ;
2020-09-06 23:26:08 +03:00
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
2021-11-18 01:04:17 +03:00
font - size : 48 px ;
line - height : 56 px ;
2020-09-06 23:26:08 +03:00
}
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2021-11-18 01:04:17 +03:00
font - size : 40 px ;
line - height : 48 px ;
margin - bottom : 32 px ;
2020-09-10 09:10:57 +03:00
}
` ;
2021-11-18 01:04:17 +03:00
const STYLES _HEADING3 = css `
$ { STYLES _HEADING } ;
2020-10-06 22:16:21 +03:00
font - family : $ { Constants . font . medium } ;
2021-11-18 01:04:17 +03:00
font - size : 20 px ;
line - height : 28 px ;
letter - spacing : - 0.02 em ;
margin - bottom : 16 px ;
2020-09-10 09:10:57 +03:00
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
font - size : 18 px ;
line - height : 28 px ;
2020-09-06 23:26:08 +03:00
}
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _BODY1 = css `
2022-01-25 06:10:58 +03:00
font - family : $ { Constants . font . medium } ;
2021-11-18 01:04:17 +03:00
font - size : 24 px ;
line - height : 36 px ;
letter - spacing : - 0.02 em ;
margin - bottom : 16 px ;
2022-01-25 06:10:58 +03:00
text - align : center ;
width : 100 % ;
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
font - size : 20 px ;
line - height : 28 px ;
margin - bottom : 20 px ;
}
` ;
const STYLES _BODY2 = css `
font - family : $ { Constants . font . text } ;
font - size : 18 px ;
line - height : 28 px ;
letter - spacing : - 0.01 em ;
max - width : 100 % ;
` ;
const STYLES _BODY3 = css `
2020-10-06 22:16:21 +03:00
font - family : $ { Constants . font . medium } ;
2021-11-18 01:04:17 +03:00
font - size : 12 px ;
line - height : 20 px ;
letter - spacing : - 0.006 em ;
` ;
const STYLES _IMG = css `
max - width : 100 % ;
overflow : hidden ;
box - shadow : 0 px 10.8725 px 57.9866 px rgba ( 174 , 176 , 178 , 0.3 ) ;
max - width : calc ( 50 % - 24 px ) ;
2020-09-06 23:26:08 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _IMG _HERO = css `
$ { STYLES _IMG } ;
max - width : 150 % ;
border : 12 px solid $ { Constants . semantic . textBlack } ;
border - radius : 40 px ;
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
border : 8 px solid $ { Constants . semantic . textBlack } ;
border - radius : 24 px ;
}
2020-07-16 08:48:51 +03:00
` ;
2021-11-18 01:04:17 +03:00
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 : 14 px ;
line - height : 20 px ;
letter - spacing : - 0.006 px ;
cursor : pointer ;
2020-09-06 23:26:08 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _PRIMARY = css `
$ { STYLES _BUTTON } ;
color : $ { Constants . semantic . textWhite } ;
background - color : $ { Constants . system . blue } ;
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _PRIMARY _BIG = css `
$ { STYLES _BUTTON _PRIMARY } ;
2022-01-25 06:10:58 +03:00
padding : 14 px 32 px ;
2021-11-18 01:04:17 +03:00
border - radius : 20 px ;
font - size : 16 px ;
line - height : 24 px ;
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _PRIMARY _BIG _HERO = css `
$ { STYLES _BUTTON _PRIMARY _BIG } ;
2022-01-25 06:10:58 +03:00
margin : 0 auto 48 px auto ;
2020-08-03 06:22:47 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _PRIMARY _SMALL = css `
$ { STYLES _BUTTON _PRIMARY } ;
padding : 1 px 12 px 3 px ;
border - radius : 8 px ;
` ;
2020-09-06 23:26:08 +03:00
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _SECONDARY = css `
$ { STYLES _BUTTON } ;
color : $ { Constants . semantic . textBlack } ;
background - color : $ { Constants . semantic . bgGrayLight } ;
2020-07-16 08:48:51 +03:00
` ;
2020-04-09 00:29:13 +03:00
2021-11-18 01:04:17 +03:00
const STYLES _BUTTON _SECONDARY _SMALL = css `
$ { STYLES _BUTTON _SECONDARY } ;
padding : 1 px 12 px 3 px ;
border - radius : 8 px ;
` ;
const STYLES _CARD _GROUP = css `
display : flex ;
justify - content : space - between ;
flex - wrap : wrap ;
2020-10-08 03:45:09 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
display : block ;
}
` ;
2021-11-18 01:04:17 +03:00
const STYLES _CARD = css `
background - color : $ { Constants . semantic . bgWhite } ;
border - radius : 24 px ;
padding : 21 px 20 px 20 px ;
width : calc ( 33.3 % - 16 px ) ;
2020-09-06 23:26:08 +03:00
display : flex ;
2021-11-18 01:04:17 +03:00
flex - direction : column ;
justify - content : space - between ;
align - items : flex - start ;
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
width : 100 % ;
margin - bottom : 16 px ;
}
2020-09-06 23:26:08 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _CURSOR _BLINK = css `
display : inline - block ;
background - color : $ { Constants . semantic . textGrayLight } ;
width : 37 px ;
height : 61 px ;
margin - left : 6 px ;
overflow : hidden ;
animation : blink - animation 1 s steps ( 5 , start ) infinite ;
- webkit - animation : blink - animation 1 s steps ( 5 , start ) infinite ;
@ keyframes blink - animation {
to {
visibility : hidden ;
}
}
@ - webkit - keyframes blink - animation {
to {
visibility : hidden ;
}
}
2020-09-11 09:23:28 +03:00
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
width : 28.5 px ;
height : 47 px ;
margin - left : 4 px ;
2020-09-06 23:26:08 +03:00
}
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2021-11-18 01:04:17 +03:00
width : 21 px ;
height : 35 px ;
margin - left : 2 px ;
2021-12-06 15:20:29 +03:00
}
2021-11-18 01:04:17 +03:00
` ;
const STYLES _CURSOR _BLINK _SMALL = css `
$ { STYLES _CURSOR _BLINK }
width : 25 px ;
height : 41 px ;
margin - left : 3 px ;
@ media ( max - width : $ { Constants . sizes . tablet } px ) {
width : 21 px ;
height : 35 px ;
margin - left : 2 px ;
2020-09-06 23:26:08 +03:00
}
2021-11-18 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
width : 17.5 px ;
height : 29 px ;
margin - left : 2 px ;
2021-12-06 15:20:29 +03:00
}
2020-09-06 23:26:08 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _ROTATING _BANNER = css `
background - color : $ { Constants . semantic . bgDark } ;
width : 100 % ;
overflow : hidden ;
padding : 48 px 0 36 px 0 ;
` ;
const STYLES _BANNER _ANIMATION = css `
display : flex ;
position : relative ;
align - items : center ;
animation : moving 240 s linear infinite ;
- webkit - animation : moving 240 s linear infinite ;
@ keyframes moving {
0 % {
transform : translateX ( 0 px ) ;
}
100 % {
transform : translateX ( - 90 % ) ;
}
}
@ - webkit - keyframes moving {
0 % {
transform : translateX ( 0 px ) ;
}
100 % {
transform : translateX ( - 90 % ) ;
}
}
` ;
const STYLES _BANNER _GROUP = css `
display : flex ;
align - items : center ;
` ;
const STYLES _BANNER _IMG = css `
max - width : 200 px ;
max - height : 200 px ;
box - shadow : $ { Constants . shadow . lightMedium } ;
` ;
const STYLES _BANNER _ITEM = css `
2020-10-06 22:16:21 +03:00
text - decoration : none ;
2021-11-18 01:04:17 +03:00
color : $ { Constants . semantic . textGrayLight } ;
margin - left : 88 px ;
cursor : pointer ;
2020-10-06 22:16:21 +03:00
` ;
2021-11-18 01:04:17 +03:00
const STYLES _AUTH _MODAL = css `
2020-09-06 23:26:08 +03:00
display : flex ;
2021-11-18 01:04:17 +03:00
flex - direction : column ;
align - items : flex - start ;
padding : 36 px 32 px ;
background : linear - gradient ( 180 deg , # ffffff 0 % , # f7f8f9 100 % ) ;
border - radius : 20 px ;
max - width : 480 px ;
margin : 0 auto ;
2020-09-06 23:26:08 +03:00
width : 100 % ;
` ;
2021-11-18 01:04:17 +03:00
const STYLES _DIVIDER = css `
height : 1 px ;
width : 64 px ;
background - color : $ { Constants . semantic . textGray } ;
margin : 32 px auto ;
` ;
const STYLES _ROADMAP = css `
display : flex ;
flex - direction : column ;
max - width : calc ( 50 % - 24 px ) ;
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
max - width : 100 % ;
2021-12-06 15:20:29 +03:00
}
2021-11-18 01:04:17 +03:00
` ;
const STYLES _TOOL _ICON = css `
display : flex ;
flex - direction : row ;
align - items : flex - start ;
padding : 12 px ;
background - color : $ { Constants . semantic . bgGrayLight } ;
border - radius : 12 px ;
height : 56 px ;
width : 56 px ;
margin - right : 20 px ;
margin - bottom : 16 px ;
` ;
const STYLES _TOOL = css `
display : flex ;
width : 100 % ;
` ;
const STYLES _CONNECT _LINE = css `
background - color : $ { Constants . semantic . bgGrayLight4 } ;
height : 48 px ;
width : 2 px ;
margin : 0 0 16 px 27 px ;
` ;
const STYLES _CONNECT _BAR = css `
width : 16 px ;
height : 6 px ;
background - color : $ { Constants . semantic . textBlack } ;
display : inline - flex ;
margin : 0 - 4 px ;
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2021-12-06 15:20:29 +03:00
height : 5 px ;
}
2021-11-18 01:04:17 +03:00
` ;
const STYLES _WRAPPER = css `
position : relative ;
background - color : $ { Constants . semantic . bgLight } ;
border - radius : 16 px ;
overflow : hidden ;
cursor : pointer ;
width : 100 % ;
border : 1 px solid $ { Constants . semantic . borderGrayLight } ;
color : $ { Constants . semantic . textBlack } ;
text - decoration : none ;
: hover {
box - shadow : $ { Constants . shadow . card } ;
transform : translateY ( - 4 px ) ;
transition : transform 0.2 s ease - in - out ;
}
` ;
const STYLES _INNER _WRAPPER = css `
display : block ;
padding - top : 100 % ;
` ;
const STYLES _DESCRIPTION = css `
position : absolute ;
bottom : 0 ;
border - radius : 0 px 0 px 16 px 16 px ;
box - sizing : border - box ;
width : 100 % ;
background - color : $ { Constants . semantic . bgWhite } ;
padding : 9 px 16 px 10 px ;
font - family : $ { Constants . font . medium } ;
font - size : 14 px ;
line - height : 20 px ;
letter - spacing : - 0.006 px ;
2022-01-25 06:10:58 +03:00
white - space : nowrap ;
overflow : hidden ;
text - overflow : ellipsis ;
2021-11-18 01:04:17 +03:00
` ;
const STYLES _PREVIEW = css `
position : absolute ;
top : 0 ;
object - fit : cover ;
width : 100 % ;
height : calc ( 100 % - 58 px ) ;
background - color : $ { Constants . semantic . bgWhite } ;
border - bottom : 1 px solid $ { Constants . semantic . borderGrayLight } ;
` ;
const STYLES _TYPE = css `
display : flex ;
padding - top : 3 px ;
color : $ { Constants . semantic . textGray } ;
2020-10-06 22:16:21 +03:00
font - family : $ { Constants . font . text } ;
2021-11-18 01:04:17 +03:00
font - size : 12 px ;
line - height : 16 px ;
align - items : center ;
` ;
2020-09-06 23:26:08 +03:00
2021-11-18 01:04:17 +03:00
const STYLES _OBJECT _GROUP = css `
display : grid ;
width : calc ( 50 % - 24 px ) ;
grid - template - columns : repeat ( 2 , 1 fr ) ;
gap : 16 px ;
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
width : 100 % ;
}
` ;
const STYLES _FEATURE _CARD = css `
width : calc ( 50 % - 12 px ) ;
max - height : 400 px ;
background : $ { Constants . semantic . bgGrayLight } ;
border - radius : 24 px ;
overflow : hidden ;
margin - bottom : 16 px ;
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
width : 100 % ;
max - height : 372 px ;
2020-09-06 23:26:08 +03:00
}
` ;
2021-11-18 01:04:17 +03:00
const STYLES _ICON _BUTTON = css `
width : 32 px ;
height : 32 px ;
display : inline - flex ;
margin - right : 8 px ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
2022-01-25 06:10:58 +03:00
background - color : $ { Constants . semantic . bgWhite } ;
2021-11-18 01:04:17 +03:00
border : 1 px solid $ { Constants . semantic . borderGrayLight4 } ;
box - shadow : 0 px 4 px 16 px $ { Constants . shadow . lightSmall } ;
border - radius : 8 px ;
` ;
const STYLES _FEATURE _DESCRIPTION = css `
padding : 21 px 20 px 19 px ;
` ;
const STYLES _FEATURE _IMG = css `
display : block ;
margin : 0 20 px ;
width : calc ( 100 % - 40 px ) ;
border : $ { Constants . semantic . borderGrayLight4 } ;
border - radius : 16 px ;
box - shadow : $ { Constants . shadow . darkMedium } ;
` ;
const ObjectPreview = ( props ) => {
2020-09-11 09:23:28 +03:00
return (
2021-11-18 01:04:17 +03:00
< a css = { STYLES _WRAPPER } href = { props . URL } >
< div css = { STYLES _INNER _WRAPPER } >
< img css = { STYLES _PREVIEW } src = { props . preview } / >
< div css = { STYLES _DESCRIPTION } >
{ props . title }
< div css = { STYLES _TYPE } >
{ props . link }
{ props . type }
< / d i v >
< / d i v >
< / d i v >
< / a >
) ;
} ;
const Integration = ( props ) => {
return (
< div style = { { width : "100%" } } >
< div css = { STYLES _TOOL } >
{ props . logo ? (
< img css = { STYLES _TOOL _ICON } src = { props . logo } / >
) : (
< div css = { STYLES _TOOL _ICON } / >
) }
< div >
2022-01-25 06:10:58 +03:00
< div css = { STYLES _HEADING3 } style = { { marginBottom : 4 } } >
2021-11-18 01:04:17 +03:00
{ props . title } { " " }
< / d i v >
< div css = { STYLES _BODY2 } style = { { color : Constants . semantic . textGrayDark } } >
{ props . body }
2020-09-11 09:23:28 +03:00
< / d i v >
2020-10-06 22:16:21 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
< / d i v >
{ ! props . last && < div css = { STYLES _CONNECT _LINE } / > }
2020-09-11 09:23:28 +03:00
< / d i v >
) ;
} ;
2021-11-18 01:04:17 +03:00
const Card = ( props ) => {
return (
< div css = { STYLES _CARD } style = { props . style } >
< div styles = { { height : "100%" } } >
{ ! ! props . logo ? props . logo : < div css = { STYLES _HEADING3 } > { props . title } < / d i v > }
< div css = { STYLES _BODY2 } > { props . text } < / d i v >
< / d i v >
{ props . action && (
< a
css = { STYLES _BUTTON _SECONDARY _SMALL }
style = { { marginTop : 24 } }
href = { props . link }
target = "_blank"
>
{ props . action }
< / a >
) }
< / d i v >
) ;
} ;
const Banner = ( props ) => {
return (
< a css = { STYLES _BANNER _ITEM } href = { props . link } >
< img css = { STYLES _BANNER _IMG } src = { props . img } / >
< div css = { STYLES _BODY3 } > { props . name } < / d i v >
< / a >
) ;
} ;
2021-12-06 15:20:29 +03:00
export default function IndexPage ( ) {
const title = ` Slate ` ;
const description = "Your personal search engine" ;
const url = "https://slate.host/" ;
const image =
2022-01-25 07:38:46 +03:00
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4" ;
2022-01-25 06:10:58 +03:00
const signInURL = "/_/auth" ;
2022-01-25 22:05:50 +03:00
const discordURL = "https://discord.gg/NRsUjpCypr" ;
2021-12-06 15:20:29 +03:00
const {
getFieldProps : getSignupFielProps ,
getFormProps : getSigninFormProps ,
isSubmitting : isCheckingSignupEmail ,
} = useForm ( {
validateOnBlur : false ,
initialValues : { email : "" } ,
validate : ( { email } , errors ) => {
if ( Strings . isEmpty ( email ) ) errors . email = "Please provide an email" ;
else if ( ! Validations . email ( email ) ) errors . email = "Invalid email address" ;
return errors ;
} ,
onSubmit : async ( { email } ) => {
2022-01-27 17:01:36 +03:00
window . open ( ` /_/auth?tab=signup&email= ${ encodeURIComponent ( email ) } ` , "_self" ) ;
2021-12-06 15:20:29 +03:00
} ,
} ) ;
return (
< WebsitePrototypeWrapper title = { title } description = { description } url = { url } image = { image } >
< WebsiteHeader / >
< div css = { STYLES _ROOT } >
< div css = { STYLES _CONTAINER } >
< div css = { STYLES _HERO _TEXT } >
2022-01-25 06:10:58 +03:00
< div css = { STYLES _HEADING1 } > Your personal < / d i v >
< div
css = { STYLES _HEADING1 }
style = { { color : Constants . semantic . textGray , marginBottom : 24 } }
>
search
< span css = { STYLES _CURSOR _BLINK } / >
< span style = { { color : Constants . semantic . textBlack } } > engine < / s p a n >
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _BODY1 } >
2022-01-25 06:10:58 +03:00
Slate is a search tool designed to help you remember and keep track of things you care
about on the web .
2021-11-18 01:04:17 +03:00
< / d i v >
2022-01-25 06:10:58 +03:00
< a css = { STYLES _BUTTON _PRIMARY _BIG _HERO } href = { signInURL } >
Get started
< / a >
2021-12-06 15:20:29 +03:00
< / d i v >
< img
css = { STYLES _IMG _HERO }
2022-01-25 06:10:58 +03:00
src = "https://slate.textile.io/ipfs/bafybeiczylx6qu7kwdpy6ydejki6c2cwrniyvzye2gkjxgknm2czkkf7hy"
2021-12-06 15:20:29 +03:00
/ >
< / d i v >
2021-11-18 01:04:17 +03:00
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER _FLEX } >
< div css = { STYLES _OBJECT _GROUP } style = { { marginRight : 48 } } >
{ OBJECTPREVIEWS . map ( ( each ) => (
< ObjectPreview
title = { each . title }
preview = { each . preview }
type = { each . type }
link = { each . link }
URL = { each . URL }
/ >
) ) }
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _TEXT } >
2022-01-25 06:10:58 +03:00
< div css = { STYLES _HEADING2 } > A single place to save all your things < / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _BODY2 } >
2022-01-25 06:10:58 +03:00
Save anything from the web directly to Slate without worrying about how or where to
save it .
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2021-12-06 15:20:29 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER } >
< div css = { STYLES _TEXT } >
< div css = { STYLES _HEADING2 } >
2022-01-25 06:10:58 +03:00
Get back to things instantly with global { " " }
< span style = { { color : Constants . semantic . textGray } } > search < / s p a n >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CURSOR _BLINK _SMALL } / >
2020-09-11 09:23:28 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _BODY2 } >
2022-01-25 06:10:58 +03:00
Find things fast with integrated search available to you anywhere in the browser .
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER _FLEX } style = { { padding : 0 } } >
< div css = { STYLES _FEATURE _CARD } >
< div css = { STYLES _FEATURE _DESCRIPTION } >
< div css = { STYLES _HEADING3 } >
2022-01-25 06:10:58 +03:00
Use the Slate browser extension to search and save from anywhere .
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _ICON _BUTTON } > ⌥ < / d i v >
< div css = { STYLES _ICON _BUTTON } > S < / d i v >
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { width : "90%" , margin : "20% 24px" , border : "6px solid #000000" } }
2021-12-06 15:20:29 +03:00
src = "https://slate.textile.io/ipfs/bafybeihsrxgjk5ax4wzbnfnq2kyg4djylrvpsbzrhitvnmcjixupbk5qjm"
/ >
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { width : "70%" , margin : "-95% auto 48px auto" } }
src = "https://slate.textile.io/ipfs/bafkreievp6angjfzf5awdnqeog4rr73ukz24xnlpdmajfdp2lfstzlkr24"
2021-12-06 15:20:29 +03:00
/ >
< / d i v >
< div css = { STYLES _FEATURE _CARD } >
< div css = { STYLES _FEATURE _DESCRIPTION } >
< div css = { STYLES _HEADING3 } >
2022-01-26 07:21:25 +03:00
Use tags and keywords to search across all of your links and files .
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div style = { { height : 32 } } > < / d i v >
2020-10-06 22:16:21 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { margin : "0 0 0 20px" , width : "120%" } }
src = "https://slate.textile.io/ipfs/bafkreidllwo5j6uyx75alz5amuhrrs5uylw3slgowofy2rx7yn4rttakiq"
2021-12-06 15:20:29 +03:00
/ >
2020-09-10 23:48:28 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER _FLEX } >
< div css = { STYLES _ROADMAP } style = { { marginRight : 48 } } >
< div
css = { STYLES _BUTTON _PRIMARY _SMALL }
style = { {
backgroundColor : Constants . system . orange ,
marginBottom : 16 ,
alignSelf : "flex-start" ,
cursor : "default" ,
} }
>
Coming soon
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
{ INTEGRATION . map ( ( each ) => (
< Integration title = { each . title } body = { each . body } logo = { each . logo } last = { each . last } / >
) ) }
< / d i v >
< div css = { STYLES _TEXT } >
< div css = { STYLES _HEADING2 } >
Con
< div css = { STYLES _CONNECT _BAR } / >
nect with < br / >
your favorite tools
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _BODY2 } >
2022-01-26 07:21:25 +03:00
Starting with your browser , Slate integrates seamlessly with all the places you save
and bookmark things to make them searchable to you in one place .
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2021-12-06 15:20:29 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER } >
< div css = { STYLES _TEXT } >
2022-01-25 06:10:58 +03:00
< div css = { STYLES _HEADING2 } > Organize and share however you like < / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _BODY2 } >
2022-01-25 06:10:58 +03:00
Add tags to create relationships and connections to help you remember things . Create
channels to share things publicly on the web .
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER _FLEX } style = { { padding : 0 } } >
< div css = { STYLES _FEATURE _CARD } >
< div css = { STYLES _FEATURE _DESCRIPTION } >
< div css = { STYLES _HEADING3 } >
2022-01-25 06:10:58 +03:00
Use tags to help you organize your things on the fly .
2021-12-06 15:20:29 +03:00
< / d i v >
< div css = { STYLES _ICON _BUTTON } > # < / d i v >
< / d i v >
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { width : "90%" , margin : "20% 24px" , border : "6px solid #000000" } }
2021-12-06 15:20:29 +03:00
src = "https://slate.textile.io/ipfs/bafybeia7eclwk2zk6jv2agfwjj4fs57yhxz7vgwchaa6w34wf7xwohq7ky"
/ >
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { width : "70%" , margin : "-100% auto 48px auto" } }
src = "https://slate.textile.io/ipfs/bafkreiaopgorx45iriyjzl2fcdygt3fma2s47m6z7vi323pbpdmhx3m64u"
2021-12-06 15:20:29 +03:00
/ >
2021-11-18 01:04:17 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _FEATURE _CARD } >
< div css = { STYLES _FEATURE _DESCRIPTION } >
< div css = { STYLES _HEADING3 } >
2022-01-25 06:10:58 +03:00
Create channels to share collections , topics or archives of things publicly on the
web .
2021-12-06 15:20:29 +03:00
< / d i v >
< div style = { { height : 32 } } > < / d i v >
< / d i v >
< img
css = { STYLES _FEATURE _IMG }
2022-01-25 06:10:58 +03:00
style = { { margin : "0 0 0 20px" , width : "120%" } }
src = "https://slate.textile.io/ipfs/bafybeiffx4fuhmne56yul3z24w6sh5ciumgy6dymdf6m3izdr6dknakhzy"
2021-12-06 15:20:29 +03:00
/ >
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2021-12-06 15:20:29 +03:00
< / d i v >
2021-11-18 01:04:17 +03:00
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER } >
< div css = { STYLES _TEXT } >
< div css = { STYLES _HEADING2 } > FAQs < / d i v >
< / d i v >
< div css = { STYLES _CARD _GROUP } >
{ FAQ . map ( ( each ) => (
< Card title = { each . title } text = { each . text } / >
) ) }
< / d i v >
< / d i v >
< div css = { STYLES _CONTAINER } style = { { paddingBottom : 24 } } >
< div css = { STYLES _TEXT } >
< div css = { STYLES _HEADING2 } > Come hang out < / d i v >
2022-01-26 07:21:25 +03:00
< div css = { STYLES _BODY2 } > Join our discord channel for questions and discussions . < / d i v >
2021-12-06 15:20:29 +03:00
< a
css = { STYLES _BUTTON _PRIMARY _BIG }
style = { { backgroundColor : "#7289d9" , marginTop : 24 } }
2022-01-25 22:05:50 +03:00
href = { discordURL }
target = "_blank"
2021-12-06 15:20:29 +03:00
>
< SVGLogo . Discord height = "14px" style = { { marginRight : "16px" } } / >
Join Discord channel
< / a >
< / d i v >
< / d i v >
< div css = { STYLES _ROTATING _BANNER } >
< div css = { STYLES _BANNER _GROUP } >
< div css = { STYLES _BANNER _ANIMATION } >
{ BANNER . map ( ( each ) => (
< Banner link = { each . link } name = { each . name } img = { each . img } / >
) ) }
{ BANNER . map ( ( each ) => (
< Banner link = { each . link } name = { each . name } img = { each . img } / >
) ) }
{ BANNER . map ( ( each ) => (
< Banner link = { each . link } name = { each . name } img = { each . img } / >
) ) }
{ BANNER . map ( ( each ) => (
< Banner link = { each . link } name = { each . name } img = { each . img } / >
) ) }
2021-11-18 01:04:17 +03:00
< / d i v >
< / d i v >
2020-07-16 08:48:51 +03:00
< / d i v >
2021-12-06 15:20:29 +03:00
< div css = { STYLES _CONTAINER } >
< div css = { STYLES _TEXT } style = { { margin : "40px auto" , textAlign : "center" } } >
< div css = { STYLES _HEADING2 } > Get started for free < / d i v >
< / d i v >
< div css = { STYLES _AUTH _MODAL } >
< System . ButtonPrimaryFull
type = "link"
2022-01-21 20:14:39 +03:00
href = "/_/auth"
2021-12-06 15:20:29 +03:00
style = { { backgroundColor : "#1DA1F2" } }
>
< SVGLogo . Twitter height = "14px" style = { { marginRight : "16px" } } / >
2022-01-25 06:10:58 +03:00
Sign up with Twitter
2021-12-06 15:20:29 +03:00
< / S y s t e m . B u t t o n P r i m a r y F u l l >
< div css = { STYLES _DIVIDER } / >
< form { ... getSigninFormProps ( ) } style = { { width : "100%" } } >
2022-02-07 14:35:36 +03:00
< AuthField
2021-12-06 15:20:29 +03:00
{ ... getSignupFielProps ( "email" ) }
label = "Sign up with email"
placeholder = "Email"
type = "text"
full
2022-01-25 06:59:42 +03:00
style = { {
backgroundColor : "rgba(242, 242, 247,0.7)" ,
border : "1px solid #D1D4D6" ,
} }
2021-12-06 15:20:29 +03:00
containerStyle = { { marginTop : "4px" } }
/ >
< AnimateSharedLayout >
< motion . div layoutId = "landing-signup-submit-button" >
< System . ButtonPrimaryFull
loading = { isCheckingSignupEmail }
type = "submit"
2022-01-25 06:59:42 +03:00
style = { { marginTop : "12px" } }
2021-12-06 15:20:29 +03:00
>
Create account
< / S y s t e m . B u t t o n P r i m a r y F u l l >
< / m o t i o n . d i v >
< / A n i m a t e S h a r e d L a y o u t >
< / f o r m >
< / d i v >
< / d i v >
< / d i v >
< AnimateSharedLayout >
< motion . div layoutId = "landing-footer" >
< WebsiteFooter / >
< / m o t i o n . d i v >
< / A n i m a t e S h a r e d L a y o u t >
< / W e b s i t e P r o t o t y p e W r a p p e r >
) ;
2020-08-03 06:22:47 +03:00
}