update

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "svg.preview.background": "transparent"
+}

packages/website/data/investors.yml

@@ -0,0 +1,22 @@
+- name: A.Capital Ventures
+  image: ./investors/investors-logo-1.png
+- name: Bain Capital
+  image: ./investors/investors-logo-2.png
+- name: Bessemer Venture Partners
+  image: ./investors/investors-logo-3.png
+- name: Collab
+  image: ./investors/investors-logo-4.png
+- name: Dragonfly Capital
+  image: ./investors/investors-logo-5.png
+- name: Fenbushi Capital
+  image: ./investors/investors-logo-6.png
+- name: First Star Ventures
+  image: ./investors/investors-logo-7.png
+- name: Hack VC
+  image: ./investors/investors-logo-8.png
+- name: INBlockchain
+  image: ./investors/investors-logo-9.png
+- name: Paradigm
+  image: ./investors/investors-logo-10.png
+- name: SV Angel
+  image: ./investors/investors-logo-11.png

packages/website/data/myconf.yaml

@@ -0,0 +1,22 @@
+navigation:
+  - title: Home
+    to: /
+  - title: About
+    to: /about
+  - title: Developers
+    to: /developers
+  - title: News
+    to: /news
+team:
+  - name: "Chris Schinnerl"
+    position: "VP of Technology"
+    image: images/team/chris-schinnerl.png
+    social:
+      - github: https://github.com/ChrisSchinnerl
+      - gitlab: https://gitlab.com/ChrisSchinnerl
+      - twitter: https://twitter.com/ChrisSchinnerl
+  - name: Steve Funk
+    position: Head of Support
+    image: images/team/steve-funk.png
+    social:
+      - linkedin: https://www.linkedin.com/in/stevengfunk

packages/website/data/navigation.yaml

@@ -0,0 +1,6 @@
+- name: Skynet Labs
+  items:
+    - name: About us
+      to: /
+    - name: Brand Guidelines
+      href: https://support.siasky.net/key-concepts/skynet-brand-guidelines

packages/website/data/team.yaml

@@ -0,0 +1,85 @@
+- name: David Vorick
+  position: CEO and Lead Developer
+  image: ./team/david-vorick.png
+  social:
+    github: https://github.com/DavidVorick
+    gitlab: https://gitlab.com/DavidVorick
+    twitter: https://twitter.com/davidvorick
+
+- name: Chris Schinnerl
+  position: VP of Technology
+  image: ./team/chris-schinnerl.png
+  social:
+    github: https://github.com/ChrisSchinnerl
+    gitlab: https://gitlab.com/ChrisSchinnerl
+    twitter: https://twitter.com/ChrisSchinnerl
+
+- name: Steve Funk
+  position: Head of Support
+  image: ./team/steve-funk.png
+  social:
+    linkedin: https://www.linkedin.com/in/stevengfunk
+
+- name: Matt Sevey
+  position: Engineering Manager
+  image: ./team/matt-sevey.png
+  social:
+    github: https://github.com/MSevey
+    gitlab: https://gitlab.com/MSevey
+    linkedin: https://www.linkedin.com/in/sevey
+    twitter: https://twitter.com/MJSevey
+
+- name: Manasi Vora
+  position: VP of Strategy and Ops
+  image: ./team/manasi-vora.png
+  social:
+    linkedin: https://linkedin.com/in/manasi-vora-cfa-bb9a1715
+    twitter: https://twitter.com/manasilvora
+
+- name: PJ Brone
+  position: Core Developer
+  image: ./team/pj-brone.png
+  social:
+    github: https://github.com/peterjan
+    gitlab: https://gitlab.com/pjbrone
+    linkedin: https://www.linkedin.com/in/peterjanbrone
+    twitter: https://twitter.com/peterjanbrone
+
+- name: Marcin Swieczkowski
+  position: Core Developer
+  image: ./team/marcin-swieczkowski.png
+  social:
+    github: https://github.com/m-cat
+    gitlab: https://gitlab.com/m-cat
+
+- name: Karol Wypchlo
+  position: Full Stack Developer
+  image: ./team/karol-wypchlo.png
+  social:
+    github: https://github.com/kwypchlo
+    gitlab: https://gitlab.com/kwypchlo
+    linkedin: https://www.linkedin.com/in/karolwypchlo/
+    twitter: https://twitter.com/kwypchlo
+
+- name: Ivaylo Novakov
+  position: Core Developer
+  image: ./team/ivaylo-novakov.png
+  social:
+    github: https://github.com/ro-tex
+    gitlab: https://gitlab.com/kwypchlo
+    linkedin: https://www.linkedin.com/in/karolwypchlo/
+    twitter: https://twitter.com/kwypchlo
+
+- name: Filip Rysavy
+  position: Testing Developer
+  image: ./team/filip-rysavy.png
+  social:
+    linkedin: https://www.linkedin.com/in/filiprysavy/
+
+- name: Nicole Tay
+  position: Head of Marketing
+  image: ./team/nicole-tay.png
+
+- name: Daniel Helm
+  position: Developer Evangelist
+  image: ./team/daniel-helm.png

packages/website/gatsby-config.js

@@ -1,12 +1,14 @@
+const { defaultIcons } = require("gatsby-plugin-manifest/common");
+
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
+    title: `Skynet`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
+    description: `Skynet is a decentralized file sharing and content distribution protocol`,
-    author: `@gatsbyjs`,
+    author: `Skynet Labs Inc`,
+    siteUrl: `https://siasky.net`,
+    image: `https://siasky.net/icons/icon-512x512.png`,
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
-    `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -21,26 +23,53 @@ module.exports = {
         path: `${__dirname}/src/`,
       },
     },
-    `gatsby-transformer-sharp`,
+    {
-    `gatsby-transformer-json`,
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `data`,
+        path: `${__dirname}/data/`,
+      },
+    },
+    `gatsby-plugin-postcss`,
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-react-svg`,
+    `gatsby-plugin-robots-txt`,
+    `gatsby-transformer-sharp`,
+    `gatsby-transformer-json`,
+    `gatsby-transformer-yaml`,
+    `gatsby-transformer-remark`,
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
+        name: `Skynet`,
-        short_name: `starter`,
+        short_name: `Skynet`,
         start_url: `/`,
