From 3cd42ac66d5ed39176e302f00ddebff439da38e1 Mon Sep 17 00:00:00 2001 From: tarafanlin <35607644+tarafanlin@users.noreply.github.com> Date: Thu, 16 Jun 2022 10:57:25 -0700 Subject: [PATCH] landing page WIP --- common/constants.js | 1 + common/styles/global.js | 24 +- common/svg.js | 97 ++- components/core/WebsiteFooter.js | 107 +-- components/core/WebsiteHeader.js | 52 +- pages/guidelines.js | 2 +- pages/index.js | 1041 ++---------------------------- pages/slate-for-chrome.js | 183 ------ pages/terms.js | 2 +- 9 files changed, 200 insertions(+), 1309 deletions(-) delete mode 100644 pages/slate-for-chrome.js diff --git a/common/constants.js b/common/constants.js index a678c6c7..693211e1 100644 --- a/common/constants.js +++ b/common/constants.js @@ -123,6 +123,7 @@ export const semantic = { borderDark: system.grayDark6, borderGrayDark: system.grayDark5, borderGrayLight4: system.grayLight4, + borderGray: system.gray, bgBlue: system.blueLight6, bgGreen: system.greenLight6, diff --git a/common/styles/global.js b/common/styles/global.js index 474d32fa..b07ec966 100644 --- a/common/styles/global.js +++ b/common/styles/global.js @@ -16,22 +16,22 @@ export const injectGlobalStyles = () => css` @font-face { font-family: 'inter-regular'; - src: url('https://slate.textile.io/ipfs/bafkreic3hkcuwvrmf6trweqcjp62valsfjh3zvwacikoreynakgw67wrvy'); - } - - @font-face { - font-family: 'inter-semi-bold'; - src: url('https://slate.textile.io/ipfs/bafkreiaezvuz6wawoqyntfl4gbprol3e7majovgof3uxvhilvd2pgk4w54'); - } - - @font-face { - font-family: 'inter-bold'; - src: url('https://slate.textile.io/ipfs/bafybeigljfbymd52vnrie6qkcy4u4kplsz4yen2idpizhr3dvrgy7kufaq'); + src: url('../public/static/Inter-Regular.woff'); } @font-face { font-family: 'inter-medium'; - src: url('https://slate.textile.io/ipfs/bafkreiapyxmqjwoowqpek2cjocouzxoalwlzwwbv3dscug3e5l2ok7xmqe'); + src: url('../public/static/Inter-Medium.woff'); + } + + @font-face { + font-family: 'inter-semi-bold'; + src: url('../public/static/Inter-SemiBold.woff'); + } + + @font-face { + font-family: 'inter-bold'; + src: url('../public/static/Inter-Bold.woff'); } @font-face { diff --git a/common/svg.js b/common/svg.js index a223bad4..aa7ac4c7 100644 --- a/common/svg.js +++ b/common/svg.js @@ -456,21 +456,39 @@ export const OldWallet = (props) => ( export const RightArrow = (props) => ( +); + +export const LeftArrow = (props) => ( + ); @@ -2144,25 +2162,19 @@ export const Mail = (props) => ( ); @@ -2346,18 +2358,37 @@ export const Twitter = (props) => ( +); + +export const Discord = (props) => ( + ); diff --git a/components/core/WebsiteFooter.js b/components/core/WebsiteFooter.js index 309c16c5..47a147d1 100644 --- a/components/core/WebsiteFooter.js +++ b/components/core/WebsiteFooter.js @@ -1,28 +1,32 @@ import * as React from "react"; import * as Constants from "~/common/constants"; +import * as SVG from "~/common/svg"; import { css } from "@emotion/react"; const STYLES_ROOT = css` + position: fixed; + bottom: 0; width: 100%; margin: 0 auto; - background-color: ${Constants.semantic.bgGrayLight}; + background-color: ${Constants.semantic.bgLight}; `; const STYLES_CONTAINER = css` max-width: 1080px; margin: 0 auto; width: 100%; - font-family: ${Constants.font.medium}; + font-family: ${Constants.font.text}; + color: ${Constants.semantic.textGrayDark}; font-weight: 400; font-size: 14px; line-height: 28px; letter-spacing: -0.01px; - padding: 96px 24px; + padding: 16px; @media (max-width: ${Constants.sizes.mobile}px) { max-width: 480px; - padding: 40px 16px; + padding: 16px; } `; @@ -33,8 +37,10 @@ const STYLES_LINK = css` font-size: 14px; line-height: 28px; letter-spacing: -0.01px; - margin: 4px 0 0 0; color: ${Constants.semantic.textGrayDark}; + display: flex; + align-items: center; + justify-content: center; `; const STYLES_FLEX = css` @@ -44,11 +50,36 @@ const STYLES_FLEX = css` } `; -const STYLES_CONTENT_BLOCK = css` - width: 25%; - margin-bottom: 24px; - @media (max-width: ${Constants.sizes.tablet}px) { - width: 50%; +const STYLES_FLEX_BLOCK = css` + display: flex; + width: 33.3%; + @media (max-width: ${Constants.sizes.mobile}px) { + width: 100%; + padding: 4px 0; + } +`; + +const STYLES_FLEX_RIGHT = css` + ${STYLES_FLEX_BLOCK}; + justify-content: flex-end; + @media (max-width: ${Constants.sizes.mobile}px) { + justify-content: start; + } +`; + +const STYLES_FLEX_CENTER = css` + ${STYLES_FLEX_BLOCK}; + justify-content: center; + @media (max-width: ${Constants.sizes.mobile}px) { + justify-content: start; + } +`; + +const STYLES_FLEX_LEFT = css` + ${STYLES_FLEX_BLOCK}; + justify-content: flex-start; + @media (max-width: ${Constants.sizes.mobile}px) { + justify-content: start; } `; @@ -56,55 +87,41 @@ const STYLES_HR = css` background-color: ${Constants.semantic.borderGrayLight4}; width: 100%; height: 1px; - margin: 12px 0; `; -const styleFlexFull = { - justifyContent: `space-between`, -}; - export const WebsiteFooter = (props) => { const discordURL = "https://discord.gg/NRsUjpCypr"; const twitterURL = "https://twitter.com/_slate"; - const githubURL = "https://github.com/filecoin-project/slate/issues/126"; - const extensionURL = - "https://chrome.google.com/webstore/detail/slate-web-extension/gloembacbehhbfbkcfjmloikeeaebnoc"; + const mailtoSlate = "mailto:hello@slate.host?subject=Hello Slate Team"; return (