-
Slate - Your personal search engine
-
-
-
Resources
-
- Slate for Chrome
+
-
-
-
-
diff --git a/components/core/WebsiteHeader.js b/components/core/WebsiteHeader.js
index 75693c1e..d8461d52 100644
--- a/components/core/WebsiteHeader.js
+++ b/components/core/WebsiteHeader.js
@@ -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 (
Contact & Support
-
- Twitter
+
+ Ⓒ2022 Slate. All rights
+ reserved.
+
+
-
-
-
- Slate
+
diff --git a/pages/index.js b/pages/index.js
index d5d12048..b3e9221c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,246 +11,23 @@ import WebsiteHeader from "~/components/core/WebsiteHeader";
import WebsiteFooter from "~/components/core/WebsiteFooter";
import { css } from "@emotion/react";
-import { useForm } from "~/common/hooks";
-import { motion, AnimateSharedLayout } from "framer-motion";
-import { AuthField } from "~/components/core/Auth/components";
-
-const INTEGRATION = [
- {
- title: "Chrome",
- body: "Connect to your browser history and bookmarks.",
- logo:
- "https://slate.textile.io/ipfs/bafkreiamdcnqxcga7dj4fur7nqd57pbey7s6znnj4o2zpbkmsydp6rspdy",
- },
- {
- title: "Twitter",
- body: "Search your twitter bookmarks.",
- logo:
- "https://slate.textile.io/ipfs/bafkreihtujowfnffw5jxvdo7gqazo4oy3q3q4u4z2jflx5ygmpaj7pgtnu",
- },
- {
- title: "MetaMask",
- body: "Keep all of your NFTs in one place.",
- logo:
- "https://slate.textile.io/ipfs/bafkreiecbn5pjuebdelsehul6sqmxs5kk74mijmo6ybts3hfg5tr2p4rti",
- },
- {
- title: "And more later",
- last: true,
- },
-];
-
-const FAQ = [
- {
- title: "What makes Slate different from other bookmarking / storage tools?",
- 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.",
- },
- {
- 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.",
- },
- {
- title: "How much does Slate cost?",
- 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. ",
- },
-];
-
-const BANNER = [
- {
- link:
- "https://slate.host/tara/neon-genesis-evangelion?cid=bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
- name: "@tara",
- img:
- "https://slate.textile.io/ipfs/bafybeib2zzeknjmih25wivzogzupd7atrdbaxpvmsxfgutrqymlyfc2dvi",
- },
- {
- link:
- "https://slate.host/biodivlibrary/the-mushroom-book?cid=bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
- name: "@biodivlibrary",
- img:
- "https://slate.textile.io/ipfs/bafybeigph7tfup3wb3truahl7sycaywx3unwa365jk4assrjjlzv6d7x3a",
- },
- {
- link:
- "https://slate.host/jin/cryptovoxels-history?cid=bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
- name: "@jin",
- img:
- "https://slate.textile.io/ipfs/bafybeiafrj3erh3rfqux4zqc7u2px3veqdppbtizq26p443utxunrkgonu",
- },
- {
- link:
- "https://slate.host/ng/numero?cid=bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
- name: "@ng",
- img:
- "https://slate.textile.io/ipfs/bafybeibhhfgc4amvymoblaxcoe6glyyvaxhylzisl4ib2itcbhn3mrviou",
- },
- {
- link:
- "https://slate.host/thesimpsons/clips?cid=bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
- name: "@thesimpsons",
- img:
- "https://slate.textile.io/ipfs/bafybeigce5klzr3vgzmlathvepuzhzhmwjc6bbvmsmcvu5eyisy6mnkx34",
- },
-
- {
- link:
- "https://slate.host/bitgraves/september?cid=bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
- name: "@bitgraves",
- img:
- "https://slate.textile.io/ipfs/bafybeiclkru6hwzw2ghvsyrbnaf67taxxhq2hbpcia2oqj5ufdggwhcbti",
- },
- {
- link:
- "https://slate.host/nypl/japan-kimbei-kusakabe?cid=bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
- name: "@nypl",
- img:
- "https://slate.textile.io/ipfs/bafkreidqz6imwffq5hpkacmxnrffagzxx5usybpitt42yuzthe6uf4idlm",
- },
- {
- link:
- "https://slate.host/atlas/cartography?cid=bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
- name: "@atlas",
- img:
- "https://slate.textile.io/ipfs/bafybeid2n55qb4thosrxlszhzi3nwiorswv7xi2d5ykbudp3ph5hc54baa",
- },
- {
- link:
- "https://slate.host/museosabiertos/palais-de-glace-fotografia?cid=bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
- name: "@museosabiertos",
- img:
- "https://slate.textile.io/ipfs/bafybeigrznzuqymmfligf6mhc7adh6r7iw5gotbrzstcqeyyybaklfguki",
- },
- {
- link:
- "https://slate.host/gndclouds/animation?cid=bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
- name: "@gndclouds",
- img:
- "https://slate.textile.io/ipfs/bafybeigh44l3uzsgv4hslpruxrr5s43olpj5llptmsafkemxbwlu4fbdc4",
- },
-
- {
- link:
- "https://slate.host/cindy/sw-sans?cid=bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
- name: "@cindy",
- img:
- "https://slate.textile.io/ipfs/bafkreihazsjq7hlho6ab6k7tise6ufv2ccat5gv5f3fz7yy4cluz3e356e",
- },
- {
- link:
- "https://slate.host/haris/archive?cid=bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
- name: "@haris",
- img:
- "https://slate.textile.io/ipfs/bafkreigcdnhxnh4fp7g2xy2gp43umhjrqyzz2a2t3ovnmcabepwusx5ldi",
- },
- {
- 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",
- name: "@guji",
- img:
- "https://slate.textile.io/ipfs/bafybeiceh32ka3l6nlxniziefaxqs44ib4i47pohdftjzvlbsoem3qk6ly",
- },
- {
- link:
- "https://slate.host/martina/reaction-gifs?cid=bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
- name: "@martina",
- img:
- "https://slate.textile.io/ipfs/bafybeif344hukksxizwk2dhmp6xjybnbw6x62r23m6wju2btxpsk4yluki",
- },
-];
-
-const OBJECTPREVIEWS = [
- {
- title: "Nils Frahm - Old Friends New Friends",
- link: (
- 
- ),
- type: "Soundcloud",
- preview:
- "https://slate.textile.io/ipfs/bafkreic5z2j6kz4qn4zgcv2wakvgok7bgn2tdsrirrcbmcngbty3m4n7fi",
- URL:
- "https://slate.host/slate/objects?cid=bafybeicdrezbs4xtdgwmhef52fwu5dkw2bv3m6sbfbd7wikleszezufeci",
- },
- {
- title: "zancan - Lushtemples",
- link: (
- 
- ),
- type: "hicetnunc.art",
- preview:
- "https://slate.textile.io/ipfs/bafkreia7ir22cbomueh6amuypurqyggqnxsbdirapljxgeoju7m656cvve",
- URL:
- "https://slate.host/slate/objects?cid=bafybeig5mukv6kzfcwphudok6wksjxkglfb2akvt3yzhnqcooj2juwegiu",
- },
- {
- title: "OP-Z Synthesizer",
- link: 
- ),
- type: "Youtube",
- preview:
- "https://slate.textile.io/ipfs/bafkreiaars3ztdupanomdsy2o3ok6xr6gcjmwc2situnquggiz5x2xokgy",
- URL:
- "https://slate.host/slate/objects?cid=bafybeigaet3w3yvpchwup33tr3oyhpu3ckjnrbqq7a7kxoqwp3drzxsmvm",
- },
- {
- title: "r/dostoevsky - Fyodor Dostoevsky",
- link: (
- 
- ),
- type: "Reddit",
- preview:
- "https://slate.textile.io/ipfs/bafybeiafyuacznehtudad5hxzhbri4snjucrsnna2nzjifocebazy6xkt4",
- URL:
- "https://slate.host/slate/objects?cid=bafybeidmxr5vebmqthxsxdy7w5laxb45y6rdg27vjhf5pauu2iyjng7b6e",
- },
-];
const STYLES_ROOT = css`
width: 100%;
height: 100%;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 52px;
overflow: hidden;
- min-height: 100vh;
+ height: calc(100vh - 113px);
background-color: ${Constants.semantic.bgLight};
- color: ${Constants.semantic.textGrayDark};
+ color: ${Constants.semantic.textBlack};
`;
const STYLES_CONTAINER = css`
- max-width: 1080px;
+ max-width: 700px;
margin: 0 auto;
- padding: 80px 24px;
+ padding: 80px 0;
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
@@ -258,50 +35,16 @@ const STYLES_CONTAINER = css`
}
`;
-const STYLES_CONTAINER_FLEX = css`
- ${STYLES_CONTAINER};
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- display: block;
- }
-`;
-
-const STYLES_HERO_TEXT = css`
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: left;
- max-width: 640px;
- margin: 0 auto;
-`;
-
-const STYLES_TEXT = css`
- max-width: calc(50% - 24px);
- margin: 48px 0;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- max-width: 100%;
- }
-`;
-
const STYLES_HEADING = css`
- font-family: ${Constants.font.semiBold};
+ font-family: ${Constants.font.bold};
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;
+ font-size: 88px;
line-height: 88px;
letter-spacing: -0.05em;
- text-align: center;
+ margin-bottom: 25px;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: 64px;
@@ -316,174 +59,21 @@ const STYLES_HEADING1 = css`
}
`;
-const STYLES_HEADING2 = css`
- ${STYLES_HEADING};
- font-size: 56px;
- line-height: 64px;
- letter-spacing: -0.035em;
- margin-bottom: 30px;
-
- @media (max-width: ${Constants.sizes.tablet}px) {
- font-size: 48px;
- line-height: 56px;
- }
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- font-size: 40px;
- line-height: 48px;
- margin-bottom: 32px;
- }
-`;
-
-const STYLES_HEADING3 = css`
- ${STYLES_HEADING};
- font-family: ${Constants.font.medium};
+const STYLES_BODY = css`
+ font-family: ${Constants.font.text};
font-size: 20px;
line-height: 28px;
- letter-spacing: -0.02em;
- margin-bottom: 16px;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- font-size: 18px;
- line-height: 28px;
- }
-`;
-
-const STYLES_BODY1 = css`
- font-family: ${Constants.font.medium};
- font-size: 24px;
- line-height: 36px;
- letter-spacing: -0.02em;
- margin-bottom: 16px;
- text-align: center;
- width: 100%;
-
- @media (max-width: ${Constants.sizes.tablet}px) {
- font-size: 20px;
- line-height: 28px;
- margin-bottom: 20px;
- }
-`;
-
-const STYLES_BODY2 = css`
- font-family: ${Constants.font.text};
- font-size: 18px;
- line-height: 28px;
letter-spacing: -0.01em;
- max-width: 100%;
-`;
-
-const STYLES_BODY3 = css`
- font-family: ${Constants.font.medium};
- font-size: 12px;
- line-height: 20px;
- letter-spacing: -0.006em;
-`;
-
-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: 150%;
- 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: 14px 32px;
- border-radius: 20px;
- font-size: 16px;
- line-height: 24px;
-`;
-
-const STYLES_BUTTON_PRIMARY_BIG_HERO = css`
- ${STYLES_BUTTON_PRIMARY_BIG};
- margin: 0 auto 48px auto;
-`;
-
-const STYLES_BUTTON_PRIMARY_SMALL = css`
- ${STYLES_BUTTON_PRIMARY};
- padding: 1px 12px 3px;
- 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_CARD_GROUP = css`
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- display: block;
- }
-`;
-
-const STYLES_CARD = css`
- background-color: ${Constants.semantic.bgWhite};
- border-radius: 24px;
- padding: 21px 20px 20px;
- width: calc(33.3% - 16px);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- width: 100%;
- margin-bottom: 16px;
- }
+ margin-bottom: 40px;
`;
const STYLES_CURSOR_BLINK = css`
display: inline-block;
- background-color: ${Constants.semantic.textGrayLight};
- width: 37px;
+ background-color: ${Constants.semantic.textGray};
+ width: 32px;
height: 61px;
margin-left: 6px;
- overflow: hidden;
+ overflow: visible;
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
@keyframes blink-animation {
@@ -496,13 +86,11 @@ const STYLES_CURSOR_BLINK = css`
visibility: hidden;
}
}
-
@media (max-width: ${Constants.sizes.tablet}px) {
width: 28.5px;
height: 47px;
margin-left: 4px;
}
-
@media (max-width: ${Constants.sizes.mobile}px) {
width: 21px;
height: 35px;
@@ -514,14 +102,11 @@ const STYLES_CURSOR_BLINK_SMALL = css`
${STYLES_CURSOR_BLINK}
width: 25px;
height: 41px;
- margin-left: 3px;
-
@media (max-width: ${Constants.sizes.tablet}px) {
width: 21px;
height: 35px;
margin-left: 2px;
}
-
@media (max-width: ${Constants.sizes.mobile}px) {
width: 17.5px;
height: 29px;
@@ -529,593 +114,55 @@ const STYLES_CURSOR_BLINK_SMALL = css`
}
`;
-const STYLES_ROTATING_BANNER = css`
- background-color: ${Constants.semantic.bgDark};
- width: 100%;
- overflow: hidden;
- padding: 48px 0 36px 0;
-`;
-
-const STYLES_BANNER_ANIMATION = css`
- display: flex;
- position: relative;
- align-items: center;
- animation: moving 240s linear infinite;
- -webkit-animation: moving 240s linear infinite;
- @keyframes moving {
- 0% {
- transform: translateX(0px);
- }
- 100% {
- transform: translateX(-90%);
- }
- }
- @-webkit-keyframes moving {
- 0% {
- transform: translateX(0px);
- }
- 100% {
- transform: translateX(-90%);
- }
- }
-`;
-
-const STYLES_BANNER_GROUP = css`
- display: flex;
- align-items: center;
-`;
-
-const STYLES_BANNER_IMG = css`
- max-width: 200px;
- max-height: 200px;
- box-shadow: ${Constants.shadow.lightMedium};
-`;
-
-const STYLES_BANNER_ITEM = css`
- text-decoration: none;
- color: ${Constants.semantic.textGrayLight};
- margin-left: 88px;
- cursor: pointer;
-`;
-
-const STYLES_AUTH_MODAL = css`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 36px 32px;
- background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
- border-radius: 20px;
- max-width: 480px;
- margin: 0 auto;
- width: 100%;
-`;
-
-const STYLES_DIVIDER = css`
- height: 1px;
- width: 64px;
- background-color: ${Constants.semantic.textGray};
- margin: 32px auto;
-`;
-
-const STYLES_ROADMAP = css`
- display: flex;
- flex-direction: column;
- max-width: calc(50% - 24px);
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- max-width: 100%;
- }
-`;
-
-const STYLES_TOOL_ICON = css`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding: 12px;
- background-color: ${Constants.semantic.bgGrayLight};
- border-radius: 12px;
- height: 56px;
- width: 56px;
- margin-right: 20px;
- margin-bottom: 16px;
-`;
-
-const STYLES_TOOL = css`
- display: flex;
- width: 100%;
-`;
-
-const STYLES_CONNECT_LINE = css`
- background-color: ${Constants.semantic.bgGrayLight4};
- height: 48px;
- width: 2px;
- margin: 0 0 16px 27px;
-`;
-
-const STYLES_CONNECT_BAR = css`
- width: 16px;
- height: 6px;
- background-color: ${Constants.semantic.textBlack};
+const STYLES_BUTTON = css`
+ cursor: poitner;
display: inline-flex;
- margin: 0 -4px;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- height: 5px;
- }
-`;
-
-const STYLES_WRAPPER = css`
- position: relative;
- background-color: ${Constants.semantic.bgLight};
- border-radius: 16px;
- overflow: hidden;
- cursor: pointer;
- width: 100%;
- border: 1px solid ${Constants.semantic.borderGrayLight};
- color: ${Constants.semantic.textBlack};
- text-decoration: none;
-
- :hover {
- box-shadow: ${Constants.shadow.card};
- transform: translateY(-4px);
- transition: transform 0.2s ease-in-out;
- }
-`;
-
-const STYLES_INNER_WRAPPER = css`
- display: block;
- padding-top: 100%;
-`;
-
-const STYLES_DESCRIPTION = css`
- position: absolute;
- bottom: 0;
- border-radius: 0px 0px 16px 16px;
- box-sizing: border-box;
- width: 100%;
- background-color: ${Constants.semantic.bgWhite};
- padding: 9px 16px 10px;
- font-family: ${Constants.font.medium};
- font-size: 14px;
- line-height: 20px;
- letter-spacing: -0.006px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-`;
-
-const STYLES_PREVIEW = css`
- position: absolute;
- top: 0;
- object-fit: cover;
- width: 100%;
- height: calc(100% - 58px);
- background-color: ${Constants.semantic.bgWhite};
- border-bottom: 1px solid ${Constants.semantic.borderGrayLight};
-`;
-
-const STYLES_TYPE = css`
- display: flex;
- padding-top: 3px;
- color: ${Constants.semantic.textGray};
- font-family: ${Constants.font.text};
- font-size: 12px;
- line-height: 16px;
- align-items: center;
-`;
-
-const STYLES_OBJECT_GROUP = css`
- display: grid;
- width: calc(50% - 24px);
- grid-template-columns: repeat(2, 1fr);
- gap: 16px;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- width: 100%;
- }
-`;
-
-const STYLES_FEATURE_CARD = css`
- width: calc(50% - 12px);
- max-height: 400px;
- background: ${Constants.semantic.bgGrayLight};
- border-radius: 24px;
- overflow: hidden;
- margin-bottom: 16px;
-
- @media (max-width: ${Constants.sizes.mobile}px) {
- width: 100%;
- max-height: 372px;
- }
-`;
-
-const STYLES_ICON_BUTTON = css`
- width: 32px;
- height: 32px;
- display: inline-flex;
- margin-right: 8px;
- flex-direction: column;
+ flex-grow: 0;
justify-content: center;
align-items: center;
- background-color: ${Constants.semantic.bgWhite};
- border: 1px solid ${Constants.semantic.borderGrayLight4};
- box-shadow: 0px 4px 16px ${Constants.shadow.lightSmall};
- border-radius: 8px;
+ padding: 18px 32px;
+ border-radius: 20px;
+ font-family: ${Constants.font.medium};
+ font-size: 18px;
+ line-height: 20px;
+ text-decoration: none;
+ cursor: pointer;
+ border: 2px solid ${Constants.semantic.borderGray};
+ color: ${Constants.semantic.textBlack};
+
+ :hover {
+ background-color: ${Constants.semantic.textGray};
+ color: ${Constants.semantic.textWhite};
+ }
`;
-const STYLES_FEATURE_DESCRIPTION = css`
- padding: 21px 20px 19px;
-`;
-
-const STYLES_FEATURE_IMG = css`
- display: block;
- margin: 0 20px;
- width: calc(100% - 40px);
- border: ${Constants.semantic.borderGrayLight4};
- border-radius: 16px;
- box-shadow: ${Constants.shadow.darkMedium};
-`;
-
-const ObjectPreview = (props) => {
- return (
-
- 
-
+
+ 
-
diff --git a/pages/guidelines.js b/pages/guidelines.js
index 151630fb..9c4a086a 100644
--- a/pages/guidelines.js
+++ b/pages/guidelines.js
@@ -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 (
- 
-
-
- );
-};
-
-const Integration = (props) => {
- return (
-
- {props.title}
-
-
- {props.link}
- {props.type}
-
-
-
- );
-};
-
-const Card = (props) => {
- return (
-
- {props.logo ? (
- 
- ) : (
-
- )}
-
- {!props.last && }
-
-
-
- {props.title}{" "}
-
-
- {props.body}
-
-
-
- );
-};
-
-const Banner = (props) => {
- return (
-
-
- {!!props.logo ? props.logo :
- {props.action && (
-
- {props.action}
-
- )}
- {props.title}
}
- {props.text}
- {props.name}
-
- );
-};
-
export default function IndexPage() {
const title = `Slate`;
const description = "Your personal search engine";
const url = "https://slate.host/";
const image =
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
- const signInURL = "/_/auth";
- const discordURL = "https://discord.gg/NRsUjpCypr";
- 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 }) => {
- window.open(`/_/auth?tab=signup&email=${encodeURIComponent(email)}`, "_self");
- },
- });
return (
-
-
-
-
+
-
- );
- }
-}
diff --git a/pages/terms.js b/pages/terms.js
index 714373cb..5b0c020c 100644
--- a/pages/terms.js
+++ b/pages/terms.js
@@ -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 (
- 
-
-
- Your personal
-
- search
-
- engine
-
-
- Slate is a search tool designed to help you remember and keep track of things you care
- about on the web.
-
-
- Get started
-
+
+ Search your internet memory
+
-
-
-
-
- {OBJECTPREVIEWS.map((each) => (
-
-
-
- A single place to save all your things
-
- Save anything from the web directly to Slate without worrying about how or where to
- save it.
-
-
-
-
-
-
-
- Get back to things instantly with global{" "}
- search
-
-
-
- Find things fast with integrated search available to you anywhere in the browser.
-
-
-
-
- 
- 
-
-
-
-
- Use the Slate browser extension to search and save from anywhere.
-
- ⌥
- S
-
- 
-
-
-
-
- Use tags and keywords to search across all of your links and files.
-
-
-
-
-
-
-
-
- Coming soon
-
- {INTEGRATION.map((each) => (
-
-
-
- Con
-
- nect with
- your favorite tools -
- - your favorite tools -
- 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.
-
-
-
-
-
-
-
- Organize and share however you like
-
- Add tags to create relationships and connections to help you remember things. Create
- channels to share things publicly on the web.
-
-
-
-
- 
- 
-
-
-
-
- Use tags to help you organize your things on the fly.
-
- #
-
- 
-
-
-
-
- Create channels to share collections, topics or archives of things publicly on the
- web.
-
-
-
-
-
-
-
- FAQs
-
- {FAQ.map((each) => (
-
-
-
-
-
- Come hang out
- Join our discord channel for questions and discussions.
-
-
-
-
-
-
-
- {BANNER.map((each) => (
-
-
-
-
-
- Get started for free
-
-
-
-
-
+
+ Slate is a Chrome extension that helps you save, organize and search stuff you care
+ about on the web. It’s a lightweight tool designed to make the internet feel a little
+ more personal.
+
+ Get Started
-
-
-
-
- 
-
- Slate web extension
- -
- Access Slate anytime, anywhere when you browse the Internet.
-
- Get Slate for Chrome
-