-        background_color: `#663399`,
+        background_color: `#f1f7f2`,
-        theme_color: `#663399`,
+        theme_color: `#f1f7f2`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/logo.svg`, // This path is relative to the root of the site.
+        icons: [
+          ...defaultIcons,
+          // when we're serving content from the portal on our pathnames that do not have
+          // favicon defined (basically all non-html content), we want the browsers to be
+          // able to fall back to favicon.ico (firefox does that)
+          {
+            src: `favicon.ico`,
+            sizes: `32x32`,
+            type: `image/x-icon`,
+          },
+        ],
+      },
+    },
+    {
+      resolve: "gatsby-plugin-matomo",
+      options: {
+        siteId: 3,
+        matomoUrl: "https://surveillance.sia.tech",
+        siteUrl: "https://siasky.net",
       },
     },
-    `gatsby-plugin-gatsby-cloud`,
-    `gatsby-plugin-postcss`,
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
   ],
 };

packages/website/package.json

@@ -16,18 +16,22 @@
     "framer-motion": "^4.0.3",
     "gatsby": "^3.1.2",
     "gatsby-background-image": "^1.5.0",
-    "gatsby-plugin-gatsby-cloud": "^2.0.0",
+    "gatsby-image": "^3.2.0",
     "gatsby-plugin-image": "^1.1.2",
     "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-matomo": "^0.9.0",
     "gatsby-plugin-offline": "^4.0.0",
     "gatsby-plugin-postcss": "^4.0.0",
     "gatsby-plugin-purgecss": "^6.0.0",
     "gatsby-plugin-react-helmet": "^4.0.0",
     "gatsby-plugin-react-svg": "^3.0.0",
+    "gatsby-plugin-robots-txt": "^1.5.5",
     "gatsby-plugin-sharp": "^3.1.2",
     "gatsby-source-filesystem": "^3.0.0",
     "gatsby-transformer-json": "^3.1.0",
+    "gatsby-transformer-remark": "^3.2.0",
     "gatsby-transformer-sharp": "^3.0.0",
+    "gatsby-transformer-yaml": "^3.2.0",
     "gbimage-bridge": "^0.1.1",
     "http-status-codes": "^2.1.4",
     "jsonp": "^0.2.1",

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

@@ -29,13 +29,13 @@ async function example() {
 
   return (
     <div>
-      <div className="bg-palette-400 rounded-t space-x-2 px-2">
+      <div className="bg-palette-400 rounded-t space-x-2 px-2" style={{ width: "540px" }}>
-        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
+        <div className="circle bg-error"></div>
-        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>
+        <div className="circle bg-warning"></div>
-        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-primary"></div>
+        <div className="circle bg-primary"></div>
       </div>
       <div className="p-4 bg-palette-500 text-sm" style={{ backgroundColor: "rgb(40, 44, 52)" }}>
-        <SyntaxHighlighter language="javascript" showLineNumbers={true} wrapLongLines={true} style={style}>
+        <SyntaxHighlighter language="javascript" showLineNumbers={true} style={style}>
           {codeString}
         </SyntaxHighlighter>
       </div>

packages/website/src/components/CommunitySection/CommunitySection.js

@@ -83,9 +83,12 @@ const CommunitySection = () => {
 
           {complete && message && (
             <div
-              className={classnames("text-center bg-white py-2 px-4 rounded bg-opacity-20 font-semibold font-content", {
+              className={classnames(
-                "text-error": !success,
+                "newsletter-message text-center py-2 px-4 rounded bg-palette-600 font-semibold font-content",
-              })}
+                {
+                  "text-error": !success,
+                }
+              )}
               dangerouslySetInnerHTML={{ __html: message }}
             ></div>
           )}
@@ -101,8 +104,6 @@ const CommunitySection = () => {
               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"
-              target="_blank"
-              rel="noopener noreferrer"
             >
               <Icon className="mr-2 fill-current" />
               <span>{name}</span>

packages/website/src/components/Footer/Footer.js

@@ -16,7 +16,7 @@ const Footer = () => {
 
           <Link
             href="mailto:hello@siasky.net"
-            className="font-content text-palette-300 text-base border-b-2 border-primary"
+            className="font-content text-palette-300 text-base underline-primary hover:text-primary transition-colors duration-200"
           >
             hello@siasky.net
           </Link>

packages/website/src/components/FooterNavigation/FooterNavigation.js

@@ -23,7 +23,7 @@ const sections = [
     header: "Developers",
     links: [
       { title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
-      { title: "API and SDK Documentation", href: "https://siasky.net/docs/", ...external },
+      { title: "API & SDK Documentation", href: "https://siasky.net/docs/", ...external },
       { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
     ],
   },
@@ -60,7 +60,7 @@ const FooterNavigation = () => {
 
   return (
     <div className="bg-palette-500 px-8 py-14">
-      <div className="max-w-content mx-auto flex flex-col desktop:flex-row justify-between desktop:space-x-6 space-y-4 desktop:space-y-0">
+      <div className="max-w-content mx-auto grid grid-cols-1 desktop:grid-cols-5 desktop:gap-x-6 gap-y-4 desktop:gap-y-0">
         {sections.map((section) => (
           <div key={section.header}>
             {/* desktop */}
@@ -68,8 +68,11 @@ const FooterNavigation = () => {
               <div className="text-lg text-palette-300 font-light">{section.header}</div>
               <ul>
                 {section.links.map(({ title, ...rest }) => (
-                  <li key={title} className="mt-1 first:mt-4">
+                  <li key={title} className="mt-2 first:mt-4">
-                    <Link {...rest} className="text-white font-content">
+                    <Link
+                      {...rest}
+                      className="text-white font-content hover:text-primary transition-colors duration-200"
+                    >
                       {title}
                     </Link>
                   </li>
@@ -81,7 +84,7 @@ const FooterNavigation = () => {
             <div className="desktop:hidden">
               <button
                 type="button"
-                className={classnames("text-lg font-light", {
+                className={classnames("text-lg font-light hover:text-primary transition-colors duration-200", {
                   "text-primary": activeSection === section,
                   "text-palette-300": activeSection !== section,
                 })}
@@ -104,7 +107,10 @@ const FooterNavigation = () => {
                   >
                     {section.links.map(({ title, ...rest }) => (
                       <li key={title} className="mt-1 first:mt-4">
-                        <Link {...rest} className="text-white font-content">
+                        <Link
+                          {...rest}
+                          className="text-white font-content hover:text-primary transition-colors duration-200"
+                        >
                           {title}
                         </Link>
                       </li>

packages/website/src/components/Layout/Layout.js

@@ -14,14 +14,13 @@ import FooterNavigation from "../FooterNavigation";
 import { useWindowScroll } from "react-use";
 import { readableColor } from "polished";
 
-const minHeight = 192; // this is p-48 that is added to account for the size of the fixed navigation
 const FixedHeader = () => {
   const { y } = useWindowScroll();
   const ref = React.useRef(null);
   const [mode, setMode] = React.useState();
 
   React.useLayoutEffect(() => {
-    const offset = Math.max(minHeight, ref.current.offsetHeight);
+    const offset = ref.current.offsetHeight;
     const element = document.elementFromPoint(0, offset);
     const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
     const color = readableColor(backgroundColor); // returns either #fff or #000
@@ -52,12 +51,12 @@ const Layout = ({ children }) => {
   // `);
 
   return (
-    <div className="pt-48" style={{ background: "#0d0d0d url(/ripple-large.svg) no-repeat center top / contain" }}>
+    <>
       <FixedHeader />
       <main>{children}</main>
       <FooterNavigation />
       <Footer />
-    </div>
+    </>
   );
 };
 

