diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..d09a50ca --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "svg.preview.background": "transparent" +} \ No newline at end of file diff --git a/packages/website/data/investors.yml b/packages/website/data/investors.yml new file mode 100644 index 00000000..b75e4045 --- /dev/null +++ b/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 diff --git a/packages/website/src/images/investors/investors-logo-1.png b/packages/website/data/investors/investors-logo-1.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-1.png rename to packages/website/data/investors/investors-logo-1.png diff --git a/packages/website/src/images/investors/investors-logo-10.png b/packages/website/data/investors/investors-logo-10.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-10.png rename to packages/website/data/investors/investors-logo-10.png diff --git a/packages/website/src/images/investors/investors-logo-11.png b/packages/website/data/investors/investors-logo-11.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-11.png rename to packages/website/data/investors/investors-logo-11.png diff --git a/packages/website/src/images/investors/investors-logo-2.png b/packages/website/data/investors/investors-logo-2.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-2.png rename to packages/website/data/investors/investors-logo-2.png diff --git a/packages/website/src/images/investors/investors-logo-3.png b/packages/website/data/investors/investors-logo-3.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-3.png rename to packages/website/data/investors/investors-logo-3.png diff --git a/packages/website/src/images/investors/investors-logo-4.png b/packages/website/data/investors/investors-logo-4.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-4.png rename to packages/website/data/investors/investors-logo-4.png diff --git a/packages/website/src/images/investors/investors-logo-5.png b/packages/website/data/investors/investors-logo-5.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-5.png rename to packages/website/data/investors/investors-logo-5.png diff --git a/packages/website/src/images/investors/investors-logo-6.png b/packages/website/data/investors/investors-logo-6.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-6.png rename to packages/website/data/investors/investors-logo-6.png diff --git a/packages/website/src/images/investors/investors-logo-7.png b/packages/website/data/investors/investors-logo-7.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-7.png rename to packages/website/data/investors/investors-logo-7.png diff --git a/packages/website/src/images/investors/investors-logo-8.png b/packages/website/data/investors/investors-logo-8.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-8.png rename to packages/website/data/investors/investors-logo-8.png diff --git a/packages/website/src/images/investors/investors-logo-9.png b/packages/website/data/investors/investors-logo-9.png similarity index 100% rename from packages/website/src/images/investors/investors-logo-9.png rename to packages/website/data/investors/investors-logo-9.png diff --git a/packages/website/data/myconf.yaml b/packages/website/data/myconf.yaml new file mode 100644 index 00000000..36b08ad1 --- /dev/null +++ b/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 diff --git a/packages/website/data/navigation.yaml b/packages/website/data/navigation.yaml new file mode 100644 index 00000000..b6e90e09 --- /dev/null +++ b/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 diff --git a/packages/website/data/team.yaml b/packages/website/data/team.yaml new file mode 100644 index 00000000..6666db42 --- /dev/null +++ b/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 diff --git a/packages/website/src/images/team/chris-schinnerl.png b/packages/website/data/team/chris-schinnerl.png similarity index 100% rename from packages/website/src/images/team/chris-schinnerl.png rename to packages/website/data/team/chris-schinnerl.png diff --git a/packages/website/src/images/team/daniel-helm.png b/packages/website/data/team/daniel-helm.png similarity index 100% rename from packages/website/src/images/team/daniel-helm.png rename to packages/website/data/team/daniel-helm.png diff --git a/packages/website/src/images/team/david-vorick.png b/packages/website/data/team/david-vorick.png similarity index 100% rename from packages/website/src/images/team/david-vorick.png rename to packages/website/data/team/david-vorick.png diff --git a/packages/website/src/images/team/filip-rysavy.png b/packages/website/data/team/filip-rysavy.png similarity index 100% rename from packages/website/src/images/team/filip-rysavy.png rename to packages/website/data/team/filip-rysavy.png diff --git a/packages/website/src/images/team/ivaylo-novakov.png b/packages/website/data/team/ivaylo-novakov.png similarity index 100% rename from packages/website/src/images/team/ivaylo-novakov.png rename to packages/website/data/team/ivaylo-novakov.png diff --git a/packages/website/src/images/team/karol-wypchlo.png b/packages/website/data/team/karol-wypchlo.png similarity index 100% rename from packages/website/src/images/team/karol-wypchlo.png rename to packages/website/data/team/karol-wypchlo.png diff --git a/packages/website/src/images/team/manasi-vora.png b/packages/website/data/team/manasi-vora.png similarity index 100% rename from packages/website/src/images/team/manasi-vora.png rename to packages/website/data/team/manasi-vora.png diff --git a/packages/website/src/images/team/marcin-swieczkowski.png b/packages/website/data/team/marcin-swieczkowski.png similarity index 100% rename from packages/website/src/images/team/marcin-swieczkowski.png rename to packages/website/data/team/marcin-swieczkowski.png diff --git a/packages/website/src/images/team/matt-sevey.png b/packages/website/data/team/matt-sevey.png similarity index 100% rename from packages/website/src/images/team/matt-sevey.png rename to packages/website/data/team/matt-sevey.png diff --git a/packages/website/src/images/team/nicole-tay.png b/packages/website/data/team/nicole-tay.png similarity index 100% rename from packages/website/src/images/team/nicole-tay.png rename to packages/website/data/team/nicole-tay.png diff --git a/packages/website/src/images/team/pj-brone.png b/packages/website/data/team/pj-brone.png similarity index 100% rename from packages/website/src/images/team/pj-brone.png rename to packages/website/data/team/pj-brone.png diff --git a/packages/website/src/images/team/steve-funk.png b/packages/website/data/team/steve-funk.png similarity index 100% rename from packages/website/src/images/team/steve-funk.png rename to packages/website/data/team/steve-funk.png diff --git a/packages/website/gatsby-config.js b/packages/website/gatsby-config.js index 171ccb98..c837af31 100644 --- a/packages/website/gatsby-config.js +++ b/packages/website/gatsby-config.js @@ -1,12 +1,14 @@ +const { defaultIcons } = require("gatsby-plugin-manifest/common"); + module.exports = { siteMetadata: { - title: `Gatsby Default Starter`, - 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.`, - author: `@gatsbyjs`, + title: `Skynet`, + description: `Skynet is a decentralized file sharing and content distribution protocol`, + 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`, - short_name: `starter`, + name: `Skynet`, + short_name: `Skynet`, start_url: `/`, - background_color: `#663399`, - theme_color: `#663399`, + background_color: `#f1f7f2`, + 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`, ], }; diff --git a/packages/website/package.json b/packages/website/package.json index f873170c..23053ff8 100644 --- a/packages/website/package.json +++ b/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", diff --git a/packages/website/src/components/CodeTerminal/CodeTerminal.js b/packages/website/src/components/CodeTerminal/CodeTerminal.js index d500ff80..2de09cd7 100644 --- a/packages/website/src/components/CodeTerminal/CodeTerminal.js +++ b/packages/website/src/components/CodeTerminal/CodeTerminal.js @@ -29,13 +29,13 @@ async function example() { return (
-
-
-
-
+
+
+
+
- + {codeString}
diff --git a/packages/website/src/components/CommunitySection/CommunitySection.js b/packages/website/src/components/CommunitySection/CommunitySection.js index c79b7ffa..357949f6 100644 --- a/packages/website/src/components/CommunitySection/CommunitySection.js +++ b/packages/website/src/components/CommunitySection/CommunitySection.js @@ -83,9 +83,12 @@ const CommunitySection = () => { {complete && message && (
)} @@ -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" > {name} diff --git a/packages/website/src/components/Footer/Footer.js b/packages/website/src/components/Footer/Footer.js index 49d6d9d8..a59eda52 100644 --- a/packages/website/src/components/Footer/Footer.js +++ b/packages/website/src/components/Footer/Footer.js @@ -16,7 +16,7 @@ const Footer = () => { hello@siasky.net diff --git a/packages/website/src/components/FooterNavigation/FooterNavigation.js b/packages/website/src/components/FooterNavigation/FooterNavigation.js index afef46df..0482631d 100644 --- a/packages/website/src/components/FooterNavigation/FooterNavigation.js +++ b/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 (
-
+
{sections.map((section) => (
{/* desktop */} @@ -68,8 +68,11 @@ const FooterNavigation = () => {
{section.header}
    {section.links.map(({ title, ...rest }) => ( -
  • - +
  • + {title}
    • @@ -81,7 +84,7 @@ const FooterNavigation = () => {
    + ))} +
    +
+ ); +}; + export const CardWithTitle = ({ Icon, title }) => (
diff --git a/packages/website/src/components/Link/Link.js b/packages/website/src/components/Link/Link.js index e9446d82..c812b5ba 100644 --- a/packages/website/src/components/Link/Link.js +++ b/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 ( @@ -10,5 +18,9 @@ export default function Link({ children, to, activeClassName, partiallyActive, . ); } - return {children}; + return ( + + {children} + + ); } diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index 78faedeb..45e3e644 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/packages/website/src/components/Navigation/Navigation.js @@ -16,38 +16,6 @@ const routes = [ { title: "News", to: "/news" }, ]; -const LogInLink = () => ( - - Log in - -); - -const LogInButton = ({ className, ...props }) => ( - - Log in - -); - -const SignUpButton = ({ className, ...props }) => ( - - Sign up - -); - 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, - "p-6": offsetY > 0, + "py-6 desktop:py-12": offsetY === 0, + "py-6": offsetY > 0, })} ref={navRef} >
- {mode === "dark" && } - {mode === "light" && } + {mode === "dark" && } + {mode === "light" && }
@@ -127,9 +99,14 @@ const Navigation = ({ mode }) => { style={{ marginTop: mobileMenuOffset }} >
    - {routes.map(({ title, route }) => ( + {routes.map(({ title, to }) => (
  • - + {title}
    • @@ -139,8 +116,6 @@ const Navigation = ({ mode }) => { Join our Discord @@ -148,8 +123,13 @@ const Navigation = ({ mode }) => {
- - + + Log in + + + + Sign up +
diff --git a/packages/website/src/components/NewsHeader/NewsHeader.js b/packages/website/src/components/NewsHeader/NewsHeader.js index 9b7d68d1..8925af24 100644 --- a/packages/website/src/components/NewsHeader/NewsHeader.js +++ b/packages/website/src/components/NewsHeader/NewsHeader.js @@ -9,7 +9,7 @@ const NewsHeader = () => {
Skynet Announces SkyDB, Unlocking Fully Decentralized Internet @@ -19,8 +19,6 @@ const NewsHeader = () => { Join our Discord diff --git a/packages/website/src/components/Uploader/Uploader.js b/packages/website/src/components/Uploader/Uploader.js index 8f758af8..fe49cb8d 100644 --- a/packages/website/src/components/Uploader/Uploader.js +++ b/packages/website/src/components/Uploader/Uploader.js @@ -62,9 +62,7 @@ const client = new SkynetClient("https://siasky.net"); const RegistrationLink = () => ( Sign up @@ -100,7 +98,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => { {status === "processing" && Processing...} {status === "complete" && ( - + {url} )} @@ -115,7 +113,10 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => { )} {status === "processing" && Wait} {status === "complete" && ( -
-
+
diff --git a/packages/website/src/components/seo.js b/packages/website/src/components/seo.js index c501990e..8920fb24 100644 --- a/packages/website/src/components/seo.js +++ b/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 PropTypes from "prop-types" -import { Helmet } from "react-helmet" -import { useStaticQuery, graphql } from "gatsby" +import * as React from "react"; +import PropTypes from "prop-types"; +import { Helmet } from "react-helmet"; +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 defaultTitle = site.siteMetadata?.title + const metaDescription = description || site.siteMetadata.description; + const defaultTitle = site.siteMetadata?.title; return ( - ) + ); } 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; diff --git a/packages/website/src/images/BG (1).svg b/packages/website/src/images/BG (1).svg new file mode 100644 index 00000000..91536f8d --- /dev/null +++ b/packages/website/src/images/BG (1).svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/images/bg-mobile.svg b/packages/website/src/images/bg-mobile.svg new file mode 100644 index 00000000..1cb3ab62 --- /dev/null +++ b/packages/website/src/images/bg-mobile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/images/bg.svg b/packages/website/src/images/bg.svg new file mode 100644 index 00000000..91536f8d --- /dev/null +++ b/packages/website/src/images/bg.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/images/logo.svg b/packages/website/src/images/logo.svg new file mode 100644 index 00000000..16c695f9 --- /dev/null +++ b/packages/website/src/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.js index cee92d8c..ba479a0e 100644 --- a/packages/website/src/pages/about.js +++ b/packages/website/src/pages/about.js @@ -1,6 +1,12 @@ import * as React from "react"; -import { StaticImage } from "gatsby-plugin-image"; -import Layout, { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout"; +import { GatsbyImage, getImage } from "gatsby-plugin-image"; +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 = [ - { - name: "David Vorick", - position: "CEO and Lead Developer", - Image: , - social: { - github: "https://github.com/DavidVorick", - gitlab: "https://gitlab.com/DavidVorick", - twitter: "https://twitter.com/davidvorick", - }, - }, - { - name: "Chris Schinnerl", - position: "VP of Technology", - Image: , - social: { - github: "https://github.com/ChrisSchinnerl", - gitlab: "https://gitlab.com/ChrisSchinnerl", - twitter: "https://twitter.com/ChrisSchinnerl", - }, - }, - { - name: "Steve Funk", - position: "Head of Support", - Image: , - social: { - linkedin: "https://www.linkedin.com/in/stevengfunk", - }, - }, - { - name: "Matt Sevey", - position: "Engineering Manager", - Image: , - 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: , - social: { - linkedin: "https://linkedin.com/in/manasi-vora-cfa-bb9a1715", - twitter: "https://twitter.com/manasilvora", - }, - }, - { - name: "PJ Brone", - position: "Core Developer", - Image: , - 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: , - social: { - github: "https://github.com/m-cat", - gitlab: "https://gitlab.com/m-cat", - }, - }, - { - name: "Karol Wypchlo", - position: "Full Stack Developer", - Image: , - 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: , - 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: , - social: { - linkedin: "https://www.linkedin.com/in/filiprysavy/", - }, - }, - { - name: "Nicole Tay", - position: "Head of Marketing", - Image: , - social: {}, - }, - { - name: "Daniel Helm", - position: "Developer Evangelist", - Image: , - social: {}, - }, -]; +const careers = { href: "https://jobs.lever.co/nebulous", target: "_blank", rel: "noopener noreferrer" }; + +const paginate = (array, size) => + array.reduce((acc, item, index) => { + const chunkIndex = Math.floor(index / size); + if (!acc[chunkIndex]) acc[chunkIndex] = { cards: [] }; // start a new chunk + acc[chunkIndex].cards.push(item); + return acc; + }, []); const SocialIcon = ({ name }) => { switch (name) { @@ -187,9 +91,9 @@ const SocialIcon = ({ name }) => { } }; -const TeamCard = ({ Image, name, position, social }) => ( +const TeamCard = ({ image, name, position, social }) => (
- {Image} +
{name} @@ -198,7 +102,7 @@ const TeamCard = ({ Image, name, position, social }) => ( {social && (
{Object.entries(social).map(([platform, href]) => ( - + ))} @@ -208,147 +112,203 @@ const TeamCard = ({ Image, name, position, social }) => (
); -const AboutPage = () => ( - - - -
-
-
-

- Skynet is the foundation for a new, decentralized internet -

-
- -
-

- Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and - applications. -

- -

- 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. -

- - - Learn more about how our technology works - -
-
-
- -
-
-
- What does the decentralized future look like? -
-
- -
- {aboutCards.map((card, index) => ( - - ))} -
- -
-

Want to build apps with these features?

- - Get started here - -
-
- -
- - Skynet Labs builds uncompromising software infrastructure for the{" "} - decentralized internet - - -
-
-

- Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and - applications. -

- -

- 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. -

- -

- Decentralization isn’t just what we do, it’s how we do it -

- -

- 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. -

-
-
-
- -
-
-
- Team - Skynet stands with you in the fight for a freer future -
-
- -
- {teamCards.map((card, index) => ( - - ))} -
- -
-
- -

- Join us! We're looking for talented & passionate individuals to join our team. Check out our job - postings today. -

-
-
-
- -
-
-
- Investors - Support for the Skynet Vision -
-
- -
quotes
- -
- - - - - - - - - - - -
-
- +const TeamCardPage = ({ cards }) => ( +
+ {cards.map((card, index) => ( + + ))} +
); +const AboutPage = ({ ...props }) => { + const investors = props.data.allInvestorsYaml.nodes; + const teamCards = props.data.allTeamYaml.nodes; + const teamCardsPaginated = paginate(teamCards, 3); + + return ( + + + +
+
+
+

+ Skynet is the foundation for a new,{" "} + decentralized internet +

+
+ +
+

+ Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and + applications. +

+ +

+ 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. +

+ + + Learn more about how our technology works + + + + Learn more about how our{" "} + + technology works + + +
+
+
+ +
+
+ What does the decentralized future look like? + +
+
+ {aboutCards.map((card, index) => ( + + ))} +
+ +
+ +
+ +
+

Want to build apps with these features?

+ + Get started here + +
+
+
+
+ +
+ + Skynet Labs builds uncompromising software infrastructure for the{" "} + decentralized internet + + +
+
+

+ Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and + applications. +

+ +

+ 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. +

+ +

+ Decentralization isn’t just what we do, it’s how we do it +

+ +

+ 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. +

+
+
+
+ +
+
+
+ Team + Skynet stands with you in the fight for a freer future +
+ +
+ {teamCards.map((card, index) => ( + + ))} +
+ +
+ +
+ +
+ + + +

+ Join us! We're looking for talented & passionate individuals to join our team. Check out our job + postings today. +

+ + + +
+
+
+ +
+ Investors + Support for the Skynet Vision + +
quotes
+ +
+ {investors.map(({ name, image }) => ( + + ))} +
+
+ + ); +}; + +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; diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js index 1ba8f0ab..2d0ee581 100644 --- a/packages/website/src/pages/developers.js +++ b/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 = () => ( Learn more @@ -91,7 +89,7 @@ const DevelopersPage = () => ( -
+

@@ -103,9 +101,7 @@ const DevelopersPage = () => (
  • {name} @@ -121,7 +117,7 @@ const DevelopersPage = () => (
    Plenty of reason to use Skynet -
    +
    Plenty of reason to use Skynet @@ -133,6 +129,10 @@ const DevelopersPage = () => ( ))}
    +
    + +
    +
    @@ -161,9 +161,7 @@ const DevelopersPage = () => (
  • {title}
    {description}
    diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index 9e452fe4..2aeb532f 100644 --- a/packages/website/src/pages/index.js +++ b/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 = () => ( - - Learn more - -); - const etosCards = [ { Icon: SkynetToolBig, @@ -81,10 +70,10 @@ const IndexPage = () => { -
    +

    - Build a free Internet + Build a free Internet

    @@ -106,20 +95,27 @@ const IndexPage = () => {

    The new decentralized internet is here -
    +
    {etosCards.map((card, index) => ( ))}
    +
    + +
    +

    Skynet apps pave the way for a new web that priorities the privacy, security, and experience of users. Join our decentralized ecosystem and revolution.

    - - Try Skynet Apps + + Try Skynet Apps
    @@ -127,11 +123,13 @@ const IndexPage = () => {
    Ready to build your application? -
    +
    Ready to build your application? - + + Learn more +
    {ecosystemCards.map((card, index) => ( @@ -139,30 +137,20 @@ const IndexPage = () => { ))}
    +
    + +
    +
    - + + Learn more +
    - - {/*

    Hi people

    -

    Welcome to your new Gatsby site.

    -

    Now go build something great.

    - -

    - Go to page 2
    - Go to "Using TypeScript" -

    */} ); }; diff --git a/packages/website/src/pages/news.js b/packages/website/src/pages/news.js index 3b60bb5d..83e27b86 100644 --- a/packages/website/src/pages/news.js +++ b/packages/website/src/pages/news.js @@ -5,7 +5,7 @@ const NewsPage = () => ( -
    +
    News section coming soon!
    diff --git a/packages/website/src/styles/global.css b/packages/website/src/styles/global.css index c6bfd8f0..8a87403e 100644 --- a/packages/website/src/styles/global.css +++ b/packages/website/src/styles/global.css @@ -2,12 +2,8 @@ @tailwind components; @tailwind utilities; -.underline-navigation, -.underline-primary-thick { - background-image: linear-gradient(to bottom, #00c65e, #00c65e); - background-position: 0 1.1rem; - background-repeat: repeat-x; - background-size: 2px 2px; +.newsletter-message a { + @apply text-primary; } @keyframes bg-primary-dashed-animation { @@ -32,12 +28,15 @@ background: repeating-linear-gradient(to right, #ed5454, #ed5454 10px, transparent 10px, transparent 15px); } -.tip { - width: 0; - height: 0; +.tip:hover::after { + content: " "; + position: absolute; + top: 50%; + left: 0; + transform: rotate(270deg); + border-width: 5px; border-style: solid; - border-width: 7px 0 7px 6px; - border-color: transparent transparent transparent #000000; + border-color: black transparent transparent transparent; } @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; +} diff --git a/packages/website/static/BG (1).svg b/packages/website/static/BG (1).svg new file mode 100644 index 00000000..91536f8d --- /dev/null +++ b/packages/website/static/BG (1).svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/bg-mobile.svg b/packages/website/static/bg-mobile.svg new file mode 100644 index 00000000..1cb3ab62 --- /dev/null +++ b/packages/website/static/bg-mobile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/bg.svg b/packages/website/static/bg.svg new file mode 100644 index 00000000..91536f8d --- /dev/null +++ b/packages/website/static/bg.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/logo-symbol.svg b/packages/website/static/logo-symbol.svg new file mode 100644 index 00000000..ea86f286 --- /dev/null +++ b/packages/website/static/logo-symbol.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js index bf48b19f..6d4fb952 100644 --- a/packages/website/tailwind.config.js +++ b/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"],