update
This commit is contained in:
Karol Wypchlo
parent
a863462ddf
commit
826c5cdf2b
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"svg.preview.background": "transparent"
|
||||
}
|
||||
|
|
@ -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
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -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`,
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ async function example() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="bg-palette-400 rounded-t space-x-2 px-2">
|
||||
<div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
|
||||
<div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>
|
||||
<div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-primary"></div>
|
||||
<div className="bg-palette-400 rounded-t space-x-2 px-2" style={{ width: "540px" }}>
|
||||
<div className="circle bg-error"></div>
|
||||
<div className="circle bg-warning"></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>
|
||||
|
|
|
|||
|
|
@ -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", {
|
||||
"text-error": !success,
|
||||
})}
|
||||
className={classnames(
|
||||
"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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<Link {...rest} className="text-white font-content">
|
||||
<li key={title} className="mt-2 first:mt-4">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
"p-6": offsetY > 0,
|
||||
"py-6 desktop:py-12": 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 === "light" && <LogoBlackText className="" />}
|
||||
{mode === "dark" && <LogoWhiteText className="h-8 desktop:h-10" />}
|
||||
{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"
|
||||
className={classnames("text-sm font-light transition-colors duration-500", {
|
||||
activeClassName="underline-primary"
|
||||
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 />
|
||||
<SignUpButton />
|
||||
<Link href="https://secure.siasky.net" className="button-link-primary">
|
||||
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" />
|
||||
<SignUpButton className="px-10" />
|
||||
<Link href="https://secure.siasky.net" className="button-secondary-light">
|
||||
Log in
|
||||
</Link>
|
||||
|
||||
<Link href="https://secure.siasky.net/auth/registration" className="button-primary">
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -62,9 +62,7 @@ const client = new SkynetClient("https://siasky.net");
|
|||
const RegistrationLink = () => (
|
||||
<Link
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="uppercase border-b-2 border-primary"
|
||||
className="uppercase underline-primary hover:text-primary transition-colors duration-200"
|
||||
>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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: <StaticImage src="../images/team/david-vorick.png" alt="David Vorick" />,
|
||||
social: {
|
||||
github: "https://github.com/DavidVorick",
|
||||
gitlab: "https://gitlab.com/DavidVorick",
|
||||
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 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 }) => (
|
||||
<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 = () => (
|
||||
<Layout>
|
||||
<SEO title="About" />
|
||||
|
||||
<Section className="bg-palette-100" marginBottom={false}>
|
||||
<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="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 & 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 TeamCardPage = ({ cards }) => (
|
||||
<div className="flex flex-col space-y-16">
|
||||
{cards.map((card, index) => (
|
||||
<TeamCard key={index} {...card} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
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 & 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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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"
|
||||
className="button-secondary-dark inline-block px-10 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"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary font-light text-lg inline-flex"
|
||||
className="text-primary font-light text-lg inline-flex hover:text-primary-light transition-colors duration-200"
|
||||
>
|
||||
{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"
|
||||
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"
|
||||
className="block bg-palette-100 px-8 py-5 rounded border-2 border-transparent hover:border-palette-600 transition-colors duration-200"
|
||||
>
|
||||
<div className="font-semibold text-lg">{title}</div>
|
||||
<div className="font-content text-palette-400">{description}</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
Try Skynet Apps <ArrowRight />
|
||||
<Link
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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"],
|
||||
|
|
|
|||
Reference in New Issue