diff --git a/packages/website/src/components/CodeTerminal/CodeTerminal.js b/packages/website/src/components/CodeTerminal/CodeTerminal.js index f010492f..d500ff80 100644 --- a/packages/website/src/components/CodeTerminal/CodeTerminal.js +++ b/packages/website/src/components/CodeTerminal/CodeTerminal.js @@ -28,7 +28,7 @@ async function example() { }`; return ( -
+
diff --git a/packages/website/src/components/CommunitySection/CommunitySection.js b/packages/website/src/components/CommunitySection/CommunitySection.js index 65a4563c..c79b7ffa 100644 --- a/packages/website/src/components/CommunitySection/CommunitySection.js +++ b/packages/website/src/components/CommunitySection/CommunitySection.js @@ -11,6 +11,7 @@ import { TikTokSmall, } from "../../components/Icons"; import useSubscribe from "./useSubscribe"; +import Link from "../Link"; const social = [ { name: "Discord", Icon: DiscordSmall, href: "https://discordapp.com/invite/sia" }, @@ -96,7 +97,7 @@ const CommunitySection = () => { Join our community
{social.map(({ name, Icon, href }) => ( - { > {name} - + ))}
diff --git a/packages/website/src/components/Footer/Footer.js b/packages/website/src/components/Footer/Footer.js index 2cd5038d..49d6d9d8 100644 --- a/packages/website/src/components/Footer/Footer.js +++ b/packages/website/src/components/Footer/Footer.js @@ -1,5 +1,6 @@ import * as React from "react"; -import LogoWhiteText from "../Icons/LogoWhiteText.svg"; +import { LogoWhiteText } from "../Icons"; +import Link from "../Link"; const Footer = () => { return ( @@ -13,12 +14,12 @@ const Footer = () => {
- hello@siasky.net - +
diff --git a/packages/website/src/components/FooterNavigation/FooterNavigation.js b/packages/website/src/components/FooterNavigation/FooterNavigation.js index c039d233..d19e8124 100644 --- a/packages/website/src/components/FooterNavigation/FooterNavigation.js +++ b/packages/website/src/components/FooterNavigation/FooterNavigation.js @@ -1,53 +1,57 @@ import * as React from "react"; import classnames from "classnames"; import { motion, AnimatePresence } from "framer-motion"; +import Link from "../Link"; +const external = { target: "_blank", rel: "noopener noreferrer" }; const sections = [ { header: "Skynet Labs", links: [ - { title: "About us", href: "/" }, - { title: "Brand Guidelines", href: "/" }, - { title: "Careers", href: "/" }, - { title: "Terms of Use", href: "/terms-of-use.pdf" }, - { title: "Privacy Policy", href: "/privacy-policy.pdf" }, + { title: "About us", to: "/about" }, + { + title: "Brand Guidelines", + href: "https://support.siasky.net/key-concepts/skynet-brand-guidelines", + ...external, + }, + { title: "Careers", href: "https://jobs.lever.co/nebulous", ...external }, + { title: "Terms of Use", href: "/terms.pdf", ...external }, + { title: "Privacy Policy", href: "/privacy.pdf", ...external }, ], }, { header: "Developers", links: [ - { title: "About us", href: "/" }, - { title: "API Documentation", href: "/" }, - { title: "SDK Documentation", href: "https://siasky.net/docs/" }, - { title: "Developer Guide", href: "/" }, - { title: "Portal Setup", href: "/" }, + { title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external }, + { title: "API Documentation", href: "https://siasky.net/docs/", ...external }, + { title: "SDK Documentation", href: "https://siasky.net/docs/", ...external }, + { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external }, ], }, { header: "Technology", links: [ - { title: "What is Skynet?", href: "/" }, - { title: "Technology Guide", href: "/" }, - { title: "Pricing", href: "/pricing" }, - { title: "Skynet Wiki", href: "/" }, - { title: "Support", href: "https://support.siasky.net", target: "_blank" }, + { title: "What is Skynet?", href: "https://support.siasky.net", ...external }, + { title: "Frequent Questions", href: "https://support.siasky.net/key-concepts/faqs", ...external }, + { title: "Pricing", to: "/pricing" }, + { title: "Skynet Wiki", href: "https://skynetwiki.tech", ...external }, + { title: "Support", href: "https://support.siasky.net", ...external }, ], }, { header: "Ecosystem", links: [ - { title: "Sia Foundation", href: "/" }, - { title: "Sia Foundation Forum", href: "/" }, - { title: "Sia.tech", href: "https://sia.tech", target: "_blank" }, - { title: "SiaStats", href: "https://siastats.info", target: "_blank" }, - { title: "Skynet AppStore", href: "/" }, + { title: "Sia Foundation", href: "https://sia.tech", ...external }, + { title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external }, + { title: "SiaStats", href: "https://siastats.info", ...external }, + { title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external }, ], }, { header: "Skynet Webportals", links: [ - { title: "Skydrain", href: "https://skydrain.net/", target: "_blank" }, - { title: "SkyPortal", href: "https://skyportal.xyz", target: "_blank" }, + { title: "Skydrain", href: "https://skydrain.net", ...external }, + { title: "SkyPortal", href: "https://skyportal.xyz", ...external }, ], }, ]; @@ -66,9 +70,9 @@ const FooterNavigation = () => { @@ -101,9 +105,9 @@ const FooterNavigation = () => { > {section.links.map(({ title, ...rest }) => (
  • - + {title} - +
    • ))} diff --git a/packages/website/src/components/HeroStartPage/HeroStartPage.js b/packages/website/src/components/HeroStartPage/HeroStartPage.js deleted file mode 100644 index 3b8ad91a..00000000 --- a/packages/website/src/components/HeroStartPage/HeroStartPage.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react"; - -const HeroStartPage = () => { - return ( -
    -

    - Build a{" "} - - free
    - Internet -     -

    -

    - Skynet is a content and application hosting platform bringing - decentralized storage to users, creators and app developers. - - Skynet is a content and application hosting platform bringing decentralized storage to users, creators and app - developers. - -

    -
    - ); -}; - -HeroStartPage.propTypes = {}; - -HeroStartPage.defaultProps = {}; - -export default HeroStartPage; diff --git a/packages/website/src/components/HeroStartPage/HeroStartPage.stories.js b/packages/website/src/components/HeroStartPage/HeroStartPage.stories.js deleted file mode 100644 index 0d79fb4d..00000000 --- a/packages/website/src/components/HeroStartPage/HeroStartPage.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import HeroStartPage from "./HeroStartPage"; - -export default { - title: "Layout/HeroStartPage", - component: HeroStartPage, -}; - -const Template = (args) => ; - -export const Default = Template.bind({}); -Default.parameters = { - backgrounds: { default: "dark" }, -}; -Default.args = {}; diff --git a/packages/website/src/components/HeroStartPage/index.js b/packages/website/src/components/HeroStartPage/index.js deleted file mode 100644 index b323fd8c..00000000 --- a/packages/website/src/components/HeroStartPage/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./HeroStartPage"; diff --git a/packages/website/src/components/Layout/Layout.js b/packages/website/src/components/Layout/Layout.js index a3bb388d..251bb14f 100644 --- a/packages/website/src/components/Layout/Layout.js +++ b/packages/website/src/components/Layout/Layout.js @@ -7,10 +7,6 @@ import * as React from "react"; import PropTypes from "prop-types"; -import { useStaticQuery, graphql } from "gatsby"; -import { getImage } from "gatsby-plugin-image"; -import { convertToBgImage } from "gbimage-bridge"; -import BackgroundImage from "gatsby-background-image"; import Navigation from "../Navigation"; import NewsHeader from "../NewsHeader"; import Footer from "../Footer"; @@ -18,7 +14,7 @@ import FooterNavigation from "../FooterNavigation"; import { useWindowScroll } from "react-use"; import { readableColor } from "polished"; -const StickyHeader = () => { +const FixedHeader = () => { const { y } = useWindowScroll(); const ref = React.useRef(null); const [mode, setMode] = React.useState(); @@ -27,13 +23,15 @@ const StickyHeader = () => { const element = document.elementFromPoint(0, ref.current.offsetHeight); const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color"); const color = readableColor(backgroundColor); // returns either #fff or #000 - const mode = { "#fff": "dark", "#000": "light" }[color]; + const calculated = { "#fff": "dark", "#000": "light" }[color]; - setMode(mode); - }, [setMode, y]); + if (mode !== calculated) { + setMode(calculated); + } + }, [setMode, mode, y]); return ( -
    +
    @@ -51,30 +49,13 @@ const Layout = ({ children }) => { // } // `); - const { ripple } = useStaticQuery(graphql` - query { - ripple: file(relativePath: { eq: "ripple.png" }) { - childImageSharp { - gatsbyImageData(layout: FULL_WIDTH) - } - } - } - `); - const background = convertToBgImage(getImage(ripple)); - return ( - <> - - -
    {children}
    -     +
    + +
    {children}
    - +
    ); }; diff --git a/packages/website/src/components/Layout/Section.js b/packages/website/src/components/Layout/Section.js index 10e7f987..469a1c8b 100644 --- a/packages/website/src/components/Layout/Section.js +++ b/packages/website/src/components/Layout/Section.js @@ -1,9 +1,13 @@ import * as React from "react"; import classnames from "classnames"; -export const Section = ({ children, className, ...props }) => ( +export const Section = ({ children, className, width = "content", ...props }) => (
    -
    {children}
    +
    + {children} +
    ); diff --git a/packages/website/src/components/Link/Link.js b/packages/website/src/components/Link/Link.js new file mode 100644 index 00000000..e9446d82 --- /dev/null +++ b/packages/website/src/components/Link/Link.js @@ -0,0 +1,14 @@ +import * as React from "react"; +import { Link as GatsbyLink } from "gatsby"; + +export default function Link({ children, to, activeClassName, partiallyActive, ...params }) { + if (to) { + return ( + + {children} + + ); + } + + return {children}; +} diff --git a/packages/website/src/components/Link/index.js b/packages/website/src/components/Link/index.js new file mode 100644 index 00000000..dbbd23c5 --- /dev/null +++ b/packages/website/src/components/Link/index.js @@ -0,0 +1 @@ +export { default } from "./Link"; diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index 6b10b5bc..8a10f017 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/packages/website/src/components/Navigation/Navigation.js @@ -1,13 +1,12 @@ import * as React from "react"; import PropTypes from "prop-types"; -import { Link } from "gatsby"; +import Link from "../Link"; import classnames from "classnames"; import LogoWhiteText from "../Icons/LogoWhiteText.svg"; import LogoBlackText from "../Icons/LogoBlackText.svg"; import MenuMobile from "../Icons/MenuMobile.svg"; import MenuMobileClose from "../Icons/MenuMobileClose.svg"; import DiscordSmall from "../Icons/DiscordSmall.svg"; -import { motion } from "framer-motion"; import { useWindowSize, useWindowScroll } from "react-use"; const routes = [ @@ -18,13 +17,13 @@ const routes = [ ]; const LogInLink = () => ( - + Log in - + ); const LogInButton = ({ className, ...props }) => ( - ( {...props} > Log in - + ); const SignUpButton = ({ className, ...props }) => ( - ( {...props} > Sign up - + ); const Navigation = ({ mode }) => { @@ -70,21 +69,18 @@ const Navigation = ({ mode }) => { const mobileMenuOffset = navRef.current ? navRef.current.offsetTop : 0; return ( - 0, })} - initial={false} - animate={{ - paddingTop: offsetY ? "24px" : "48px", - paddingBottom: offsetY ? "24px" : "48px", - }} ref={navRef} >
    - + {mode === "dark" && } {mode === "light" && } @@ -122,10 +118,12 @@ const Navigation = ({ mode }) => {
      @@ -138,7 +136,7 @@ const Navigation = ({ mode }) => { ))}
    @@ -156,7 +154,7 @@ const Navigation = ({ mode }) => {
    - + ); }; diff --git a/packages/website/src/components/NewsHeader/NewsHeader.js b/packages/website/src/components/NewsHeader/NewsHeader.js index 98e2ab85..9b7d68d1 100644 --- a/packages/website/src/components/NewsHeader/NewsHeader.js +++ b/packages/website/src/components/NewsHeader/NewsHeader.js @@ -1,5 +1,5 @@ import * as React from "react"; -import { Link } from "gatsby"; +import Link from "../Link"; import { ArrowRight, DiscordSmallWhite } from "../Icons"; const NewsHeader = () => { @@ -10,15 +10,13 @@ const NewsHeader = () => { Skynet Announces SkyDB, Unlocking Fully Decentralized Internet
    diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js index 7ca3f638..41b76a1a 100644 --- a/packages/website/src/components/Uploader/Uploader.js +++ b/packages/website/src/components/Uploader/Uploader.js @@ -10,6 +10,7 @@ import { useDropzone } from "react-dropzone"; import { SkynetClient } from "skynet-js"; import { useTimeoutFn } from "react-use"; import ms from "ms"; +import Link from "../Link"; const getFilePath = (file) => file.webkitRelativePath || file.path || file.name; @@ -59,14 +60,14 @@ const createUploadErrorMessage = (error) => { const client = new SkynetClient("https://siasky.net"); const RegistrationLink = () => ( - Sign up - + ); const UploadElement = ({ file, status, error, url = "", progress = 0 }) => { @@ -99,9 +100,9 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => { {status === "processing" && Processing...} {status === "complete" && ( - + {url} - + )} {status === "error" && error && {error}} diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.js index 97dd4624..0cecbacb 100644 --- a/packages/website/src/pages/about.js +++ b/packages/website/src/pages/about.js @@ -16,6 +16,7 @@ import { GitlabSmall, LinkedinSmall, } from "../components/Icons"; +import Link from "../components/Link"; const aboutCards = [ { @@ -197,9 +198,9 @@ const TeamCard = ({ Image, name, position, social }) => ( {social && (
    {Object.entries(social).map(([platform, href]) => ( - + - + ))}
    )} @@ -213,7 +214,7 @@ const AboutPage = () => (
    -

    +

    Skynet is the foundation for a new, decentralized internet

    @@ -232,9 +233,9 @@ const AboutPage = () => ( censorship-resistance will be the new standards of the digital world.

    - + Learn more about how our technology works - +
    @@ -254,12 +255,12 @@ const AboutPage = () => (

    Want to build apps with these features?

    - Get started here - +
    diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js index c31ef753..6d59ecae 100644 --- a/packages/website/src/pages/developers.js +++ b/packages/website/src/pages/developers.js @@ -3,14 +3,17 @@ import Layout, { Section, SectionTitle, CardWithDescription } from "../component import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons"; import CodeTerminal from "../components/CodeTerminal"; import SEO from "../components/seo"; +import Link from "../components/Link"; const LearnMoreButton = () => ( - Learn more - + ); const reasonCards = [ @@ -73,24 +76,24 @@ const DevelopersPage = () => ( -
    -
    +
    +
    -

    +

    Decentralized Apps with speed, confidence, and usability

      {docs.map(({ name, href }, index) => (
    • - {name} - +
      • ))}
    @@ -141,13 +144,13 @@ const DevelopersPage = () => ( diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index 5b21ff59..e0fe9f02 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -2,7 +2,6 @@ import * as React from "react"; // import { StaticImage } from "gatsby-plugin-image"; import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout"; import SEO from "../components/seo"; -import HeroStartPage from "../components/HeroStartPage"; import CommunitySection from "../components/CommunitySection"; import Uploader from "../components/Uploader"; import { @@ -16,14 +15,17 @@ import { SkynetUsageSmall, SkynetSiaSmall, } from "../components/Icons"; +import Link from "../components/Link"; const LearnMoreButton = () => ( - Learn more - + ); const etosCards = [ @@ -80,7 +82,20 @@ const IndexPage = () => {
    - +
    +

    + Build a free Internet +

    + +

    + Skynet is a content and application hosting platform bringing + decentralized storage to users, creators and app developers. + + Skynet is a content and application hosting platform bringing decentralized storage to users, creators and + app developers. + +

    +
    @@ -105,9 +120,9 @@ const IndexPage = () => { our decentralized ecosystem and revolution.

    - + Try Skynet Apps - +
    diff --git a/packages/website/src/styles/global.css b/packages/website/src/styles/global.css index 1f5362fe..06442205 100644 --- a/packages/website/src/styles/global.css +++ b/packages/website/src/styles/global.css @@ -25,3 +25,9 @@ border-width: 7px 0 7px 6px; border-color: transparent transparent transparent #000000; } + +@layer base { + h1 { + @apply font-semibold text-3xl desktop:text-6xl desktop:leading-16; + } +} diff --git a/packages/website/static/privacy-policy.pdf b/packages/website/static/privacy.pdf similarity index 100% rename from packages/website/static/privacy-policy.pdf rename to packages/website/static/privacy.pdf diff --git a/packages/website/static/ripple-large.svg b/packages/website/static/ripple-large.svg new file mode 100644 index 00000000..d3b52cf7 --- /dev/null +++ b/packages/website/static/ripple-large.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/terms-of-use.pdf b/packages/website/static/terms.pdf similarity index 100% rename from packages/website/static/terms-of-use.pdf rename to packages/website/static/terms.pdf