improve animation performance
This commit is contained in:
Karol Wypchlo
parent
5391e1f735
commit
3fb9cd900d
|
|
@ -28,7 +28,7 @@ async function example() {
|
|||
}`;
|
||||
|
||||
return (
|
||||
<div className="desktop:max-w-terminal">
|
||||
<div>
|
||||
<div className="bg-palette-400 rounded-t space-x-2 px-2">
|
||||
<div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
|
||||
<div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
TikTokSmall,
|
||||
} from "../../components/Icons";
|
||||
import useSubscribe from "./useSubscribe";
|
||||
import Link from "../Link";
|
||||
|
||||
const social = [
|
||||
{ name: "Discord", Icon: DiscordSmall, href: "https://discordapp.com/invite/sia" },
|
||||
|
|
@ -96,7 +97,7 @@ const CommunitySection = () => {
|
|||
<SectionTitle>Join our community</SectionTitle>
|
||||
<div className="grid grid-cols-2 desktop:grid-cols-6 max-w-column desktop:max-w-full">
|
||||
{social.map(({ name, Icon, href }) => (
|
||||
<a
|
||||
<Link
|
||||
key={name}
|
||||
href={href}
|
||||
className="text-palette-600 text-sm font-light flex items-center flex-shrink-0 flex-grow-0 whitespace-nowrap leading-10"
|
||||
|
|
@ -105,7 +106,7 @@ const CommunitySection = () => {
|
|||
>
|
||||
<Icon className="mr-2 fill-current" />
|
||||
<span>{name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import * as React from "react";
|
||||
import LogoWhiteText from "../Icons/LogoWhiteText.svg";
|
||||
import { LogoWhiteText } from "../Icons";
|
||||
import Link from "../Link";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
|
|
@ -13,12 +14,12 @@ const Footer = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
<Link
|
||||
href="mailto:hello@siasky.net"
|
||||
className="font-content text-palette-300 text-base border-b-2 border-primary"
|
||||
>
|
||||
hello@siasky.net
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,57 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import Link from "../Link";
|
||||
|
||||
const external = { target: "_blank", rel: "noopener noreferrer" };
|
||||
const sections = [
|
||||
{
|
||||
header: "Skynet Labs",
|
||||
links: [
|
||||
{ title: "About us", href: "/" },
|
||||
{ title: "Brand Guidelines", href: "/" },
|
||||
{ title: "Careers", href: "/" },
|
||||
{ title: "Terms of Use", href: "/terms-of-use.pdf" },
|
||||
{ title: "Privacy Policy", href: "/privacy-policy.pdf" },
|
||||
{ title: "About us", to: "/about" },
|
||||
{
|
||||
title: "Brand Guidelines",
|
||||
href: "https://support.siasky.net/key-concepts/skynet-brand-guidelines",
|
||||
...external,
|
||||
},
|
||||
{ title: "Careers", href: "https://jobs.lever.co/nebulous", ...external },
|
||||
{ title: "Terms of Use", href: "/terms.pdf", ...external },
|
||||
{ title: "Privacy Policy", href: "/privacy.pdf", ...external },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Developers",
|
||||
links: [
|
||||
{ title: "About us", href: "/" },
|
||||
{ title: "API Documentation", href: "/" },
|
||||
{ title: "SDK Documentation", href: "https://siasky.net/docs/" },
|
||||
{ title: "Developer Guide", href: "/" },
|
||||
{ title: "Portal Setup", href: "/" },
|
||||
{ title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
|
||||
{ title: "API Documentation", href: "https://siasky.net/docs/", ...external },
|
||||
{ title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
|
||||
{ title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Technology",
|
||||
links: [
|
||||
{ title: "What is Skynet?", href: "/" },
|
||||
{ title: "Technology Guide", href: "/" },
|
||||
{ title: "Pricing", href: "/pricing" },
|
||||
{ title: "Skynet Wiki", href: "/" },
|
||||
{ title: "Support", href: "https://support.siasky.net", target: "_blank" },
|
||||
{ title: "What is Skynet?", href: "https://support.siasky.net", ...external },
|
||||
{ title: "Frequent Questions", href: "https://support.siasky.net/key-concepts/faqs", ...external },
|
||||
{ title: "Pricing", to: "/pricing" },
|
||||
{ title: "Skynet Wiki", href: "https://skynetwiki.tech", ...external },
|
||||
{ title: "Support", href: "https://support.siasky.net", ...external },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Ecosystem",
|
||||
links: [
|
||||
{ title: "Sia Foundation", href: "/" },
|
||||
{ title: "Sia Foundation Forum", href: "/" },
|
||||
{ title: "Sia.tech", href: "https://sia.tech", target: "_blank" },
|
||||
{ title: "SiaStats", href: "https://siastats.info", target: "_blank" },
|
||||
{ title: "Skynet AppStore", href: "/" },
|
||||
{ title: "Sia Foundation", href: "https://sia.tech", ...external },
|
||||
{ title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external },
|
||||
{ title: "SiaStats", href: "https://siastats.info", ...external },
|
||||
{ title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Skynet Webportals",
|
||||
links: [
|
||||
{ title: "Skydrain", href: "https://skydrain.net/", target: "_blank" },
|
||||
{ title: "SkyPortal", href: "https://skyportal.xyz", target: "_blank" },
|
||||
{ title: "Skydrain", href: "https://skydrain.net", ...external },
|
||||
{ title: "SkyPortal", href: "https://skyportal.xyz", ...external },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -66,9 +70,9 @@ const FooterNavigation = () => {
|
|||
<ul>
|
||||
{section.links.map(({ title, ...rest }) => (
|
||||
<li key={title} className="mt-1 first:mt-4">
|
||||
<a {...rest} className="text-white font-content">
|
||||
<Link {...rest} className="text-white font-content">
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -101,9 +105,9 @@ const FooterNavigation = () => {
|
|||
>
|
||||
{section.links.map(({ title, ...rest }) => (
|
||||
<li key={title} className="mt-1 first:mt-4">
|
||||
<a {...rest} className="text-white font-content">
|
||||
<Link {...rest} className="text-white font-content">
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
import * as React from "react";
|
||||
|
||||
const HeroStartPage = () => {
|
||||
return (
|
||||
<div className="text-center p-8">
|
||||
<h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
|
||||
Build a{" "}
|
||||
<span className="text-primary border-b-2 border-white">
|
||||
free <br className="desktop:hidden" />
|
||||
Internet
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-5 font-light text-md leading-7 text-palette-300">
|
||||
<span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span>
|
||||
<span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span>
|
||||
<span className="desktop:hidden text-justify text-sm">
|
||||
Skynet is a content and application hosting platform bringing decentralized storage to users, creators and app
|
||||
developers.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
HeroStartPage.propTypes = {};
|
||||
|
||||
HeroStartPage.defaultProps = {};
|
||||
|
||||
export default HeroStartPage;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from "react";
|
||||
import HeroStartPage from "./HeroStartPage";
|
||||
|
||||
export default {
|
||||
title: "Layout/HeroStartPage",
|
||||
component: HeroStartPage,
|
||||
};
|
||||
|
||||
const Template = (args) => <HeroStartPage {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {
|
||||
backgrounds: { default: "dark" },
|
||||
};
|
||||
Default.args = {};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from "./HeroStartPage";
|
||||
|
|
@ -7,10 +7,6 @@
|
|||
|
||||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
import { getImage } from "gatsby-plugin-image";
|
||||
import { convertToBgImage } from "gbimage-bridge";
|
||||
import BackgroundImage from "gatsby-background-image";
|
||||
import Navigation from "../Navigation";
|
||||
import NewsHeader from "../NewsHeader";
|
||||
import Footer from "../Footer";
|
||||
|
|
@ -18,7 +14,7 @@ import FooterNavigation from "../FooterNavigation";
|
|||
import { useWindowScroll } from "react-use";
|
||||
import { readableColor } from "polished";
|
||||
|
||||
const StickyHeader = () => {
|
||||
const FixedHeader = () => {
|
||||
const { y } = useWindowScroll();
|
||||
const ref = React.useRef(null);
|
||||
const [mode, setMode] = React.useState();
|
||||
|
|
@ -27,13 +23,15 @@ const StickyHeader = () => {
|
|||
const element = document.elementFromPoint(0, ref.current.offsetHeight);
|
||||
const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
|
||||
const color = readableColor(backgroundColor); // returns either #fff or #000
|
||||
const mode = { "#fff": "dark", "#000": "light" }[color];
|
||||
const calculated = { "#fff": "dark", "#000": "light" }[color];
|
||||
|
||||
setMode(mode);
|
||||
}, [setMode, y]);
|
||||
if (mode !== calculated) {
|
||||
setMode(calculated);
|
||||
}
|
||||
}, [setMode, mode, y]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="sticky top-0 z-50">
|
||||
<div ref={ref} className="fixed inset-x-0 top-0 z-50">
|
||||
<NewsHeader />
|
||||
<Navigation mode={mode} />
|
||||
</div>
|
||||
|
|
@ -51,30 +49,13 @@ const Layout = ({ children }) => {
|
|||
// }
|
||||
// `);
|
||||
|
||||
const { ripple } = useStaticQuery(graphql`
|
||||
query {
|
||||
ripple: file(relativePath: { eq: "ripple.png" }) {
|
||||
childImageSharp {
|
||||
gatsbyImageData(layout: FULL_WIDTH)
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
const background = convertToBgImage(getImage(ripple));
|
||||
|
||||
return (
|
||||
<>
|
||||
<BackgroundImage
|
||||
{...background}
|
||||
className="bg-palette-600"
|
||||
style={{ backgroundPosition: "center top", backgroundSize: "contain" }}
|
||||
>
|
||||
<StickyHeader />
|
||||
<main>{children}</main>
|
||||
</BackgroundImage>
|
||||
<div className="pt-48" style={{ background: "#0d0d0d url(/ripple-large.svg) no-repeat center top / contain" }}>
|
||||
<FixedHeader />
|
||||
<main>{children}</main>
|
||||
<FooterNavigation />
|
||||
<Footer />
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
export const Section = ({ children, className, ...props }) => (
|
||||
export const Section = ({ children, className, width = "content", ...props }) => (
|
||||
<div className={classnames("px-8 py-16 desktop:py-32", className)} {...props}>
|
||||
<div className="max-w-content mx-auto">{children}</div>
|
||||
<div
|
||||
className={classnames("mx-auto", { "max-w-content": width === "content", "max-w-layout": width === "layout" })}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import * as React from "react";
|
||||
import { Link as GatsbyLink } from "gatsby";
|
||||
|
||||
export default function Link({ children, to, activeClassName, partiallyActive, ...params }) {
|
||||
if (to) {
|
||||
return (
|
||||
<GatsbyLink to={to} activeClassName={activeClassName} partiallyActive={partiallyActive} {...params}>
|
||||
{children}
|
||||
</GatsbyLink>
|
||||
);
|
||||
}
|
||||
|
||||
return <a {...params}>{children}</a>;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./Link";
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Link } from "gatsby";
|
||||
import Link from "../Link";
|
||||
import classnames from "classnames";
|
||||
import LogoWhiteText from "../Icons/LogoWhiteText.svg";
|
||||
import LogoBlackText from "../Icons/LogoBlackText.svg";
|
||||
import MenuMobile from "../Icons/MenuMobile.svg";
|
||||
import MenuMobileClose from "../Icons/MenuMobileClose.svg";
|
||||
import DiscordSmall from "../Icons/DiscordSmall.svg";
|
||||
import { motion } from "framer-motion";
|
||||
import { useWindowSize, useWindowScroll } from "react-use";
|
||||
|
||||
const routes = [
|
||||
|
|
@ -18,13 +17,13 @@ const routes = [
|
|||
];
|
||||
|
||||
const LogInLink = () => (
|
||||
<a href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
|
||||
<Link href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
|
||||
Log in
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const LogInButton = ({ className, ...props }) => (
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
className={classnames(
|
||||
"border-2 border-white text-white px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
|
||||
|
|
@ -33,11 +32,11 @@ const LogInButton = ({ className, ...props }) => (
|
|||
{...props}
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const SignUpButton = ({ className, ...props }) => (
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
className={classnames(
|
||||
"bg-primary text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
|
||||
|
|
@ -46,7 +45,7 @@ const SignUpButton = ({ className, ...props }) => (
|
|||
{...props}
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const Navigation = ({ mode }) => {
|
||||
|
|
@ -70,21 +69,18 @@ const Navigation = ({ mode }) => {
|
|||
const mobileMenuOffset = navRef.current ? navRef.current.offsetTop : 0;
|
||||
|
||||
return (
|
||||
<motion.nav
|
||||
className={classnames("relative px-8 transition-colors duration-500", {
|
||||
<nav
|
||||
className={classnames("relative px-8 transition-all duration-500", {
|
||||
"bg-white border-b border-palette-200": mode === "light",
|
||||
"bg-palette-600 bg-opacity-50": mode === "dark",
|
||||
"p-12": offsetY === 0,
|
||||
"p-6": offsetY > 0,
|
||||
})}
|
||||
initial={false}
|
||||
animate={{
|
||||
paddingTop: offsetY ? "24px" : "48px",
|
||||
paddingBottom: offsetY ? "24px" : "48px",
|
||||
}}
|
||||
ref={navRef}
|
||||
>
|
||||
<div className={classnames("max-w-layout mx-auto")}>
|
||||
<div className="flex justify-between">
|
||||
<Link to="/" className={classnames("flex flex-shrink-0 items-center", { hidden: open }, "desktop:flex")}>
|
||||
<Link to="/" className={classnames("flex flex-shrink-0 items-center")}>
|
||||
{mode === "dark" && <LogoWhiteText className="h-8 w-auto" />}
|
||||
{mode === "light" && <LogoBlackText className="h-8 w-auto" />}
|
||||
</Link>
|
||||
|
|
@ -122,10 +118,12 @@ const Navigation = ({ mode }) => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={classnames("fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden", {
|
||||
block: open,
|
||||
hidden: !open,
|
||||
})}
|
||||
className={classnames(
|
||||
"fixed bg-palette-600 inset-0 px-8 py-12 desktop:hidden transition-all duration-500 transform",
|
||||
{
|
||||
"translate-x-full": !open,
|
||||
}
|
||||
)}
|
||||
style={{ marginTop: mobileMenuOffset }}
|
||||
>
|
||||
<ul className="py-10 space-y-2">
|
||||
|
|
@ -138,7 +136,7 @@ const Navigation = ({ mode }) => {
|
|||
))}
|
||||
</ul>
|
||||
<div className="border-t border-palette-500 py-7">
|
||||
<a
|
||||
<Link
|
||||
href="https://discordapp.com/invite/sia"
|
||||
className="text-palette-300 text-m font-content flex items-center"
|
||||
target="_blank"
|
||||
|
|
@ -146,7 +144,7 @@ const Navigation = ({ mode }) => {
|
|||
>
|
||||
<DiscordSmall className="mr-2 fill-current text-white" />
|
||||
<span>Join our Discord</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pt-12 pb-8 border-t border-palette-500">
|
||||
<div className="flex items-center justify-center px-4 space-x-6">
|
||||
|
|
@ -156,7 +154,7 @@ const Navigation = ({ mode }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.nav>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
import Link from "../Link";
|
||||
import { ArrowRight, DiscordSmallWhite } from "../Icons";
|
||||
|
||||
const NewsHeader = () => {
|
||||
|
|
@ -10,15 +10,13 @@ const NewsHeader = () => {
|
|||
<Link
|
||||
to="/news"
|
||||
className="text-palette-300 font-content leading-8 flex items-center overflow-hidden text-base"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ArrowRight className="mr-2 flex-shrink-0 fill-current text-primary" />
|
||||
<span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span>
|
||||
</Link>
|
||||
|
||||
<div className="ml-auto items-center pl-8 hidden desktop:block">
|
||||
<a
|
||||
<Link
|
||||
href="https://discordapp.com/invite/sia"
|
||||
className="text-palette-300 leading-8 font-content flex items-center flex-shrink-0 whitespace-nowrap"
|
||||
target="_blank"
|
||||
|
|
@ -26,7 +24,7 @@ const NewsHeader = () => {
|
|||
>
|
||||
<DiscordSmallWhite className="mr-2" />
|
||||
<span>Join our Discord</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { useDropzone } from "react-dropzone";
|
|||
import { SkynetClient } from "skynet-js";
|
||||
import { useTimeoutFn } from "react-use";
|
||||
import ms from "ms";
|
||||
import Link from "../Link";
|
||||
|
||||
const getFilePath = (file) => file.webkitRelativePath || file.path || file.name;
|
||||
|
||||
|
|
@ -59,14 +60,14 @@ const createUploadErrorMessage = (error) => {
|
|||
const client = new SkynetClient("https://siasky.net");
|
||||
|
||||
const RegistrationLink = () => (
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="uppercase border-b-2 border-primary"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
|
||||
|
|
@ -99,9 +100,9 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
|
|||
{status === "processing" && <span className="text-palette-300">Processing...</span>}
|
||||
|
||||
{status === "complete" && (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||
<Link href={url} target="_blank" rel="noopener noreferrer">
|
||||
{url}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{status === "error" && error && <span className="text-error">{error}</span>}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
GitlabSmall,
|
||||
LinkedinSmall,
|
||||
} from "../components/Icons";
|
||||
import Link from "../components/Link";
|
||||
|
||||
const aboutCards = [
|
||||
{
|
||||
|
|
@ -197,9 +198,9 @@ const TeamCard = ({ Image, name, position, social }) => (
|
|||
{social && (
|
||||
<div className="flex flex-row">
|
||||
{Object.entries(social).map(([platform, href]) => (
|
||||
<a href={href} title={platform}>
|
||||
<Link key={platform} href={href} title={platform} target="_blank" rel="noopener noreferrer">
|
||||
<SocialIcon name={platform} />
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -213,7 +214,7 @@ const AboutPage = () => (
|
|||
<Section className="bg-palette-100">
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
|
||||
<div className="col-span-3">
|
||||
<h1 className="font-semibold text-3xl desktop:text-6xl desktop:leading-16">
|
||||
<h1>
|
||||
Skynet is the foundation for a new, <span className="underline text-primary">decentralized internet</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
|
@ -232,9 +233,9 @@ const AboutPage = () => (
|
|||
censorship-resistance will be the new standards of the digital world.
|
||||
</p>
|
||||
|
||||
<a href="/" className="uppercase inline-flex items-center text-xs text-palette-600">
|
||||
<Link to="/developers" className="uppercase inline-flex items-center text-xs text-palette-600">
|
||||
Learn more about how our technology works <ArrowRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
|
@ -254,12 +255,12 @@ const AboutPage = () => (
|
|||
|
||||
<div className="mt-14 text-center space-y-6">
|
||||
<p className="font-light text-lg text-palette-600">Want to build apps with these features?</p>
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net"
|
||||
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center"
|
||||
>
|
||||
Get started here
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@ import Layout, { Section, SectionTitle, CardWithDescription } from "../component
|
|||
import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
|
||||
import CodeTerminal from "../components/CodeTerminal";
|
||||
import SEO from "../components/seo";
|
||||
import Link from "../components/Link";
|
||||
|
||||
const LearnMoreButton = () => (
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net"
|
||||
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const reasonCards = [
|
||||
|
|
@ -73,24 +76,24 @@ const DevelopersPage = () => (
|
|||
<Layout>
|
||||
<SEO title="Developers" />
|
||||
|
||||
<Section>
|
||||
<div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12">
|
||||
<Section width="layout">
|
||||
<div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12 desktop:space-x-12">
|
||||
<div className="space-y-12">
|
||||
<h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
|
||||
<h1 className="text-white">
|
||||
Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
|
||||
</h1>
|
||||
|
||||
<ul className="space-y-2">
|
||||
{docs.map(({ name, href }, index) => (
|
||||
<li key={index}>
|
||||
<a
|
||||
<Link
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary font-light text-lg inline-flex"
|
||||
>
|
||||
{name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -141,13 +144,13 @@ const DevelopersPage = () => (
|
|||
<ul className="col-span-2 space-y-1">
|
||||
{resources.map(({ href, title, description }, index) => (
|
||||
<li key={index}>
|
||||
<a
|
||||
<Link
|
||||
href={href}
|
||||
className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
|
||||
>
|
||||
<div className="font-semibold text-lg">{title}</div>
|
||||
<div className="font-content text-palette-400">{description}</div>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from "react";
|
|||
// import { StaticImage } from "gatsby-plugin-image";
|
||||
import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout";
|
||||
import SEO from "../components/seo";
|
||||
import HeroStartPage from "../components/HeroStartPage";
|
||||
import CommunitySection from "../components/CommunitySection";
|
||||
import Uploader from "../components/Uploader";
|
||||
import {
|
||||
|
|
@ -16,14 +15,17 @@ import {
|
|||
SkynetUsageSmall,
|
||||
SkynetSiaSmall,
|
||||
} from "../components/Icons";
|
||||
import Link from "../components/Link";
|
||||
|
||||
const LearnMoreButton = () => (
|
||||
<a
|
||||
<Link
|
||||
href="https://secure.siasky.net"
|
||||
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const etosCards = [
|
||||
|
|
@ -80,7 +82,20 @@ const IndexPage = () => {
|
|||
<SEO title="Home" />
|
||||
|
||||
<Section>
|
||||
<HeroStartPage />
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl desktop:text-6xl text-white">
|
||||
Build a <span className="text-primary border-b-2 border-white">free Internet</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-5 font-light text-md leading-7 text-palette-300">
|
||||
<span className="hidden desktop:block">Skynet is a content and application hosting platform bringing</span>
|
||||
<span className="hidden desktop:block">decentralized storage to users, creators and app developers.</span>
|
||||
<span className="desktop:hidden text-justify text-sm">
|
||||
Skynet is a content and application hosting platform bringing decentralized storage to users, creators and
|
||||
app developers.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<div className="px-8 py-16 relative">
|
||||
|
|
@ -105,9 +120,9 @@ const IndexPage = () => {
|
|||
our decentralized ecosystem and revolution.
|
||||
</p>
|
||||
|
||||
<a href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
|
||||
<Link href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
|
||||
Try Skynet Apps <ArrowRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,3 +25,9 @@
|
|||
border-width: 7px 0 7px 6px;
|
||||
border-color: transparent transparent transparent #000000;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
h1 {
|
||||
@apply font-semibold text-3xl desktop:text-6xl desktop:leading-16;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1678" viewBox="0 0 1920 1678">
|
||||
<defs>
|
||||
<filter id="fw58gw6x8b">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<path id="1iloj263ba" d="M0 0H1920V1678H0z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<mask id="uuzfvsiz4c" fill="#fff">
|
||||
<use xlink:href="#1iloj263ba"/>
|
||||
</mask>
|
||||
<g filter="url(#fw58gw6x8b)" opacity=".1">
|
||||
<g mask="url(#uuzfvsiz4c)">
|
||||
<g stroke="#0D0D0D" stroke-width="2">
|
||||
<path d="M231.792 1663C86.95 1487.317 0 1262.175 0 1016.762 0 455.212 455.319 0 1017 0c561.683 0 1017 455.212 1017 1016.762M1017 2034c-245.75 0-471.181-87.056-647-232M1572 1708c-151.85 121.98-344.773 195-554.798 195-168.125 0-325.293-46.781-459.202-128.026" transform="translate(-57 -489)"/>
|
||||
<path d="M1840.173 689C1880.699 790.498 1903 901.16 1903 1017.076c0 209.15-72.582 401.382-194 552.924M259 1476c-81.21-133.817-128-290.937-128-459M1664.312 629.504C1732.06 742.703 1771 875.146 1771 1016.694c0 122.409-29.145 238.054-80.831 340.306" transform="translate(-57 -489)"/>
|
||||
<path stroke-dasharray="16" d="M1359 1690.08c-102.78 52.38-219.143 81.92-342.428 81.92C599.817 1772 262 1434.203 262 1017.467c0-135.036 35.5-261.806 97.622-371.467" transform="translate(-57 -489)"/>
|
||||
<path stroke-dasharray="16" stroke-linecap="round" d="M669 500.473C768.441 433.264 888.32 394 1017.386 394c255.83 0 475.662 154.296 571.614 375" transform="translate(-57 -489)"/>
|
||||
<path d="M425.816 1214C405.159 1152.072 394 1085.816 394 1016.933c0-145.27 49.713-278.901 133-384.933M1597 1246c-91.445 230.761-316.67 394-580 394" transform="translate(-57 -489)"/>
|
||||
<path stroke-dasharray="16" stroke-linecap="round" d="M1499 1114.888C1453.622 1339.745 1254.988 1509 1016.868 1509 745.22 1509 525 1288.72 525 1017" transform="translate(-57 -489)"/>
|
||||
<path d="M1249.343 583.242C1375.916 651.215 1469.323 772.994 1499 918M1351 1016.5c0 184.474-149.75 334-334.5 334S682 1200.974 682 1016.5c0-42.067 7.787-82.316 22-119.39M344 1739c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zM1542 986c0 17.666-14.333 32-32 32-17.666 0-32-14.334-32-32 0-17.667 14.334-32 32-32 17.667 0 32 14.333 32 32zM1689 1641c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zM621 556.5c0 17.666-14.333 32-32 32-17.666 0-32-14.334-32-32 0-17.667 14.334-32 32-32 17.667 0 32 14.333 32 32z" transform="translate(-57 -489)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path stroke="#1C1C1C" stroke-linecap="round" stroke-width="96" d="M960 1257c402.616 0 729-326.384 729-729s-326.384-729-729-729-729 326.384-729 729" mask="url(#uuzfvsiz4c)" opacity=".5" transform="rotate(-90 960 528)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
Reference in New Issue