packages/website/src/components/Layout/Section.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import classnames from "classnames";
+import { useInterval } from "react-use";
 
 export const Section = ({
   children,
   className,
   width = "content",
+  first = false,
   marginBottom = true,
   marginTop = true,
   ...props
@@ -13,7 +15,8 @@ export const Section = ({
     className={classnames(
       "px-8",
       {
-        "pt-16 desktop:pt-32": marginTop,
+        "pt-48 desktop:pt-80": marginTop && first, // + navigation offset => pt-32 desktop:pt-48
+        "pt-16 desktop:pt-32": marginTop && !first,
         "pb-16 desktop:pb-32": marginBottom,
       },
       className
@@ -40,6 +43,56 @@ export const SectionTitleCaption = ({ children, className, ...props }) => (
   </h6>
 );
 
+export const CardContainer = ({ Component, cards, ...props }) => {
+  return (
+    <div {...props}>
+      {cards.map((card, index) => (
+        <Component key={index} {...card} />
+      ))}
+    </div>
+  );
+};
+
+export const CardCarousel = ({ CardComponent, cards, interval = null, fullWidth = false }) => {
+  const [paused] = React.useState(false);
+  const [activeCard, setActiveCard] = React.useState(0);
+
+  useInterval(() => setActiveCard(activeCard + 1 < cards.length ? activeCard + 1 : 0), paused ? null : interval);
+
+  return (
+    <div className="flex flex-col items-center relative">
+      <div className="opacity-0">
+        <CardComponent {...cards[activeCard]} />
+      </div>
+
+      {cards.map((card, index) => (
+        <div
+          key={index}
+          className={classnames("transition-opacity absolute", {
+            "opacity-0": activeCard !== index,
+            "w-full": fullWidth,
+          })}
+        >
+          <CardComponent {...card} />
+        </div>
+      ))}
+
+      <div className="flex justify-center mt-8">
+        {cards.map((card, index) => (
+          <button key={index} type="button" className="p-3 flex" onClick={() => setActiveCard(index)}>
+            <span
+              className={classnames("circle transition-colors", {
+                "bg-primary border-2 border-primary": activeCard === index,
+                "bg-white border-2 border-palette-600": activeCard !== index,
+              })}
+            ></span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 export const CardWithTitle = ({ Icon, title }) => (
   <div className="flex flex-col items-center">
     <Icon height="142" />

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

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { Link as GatsbyLink } from "gatsby";
 
-export default function Link({ children, to, activeClassName, partiallyActive, ...params }) {
+export default function Link({
+  children,
+  to,
+  activeClassName,
+  partiallyActive,
+  target = "_blank",
+  rel = "noopener noreferrer",
+  ...params
+}) {
   if (to) {
     return (
       <GatsbyLink to={to} activeClassName={activeClassName} partiallyActive={partiallyActive} {...params}>
@@ -10,5 +18,9 @@ export default function Link({ children, to, activeClassName, partiallyActive, .
     );
   }
 
-  return <a {...params}>{children}</a>;
+  return (
+    <a {...params} target={target} rel={rel}>
+      {children}
+    </a>
+  );
 }

packages/website/src/components/Navigation/Navigation.js

@@ -16,38 +16,6 @@ const routes = [
   { title: "News", to: "/news" },
 ];
 
-const LogInLink = () => (
-  <Link href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
-    Log in
-  </Link>
-);
-
-const LogInButton = ({ className, ...props }) => (
-  <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",
-      className
-    )}
-    {...props}
-  >
-    Log in
-  </Link>
-);
-
-const SignUpButton = ({ className, ...props }) => (
-  <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",
-      className
-    )}
-    {...props}
-  >
-    Sign up
-  </Link>
-);
-
 const Navigation = ({ mode }) => {
   const navRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
@@ -73,16 +41,16 @@ const Navigation = ({ mode }) => {
       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,
+        "py-6 desktop:py-12": offsetY === 0,
-        "p-6": offsetY > 0,
+        "py-6": offsetY > 0,
       })}
       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")}>
-            {mode === "dark" && <LogoWhiteText className="" />}
+            {mode === "dark" && <LogoWhiteText className="h-8 desktop:h-10" />}
-            {mode === "light" && <LogoBlackText className="" />}
+            {mode === "light" && <LogoBlackText className="h-8 desktop:h-10" />}
           </Link>
           <div className="ml-auto flex items-center desktop:hidden z-10">
             <button
@@ -103,8 +71,8 @@ const Navigation = ({ mode }) => {
               <Link
                 key={to}
                 to={to}
-                activeClassName="underline-navigation"
+                activeClassName="underline-primary"
-                className={classnames("text-sm font-light transition-colors duration-500", {
+                className={classnames("text-sm font-light transition-colors duration-200 hover:text-primary", {
                   "text-white": mode === "dark",
                   "text-palette-600": mode === "light",
                 })}
@@ -112,8 +80,12 @@ const Navigation = ({ mode }) => {
                 {title}
               </Link>
             ))}
-            <LogInLink />
+            <Link href="https://secure.siasky.net" className="button-link-primary">
-            <SignUpButton />
+              Log in
+            </Link>
+            <Link href="https://secure.siasky.net/auth/registration" className="button-primary">
+              Sign up
+            </Link>
           </div>
         </div>
 
@@ -127,9 +99,14 @@ const Navigation = ({ mode }) => {
           style={{ marginTop: mobileMenuOffset }}
         >
           <ul className="py-10 space-y-2">
-            {routes.map(({ title, route }) => (
+            {routes.map(({ title, to }) => (
               <li key={title}>
-                <Link key={route} to={route} className="text-xl leading-7 font-semibold text-white">
+                <Link
+                  key={to}
+                  to={to}
+                  activeClassName="underline-primary"
+                  className="text-xl leading-7 font-semibold text-white transition-colors duration-200 hover:text-primary"
+                >
                   {title}
                 </Link>
               </li>
@@ -139,8 +116,6 @@ const Navigation = ({ mode }) => {
             <Link
               href="https://discordapp.com/invite/sia"
               className="text-palette-300 text-m font-content flex items-center"
-              target="_blank"
-              rel="noopener noreferrer"
             >
               <DiscordSmall className="mr-2 fill-current text-white" />
               <span>Join our Discord</span>
@@ -148,8 +123,13 @@ const Navigation = ({ mode }) => {
           </div>
           <div className="pt-12 pb-8 border-t border-palette-500">
             <div className="flex items-center justify-center px-4 space-x-6">
-              <LogInButton className="px-10" />
+              <Link href="https://secure.siasky.net" className="button-secondary-light">
-              <SignUpButton className="px-10" />
+                Log in
+              </Link>
+
+              <Link href="https://secure.siasky.net/auth/registration" className="button-primary">
+                Sign up
+              </Link>
             </div>
           </div>
         </div>

packages/website/src/components/NewsHeader/NewsHeader.js

@@ -9,7 +9,7 @@ const NewsHeader = () => {
         <div className="flex justify-between">
           <Link
             to="/news"
-            className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base"
+            className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base hover:text-primary transition-colors duration-200"
           >
             <ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
             <span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span>
@@ -19,8 +19,6 @@ const NewsHeader = () => {
             <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"
-              rel="noopener noreferrer"
             >
               <DiscordSmallWhite className="mr-2" />
               <span>Join our Discord</span>

packages/website/src/components/Uploader/Uploader.js

@@ -62,9 +62,7 @@ const client = new SkynetClient("https://siasky.net");
 const RegistrationLink = () => (
   <Link
     href="https://secure.siasky.net/auth/registration"
-    target="_blank"
+    className="uppercase underline-primary hover:text-primary transition-colors duration-200"
-    rel="noopener noreferrer"
-    className="uppercase border-b-2 border-primary"
   >
     Sign up
   </Link>
@@ -100,7 +98,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
               {status === "processing" && <span className="text-palette-300">Processing...</span>}
 
               {status === "complete" && (
-                <Link href={url} target="_blank" rel="noopener noreferrer">
+                <Link href={url} className="hover:text-primary transition-colors duration-200">
                   {url}
                 </Link>
               )}
@@ -115,7 +113,10 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
               )}
               {status === "processing" && <span className="uppercase text-palette-300">Wait</span>}
               {status === "complete" && (
-                <button className="uppercase" onClick={() => handleCopy(url)}>
+                <button
+                  className="uppercase hover:text-primary transition-colors duration-200"
+                  onClick={() => handleCopy(url)}
+                >
                   <span className={classnames({ hidden: copied, "hidden desktop:inline": !copied })}>Copy link</span>
                   <span className={classnames({ hidden: copied, "inline desktop:hidden": !copied })}>Copy</span>
                   <span className={classnames({ hidden: !copied })}>Copied</span>
@@ -273,7 +274,7 @@ const Uploader = () => {
             </h4>
           </div>
           <div className="absolute left-1/2 -bottom-4 desktop:-bottom-8">
-            <div className="relative -left-1/2" role="button">
+            <div className="relative -left-1/2 transform transition-transform hover:rotate-180" role="button">
               <Add />
             </div>
           </div>

packages/website/src/components/seo.js

@@ -5,10 +5,10 @@
  * See: https://www.gatsbyjs.com/docs/use-static-query/
  */
 
-import * as React from "react"
+import * as React from "react";
-import PropTypes from "prop-types"
+import PropTypes from "prop-types";
-import { Helmet } from "react-helmet"
+import { Helmet } from "react-helmet";
-import { useStaticQuery, graphql } from "gatsby"
+import { useStaticQuery, graphql } from "gatsby";
 
 function SEO({ description, lang, meta, title }) {
   const { site } = useStaticQuery(
@@ -19,14 +19,15 @@ function SEO({ description, lang, meta, title }) {
             title
             description
             author
+            image
           }
         }
       }
     `
-  )
+  );
 
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription = description || site.siteMetadata.description;
-  const defaultTitle = site.siteMetadata?.title
+  const defaultTitle = site.siteMetadata?.title;
 
   return (
     <Helmet
@@ -52,6 +53,10 @@ function SEO({ description, lang, meta, title }) {
           property: `og:type`,
           content: `website`,
         },
+        {
+          property: `og:image`,
+          content: site.siteMetadata?.image || "",
+        },
         {
           name: `twitter:card`,
           content: `summary`,
@@ -70,20 +75,20 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  )
+  );
 }
 
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
-}
+};
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-}
+};
 
-export default SEO
+export default SEO;

packages/website/src/images/logo.svg

@@ -0,0 +1,8 @@
+<svg viewBox="19.88800048828125 37.1175193787 132.07760620117188 132.07760620117188" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>.cls-1,.cls-2{fill:#0071bc;}.cls-1{fill-rule:evenodd;}.cls-2{font-size:87px;font-family:Karbon-Light, Karbon;font-weight:300;letter-spacing:-0.05em;}.cls-3{letter-spacing:-0.05em;}.cls-4{letter-spacing:-0.05em;}</style>
+  </defs>
+  <path class="cls-1" d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z" style="fill: rgb(88, 181, 96);"></path>
+  <path class="cls-1" d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z" style="fill: rgb(88, 181, 96);"></path>
+  <path class="cls-1" d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z" style="fill: rgb(88, 181, 96);"></path>
+</svg>

packages/website/src/pages/about.js

@@ -1,6 +1,12 @@
 import * as React from "react";
-import { StaticImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import Layout, { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout";
+import Layout, {
+  Section,
+  SectionTitle,
+  SectionTitleCaption,
+  CardWithDescription,
+  CardCarousel,
+} from "../components/Layout";
 import SEO from "../components/seo";
 import {
   ArrowRight,
@@ -17,6 +23,7 @@ import {
   LinkedinSmall,
 } from "../components/Icons";
 import Link from "../components/Link";
+import { graphql } from "gatsby";
 
 const aboutCards = [
   {
@@ -59,118 +66,15 @@ const aboutCards = [
   },
 ];
 
-const teamCards = [
+const careers = { href: "https://jobs.lever.co/nebulous", target: "_blank", rel: "noopener noreferrer" };
-  {
+
-    name: "David Vorick",
+const paginate = (array, size) =>
-    position: "CEO and Lead Developer",
+  array.reduce((acc, item, index) => {
-    Image: <StaticImage src="../images/team/david-vorick.png" alt="David Vorick" />,
+    const chunkIndex = Math.floor(index / size);
-    social: {
+    if (!acc[chunkIndex]) acc[chunkIndex] = { cards: [] }; // start a new chunk
-      github: "https://github.com/DavidVorick",
+    acc[chunkIndex].cards.push(item);
-      gitlab: "https://gitlab.com/DavidVorick",
+    return acc;
-      twitter: "https://twitter.com/davidvorick",
+  }, []);
-    },
-  },
-  {
-    name: "Chris Schinnerl",
-    position: "VP of Technology",
-    Image: <StaticImage src="../images/team/chris-schinnerl.png" alt="Chris Schinnerl" />,
-    social: {
-      github: "https://github.com/ChrisSchinnerl",
-      gitlab: "https://gitlab.com/ChrisSchinnerl",
-      twitter: "https://twitter.com/ChrisSchinnerl",
-    },
-  },
-  {
-    name: "Steve Funk",
-    position: "Head of Support",
-    Image: <StaticImage src="../images/team/steve-funk.png" alt="Steve Funk" />,
-    social: {
-      linkedin: "https://www.linkedin.com/in/stevengfunk",
-    },
-  },
-  {
-    name: "Matt Sevey",
-    position: "Engineering Manager",
-    Image: <StaticImage src="../images/team/matt-sevey.png" alt="Matt Sevey" />,
-    social: {
-      github: "https://github.com/MSevey",
-      gitlab: "https://gitlab.com/MSevey",
-      linkedin: "https://www.linkedin.com/in/sevey",
-      twitter: "https://twitter.com/MJSevey",
-    },
-  },
-  {
-    name: "Manasi Vora",
-    position: "VP of Strategy and Ops",
-    Image: <StaticImage src="../images/team/manasi-vora.png" alt="Manasi Vora" />,
-    social: {
-      linkedin: "https://linkedin.com/in/manasi-vora-cfa-bb9a1715",
-      twitter: "https://twitter.com/manasilvora",
-    },
-  },
-  {
-    name: "PJ Brone",
-    position: "Core Developer",
-    Image: <StaticImage src="../images/team/pj-brone.png" alt="PJ Brone" />,
-    social: {
-      github: "https://github.com/peterjan",
-      gitlab: "https://gitlab.com/pjbrone",
-      linkedin: "https://www.linkedin.com/in/peterjanbrone",
-      twitter: "https://twitter.com/peterjanbrone",
-    },
-  },
-  {
-    name: "Marcin Swieczkowski",
-    position: "Core Developer",
-    Image: <StaticImage src="../images/team/marcin-swieczkowski.png" alt="Marcin Swieczkowski" />,
-    social: {
-      github: "https://github.com/m-cat",
-      gitlab: "https://gitlab.com/m-cat",
-    },
-  },
-  {
-    name: "Karol Wypchlo",
-    position: "Full Stack Developer",
-    Image: <StaticImage src="../images/team/karol-wypchlo.png" alt="Karol Wypchlo" />,
-    social: {
-      github: "https://github.com/kwypchlo",
-      gitlab: "https://gitlab.com/kwypchlo",
-      linkedin: "https://www.linkedin.com/in/karolwypchlo/",
-      twitter: "https://twitter.com/kwypchlo",
-    },
-  },
-  {
-    name: "Ivaylo Novakov",
-    position: "Core Developer",
-    Image: <StaticImage src="../images/team/ivaylo-novakov.png" alt="Ivaylo Novakov" />,
-    social: {
-      github: "https://github.com/ro-tex",
-      gitlab: "https://gitlab.com/kwypchlo",
-      linkedin: "https://www.linkedin.com/in/karolwypchlo/",
-      twitter: "https://twitter.com/kwypchlo",
-    },
-  },
-  {
-    name: "Filip Rysavy",
-    position: "Testing Developer",
-    Image: <StaticImage src="../images/team/filip-rysavy.png" alt="Filip Rysavy" />,
-    social: {
-      linkedin: "https://www.linkedin.com/in/filiprysavy/",
-    },
-  },
-  {
-    name: "Nicole Tay",
-    position: "Head of Marketing",
-    Image: <StaticImage src="../images/team/nicole-tay.png" alt="Nicole Tay" />,
-    social: {},
-  },
-  {
-    name: "Daniel Helm",
-    position: "Developer Evangelist",
-    Image: <StaticImage src="../images/team/daniel-helm.png" alt="Daniel Helm" />,
-    social: {},
-  },
-];
 
 const SocialIcon = ({ name }) => {
   switch (name) {
@@ -187,9 +91,9 @@ const SocialIcon = ({ name }) => {
   }
 };
 
-const TeamCard = ({ Image, name, position, social }) => (
+const TeamCard = ({ image, name, position, social }) => (
   <div className="flex">
-    {Image}
+    <GatsbyImage image={getImage(image)} alt={name} />
     <div className="flex flex-col justify-between ml-3">
       <div className="flex flex-col">
         <span className="font-light text-lg">{name}</span>
@@ -198,7 +102,7 @@ const TeamCard = ({ Image, name, position, social }) => (
       {social && (
         <div className="flex flex-row">
           {Object.entries(social).map(([platform, href]) => (
-            <Link key={platform} href={href} title={platform} target="_blank" rel="noopener noreferrer">
+            <Link key={platform} href={href} title={platform}>
               <SocialIcon name={platform} />
             </Link>
           ))}
@@ -208,147 +112,203 @@ const TeamCard = ({ Image, name, position, social }) => (
   </div>
 );
 
-const AboutPage = () => (
+const TeamCardPage = ({ cards }) => (
-  <Layout>
+  <div className="flex flex-col space-y-16">
-    <SEO title="About" />
+    {cards.map((card, index) => (
-
+      <TeamCard key={index} {...card} />
-    <Section className="bg-palette-100" marginBottom={false}>
+    ))}
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
+  </div>
-        <div className="col-span-3">
-          <h1>
-            Skynet is the foundation for a new, <span className="underline text-primary">decentralized internet</span>
-          </h1>
-        </div>
-
-        <div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
-          <p className="text-palette-600 font-light text-lg">
-            Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
-            applications.
-          </p>
-
-          <p className="font-content text-palette-400">
-            Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
-            application, integration, and innovation that simply cannot be replicated by the centralized world. Now, we
-            can break free of the walled gardens and data silos that have constricted invention and interoperability.
-            Key features of decentralization such as user-owned personal data, persistent identity across apps, and
-            censorship-resistance will be the new standards of the digital world.
-          </p>
-
-          <Link to="/developers" className="uppercase inline-flex items-center text-xs text-palette-600">
-            Learn more about how our technology works <ArrowRight />
-          </Link>
-        </div>
-      </div>
-    </Section>
-
-    <Section className="bg-white">
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
-        <div className="desktop:col-span-2">
-          <SectionTitle>What does the decentralized future look like?</SectionTitle>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-2">
-        {aboutCards.map((card, index) => (
-          <CardWithDescription key={index} {...card} />
-        ))}
-      </div>
-
-      <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>
-        <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
-        </Link>
-      </div>
-    </Section>
-
-    <Section className="bg-palette-600">
-      <SectionTitle className="text-white my-20">
-        Skynet Labs builds uncompromising software infrastructure for the{" "}
-        <span className="underline text-primary">decentralized internet</span>
-      </SectionTitle>
-
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
-        <div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
-          <p className="text-white font-light text-lg">
-            Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
-            applications.
-          </p>
-
-          <p className="font-content text-palette-300">
-            Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
-            application, integration, and innovation that simply cannot be replicated by the centralized world. Now, we
-            can break free of the walled gardens and data silos that have constricted invention and interoperability.
-            Key features of decentralization such as user-owned personal data, persistent identity across apps, and
-            censorship-resistance will be the new standards of the digital world.
-          </p>
-
-          <h3 className="text-lg desktop:text-3xl font-semibold text-white">
-            Decentralization isn’t just what we do, <span className="underline text-primary">it’s how we do it</span>
-          </h3>
-
-          <p className="font-content text-palette-300">
-            Our commitment to decentralization is at our core. With this ethos in mind, we believe in empowering local
-            leaders to decide what is best for their communities in adoption of this technology. Individuals and
-            communities deserve self-determination.
-          </p>
-        </div>
-      </div>
-    </Section>
-
-    <Section className="bg-white">
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
-        <div className="desktop:col-span-2">
-          <SectionTitleCaption>Team</SectionTitleCaption>
-          <SectionTitle>Skynet stands with you in the fight for a freer future</SectionTitle>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 gap-16 desktop:grid-cols-3">
-        {teamCards.map((card, index) => (
-          <TeamCard key={index} {...card} />
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
-        <div className="desktop:col-span-2 flex items-center space-x-8">
-          <Join className="flex-shrink-0" />
-          <p className="font-light text-lg">
-            Join us! We're looking for talented &amp; passionate individuals to join our team. Check out our job
-            postings today.
-          </p>
-        </div>
-      </div>
-    </Section>
-
-    <Section className="bg-palette-100">
-      <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
-        <div className="desktop:col-span-2">
-          <SectionTitleCaption>Investors</SectionTitleCaption>
-          <SectionTitle>Support for the Skynet Vision</SectionTitle>
-        </div>
-      </div>
-
-      <div className="text-center p-10">quotes</div>
-
-      <div className="grid grid-cols-2 gap-4 desktop:grid-cols-4">
-        <StaticImage src="../images/investors/investors-logo-1.png" alt="A.Capital Ventures" />
-        <StaticImage src="../images/investors/investors-logo-2.png" alt="Bain Capital" />
-        <StaticImage src="../images/investors/investors-logo-3.png" alt="Bessemer Venture Partners" />
-        <StaticImage src="../images/investors/investors-logo-4.png" alt="Collab" />
-        <StaticImage src="../images/investors/investors-logo-5.png" alt="Dragonfly Capital" />
-        <StaticImage src="../images/investors/investors-logo-6.png" alt="Fenbushi Capital" />
-        <StaticImage src="../images/investors/investors-logo-7.png" alt="First Star Ventures" />
-        <StaticImage src="../images/investors/investors-logo-8.png" alt="Hack VC" />
-        <StaticImage src="../images/investors/investors-logo-9.png" alt="INBlockchain" />
-        <StaticImage src="../images/investors/investors-logo-10.png" alt="Paradigm" />
-        <StaticImage src="../images/investors/investors-logo-11.png" alt="SV Angel" />
-      </div>
-    </Section>
-  </Layout>
 );
 
+const AboutPage = ({ ...props }) => {
+  const investors = props.data.allInvestorsYaml.nodes;
+  const teamCards = props.data.allTeamYaml.nodes;
+  const teamCardsPaginated = paginate(teamCards, 3);
+
+  return (
+    <Layout>
+      <SEO title="About" />
+
+      <Section className="bg-palette-100" marginBottom={false} first={true}>
+        <div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
+          <div className="col-span-3">
+            <h1>
+              Skynet is the foundation for a new,{" "}
+              <span className="text-primary underline-dark">decentralized internet</span>
+            </h1>
+          </div>
+
+          <div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
+            <p className="text-palette-600 font-light text-lg">
+              Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
+              applications.
+            </p>
+
+            <p className="font-content text-palette-400">
+              Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
+              application, integration, and innovation that simply cannot be replicated by the centralized world. Now,
+              we can break free of the walled gardens and data silos that have constricted invention and
+              interoperability. Key features of decentralization such as user-owned personal data, persistent identity
+              across apps, and censorship-resistance will be the new standards of the digital world.
+            </p>
+
+            <Link
+              to="/developers"
+              className="hidden sm:inline-flex items-center text-xs text-palette-600 uppercase hover:text-primary transition-colors duration-200"
+            >
+              Learn more about how our technology works <ArrowRight className="fill-current" />
+            </Link>
+
+            <Link to="/developers" className="inline-flex sm:hidden flex-col text-xs text-palette-600 uppercase">
+              Learn more about how our{" "}
+              <span className="inline-flex items-center">
+                technology works <ArrowRight />
+              </span>
+            </Link>
+          </div>
+        </div>
+      </Section>
+
+      <Section className="bg-palette-100 desktop:bg-white">
+        <div className="space-y-8">
+          <SectionTitle>What does the decentralized future look like?</SectionTitle>
+
+          <div>
+            <div className="hidden desktop:grid gap-x-16 gap-y-16 grid-cols-2">
+              {aboutCards.map((card, index) => (
+                <CardWithDescription key={index} {...card} />
+              ))}
+            </div>
+
+            <div className="desktop:hidden">
+              <CardCarousel CardComponent={CardWithDescription} cards={aboutCards} />
+            </div>
+
+            <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>
+              <Link href="https://secure.siasky.net" className="button-secondary-dark inline-block px-10">
+                Get started here
+              </Link>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <Section className="background bg-top bg-cover">
+        <SectionTitle className="text-white">
+          Skynet Labs builds uncompromising software infrastructure for the{" "}
+          <span className="text-primary underline-white">decentralized internet</span>
+        </SectionTitle>
+
+        <div
+          className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 mt-10"
+          style={{ background: "url(/logo-symbol.svg) no-repeat left center" }}
+        >
+          <div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
+            <p className="text-white font-light text-lg">
+              Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
+              applications.
+            </p>
+
+            <p className="font-content text-palette-300">
+              Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
+              application, integration, and innovation that simply cannot be replicated by the centralized world. Now,
+              we can break free of the walled gardens and data silos that have constricted invention and
+              interoperability. Key features of decentralization such as user-owned personal data, persistent identity
+              across apps, and censorship-resistance will be the new standards of the digital world.
+            </p>
+
+            <h3 className="text-lg desktop:text-3xl font-semibold text-white">
+              Decentralization isn’t just what we do, <span className="text-primary">it’s how we do it</span>
+            </h3>
+
+            <p className="font-content text-palette-300">
+              Our commitment to decentralization is at our core. With this ethos in mind, we believe in empowering local
+              leaders to decide what is best for their communities in adoption of this technology. Individuals and
+              communities deserve self-determination.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      <Section className="bg-white">
+        <div className="space-y-10 desktop:space-y-20 flex flex-col">
+          <div>
+            <SectionTitleCaption>Team</SectionTitleCaption>
+            <SectionTitle>Skynet stands with you in the fight for a freer future</SectionTitle>
+          </div>
+
+          <div className="hidden desktop:grid gap-y-8 gap-16 grid-cols-3">
+            {teamCards.map((card, index) => (
+              <TeamCard key={index} {...card} />
+            ))}
+          </div>
+
+          <div className="desktop:hidden">
+            <CardCarousel CardComponent={TeamCardPage} cards={teamCardsPaginated} fullWidth={true} />
+          </div>
+
+          <div className="desktop:col-span-2 flex flex-col desktop:flex-row items-center desktop:space-x-8 space-y-8 desktop:space-y-0">
+            <Link className="flex-shrink-0 hidden desktop:inline-block" {...careers}>
+              <Join />
+            </Link>
+            <p className="font-light text-lg text-center desktop:text-left">
+              Join us! We're looking for talented &amp; passionate individuals to join our team. Check out our job
+              postings today.
+            </p>
+            <Link className="flex-shrink-0 desktop:hidden" {...careers}>
+              <Join />
+            </Link>
+          </div>
+        </div>
+      </Section>
+
+      <Section className="bg-palette-100">
+        <SectionTitleCaption>Investors</SectionTitleCaption>
+        <SectionTitle>Support for the Skynet Vision</SectionTitle>
+
+        <div className="text-center p-10">quotes</div>
+
+        <div className="grid grid-cols-2 gap-4 desktop:grid-cols-4">
+          {investors.map(({ name, image }) => (
+            <GatsbyImage key={name} image={getImage(image)} alt={name} />
+          ))}
+        </div>
+      </Section>
+    </Layout>
+  );
+};
+
+export const query = graphql`
+  query MyQuery {
+    allTeamYaml {
+      nodes {
+        name
+        position
+        social {
+          github
+          gitlab
+          linkedin
+          twitter
+        }
+        image {
+          childImageSharp {
+            gatsbyImageData(width: 80, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
+          }
+        }
+      }
+    }
+    allInvestorsYaml {
+      nodes {
+        name
+        image {
+          childImageSharp {
+            gatsbyImageData(width: 320, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
+          }
+        }
+      }
+    }
+  }
+`;
+
 export default AboutPage;

packages/website/src/pages/developers.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout";
+import Layout, { Section, SectionTitle, CardWithDescription, CardCarousel } from "../components/Layout";
 import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
 import CodeTerminal from "../components/CodeTerminal";
 import SEO from "../components/seo";
@@ -8,9 +8,7 @@ import Link from "../components/Link";
 const LearnMoreButton = () => (
   <Link
     href="https://support.siasky.net/the-technology/developing-on-skynet"
-    target="_blank"
+    className="button-secondary-dark inline-block px-10 mt-7"
-    rel="noopener noreferrer"
-    className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
   >
     Learn more
   </Link>
@@ -91,7 +89,7 @@ const DevelopersPage = () => (
   <Layout>
     <SEO title="Developers" />
 
-    <Section width="layout">
+    <Section className="background bg-top bg-cover" first={true}>
       <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="text-white">
@@ -103,9 +101,7 @@ const DevelopersPage = () => (
               <li key={index}>
                 <Link
                   href={href}
-                  target="_blank"
+                  className="text-primary font-light text-lg inline-flex hover:text-primary-light transition-colors duration-200"
-                  rel="noopener noreferrer"
-                  className="text-primary font-light text-lg inline-flex"
                 >
                   {name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
                 </Link>
@@ -121,7 +117,7 @@ const DevelopersPage = () => (
     <Section className="bg-white">
       <SectionTitle className="mb-7 desktop:hidden">Plenty of reason to use Skynet</SectionTitle>
 
-      <div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3">
+      <div className="hidden desktop:grid gap-x-8 gap-y-16 grid-cols-3">
         <div className="hidden desktop:inline-block">
           <SectionTitle>Plenty of reason to use Skynet</SectionTitle>
 
@@ -133,6 +129,10 @@ const DevelopersPage = () => (
         ))}
       </div>
 
+      <div className="desktop:hidden">
+        <CardCarousel CardComponent={CardWithDescription} cards={reasonCards} />
+      </div>
+
       <div className="desktop:hidden mt-12 text-center">
         <LearnMoreButton />
       </div>
@@ -161,9 +161,7 @@ const DevelopersPage = () => (
             <li key={index}>
               <Link
                 href={href}
-                target="_blank"
+                className="block bg-palette-100 px-8 py-5 rounded border-2 border-transparent hover:border-palette-600 transition-colors duration-200"
-                rel="noopener noreferrer"
-                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>

packages/website/src/pages/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 // import { StaticImage } from "gatsby-plugin-image";
-import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout";
+import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle, CardCarousel } from "../components/Layout";
 import SEO from "../components/seo";
 import CommunitySection from "../components/CommunitySection";
 import Uploader from "../components/Uploader";
@@ -17,17 +17,6 @@ import {
 } from "../components/Icons";
 import Link from "../components/Link";
 
-const LearnMoreButton = () => (
-  <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
-  </Link>
-);
-
 const etosCards = [
   {
     Icon: SkynetToolBig,
@@ -81,10 +70,10 @@ const IndexPage = () => {
     <Layout>
       <SEO title="Home" />
 
-      <Section>
+      <Section className="background bg-top bg-cover" first={true}>
         <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>
+            Build a <span className="text-primary underline-white">free Internet</span>
           </h1>
 
           <p className="mt-5 font-light text-lg leading-7 text-palette-300">
@@ -106,20 +95,27 @@ const IndexPage = () => {
       <Section className="bg-white">
         <SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>
 
-        <div className="grid grid-cols-1 gap-8 desktop:grid-cols-3">
+        <div className="hidden desktop:grid gap-8 grid-cols-3">
           {etosCards.map((card, index) => (
             <CardWithTitle key={index} {...card} />
           ))}
         </div>
 
+        <div className="desktop:hidden">
+          <CardCarousel CardComponent={CardWithTitle} cards={etosCards} />
+        </div>
+
         <div className="flex flex-col items-center mt-16">
           <p className="max-w-screen-md text-center text-base font-content text-palette-400">
             Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join
             our decentralized ecosystem and revolution.
           </p>
 
-          <Link href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
+          <Link
-            Try Skynet Apps <ArrowRight />
+            href="/"
+            className="mt-6 uppercase flex items-center text-xs text-palette-600 hover:text-primary transition-colors duration-200"
+          >
+            Try Skynet Apps <ArrowRight className="fill-current" />
           </Link>
         </div>
       </Section>
@@ -127,11 +123,13 @@ const IndexPage = () => {
       <Section className="bg-palette-100">
         <SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle>
 
-        <div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3">
+        <div className="hidden desktop:grid gap-x-8 gap-y-16 grid-cols-3">
           <div className="hidden desktop:inline-block">
             <SectionTitle>Ready to build your application?</SectionTitle>
 
-            <LearnMoreButton />
+            <Link href="https://secure.siasky.net" className="button-secondary-dark inline-block px-10 mt-7">
+              Learn more
+            </Link>
           </div>
 
           {ecosystemCards.map((card, index) => (
@@ -139,30 +137,20 @@ const IndexPage = () => {
           ))}
         </div>
 
+        <div className="desktop:hidden">
+          <CardCarousel CardComponent={CardWithDescription} cards={ecosystemCards} />
+        </div>
+
         <div className="desktop:hidden mt-12 text-center">
-          <LearnMoreButton />
+          <Link href="https://secure.siasky.net" className="button-secondary-dark inline-block px-10 mt-7">
+            Learn more
+          </Link>
         </div>
       </Section>
 
       <Section className="bg-primary">
         <CommunitySection />
       </Section>
-
-      {/* <h1>Hi people</h1>
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <StaticImage
-      src="../images/gatsby-astronaut.png"
-      width={300}
-      quality={95}
-      formats={["AUTO", "WEBP", "AVIF"]}
-      alt="A Gatsby astronaut"
-      style={{ marginBottom: `1.45rem` }}
-    />
-    <p>
-      <Link to="/page-2/">Go to page 2</Link> <br />
-      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
-    </p> */}
     </Layout>
   );
 };

packages/website/src/pages/news.js

@@ -5,7 +5,7 @@ const NewsPage = () => (
   <Layout>
     <SEO title="News" />
 
-    <Section className="bg-white">
+    <Section className="bg-white" first={true}>
       <SectionTitle className="text-center py-48">News section coming soon!</SectionTitle>
     </Section>
   </Layout>

packages/website/src/styles/global.css

@@ -2,12 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-.underline-navigation,
+.newsletter-message a {
-.underline-primary-thick {
+  @apply text-primary;
-  background-image: linear-gradient(to bottom, #00c65e, #00c65e);
-  background-position: 0 1.1rem;
-  background-repeat: repeat-x;
-  background-size: 2px 2px;
 }
 
 @keyframes bg-primary-dashed-animation {
@@ -32,12 +28,15 @@
   background: repeating-linear-gradient(to right, #ed5454, #ed5454 10px, transparent 10px, transparent 15px);
 }
 
-.tip {
+.tip:hover::after {
-  width: 0;
+  content: " ";
-  height: 0;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: rotate(270deg);
+  border-width: 5px;
   border-style: solid;
-  border-width: 7px 0 7px 6px;
+  border-color: black transparent transparent transparent;
-  border-color: transparent transparent transparent #000000;
 }
 
 @layer base {
@@ -45,3 +44,59 @@
     @apply font-semibold text-3xl desktop:text-6xl desktop:leading-16;
   }
 }
+
+.circle {
+  height: 11px;
+  width: 11px;
+  display: inline-block;
+  @apply rounded-full;
+}
+
+.background {
+  @apply bg-palette-600 bg-mobile desktop:bg-desktop bg-no-repeat;
+}
+
+.button-primary {
+  @apply bg-primary text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap;
+  @apply hover:bg-primary-light;
+  @apply transition-colors duration-200;
+}
+
+.button-secondary-light {
+  @apply border-2 border-white text-white px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap;
+  @apply hover:border-palette-300 hover:text-palette-200;
+  @apply transition-colors duration-200;
+}
+
+.button-secondary-dark {
+  @apply border-2 border-palette-600 text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap;
+  @apply hover:border-palette-300 hover:text-palette-400;
+  @apply transition-colors duration-200;
+}
+
+.button-link-primary {
+  @apply text-primary text-xs uppercase whitespace-nowrap;
+  @apply hover:text-primary-light;
+  @apply transition-colors duration-200;
+}
+
+.underline-primary {
+  text-decoration: underline;
+  text-decoration-color: #00c65e;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+
+.underline-white {
+  text-decoration: underline;
+  text-decoration-color: #fff;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+
+.underline-dark {
+  text-decoration: underline;
+  text-decoration-color: #0d0d0d;
+  text-decoration-thickness: 4px;
+  text-underline-offset: 4px;
+}

packages/website/static/logo-symbol.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="390" height="320" viewBox="0 0 390 320">
+    <g fill="none" fill-rule="evenodd" opacity=".1">
+        <g fill="#FFF">
+            <g>
+                <path d="M297 453.093l347.575 183.351c9.116 4.763 10.778 17.093 3.248 24.095h-.177c-10.92 9.88-23.13 18.238-36.296 24.844-112.319 56.373-243.615-29.831-236.337-155.169l46.477 32.058c13.911 73.166 91.304 115.387 160.456 87.532L297 453.094zm140.524 51.139l233.45 92.162c6.767 2.654 10.42 9.998 8.444 16.987v.295c-2.498 8.727-12.46 12.882-20.433 8.523l-221.46-117.967zm85.957-120.71c44.026-3.775 99.037 12.77 131.813 54.973 27.609 35.626 33.308 79.156 31.359 124.101v-.118c-.777 9.535-10.554 15.607-19.46 12.092L508.51 511.93l147.315 39.46c2.528-25.92-3.57-51.95-17.35-74.06-48.234-77.381-162.251-73.595-205.232 6.818-2.463 4.633-4.622 9.42-6.467 14.333l-39.509-21.028c1.122-1.651 2.304-3.214 3.485-4.807 1.89-3.922 3.927-7.904 6.171-11.797 26.192-45.3 70.04-71.96 116.282-76.236 3.425-.295 6.85-.796 10.275-1.091z" transform="translate(-297 -2676) translate(0 2293)"/>
+            </g>
+        </g>
+    </g>
+</svg>

packages/website/tailwind.config.js

@@ -2,7 +2,7 @@ const defaultTheme = require("tailwindcss/defaultTheme");
 const plugin = require("tailwindcss/plugin");
 
 const colors = {
-  primary: "#00c65e",
+  primary: { light: "#33D17E", DEFAULT: "#00c65e" },
   warning: "#ffd567",
   error: "#ED5454",
   palette: {
@@ -52,11 +52,16 @@ module.exports = {
       lineHeight: {
         16: "4rem",
       },
+      backgroundImage: {
+        mobile: "url('/bg-mobile.svg')",
+        desktop: "url('/bg.svg')",
+      },
     },
   },
   variants: {
     extend: {
       animation: ["hover"],
+      rotate: ["hover"],
       backgroundColor: ["disabled"],
       textColor: ["disabled"],
       margin: ["first"],