improve animation performance

packages/website/src/components/CodeTerminal/CodeTerminal.js

@@ -28,7 +28,7 @@ async function example() {
 }`;
 
   return (
-    <div className="desktop:max-w-terminal">
+    <div>
       <div className="bg-palette-400 rounded-t space-x-2 px-2">
         <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
         <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>

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 = () => {
         <SectionTitle>Join our community</SectionTitle>
         <div className="grid grid-cols-2 desktop:grid-cols-6 max-w-column desktop:max-w-full">
           {social.map(({ name, Icon, href }) => (
-            <a
+            <Link
               key={name}
               href={href}
               className="text-palette-600 text-sm font-light flex items-center flex-shrink-0 flex-grow-0 whitespace-nowrap leading-10"
@@ -105,7 +106,7 @@ const CommunitySection = () => {
             >
               <Icon className="mr-2 fill-current" />
               <span>{name}</span>
-            </a>
+            </Link>
           ))}
         </div>
       </div>

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 = () => {
             </span>
           </div>
 
-          <a
+          <Link
             href="mailto:hello@siasky.net"
             className="font-content text-palette-300 text-base border-b-2 border-primary"
           >
             hello@siasky.net
-          </a>
+          </Link>
         </div>
       </div>
     </div>

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: "About us", to: "/about" },
-      { title: "Brand Guidelines", href: "/" },
+      {
-      { title: "Careers", href: "/" },
+        title: "Brand Guidelines",
-      { title: "Terms of Use", href: "/terms-of-use.pdf" },
+        href: "https://support.siasky.net/key-concepts/skynet-brand-guidelines",
-      { title: "Privacy Policy", href: "/privacy-policy.pdf" },
+        ...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: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
-      { title: "API Documentation", href: "/" },
+      { title: "API Documentation", href: "https://siasky.net/docs/", ...external },
-      { title: "SDK Documentation", href: "https://siasky.net/docs/" },
+      { title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
-      { title: "Developer Guide", href: "/" },
+      { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
-      { title: "Portal Setup", href: "/" },
     ],
   },
   {
     header: "Technology",
     links: [
-      { title: "What is Skynet?", href: "/" },
+      { title: "What is Skynet?", href: "https://support.siasky.net", ...external },
-      { title: "Technology Guide", href: "/" },
+      { title: "Frequent Questions", href: "https://support.siasky.net/key-concepts/faqs", ...external },
-      { title: "Pricing", href: "/pricing" },
+      { title: "Pricing", to: "/pricing" },
-      { title: "Skynet Wiki", href: "/" },
+      { title: "Skynet Wiki", href: "https://skynetwiki.tech", ...external },
-      { title: "Support", href: "https://support.siasky.net", target: "_blank" },
+      { title: "Support", href: "https://support.siasky.net", ...external },
     ],
   },
   {
     header: "Ecosystem",
     links: [
-      { title: "Sia Foundation", href: "/" },
+      { title: "Sia Foundation", href: "https://sia.tech", ...external },
-      { title: "Sia Foundation Forum", href: "/" },
+      { title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external },
-      { title: "Sia.tech", href: "https://sia.tech", target: "_blank" },
+      { title: "SiaStats", href: "https://siastats.info", ...external },
-      { title: "SiaStats", href: "https://siastats.info", target: "_blank" },
+      { title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external },
-      { title: "Skynet AppStore", href: "/" },
     ],
   },
   {
     header: "Skynet Webportals",
     links: [
-      { title: "Skydrain", href: "https://skydrain.net/", target: "_blank" },
+      { title: "Skydrain", href: "https://skydrain.net", ...external },
-      { title: "SkyPortal", href: "https://skyportal.xyz", target: "_blank" },
+      { title: "SkyPortal", href: "https://skyportal.xyz", ...external },
     ],
   },
 ];
@@ -66,9 +70,9 @@ const FooterNavigation = () => {
               <ul>
                 {section.links.map(({ title, ...rest }) => (
                   <li key={title} className="mt-1 first:mt-4">
-                    <a {...rest} className="text-white font-content">
+                    <Link {...rest} className="text-white font-content">
                       {title}
-                    </a>
+                    </Link>
                   </li>
                 ))}
               </ul>
@@ -101,9 +105,9 @@ const FooterNavigation = () => {
                   >
                     {section.links.map(({ title, ...rest }) => (
                       <li key={title} className="mt-1 first:mt-4">
-                        <a {...rest} className="text-white font-content">
+                        <Link {...rest} className="text-white font-content">
                           {title}
-                        </a>
+                        </Link>
                       </li>
                     ))}
                   </motion.ul>

packages/website/src/components/HeroStartPage/HeroStartPage.js

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-const HeroStartPage = () => {
-  return (
-    <div className="text-center p-8">
-      <h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
-        Build a{" "}
-        <span className="text-primary border-b-2 border-white">
-          free <br className="desktop:hidden" />
-          Internet
-        </span>
-      </h1>
-      <p className="mt-5 font-light text-md leading-7 text-palette-300">
-        <span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span>
-        <span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span>
-        <span className="desktop:hidden text-justify text-sm">
-          Skynet is a content and application hosting platform bringing decentralized storage to users, creators and app
-          developers.
-        </span>
-      </p>
-    </div>
-  );
-};
-
-HeroStartPage.propTypes = {};
-
-HeroStartPage.defaultProps = {};
-
-export default HeroStartPage;

packages/website/src/components/HeroStartPage/HeroStartPage.stories.js

@@ -1,15 +0,0 @@
-import React from "react";
-import HeroStartPage from "./HeroStartPage";
-
-export default {
-  title: "Layout/HeroStartPage",
-  component: HeroStartPage,
-};
-
-const Template = (args) => <HeroStartPage {...args} />;
-
-export const Default = Template.bind({});
-Default.parameters = {
-  backgrounds: { default: "dark" },
-};
-Default.args = {};

packages/website/src/components/HeroStartPage/index.js

@@ -1 +0,0 @@
-export { default } from "./HeroStartPage";

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);
+    if (mode !== calculated) {
-  }, [setMode, y]);
+      setMode(calculated);
+    }
+  }, [setMode, mode, y]);
 
   return (
-    <div ref={ref} className="sticky top-0 z-50">
+    <div ref={ref} className="fixed inset-x-0 top-0 z-50">
       <NewsHeader />
       <Navigation mode={mode} />
     </div>
@@ -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 (
-    <>
+    <div className="pt-48" style={{ background: "#0d0d0d url(/ripple-large.svg) no-repeat center top / contain" }}>
-      <BackgroundImage
+      <FixedHeader />
-        {...background}
-        className="bg-palette-600"
-        style={{ backgroundPosition: "center top", backgroundSize: "contain" }}
-      >
-        <StickyHeader />
       <main>{children}</main>
-      </BackgroundImage>
       <FooterNavigation />
       <Footer />
-    </>
+    </div>
   );
 };
 

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 }) => (
   <div className={classnames("px-8 py-16 desktop:py-32", className)} {...props}>
-    <div className="max-w-content mx-auto">{children}</div>
+    <div
+      className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })}
+    >
+      {children}
+    </div>
   </div>
 );
 

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 (
+      <GatsbyLink to={to} activeClassName={activeClassName} partiallyActive={partiallyActive} {...params}>
+        {children}
+      </GatsbyLink>
+    );
+  }
+
+  return <a {...params}>{children}</a>;
+}

packages/website/src/components/Link/index.js

@@ -0,0 +1 @@
+export { default } from "./Link";

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 = () => (
-  <a href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
+  <Link href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
     Log in
-  </a>
+  </Link>
 );
 
 const LogInButton = ({ className, ...props }) => (
-  <a
+  <Link
     href="https://secure.siasky.net/auth/registration"
     className={classnames(
       "border-2 border-white text-white px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
@@ -33,11 +32,11 @@ const LogInButton = ({ className, ...props }) => (
     {...props}
   >
     Log in
-  </a>
+  </Link>
 );
 
 const SignUpButton = ({ className, ...props }) => (
-  <a
+  <Link
     href="https://secure.siasky.net/auth/registration"
     className={classnames(
       "bg-primary text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
@@ -46,7 +45,7 @@ const SignUpButton = ({ className, ...props }) => (
     {...props}
   >
     Sign up
-  </a>
+  </Link>
 );
 
 const Navigation = ({ mode }) => {
@@ -70,21 +69,18 @@ const Navigation = ({ mode }) => {
   const mobileMenuOffset = navRef.current ? navRef.current.offsetTop : 0;
 
   return (
-    <motion.nav
+    <nav
-      className={classnames("relative px-8 transition-colors duration-500", {
+      className={classnames("relative px-8 transition-all duration-500", {
         "bg-white border-b border-palette-200": mode === "light",
         "bg-palette-600 bg-opacity-50": mode === "dark",
+        "p-12": offsetY === 0,
+        "p-6": offsetY > 0,
       })}
-      initial={false}
-      animate={{
-        paddingTop: offsetY ? "24px" : "48px",
-        paddingBottom: offsetY ? "24px" : "48px",
-      }}
       ref={navRef}
     >
       <div className={classnames("max-w-layout mx-auto")}>
         <div className="flex justify-between">
-          <Link to="/" className={classnames("flex flex-shrink-0 items-center", { hidden: open }, "desktop:flex")}>
+          <Link to="/" className={classnames("flex flex-shrink-0 items-center")}>
             {mode === "dark" && <LogoWhiteText className="h-8 w-auto" />}
             {mode === "light" && <LogoBlackText className="h-8 w-auto" />}
           </Link>
@@ -122,10 +118,12 @@ const Navigation = ({ mode }) => {
         </div>
 
         <div
-          className={classnames("fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden", {
+          className={classnames(
-            block: open,
+            "fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden transition-all duration-500 transform",
-            hidden: !open,
+            {
-          })}
+              "translate-x-full": !open,
+            }
+          )}
           style={{ marginTop: mobileMenuOffset }}
         >
           <ul className="py-10 space-y-2">
@@ -138,7 +136,7 @@ const Navigation = ({ mode }) => {
             ))}
           </ul>
           <div className="border-t border-palette-500 py-7">
-            <a
+            <Link
               href="https://discordapp.com/invite/sia"
               className="text-palette-300 text-m font-content flex items-center"
               target="_blank"
@@ -146,7 +144,7 @@ const Navigation = ({ mode }) => {
             >
               <DiscordSmall className="mr-2 fill-current text-white" />
               <span>Join our Discord</span>
-            </a>
+            </Link>
           </div>
           <div className="pt-12 pb-8 border-t border-palette-500">
             <div className="flex items-center justify-center px-4 space-x-6">
@@ -156,7 +154,7 @@ const Navigation = ({ mode }) => {
           </div>
         </div>
       </div>
-    </motion.nav>
+    </nav>
   );
 };
 

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 = () => {
           <Link
             to="/news"
             className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base"
-            target="_blank"
-            rel="noopener noreferrer"
           >
             <ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
             <span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span>
           </Link>
 
           <div className="ml-auto items-center pl-8 hidden desktop:block">
-            <a
+            <Link
               href="https://discordapp.com/invite/sia"
               className="text-palette-300 leading-8 font-content flex items-center flex-shrink-0 whitespace-nowrap"
               target="_blank"
@@ -26,7 +24,7 @@ const NewsHeader = () => {
             >
               <DiscordSmallWhite className="mr-2" />
               <span>Join our Discord</span>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

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 = () => (
-  <a
+  <Link
     href="https://secure.siasky.net/auth/registration"
     target="_blank"
     rel="noopener noreferrer"
     className="uppercase border-b-2 border-primary"
   >
     Sign up
-  </a>
+  </Link>
 );
 
 const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
@@ -99,9 +100,9 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
               {status === "processing" && <span className="text-palette-300">Processing...</span>}
 
               {status === "complete" && (
-                <a href={url} target="_blank" rel="noopener noreferrer">
+                <Link href={url} target="_blank" rel="noopener noreferrer">
                   {url}
-                </a>
+                </Link>
               )}
 
               {status === "error" && error && <span className="text-error">{error}</span>}

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 && (
         <div className="flex flex-row">
           {Object.entries(social).map(([platform, href]) => (
-            <a href={href} title={platform}>
+            <Link key={platform} href={href} title={platform} target="_blank" rel="noopener noreferrer">
               <SocialIcon name={platform} />
-            </a>
+            </Link>
           ))}
         </div>
       )}
@@ -213,7 +214,7 @@ const AboutPage = () => (
     <Section className="bg-palette-100">
       <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
         <div className="col-span-3">
-          <h1 className="font-semibold text-3xl desktop:text-6xl desktop:leading-16">
+          <h1>
             Skynet is the foundation for a new, <span className="underline text-primary">decentralized internet</span>
           </h1>
         </div>
@@ -232,9 +233,9 @@ const AboutPage = () => (
             censorship-resistance will be the new standards of the digital world.
           </p>
 
-          <a href="/" className="uppercase inline-flex items-center text-xs text-palette-600">
+          <Link to="/developers" className="uppercase inline-flex items-center text-xs text-palette-600">
             Learn more about how our technology works <ArrowRight />
-          </a>
+          </Link>
         </div>
       </div>
     </Section>
@@ -254,12 +255,12 @@ const AboutPage = () => (
 
       <div className="mt-14 text-center space-y-6">
         <p className="font-light text-lg text-palette-600">Want to build apps with these features?</p>
-        <a
+        <Link
           href="https://secure.siasky.net"
           className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center"
         >
           Get started here
-        </a>
+        </Link>
       </div>
     </Section>
 

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 = () => (
-  <a
+  <Link
     href="https://secure.siasky.net"
     className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
+    target="_blank"
+    rel="noopener noreferrer"
   >
     Learn more
-  </a>
+  </Link>
 );
 
 const reasonCards = [
@@ -73,24 +76,24 @@ const DevelopersPage = () => (
   <Layout>
     <SEO title="Developers" />
 
-    <Section>
+    <Section width="layout">
-      <div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12">
+      <div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12 desktop:space-x-12">
         <div className="space-y-12">
-          <h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
+          <h1 className="text-white">
             Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
           </h1>
 
           <ul className="space-y-2">
             {docs.map(({ name, href }, index) => (
               <li key={index}>
-                <a
+                <Link
                   href={href}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-primary font-light text-lg inline-flex"
                 >
                   {name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
-                </a>
+                </Link>
               </li>
             ))}
           </ul>
@@ -141,13 +144,13 @@ const DevelopersPage = () => (
         <ul className="col-span-2 space-y-1">
           {resources.map(({ href, title, description }, index) => (
             <li key={index}>
-              <a
+              <Link
                 href={href}
                 className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
               >
                 <div className="font-semibold text-lg">{title}</div>
                 <div className="font-content text-palette-400">{description}</div>
-              </a>
+              </Link>
             </li>
           ))}
         </ul>

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 = () => (
-  <a
+  <Link
     href="https://secure.siasky.net"
     className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
+    target="_blank"
+    rel="noopener noreferrer"
   >
     Learn more
-  </a>
+  </Link>
 );
 
 const etosCards = [
@@ -80,7 +82,20 @@ const IndexPage = () => {
       <SEO title="Home" />
 
       <Section>
-        <HeroStartPage />
+        <div className="text-center">
+          <h1 className="text-4xl desktop:text-6xl text-white">
+            Build a <span className="text-primary border-b-2 border-white">free Internet</span>
+          </h1>
+
+          <p className="mt-5 font-light text-md leading-7 text-palette-300">
+            <span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span>
+            <span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span>
+            <span className="desktop:hidden text-justify text-sm">
+              Skynet is a content and application hosting platform bringing decentralized storage to users, creators and
+              app developers.
+            </span>
+          </p>
+        </div>
       </Section>
 
       <div className="px-8 py-16 relative">
@@ -105,9 +120,9 @@ const IndexPage = () => {
             our decentralized ecosystem and revolution.
           </p>
 
-          <a href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
+          <Link href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
             Try Skynet Apps <ArrowRight />
-          </a>
+          </Link>
         </div>
       </Section>
 

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;
+  }
+}

packages/website/static/ripple-large.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1678" viewBox="0 0 1920 1678">
+    <defs>
+        <filter id="fw58gw6x8b">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
+        </filter>
+        <path id="1iloj263ba" d="M0 0H1920V1678H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <mask id="uuzfvsiz4c" fill="#fff">
+                <use xlink:href="#1iloj263ba"/>
+            </mask>
+            <g filter="url(#fw58gw6x8b)" opacity=".1">
+                <g mask="url(#uuzfvsiz4c)">
+                    <g stroke="#0D0D0D" stroke-width="2">
+                        <path d="M231.792 1663C86.95 1487.317 0 1262.175 0 1016.762 0 455.212 455.319 0 1017 0c561.683 0 1017 455.212 1017 1016.762M1017 2034c-245.75 0-471.181-87.056-647-232M1572 1708c-151.85 121.98-344.773 195-554.798 195-168.125 0-325.293-46.781-459.202-128.026" transform="translate(-57 -489)"/>
+                        <path d="M1840.173 689C1880.699 790.498 1903 901.16 1903 1017.076c0 209.15-72.582 401.382-194 552.924M259 1476c-81.21-133.817-128-290.937-128-459M1664.312 629.504C1732.06 742.703 1771 875.146 1771 1016.694c0 122.409-29.145 238.054-80.831 340.306" transform="translate(-57 -489)"/>
+                        <path stroke-dasharray="16" d="M1359 1690.08c-102.78 52.38-219.143 81.92-342.428 81.92C599.817 1772 262 1434.203 262 1017.467c0-135.036 35.5-261.806 97.622-371.467" transform="translate(-57 -489)"/>
+                        <path stroke-dasharray="16" stroke-linecap="round" d="M669 500.473C768.441 433.264 888.32 394 1017.386 394c255.83 0 475.662 154.296 571.614 375" transform="translate(-57 -489)"/>
+                        <path d="M425.816 1214C405.159 1152.072 394 1085.816 394 1016.933c0-145.27 49.713-278.901 133-384.933M1597 1246c-91.445 230.761-316.67 394-580 394" transform="translate(-57 -489)"/>
+                        <path stroke-dasharray="16" stroke-linecap="round" d="M1499 1114.888C1453.622 1339.745 1254.988 1509 1016.868 1509 745.22 1509 525 1288.72 525 1017" transform="translate(-57 -489)"/>
+                        <path d="M1249.343 583.242C1375.916 651.215 1469.323 772.994 1499 918M1351 1016.5c0 184.474-149.75 334-334.5 334S682 1200.974 682 1016.5c0-42.067 7.787-82.316 22-119.39M344 1739c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zM1542 986c0 17.666-14.333 32-32 32-17.666 0-32-14.334-32-32 0-17.667 14.334-32 32-32 17.667 0 32 14.333 32 32zM1689 1641c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zM621 556.5c0 17.666-14.333 32-32 32-17.666 0-32-14.334-32-32 0-17.667 14.334-32 32-32 17.667 0 32 14.333 32 32z" transform="translate(-57 -489)"/>
+                    </g>
+                </g>
+            </g>
+            <path stroke="#1C1C1C" stroke-linecap="round" stroke-width="96" d="M960 1257c402.616 0 729-326.384 729-729s-326.384-729-729-729-729 326.384-729 729" mask="url(#uuzfvsiz4c)" opacity=".5" transform="rotate(-90 960 528)"/>
+        </g>
+    </g>
+</svg>