diff --git a/packages/website/package.json b/packages/website/package.json index 75e8c802..e1039e93 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -9,6 +9,7 @@ "@fontsource/source-sans-pro": "^4.2.2", "@svgr/webpack": "^5.5.0", "autoprefixer": "^10.2.5", + "bytes": "^3.1.0", "classnames": "^2.2.6", "framer-motion": "^4.0.3", "gatsby": "^3.0.1", @@ -26,16 +27,21 @@ "gatsby-transformer-json": "^3.1.0", "gatsby-transformer-sharp": "^3.0.0", "gbimage-bridge": "^0.1.1", + "http-status-codes": "^2.1.4", "normalize.css": "^8.0.1", + "path-browserify": "^0.0.1", + "polished": "^4.1.1", "popmotion": "^9.3.4", "postcss": "^8.2.8", "preact-svg-loader": "^0.2.1", "prop-types": "^15.7.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-dropzone": "^11.3.1", "react-helmet": "^6.1.0", "react-svg-loader": "^3.0.3", "react-use": "^17.2.1", + "skynet-js": "^3.0.0", "tailwindcss": "^2.0.3" }, "devDependencies": { diff --git a/packages/website/src/components/HeroStartPage/index.js b/packages/website/src/components/HeroStartPage/index.js new file mode 100644 index 00000000..b323fd8c --- /dev/null +++ b/packages/website/src/components/HeroStartPage/index.js @@ -0,0 +1 @@ +export { default } from "./HeroStartPage"; diff --git a/packages/website/src/components/Icons/Add.svg b/packages/website/src/components/Icons/Add.svg new file mode 100644 index 00000000..7331a3d1 --- /dev/null +++ b/packages/website/src/components/Icons/Add.svg @@ -0,0 +1,14 @@ + diff --git a/packages/website/src/components/Icons/ArrowUpCircle.svg b/packages/website/src/components/Icons/ArrowUpCircle.svg new file mode 100644 index 00000000..96b076f7 --- /dev/null +++ b/packages/website/src/components/Icons/ArrowUpCircle.svg @@ -0,0 +1,3 @@ + diff --git a/packages/website/src/components/Icons/CheckCircle.svg b/packages/website/src/components/Icons/CheckCircle.svg new file mode 100644 index 00000000..f6b316aa --- /dev/null +++ b/packages/website/src/components/Icons/CheckCircle.svg @@ -0,0 +1,3 @@ + diff --git a/packages/website/src/components/Icons/Cloud.svg b/packages/website/src/components/Icons/Cloud.svg new file mode 100644 index 00000000..cdebc934 --- /dev/null +++ b/packages/website/src/components/Icons/Cloud.svg @@ -0,0 +1,20 @@ + diff --git a/packages/website/src/components/Icons/index.js b/packages/website/src/components/Icons/index.js index 941c77cd..d184f4c7 100644 --- a/packages/website/src/components/Icons/index.js +++ b/packages/website/src/components/Icons/index.js @@ -1,5 +1,9 @@ +export { default as Add } from "./Add.svg"; export { default as ArrowRight } from "./ArrowRight.svg"; +export { default as ArrowUpCircle } from "./ArrowUpCircle.svg"; export { default as CheckActive } from "./CheckActive.svg"; +export { default as CheckCircle } from "./CheckCircle.svg"; +export { default as Cloud } from "./Cloud.svg"; export { default as DiscordSmall } from "./DiscordSmall.svg"; export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg"; export { default as LogoBlackText } from "./LogoBlackText.svg"; diff --git a/packages/website/src/components/Layout/Layout.js b/packages/website/src/components/Layout/Layout.js index 52b3ca13..19b3e9c0 100644 --- a/packages/website/src/components/Layout/Layout.js +++ b/packages/website/src/components/Layout/Layout.js @@ -15,16 +15,26 @@ import Navigation from "../Navigation/Navigation"; import NewsHeader from "../NewsHeader/NewsHeader"; import Footer from "../Footer/Footer"; import FooterNavigation from "../FooterNavigation/FooterNavigation"; -// import { useWindowScroll } from "react-use"; +import { useWindowScroll } from "react-use"; import classnames from "classnames"; +import { readableColor } from "polished"; + +const modeMap = { "#fff": "dark", "#000": "light" }; const StickyHeader = () => { - // const { y } = useWindowScroll(); + useWindowScroll(); + + const ref = React.useRef(null); + const element = document.elementFromPoint(0, ref.current?.offsetHeight ?? 0); + + const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color"); + const color = React.useMemo(() => readableColor(backgroundColor), [backgroundColor]); + const mode = modeMap[color]; return ( -