initial homepage commit
This commit is contained in:
Karol Wypchlo
parent
217dcbe36a
commit
2cbbeab97b
|
|
@ -98,6 +98,23 @@ services:
|
|||
volumes:
|
||||
- webapp:/usr/app/public
|
||||
|
||||
website:
|
||||
build:
|
||||
context: ./packages/website
|
||||
dockerfile: Dockerfile
|
||||
container_name: website
|
||||
restart: unless-stopped
|
||||
logging: *default-logging
|
||||
env_file:
|
||||
- .env
|
||||
volumes:
|
||||
- ./docker/data/website/.cache:/usr/app/.cache
|
||||
networks:
|
||||
shared:
|
||||
ipv4_address: 10.10.10.100
|
||||
expose:
|
||||
- 3000
|
||||
|
||||
handshake:
|
||||
build:
|
||||
context: ./docker/handshake
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# dotenv environment variable files
|
||||
.env*
|
||||
|
||||
# gatsby files
|
||||
.cache/
|
||||
public
|
||||
|
||||
# Mac files
|
||||
.DS_Store
|
||||
|
||||
# Yarn
|
||||
yarn-error.log
|
||||
.pnp/
|
||||
.pnp.js
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# Npm
|
||||
package-lock.json
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"printWidth": 120
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
module.exports = {
|
||||
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
{
|
||||
name: "@storybook/addon-postcss",
|
||||
options: {
|
||||
postcssLoaderOptions: {
|
||||
implementation: require("postcss"),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
webpackFinal: async (config) => {
|
||||
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
|
||||
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
|
||||
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
|
||||
config.module.rules[0].use[0].loader = require.resolve("babel-loader");
|
||||
// use @babel/preset-react for JSX and env (instead of staged presets)
|
||||
config.module.rules[0].use[0].options.presets = [
|
||||
require.resolve("@babel/preset-react"),
|
||||
require.resolve("@babel/preset-env"),
|
||||
];
|
||||
config.module.rules[0].use[0].options.plugins = [
|
||||
// use @babel/plugin-proposal-class-properties for class arrow functions
|
||||
require.resolve("@babel/plugin-proposal-class-properties"),
|
||||
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
|
||||
require.resolve("babel-plugin-remove-graphql-queries"),
|
||||
];
|
||||
|
||||
// implement svg import support
|
||||
config.module.rules.find((rule) => rule.test && rule.test.test(".svg")).exclude = /\.svg$/;
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
enforce: "pre",
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve("react-svg-loader"),
|
||||
options: { svgo: { plugins: [{ removeViewBox: false }] } },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
|
||||
config.resolve.mainFields = ["browser", "module", "main"];
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { action } from "@storybook/addon-actions";
|
||||
import "normalize.css";
|
||||
import "@fontsource/sora";
|
||||
import "@fontsource/source-sans-pro";
|
||||
import "./tailwind.css";
|
||||
|
||||
// Gatsby's Link overrides:
|
||||
// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
|
||||
// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
|
||||
// so Gatsby Link doesn't throw any errors.
|
||||
global.___loader = {
|
||||
enqueue: () => {},
|
||||
hovering: () => {},
|
||||
};
|
||||
// This global variable is prevents the "__BASE_PATH__ is not defined" error inside Storybook.
|
||||
global.__BASE_PATH__ = "/";
|
||||
|
||||
// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
|
||||
// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions.
|
||||
|
||||
window.___navigate = (pathname) => {
|
||||
action("NavigateTo:")(pathname);
|
||||
};
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
layout: "fullscreen",
|
||||
viewport: {
|
||||
viewports: {
|
||||
mobile: {
|
||||
name: "Mobile",
|
||||
styles: {
|
||||
height: "667px",
|
||||
width: "375px",
|
||||
},
|
||||
type: "mobile",
|
||||
},
|
||||
tablet: {
|
||||
name: "Tablet",
|
||||
styles: {
|
||||
height: "1366px",
|
||||
width: "1024px",
|
||||
},
|
||||
type: "tablet",
|
||||
},
|
||||
},
|
||||
},
|
||||
backgrounds: {
|
||||
default: "light",
|
||||
values: [
|
||||
{ name: "dark", value: "#0d0d0d" },
|
||||
{ name: "light", value: "#ffffff" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
FROM node:15.12.0-alpine
|
||||
|
||||
RUN apk update && apk add autoconf automake build-base libtool nasm pkgconfig
|
||||
|
||||
WORKDIR /usr/app
|
||||
|
||||
COPY package.json .
|
||||
|
||||
ENV GATSBY_TELEMETRY_DISABLED 1
|
||||
RUN yarn --no-lockfile --production
|
||||
|
||||
COPY src ./src
|
||||
COPY gatsby-browser.js .
|
||||
COPY gatsby-config.js .
|
||||
COPY gatsby-node.js .
|
||||
COPY gatsby-ssr.js .
|
||||
COPY postcss.config.js .
|
||||
COPY tailwind.config.js .
|
||||
|
||||
CMD ["sh", "-c", "yarn build && yarn serve"]
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Implement Gatsby's Browser APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/browser-apis/
|
||||
*/
|
||||
|
||||
import "normalize.css";
|
||||
import "@fontsource/sora/300.css"; // light
|
||||
import "@fontsource/sora/400.css"; // normal
|
||||
import "@fontsource/sora/500.css"; // medium
|
||||
import "@fontsource/sora/600.css"; // semibold
|
||||
import "@fontsource/source-sans-pro/400.css"; // normal
|
||||
import "./src/styles/global.css";
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
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`,
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-react-helmet`,
|
||||
`gatsby-plugin-image`,
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `images`,
|
||||
path: `${__dirname}/src/images`,
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-sharp`,
|
||||
`gatsby-plugin-react-svg`,
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {
|
||||
name: `gatsby-starter-default`,
|
||||
short_name: `starter`,
|
||||
start_url: `/`,
|
||||
background_color: `#663399`,
|
||||
theme_color: `#663399`,
|
||||
display: `minimal-ui`,
|
||||
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
|
||||
},
|
||||
},
|
||||
`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`,
|
||||
],
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Implement Gatsby's Node APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/node-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/ssr-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
{
|
||||
"name": "website",
|
||||
"private": true,
|
||||
"description": "Skynet Labs official website",
|
||||
"version": "0.1.0",
|
||||
"author": "Skynet Labs Inc.",
|
||||
"dependencies": {
|
||||
"@fontsource/sora": "^4.2.2",
|
||||
"@fontsource/source-sans-pro": "^4.2.2",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"classnames": "^2.2.6",
|
||||
"gatsby": "^3.0.1",
|
||||
"gatsby-background-image": "^1.5.0",
|
||||
"gatsby-plugin-gatsby-cloud": "^2.0.0",
|
||||
"gatsby-plugin-image": "^1.0.0",
|
||||
"gatsby-plugin-manifest": "^3.0.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-sharp": "^3.0.0",
|
||||
"gatsby-source-filesystem": "^3.0.0",
|
||||
"gatsby-transformer-sharp": "^3.0.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.2.8",
|
||||
"preact-svg-loader": "^0.2.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-svg-loader": "^3.0.3",
|
||||
"tailwindcss": "^2.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.13.10",
|
||||
"@storybook/addon-actions": "^6.2.0-rc.2",
|
||||
"@storybook/addon-essentials": "^6.2.0-rc.2",
|
||||
"@storybook/addon-links": "^6.2.0-rc.2",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-viewport": "^6.2.0-rc.2",
|
||||
"@storybook/react": "^6.2.0-rc.2",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-inline-react-svg": "^2.0.1",
|
||||
"prettier": "2.2.1"
|
||||
},
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"license": "SEE LICENSE IN LICENSE.md",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
|
||||
"start": "npm run develop",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/NebulousLabs/skynet-webportal"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/NebulousLabs/skynet-webportal/issues"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("autoprefixer"), require("tailwindcss")],
|
||||
};
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckActive,
|
||||
DiscordSmall,
|
||||
TwitterSmall,
|
||||
RedditSmall,
|
||||
MediumSmall,
|
||||
YoutubeSmall,
|
||||
TikTokSmall,
|
||||
} from "../../components/Icons";
|
||||
|
||||
const social = [
|
||||
{ name: "Discord", Icon: DiscordSmall, href: "https://discordapp.com/invite/sia" },
|
||||
{ name: "Twitter", Icon: TwitterSmall, href: "/" },
|
||||
{ name: "Reddit", Icon: RedditSmall, href: "/" },
|
||||
{ name: "Medium", Icon: MediumSmall, href: "/" },
|
||||
{ name: "Youtube", Icon: YoutubeSmall, href: "/" },
|
||||
{ name: "Tik Tok", Icon: TikTokSmall, href: "/" },
|
||||
];
|
||||
|
||||
const SectionHeader = ({ children }) => <h3 className="uppercase text-xs text-palette-600 desktop:mb-1">{children}</h3>;
|
||||
const SectionTitle = ({ children }) => (
|
||||
<h3 className="text-lg desktop:text-3xl font-semibold mb-4 desktop:mb-6">{children}</h3>
|
||||
);
|
||||
|
||||
const CommunitySection = () => {
|
||||
const [experienced, setExperienced] = React.useState(false);
|
||||
const [email, setEmail] = React.useState("");
|
||||
const onSubscribe = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
alert(`this will subscribe ${email} for a newsletter`);
|
||||
|
||||
setEmail("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-y-12 desktop:grid-cols-3 desktop:gap-x-8">
|
||||
<div>
|
||||
<SectionHeader>Newsletter</SectionHeader>
|
||||
<SectionTitle>Stay up to date</SectionTitle>
|
||||
|
||||
<form onSubmit={onSubscribe} className="flex flex-col">
|
||||
<label htmlFor="newsletter-email" className="sr-only">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative rounded-md shadow-sm">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
id="newsletter-email"
|
||||
className="block w-full rounded pr-10 pl-4 py-2 bg-transparent border-2 border-palette-600 text-sm placeholder-palette-600"
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
/>
|
||||
<button type="submit" className="absolute inset-y-0 right-0 px-2 flex items-center">
|
||||
<ArrowRight />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<input type="checkbox" id="newsletter-experience" className="sr-only" />
|
||||
<button type="button" onClick={() => setExperienced(!experienced)}>
|
||||
<CheckActive
|
||||
className={classnames("bg-palette-600 rounded-full h-6 w-6", { "opacity-20": !experienced })}
|
||||
/>
|
||||
</button>
|
||||
<label htmlFor="newsletter-experience" className="text-xs font-content ml-2">
|
||||
Do You have a previous experience using Skynet?
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="desktop:col-span-2">
|
||||
<SectionHeader>Community</SectionHeader>
|
||||
<SectionTitle>Join our community</SectionTitle>
|
||||
<div className="grid grid-cols-2 desktop:grid-cols-6">
|
||||
{social.map(({ name, Icon, href }) => (
|
||||
<a
|
||||
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 text-red-400" />
|
||||
<span>{name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CommunitySection.propTypes = {};
|
||||
|
||||
CommunitySection.defaultProps = {};
|
||||
|
||||
export default CommunitySection;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import CommunitySection from "./CommunitySection";
|
||||
|
||||
export default {
|
||||
title: "Layout/CommunitySection",
|
||||
component: CommunitySection,
|
||||
};
|
||||
|
||||
const Template = (args) => <CommunitySection {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {};
|
||||
Default.args = {};
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./CommunitySection";
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import * as React from "react";
|
||||
import LogoWhiteText from "../Icons/LogoWhiteText.svg";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="bg-palette-600 px-8 py-12">
|
||||
<div className="max-w-content mx-auto">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<LogoWhiteText />
|
||||
<span className="ml-8 text-palette-300 text-sm font-content hidden desktop:inline">
|
||||
2021 Skynet Labs Inc. | All rights reserved
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="mailto:hello@siasky.net"
|
||||
className="font-content text-palette-300 text-base border-b-2 border-primary"
|
||||
>
|
||||
hello@siasky.net
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Footer.propTypes = {};
|
||||
|
||||
Footer.defaultProps = {};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import Footer from "./Footer";
|
||||
|
||||
export default {
|
||||
title: "Layout/Footer",
|
||||
component: Footer,
|
||||
};
|
||||
|
||||
const Template = (args) => <Footer {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {};
|
||||
Default.args = {};
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
const sections = [
|
||||
{
|
||||
header: "Skynet Labs",
|
||||
links: [
|
||||
{ title: "About us", href: "/" },
|
||||
{ title: "Brand Guidelines", href: "/" },
|
||||
{ title: "Careers", href: "/" },
|
||||
{ title: "Terms of Use", href: "/" },
|
||||
{ title: "Privacy Policy", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Developers",
|
||||
links: [
|
||||
{ title: "About us", href: "/" },
|
||||
{ title: "API Documentation", href: "/" },
|
||||
{ title: "SDK Documentation", href: "/" },
|
||||
{ title: "Developer Guide", href: "/" },
|
||||
{ title: "Portal Setup", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Technology",
|
||||
links: [
|
||||
{ title: "What is Skynet?", href: "/" },
|
||||
{ title: "Technology Guide", href: "/" },
|
||||
{ title: "Pricing", href: "/" },
|
||||
{ title: "Skynet Wiki", href: "/" },
|
||||
{ title: "Support", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Ecosystem",
|
||||
links: [
|
||||
{ title: "Sia Foundation", href: "/" },
|
||||
{ title: "Sia Foundation Forum", href: "/" },
|
||||
{ title: "Sia.tech", href: "/" },
|
||||
{ title: "SiaStats", href: "/" },
|
||||
{ title: "Skynet AppStore", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
header: "Skynet Webportals",
|
||||
links: [
|
||||
{ title: "Skydrain", href: "/" },
|
||||
{ title: "Sialoop", href: "/" },
|
||||
{ title: "Skynet.luxor", href: "/" },
|
||||
{ title: "Skynet.tutemwesi", href: "/" },
|
||||
{ title: "Siacdn", href: "/" },
|
||||
{ title: "Valut.lightspeedhosting", href: "/" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const FooterNavigation = () => {
|
||||
const [activeSection, setActiveSection] = React.useState(sections[0]);
|
||||
|
||||
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">
|
||||
{sections.map((section) => (
|
||||
<div key={section.header}>
|
||||
<h3
|
||||
className={classnames("text-lg desktop:text-palette-300 cursor-pointer desktop:cursor-auto font-light", {
|
||||
"text-primary": activeSection === section,
|
||||
"text-palette-300": activeSection !== section,
|
||||
})}
|
||||
onClick={() => setActiveSection(section)}
|
||||
>
|
||||
{section.header}
|
||||
</h3>
|
||||
<ul className={classnames("mt-4 desktop:block", { hidden: activeSection !== section })}>
|
||||
{section.links.map(({ title, ...rest }) => (
|
||||
<li key={title}>
|
||||
<a {...rest} className="text-white font-content">
|
||||
{title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FooterNavigation.propTypes = {};
|
||||
|
||||
FooterNavigation.defaultProps = {};
|
||||
|
||||
export default FooterNavigation;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import FooterNavigation from "./FooterNavigation";
|
||||
|
||||
export default {
|
||||
title: "Layout/FooterNavigation",
|
||||
component: FooterNavigation,
|
||||
};
|
||||
|
||||
const Template = (args) => <FooterNavigation {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {};
|
||||
Default.args = {};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
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 = {};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="ezpqtkezka">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#ezpqtkezka)" transform="translate(-729 -2522) translate(0 2342) translate(444 176) translate(285 4)">
|
||||
<g>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M10 7.005L5.046 12 0 7" transform="rotate(-90 15.5 5.5)"/>
|
||||
<path fill="#00C65E" d="M4 0H6V12H4z" transform="rotate(-90 15.5 5.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 913 B |
|
|
@ -0,0 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="lfe8wb0fla">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.000000 0 0 0 0 0.776471 0 0 0 0 0.368627 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g filter="url(#lfe8wb0fla)" transform="translate(-22 -9) translate(22 9)">
|
||||
<g>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M10 7.005L5.046 12 0 7" transform="rotate(-90 15.5 5.5)"/>
|
||||
<path fill="#00C65E" d="M4 0H6V12H4z" transform="rotate(-90 15.5 5.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<g fill="none" fill-rule="evenodd" stroke-linejoin="round">
|
||||
<g stroke="#00C65E" stroke-width="2">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M22 12L14.558 20 10 15.101" transform="translate(-28 -2234) translate(0 2060) translate(28 122) translate(0 52)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 494 B |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="v1n7nxxhfa">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#v1n7nxxhfa)" transform="translate(-794 -2522) translate(0 2342) translate(794 180)">
|
||||
<g fill="#000" fill-rule="nonzero">
|
||||
<path d="M2.293 18.84h12.675l-.605-1.96 1.448 1.244 1.327 1.189 2.418 2.02V2.2C19.496 1.01 18.47 0 17.202 0L2.298.003C1.029.003 0 1.015 0 2.204V16.64c0 1.254 1.028 2.2 2.293 2.2zM4.886 6.18c1.63-1.186 3.14-1.13 3.14-1.13l.122.12C6.154 5.647 5.25 6.538 5.25 6.538s.242-.118.664-.299c2.685-1.056 5.618-.98 8.332.358 0 0-.906-.833-2.777-1.367l.166-.162c.258 0 1.627.049 3.092 1.12 0 0 1.64 2.8 1.64 6.24-.055-.066-1.018 1.48-3.495 1.534 0 0-.42-.475-.718-.889 1.449-.416 1.99-1.248 1.99-1.248-.475.3-.908.477-1.26.655-.542.238-1.084.356-1.625.476-2.564.416-4.003-.28-5.363-.832l-.465-.237s.541.832 1.933 1.248c-.366.417-.728.89-.728.89-2.476-.058-3.38-1.604-3.38-1.604 0-3.446 1.63-6.24 1.63-6.24z" transform="translate(6.208 5.333)"/>
|
||||
<path d="M11.83 11.352c.631 0 1.146-.533 1.146-1.191 0-.653-.512-1.187-1.147-1.187v.003c-.629 0-1.145.531-1.146 1.19 0 .652.514 1.185 1.146 1.185zM7.724 11.352c.632 0 1.147-.533 1.147-1.191 0-.653-.511-1.187-1.143-1.187l-.004.003c-.632 0-1.146.531-1.146 1.19 0 .652.514 1.185 1.146 1.185z" transform="translate(6.208 5.333)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<filter id="qxevq17k4a">
|
||||
<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>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#qxevq17k4a)" transform="translate(-28 -286) translate(28 284) translate(0 2)">
|
||||
<g fill="#000" fill-rule="nonzero">
|
||||
<path d="M1.72 14.13h9.506l-.454-1.47 1.086.933.995.892L14.667 16V1.65C14.62.758 13.853 0 12.9 0L1.723.002C.772.002 0 .762 0 1.653V12.48c0 .94.77 1.65 1.72 1.65zm1.945-9.495c1.222-.89 2.354-.847 2.354-.847l.092.09c-1.496.357-2.174 1.025-2.174 1.025s.182-.089.498-.224c2.014-.792 4.214-.735 6.25.268 0 0-.68-.625-2.083-1.025l.124-.122c.194 0 1.22.037 2.32.84 0 0 1.229 2.1 1.229 4.68-.041-.05-.763 1.11-2.621 1.15 0 0-.315-.355-.539-.666 1.087-.312 1.494-.936 1.494-.936-.357.225-.682.358-.946.491-.406.179-.813.267-1.219.357-1.923.312-3.002-.21-4.022-.624l-.349-.177s.406.624 1.45.936c-.274.312-.546.668-.546.668-1.857-.044-2.534-1.204-2.534-1.204 0-2.584 1.222-4.68 1.222-4.68z" transform="translate(4.656 4)"/>
|
||||
<path d="M8.872 8.514c.474 0 .86-.4.86-.893 0-.49-.384-.89-.86-.89v.002c-.472 0-.859.398-.86.892 0 .489.386.889.86.889zM5.793 8.514c.474 0 .86-.4.86-.893 0-.49-.383-.89-.857-.89l-.003.002c-.474 0-.86.398-.86.892 0 .489.386.889.86.889z" transform="translate(4.656 4)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="155" height="41" viewBox="0 0 155 41">
|
||||
<defs>
|
||||
<filter id="9uejgo84sa">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M0 8.762L43.44 31.68c1.14.596 1.347 2.137.406 3.012h-.022c-1.365 1.235-2.89 2.28-4.536 3.106C25.25 44.845 8.84 34.069 9.75 18.402l5.809 4.007c1.738 9.146 11.411 14.423 20.054 10.941L0 8.762zm17.563 6.392l29.176 11.52c.846.332 1.303 1.25 1.056 2.124v.037c-.313 1.09-1.558 1.61-2.554 1.065L17.563 15.154zM28.306.065c5.502-.472 12.377 1.596 16.474 6.872 3.45 4.453 4.162 9.894 3.919 15.513v-.015c-.097 1.192-1.32 1.95-2.432 1.511l-19.832-7.83 18.411 4.933c.316-3.24-.446-6.494-2.168-9.258-6.029-9.672-20.279-9.2-25.65.853-.308.579-.578 1.177-.809 1.791l-4.937-2.628c.14-.207.287-.402.435-.601.236-.49.49-.988.771-1.475C15.762 4.07 21.242.736 27.021.201z" transform="translate(-247 -96) translate(247 96)"/>
|
||||
<g filter="url(#9uejgo84sa)" transform="translate(-247 -96) translate(247 96)">
|
||||
<g>
|
||||
<path fill="#333" fill-rule="nonzero" d="M7.758 19.892c1.552 0 2.901-.25 4.048-.75 1.146-.499 2.03-1.2 2.65-2.105.62-.904.931-1.95.931-3.139 0-1.12-.28-2.075-.84-2.867-.56-.792-1.35-1.421-2.366-1.886-1.018-.465-2.199-.75-3.543-.852l-1.656-.155c-.93-.07-1.612-.323-2.043-.763-.43-.439-.646-.951-.646-1.537 0-.482.12-.93.362-1.343.241-.413.603-.74 1.086-.982.483-.24 1.086-.361 1.81-.361.759 0 1.384.133 1.875.4.492.267.862.62 1.112 1.06.25.438.375.916.375 1.433h3.595c0-1.223-.284-2.286-.853-3.19-.57-.905-1.371-1.606-2.405-2.106C10.215.25 8.982 0 7.55 0 6.172 0 4.97.237 3.944.71c-1.026.474-1.823 1.146-2.392 2.015-.57.87-.854 1.908-.854 3.113 0 1.602.539 2.89 1.617 3.862 1.077.973 2.521 1.538 4.331 1.693l1.655.129c1.19.103 2.07.357 2.638.762.57.404.854.943.854 1.614 0 .534-.147 1.012-.44 1.434-.293.422-.741.762-1.345 1.02-.603.259-1.353.388-2.25.388-1 0-1.806-.146-2.418-.44-.612-.292-1.056-.675-1.332-1.149-.275-.473-.413-.96-.413-1.46H0c0 1.189.302 2.252.905 3.191.604.939 1.479 1.675 2.625 2.209 1.147.534 2.556.8 4.228.8zm14.51-.491v-6.562h1.526l4.706 6.562h4.06l-5.913-8.047 4.776-5.98h-3.75l-5.405 6.755V.543h-3.595V19.4h3.595zm14.225 5.528c1.155 0 2.125-.138 2.91-.413.784-.276 1.426-.728 1.926-1.356.5-.629.888-1.46 1.164-2.493l4.164-15.294h-3.44L40.389 16.25h-.55L36.417 5.373h-3.621l4.552 13.718h2.302l-.208.8c-.108.435-.259.792-.451 1.072l-.066.091c-.224.293-.504.5-.84.62-.337.12-.755.181-1.255.181h-2.637v3.074h2.301zm16.45-5.528V11.16c0-.913.27-1.64.814-2.183.543-.542 1.254-.814 2.134-.814.862 0 1.538.267 2.03.801.491.534.737 1.232.737 2.093V19.4h3.594v-8.034c0-2.136-.43-3.742-1.293-4.818-.862-1.077-2.129-1.615-3.801-1.615h-.155c-1.121 0-2.056.241-2.806.723-.75.483-1.315 1.202-1.694 2.158-.106.265-.196.549-.272.85l-.039.16V5.373h-2.844v14.028h3.594zm19.655.49c1.156 0 2.186-.197 3.09-.593.906-.397 1.652-.956 2.238-1.68.586-.723.982-1.567 1.19-2.531h-3.31c-.156.516-.51.951-1.061 1.304-.552.353-1.267.53-2.147.53-.879 0-1.603-.194-2.172-.581-.569-.388-.991-.922-1.267-1.602-.17-.419-.287-.875-.353-1.368l-.014-.117h10.556V11.96c0-1.24-.259-2.398-.776-3.475-.517-1.076-1.288-1.946-2.314-2.609s-2.298-.994-3.815-.994c-1.155 0-2.172.202-3.051.607-.88.404-1.617.947-2.211 1.627-.595.68-1.044 1.455-1.345 2.325-.302.87-.453 1.77-.453 2.7v.49c0 .896.151 1.774.453 2.636.301.86.75 1.64 1.345 2.337.594.698 1.344 1.253 2.25 1.667.905.413 1.96.62 3.167.62zm3.316-8.834h-7.058l.028-.15c.059-.284.135-.55.229-.8l.059-.148c.284-.68.702-1.201 1.254-1.563.552-.362 1.224-.543 2.017-.543.793 0 1.453.173 1.979.517.525.344.918.835 1.176 1.473.13.318.227.669.291 1.052l.025.162zm14.763 8.525v-3.075h-2.198c-.69 0-1.22-.185-1.59-.555-.371-.37-.557-.9-.557-1.589l.013-6.355h4.332V5.373H86.35l.008-3.952h-3.362l-.008 3.952h-2.242v2.635h2.237l-.013 6.123c0 1.292.187 2.332.56 3.12l.061.122c.414.8 1.039 1.37 1.875 1.705.836.336 1.9.504 3.194.504h2.017z" transform="translate(64 11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="155" height="41" viewBox="0 0 155 41">
|
||||
<defs>
|
||||
<filter id="41ormny0ma">
|
||||
<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>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M0 8.762L43.44 31.68c1.14.596 1.347 2.137.406 3.012h-.022c-1.365 1.235-2.89 2.28-4.536 3.106C25.25 44.845 8.84 34.069 9.75 18.402l5.809 4.007c1.738 9.146 11.411 14.423 20.054 10.941L0 8.762zm17.563 6.392l29.176 11.52c.846.332 1.303 1.25 1.056 2.124v.037c-.313 1.09-1.558 1.61-2.554 1.065L17.563 15.154zM28.306.065c5.502-.472 12.377 1.596 16.474 6.872 3.45 4.453 4.162 9.894 3.919 15.513v-.015c-.097 1.192-1.32 1.95-2.432 1.511l-19.832-7.83 18.411 4.933c.316-3.24-.446-6.494-2.168-9.258-6.029-9.672-20.279-9.2-25.65.853-.308.579-.578 1.177-.809 1.791l-4.937-2.628c.14-.207.287-.402.435-.601.236-.49.49-.988.771-1.475C15.762 4.07 21.242.736 27.021.201z" transform="translate(-247 -96) translate(247 96)"/>
|
||||
<g filter="url(#41ormny0ma)" transform="translate(-247 -96) translate(247 96)">
|
||||
<g>
|
||||
<path fill="#333" fill-rule="nonzero" d="M7.758 19.892c1.552 0 2.901-.25 4.048-.75 1.146-.499 2.03-1.2 2.65-2.105.62-.904.931-1.95.931-3.139 0-1.12-.28-2.075-.84-2.867-.56-.792-1.35-1.421-2.366-1.886-1.018-.465-2.199-.75-3.543-.852l-1.656-.155c-.93-.07-1.612-.323-2.043-.763-.43-.439-.646-.951-.646-1.537 0-.482.12-.93.362-1.343.241-.413.603-.74 1.086-.982.483-.24 1.086-.361 1.81-.361.759 0 1.384.133 1.875.4.492.267.862.62 1.112 1.06.25.438.375.916.375 1.433h3.595c0-1.223-.284-2.286-.853-3.19-.57-.905-1.371-1.606-2.405-2.106C10.215.25 8.982 0 7.55 0 6.172 0 4.97.237 3.944.71c-1.026.474-1.823 1.146-2.392 2.015-.57.87-.854 1.908-.854 3.113 0 1.602.539 2.89 1.617 3.862 1.077.973 2.521 1.538 4.331 1.693l1.655.129c1.19.103 2.07.357 2.638.762.57.404.854.943.854 1.614 0 .534-.147 1.012-.44 1.434-.293.422-.741.762-1.345 1.02-.603.259-1.353.388-2.25.388-1 0-1.806-.146-2.418-.44-.612-.292-1.056-.675-1.332-1.149-.275-.473-.413-.96-.413-1.46H0c0 1.189.302 2.252.905 3.191.604.939 1.479 1.675 2.625 2.209 1.147.534 2.556.8 4.228.8zm14.51-.491v-6.562h1.526l4.706 6.562h4.06l-5.913-8.047 4.776-5.98h-3.75l-5.405 6.755V.543h-3.595V19.4h3.595zm14.225 5.528c1.155 0 2.125-.138 2.91-.413.784-.276 1.426-.728 1.926-1.356.5-.629.888-1.46 1.164-2.493l4.164-15.294h-3.44L40.389 16.25h-.55L36.417 5.373h-3.621l4.552 13.718h2.302l-.208.8c-.108.435-.259.792-.451 1.072l-.066.091c-.224.293-.504.5-.84.62-.337.12-.755.181-1.255.181h-2.637v3.074h2.301zm16.45-5.528V11.16c0-.913.27-1.64.814-2.183.543-.542 1.254-.814 2.134-.814.862 0 1.538.267 2.03.801.491.534.737 1.232.737 2.093V19.4h3.594v-8.034c0-2.136-.43-3.742-1.293-4.818-.862-1.077-2.129-1.615-3.801-1.615h-.155c-1.121 0-2.056.241-2.806.723-.75.483-1.315 1.202-1.694 2.158-.106.265-.196.549-.272.85l-.039.16V5.373h-2.844v14.028h3.594zm19.655.49c1.156 0 2.186-.197 3.09-.593.906-.397 1.652-.956 2.238-1.68.586-.723.982-1.567 1.19-2.531h-3.31c-.156.516-.51.951-1.061 1.304-.552.353-1.267.53-2.147.53-.879 0-1.603-.194-2.172-.581-.569-.388-.991-.922-1.267-1.602-.17-.419-.287-.875-.353-1.368l-.014-.117h10.556V11.96c0-1.24-.259-2.398-.776-3.475-.517-1.076-1.288-1.946-2.314-2.609s-2.298-.994-3.815-.994c-1.155 0-2.172.202-3.051.607-.88.404-1.617.947-2.211 1.627-.595.68-1.044 1.455-1.345 2.325-.302.87-.453 1.77-.453 2.7v.49c0 .896.151 1.774.453 2.636.301.86.75 1.64 1.345 2.337.594.698 1.344 1.253 2.25 1.667.905.413 1.96.62 3.167.62zm3.316-8.834h-7.058l.028-.15c.059-.284.135-.55.229-.8l.059-.148c.284-.68.702-1.201 1.254-1.563.552-.362 1.224-.543 2.017-.543.793 0 1.453.173 1.979.517.525.344.918.835 1.176 1.473.13.318.227.669.291 1.052l.025.162zm14.763 8.525v-3.075h-2.198c-.69 0-1.22-.185-1.59-.555-.371-.37-.557-.9-.557-1.589l.013-6.355h4.332V5.373H86.35l.008-3.952h-3.362l-.008 3.952h-2.242v2.635h2.237l-.013 6.123c0 1.292.187 2.332.56 3.12l.061.122c.414.8 1.039 1.37 1.875 1.705.836.336 1.9.504 3.194.504h2.017z" transform="translate(64 11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="194qo1kf6a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#194qo1kf6a)" transform="translate(-1140 -2522) translate(0 2342) translate(794 180) translate(346)">
|
||||
<g>
|
||||
<path fill="#000" fill-rule="nonzero" d="M18.567 1.904l1.61-1.54V.025H14.6L10.625 9.92 6.103.026H.255v.337l1.88 2.264c.184.168.28.412.255.659v8.897c.058.32-.046.65-.271.883L0 15.633v.333h6.007v-.337l-2.119-2.563c-.23-.234-.338-.558-.291-.883V4.487L8.87 15.971h.613l4.534-11.484v9.148c0 .241 0 .29-.159.449l-1.63 1.578V16h7.912v-.337l-1.572-1.54c-.138-.104-.21-.279-.18-.448V2.353c-.03-.171.041-.346.18-.45z" transform="translate(5.333 8)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g fill="#00C65E">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M32 16v2H8v-2h24zm0-8v2H16V8h16zm0-8v2H0V0h32z" transform="translate(-311 -72) translate(25 72) translate(286) translate(0 7)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g fill="#00C65E">
|
||||
<g>
|
||||
<path d="M30.97 7l1.415 1.414-7.779 7.778 7.779 7.779-1.414 1.414-7.779-7.779-7.778 7.779L14 23.97l7.778-7.779L14 8.414 15.414 7l7.778 7.778L30.971 7z" transform="translate(-311 -25) translate(311 25)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 433 B |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="w9594if0ua">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#w9594if0ua)" transform="translate(-1028 -2522) translate(0 2342) translate(794 180) translate(234)">
|
||||
<g>
|
||||
<path fill="#000" fill-rule="nonzero" d="M17.26 7.154c-.613 0-1.153.259-1.55.66-1.461-1.025-3.431-1.686-5.614-1.756L11.23.873l3.61.822c0 .897.72 1.63 1.604 1.63.901 0 1.626-.753 1.626-1.65 0-.898-.72-1.65-1.625-1.65-.63 0-1.174.386-1.445.914L11.012.042c-.2-.054-.398.092-.451.296L9.316 6.054c-2.166.091-4.115.75-5.58 1.778-.398-.42-.959-.678-1.572-.678-2.277 0-3.022 3.1-.938 4.16-.073.327-.107.677-.107 1.025 0 3.482 3.865 6.302 8.61 6.302 4.766 0 8.631-2.82 8.631-6.302 0-.348-.036-.714-.126-1.043 2.042-1.063 1.29-4.14-.974-4.142zm-12.727 4.38c0-.915.72-1.65 1.626-1.65.884 0 1.605.73 1.605 1.65 0 .897-.72 1.629-1.605 1.629-.901.004-1.626-.732-1.626-1.63zm8.773 3.883c-1.49 1.512-5.694 1.512-7.185 0-.165-.146-.165-.403 0-.57.143-.145.397-.145.54 0 1.138 1.185 4.913 1.205 6.1 0 .144-.145.398-.145.541 0 .168.167.168.425.004.57zm-.033-2.251c-.884 0-1.604-.731-1.604-1.628 0-.914.72-1.65 1.604-1.65.901 0 1.626.731 1.626 1.65-.005.893-.725 1.628-1.626 1.628z" transform="translate(6.287 6.667)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,34 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="q2pg3gceya">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<filter id="x4s64m2qwb">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.000000 0 0 0 0 0.776471 0 0 0 0 0.368627 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M57.5 37c0 9.389-7.611 17-17 17s-17-7.611-17-17 7.611-17 17-17 17 7.611 17 17z" transform="translate(-792 -1966) translate(0 1544) translate(792 422)"/>
|
||||
<g filter="url(#q2pg3gceya)" transform="translate(-792 -1966) translate(0 1544) translate(792 422)">
|
||||
<g>
|
||||
<g filter="url(#x4s64m2qwb)" transform="translate(8 6)">
|
||||
<g stroke="#222829" stroke-width="2">
|
||||
<path stroke-linejoin="round" d="M47 58L63 58" transform="translate(.5)"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M59 62L63 58 59 54M36 8L32 4 36 0" transform="translate(.5)"/>
|
||||
<path d="M32 4c14.912 0 27 12.088 27 27S46.912 58 32 58H0" transform="translate(.5)"/>
|
||||
<path stroke-linejoin="round" d="M18.004 54.096C10.208 49.36 5 40.786 5 31 5 17.772 14.514 6.764 27.074 4.45" transform="translate(.5)"/>
|
||||
<path d="M49 31c0 9.389-7.611 17-17 17s-17-7.611-17-17 7.611-17 17-17 17 7.611 17 17zM32 39L32 42M32 20L32 23" transform="translate(.5)"/>
|
||||
<path d="M28 35c0 2.209 1.791 4 4 4s4-1.791 4-4-4-4-4-4-4-1.791-4-4 1.791-4 4-4 4 1.791 4 4M23 31L21 31M43 31L41 31" transform="translate(.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
<path fill="#D8D8D8" d="M12 65H54V67H12z" transform="translate(8 6)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="nw0z1sy8ta">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M31 10L8 19v21c0 18 23 30 23 30V10z" transform="translate(-1144 -1966) translate(0 1544) translate(1144 422)"/>
|
||||
<g filter="url(#nw0z1sy8ta)" transform="translate(-1144 -1966) translate(0 1544) translate(1144 422)">
|
||||
<g>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M10.224 40L16.22 40 24.218 26 32.214 38 40.214 26 48.215 38 56.214 24 62.224 24" transform="translate(8 10)"/>
|
||||
<path fill="#1C1C1C" d="M6 39H8V41H6zM64 23H66V25H64z" transform="translate(8 10)"/>
|
||||
<g stroke="#000" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M48 21.3V9L24 0 0 9v21c0 18 24 30 24 30s12.902-6.451 19.786-16.988" transform="translate(8 10)"/>
|
||||
</g>
|
||||
<path fill="#D8D8D8" d="M22 1H24V17H22z" transform="translate(8 10)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="142" viewBox="0 0 320 142">
|
||||
<defs>
|
||||
<filter id="ggm010n4ja">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<filter id="5cxph9rhkb">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g transform="translate(-1152 -1078) translate(448 949) translate(704 129) translate(75)">
|
||||
<circle cx="38" cy="75" r="30" fill="#00C65E"/>
|
||||
<path stroke="#0D0D0D" stroke-width="2" d="M18.658 51.258c-5.026 3.877-8.866 9.373-10.636 15.977-4.288 16.004 5.21 32.455 21.213 36.743 5.008 1.342 10.06 1.334 14.768.2"/>
|
||||
<g filter="url(#ggm010n4ja)">
|
||||
<g stroke="#222829" stroke-width="2">
|
||||
<path d="M82 20L82 56.068 80 60.075 80 104M46 6c0-3.313 2.688-6 6-6 3.313 0 6 2.687 6 6M46 14V6c0-3.314-2.688-6-6-6-3.313 0-6 2.686-6 6v8M58 20c0 3.313-2.691 6-6.007 6-2.082 0-3.913-1.056-4.993-2.66M70 20c0 3.313-2.688 6-6 6-3.313 0-6-2.687-6-6V6c0-3.313 2.687-6 6-6 3.312 0 6 2.687 6 6" transform="translate(25 21)"/>
|
||||
<path d="M82 6c0-3.313-2.688-6-6-6-3.313 0-6 2.687-6 6v14c0 3.313 2.687 6 6 6 3.312 0 6-2.687 6-6V6zM80 59.5L72 59.5M42 59.5L50 59.5M46 34c8.836 0 16 7.163 16 16M80 67.5L68 67.5" transform="translate(25 21)"/>
|
||||
<path d="M40 36v-9.999S50 24 50 18c0-2.209-1.791-4-4-4H34c-4.419 0-8 3.583-8 8.001v22l16 16V90M40 25.5L34 25.5M89.5 74L89.5 78M89.5 82L89.5 86M89.5 90L89.5 94M33.5 62L33.5 66M33.5 70L33.5 74M33.5 78L33.5 82M17 89.5L62 89.5M0 103.5L120 103.5M36 117.5L92 117.5" transform="translate(25 21)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g stroke-linecap="round" stroke-linejoin="round" filter="url(#5cxph9rhkb)">
|
||||
<g stroke="#000" stroke-width="2" transform="translate(122)">
|
||||
<circle cx="19.5" cy="19.5" r="19.5"/>
|
||||
<path d="M0 19.5L39 19.5M19.5 0c4.877 5.34 7.65 12.27 7.8 19.5-.15 7.23-2.923 14.16-7.8 19.5-4.877-5.34-7.65-12.27-7.8-19.5.15-7.23 2.923-14.16 7.8-19.5h0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="otngco3gva">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<filter id="lj4budqwmb">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.000000 0 0 0 0 0.776471 0 0 0 0 0.368627 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M69 60L54 72 39 60 39 30 47 33 50 30 58 30 61 33 69 30z" transform="translate(-440 -1965) translate(0 1544) translate(440 421)"/>
|
||||
<g stroke-linejoin="round" filter="url(#otngco3gva)" transform="translate(-440 -1965) translate(0 1544) translate(440 421)">
|
||||
<g stroke="#222829" stroke-width="2" filter="url(#lj4budqwmb)" transform="translate(11 9)">
|
||||
<path d="M46 7c0 3.866-10.297 7-23 7S0 10.866 0 7s10.297-7 23-7 23 3.134 23 7z"/>
|
||||
<path d="M23 26c-12.703 0-23-3.134-23-7V7M46 7L46 17M23 38c-12.703 0-23-3.134-23-7v-7M23 50c-12.703 0-23-3.134-23-7v-7M35 60.973C31.507 61.625 27.397 62 23 62c-12.703 0-23-3.134-23-7v-7M23 26L25 26M23 38L25 38M23 50L25 50M58 50L43 62 28 50 28 20 36 23 39 20 47 20 50 23 58 20zM50 31L50 33M50 43L50 45M46 31L46 33M46 35L46 37M46 43L46 45M46 47L46 49M50 35L50 37M36 31L36 33M36 43L36 45M40 31L40 33M40 35L40 37M40 43L40 45M40 47L40 49M36 35L36 37M46 39L46 41M50 39L50 41M40 39L40 41M36 39L36 41M36 23L36 27M50 23L50 27M24 20L22 20M24 32L22 32M24 44L22 44M24 56L22 56"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="589p9xvkwa">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<filter id="y85n5y5inb">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.000000 0 0 0 0 0.776471 0 0 0 0 0.368627 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M40 11c17.121 0 31 13.879 31 31 0 8.52-3.438 16.396-9 22H18c-5.564-5.604-9-13.479-9-22 0-17.121 13.879-31 31-31zm0 5c-13.807 0-25 11.26-25 25.15 0 6.914 2.771 13.303 7.258 17.85h35.484C62.227 54.453 65 48.063 65 41.15 65 27.26 53.807 16 40 16z" transform="translate(-1144 -1661) translate(0 1544) translate(1144 117)"/>
|
||||
<g filter="url(#589p9xvkwa)" transform="translate(-1144 -1661) translate(0 1544) translate(1144 117)">
|
||||
<g stroke="#222829" stroke-width="2" filter="url(#y85n5y5inb)" transform="translate(9 11)">
|
||||
<path d="M34 31c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3z"/>
|
||||
<path d="M11 46.003C7.86 41.823 6 36.629 6 31 6 17.193 17.193 6 31 6s25 11.193 25 25c0 5.628-1.859 10.82-4.998 15"/>
|
||||
<path d="M53 53H9c-5.564-5.604-9-13.479-9-22C0 13.879 13.879 0 31 0c17.121 0 31 13.879 31 31 0 8.52-3.438 16.396-9 22zM31 46L31 48M27 46L27 48M35 46L35 48M39 46L39 48M23 46L23 48M6 31L9 31M31 6L31 9M56 31L53 31M13 13L16 16M46 16L49 13M33 29L43 19"/>
|
||||
<path d="M23 37.002c-1.256-1.672-2-3.75-2-6.002 0-5.522 4.477-10 10-10s10 4.478 10 10c0 2.25-.744 4.328-1.999 6M11 60.5L51 60.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="131" viewBox="0 0 320 131">
|
||||
<defs>
|
||||
<filter id="tz44a43s9a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M112 49.889L112 80.111 142 99 172 80.111 172 49.889 142.938 31z" transform="translate(-448 -1089) translate(448 949) translate(0 140) translate(66)"/>
|
||||
<path stroke="#0D0D0D" stroke-width="2" d="M125.612 88.681L142 99 172 80.111 172 49.889 158.725 41.261" transform="translate(-448 -1089) translate(448 949) translate(0 140) translate(66)"/>
|
||||
<g filter="url(#tz44a43s9a)" transform="translate(-448 -1089) translate(448 949) translate(0 140) translate(66)">
|
||||
<g stroke="#222829" stroke-width="2">
|
||||
<path d="M32 14L48 4 64 14 64 30 48 40 32 30z" transform="translate(46 5)"/>
|
||||
<path d="M64 14L48 24 32 14M48.5 24L48.5 40M68.5 82L68.5 126M46 64.5L50 64.5M38 64.5L42 64.5M54 64.5L58 64.5" transform="translate(46 5)"/>
|
||||
<g>
|
||||
<path d="M52 126v-24c0-2.207-1.791-4-4-4s-4 1.793-4 4v24M25 0h-5C6.762 8.547 0 21.074 0 38c0 19.43 11.396 36.449 28 44v44" transform="translate(46 5)"/>
|
||||
<path d="M48 86c26.51 0 48-21.488 48-48 0-16.93-6.758-29.453-20-38h-4v36L48 52 24 36V0" transform="translate(46 5)"/>
|
||||
<path d="M72.004 6C81.719 13.299 88 24.916 88 38c0 22.094-17.908 40-40 40S8 60.094 8 38" transform="translate(46 5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path stroke="#0D0D0D" stroke-width="2" d="M29 11.5H0m34 9H15m29-20H25" transform="translate(-448 -1089) translate(448 949) translate(0 140) translate(66)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="p9eklku59a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M39 11c1.105 0 2 .895 2 2v11l-3.12.5-3.417 2.3L33 31l1.898 4.871 2.102.804V50h-.328l-2.209-4L31 43l-1.467.5-.925 1 .392 2 1.458 3.5H13c-1.105 0-2-.895-2-2V13c0-1.105.895-2 2-2h26z" transform="translate(-792 -1661) translate(0 1544) translate(792 117)"/>
|
||||
<g filter="url(#p9eklku59a)" transform="translate(-792 -1661) translate(0 1544) translate(792 117)">
|
||||
<g stroke="#222829" stroke-width="2">
|
||||
<path d="M42 34L42 37M37 33L37 36M32 31L32 35" transform="translate(11 12)"/>
|
||||
<g>
|
||||
<path d="M26 63v-4c0-.553.447-1 1-1h19c.553 0 1 .447 1 1v4" transform="translate(11 12)"/>
|
||||
<path stroke-linejoin="round" d="M44 32c1.656 0 3 1.344 3 3v7c0 7-2 11-2 13v3M39 30c1.656 0 3 1.344 3 3v2M34 28c1.656 0 3 1.344 3 3v2" transform="translate(11 12)"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M26 40V19c0-1.656 1.344-3 3-3s3 1.344 3 3v12" transform="translate(11 12)"/>
|
||||
<path stroke-linejoin="round" d="M28 58v-3l-6-8s-3.293-12.293-4-13c-1-1 0-3 2-3s3 3 3 3l3 6M26.004 25.328C23.637 24.205 22 21.794 22 19c0-3.866 3.134-7 7-7s7 3.134 7 7c0 2.793-1.635 5.203-4 6.326" transform="translate(11 12)"/>
|
||||
<path stroke-linejoin="round" d="M19.778 25C18.653 23.273 18 21.213 18 19c0-6.075 4.925-11 11-11s11 4.925 11 11c0 2.214-.654 4.274-1.78 6" transform="translate(11 12)"/>
|
||||
<path stroke-linejoin="round" d="M14 19c0-8.284 6.716-15 15-15 8.284 0 15 6.716 15 15" transform="translate(11 12)"/>
|
||||
<path stroke-linejoin="round" d="M14 38H1c-.552 0-1-.447-1-1V1c0-.553.448-1 1-1h56c.552 0 1 .447 1 1v36c0 .553-.448 1-1 1h-7M4 38L4 3M54 35L54 0" transform="translate(11 12)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,37 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="131" viewBox="0 0 320 131">
|
||||
<defs>
|
||||
<filter id="d51k6oi84a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 0 0.050980 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#00C65E" d="M99.41 100C114.094 100 126 88.136 126 73.5S114.095 47 99.41 47C89.618 47 58.481 55.833 6 73.5 58.482 91.167 89.619 100 99.41 100z" transform="translate(-800 -1089) translate(448 949) translate(352 140) translate(64) rotate(30 66 73.5)"/>
|
||||
<g filter="url(#d51k6oi84a)" transform="translate(-800 -1089) translate(448 949) translate(352 140) translate(64)">
|
||||
<g stroke-width="2">
|
||||
<path stroke="#222829" d="M62.5 51L62.5 55M55 48.5L66 48.5M53 44.5L71 44.5" transform="translate(34 32)"/>
|
||||
<g stroke="#222829">
|
||||
<path d="M58 7v8l-8 13h-9c-1.656 0-3 1.344-3 3v17h-2v7" transform="translate(34 32) translate(33)"/>
|
||||
<path d="M37 22L46 22 52 13M6 13L12 22 21 22" transform="translate(34 32) translate(33)"/>
|
||||
<path d="M0 7v8l8 13h9c1.656 0 3 1.344 3 3v17h2v7" transform="translate(34 32) translate(33)"/>
|
||||
<path d="M6 7c0 1.657-1.344 3-3 3S0 8.657 0 7s1.344-3 3-3 3 1.343 3 3zM58 7c0 1.657-1.344 3-3 3s-3-1.343-3-3 1.344-3 3-3 3 1.343 3 3zM42.5 35L42.5 37M42.5 39L42.5 41M42.5 43L42.5 45M16.5 35L16.5 37M16.5 39L16.5 41M16.5 43L16.5 45M38 9c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9z" transform="translate(34 32) translate(33)"/>
|
||||
</g>
|
||||
<g stroke="#222829" stroke-linejoin="round">
|
||||
<path d="M20 0H6C2.688 0 0 2.686 0 6v60M108 66V6c0-3.314-2.688-6-6-6H88M44 60.5L48 60.5M36 60.5L40 60.5M52 60.5L56 60.5M60 60.5L64 60.5M68 60.5L72 60.5" transform="translate(34 32) translate(8 14)"/>
|
||||
<path d="M88 8L100 8 100 60 76 60M32 60L8 60 8 8 20 8" transform="translate(34 32) translate(8 14)"/>
|
||||
</g>
|
||||
<path stroke="#00C65E" stroke-linejoin="round" d="M116 98L8 98 0 90 0 86 48 86 52 90 72 90 76 86 124 86 124 90z" transform="translate(34 32)"/>
|
||||
</g>
|
||||
</g>
|
||||
<path stroke="#0D0D0D" stroke-linejoin="round" stroke-width="2" d="M177.6 54.514L186.88 58 179.92 44.054 195 38.243 179.92 33.595 188.04 20.811 171.8 26.622 166 15 160.2 26.622 143.96 20.811 152.08 34.757 137 38.243 152.08 44.054" transform="translate(-800 -1089) translate(448 949) translate(352 140) translate(64) rotate(45 166 36.5)"/>
|
||||
<path stroke="#0D0D0D" stroke-linejoin="round" stroke-width="2" d="M168 41c0 3.314-2.687 6-6 6-3.312 0-6-2.686-6-6 0-3.313 2.688-6 6-6 3.313 0 6 2.687 6 6z" transform="translate(-800 -1089) translate(448 949) translate(352 140) translate(64)"/>
|
||||
<path stroke="#0D0D0D" stroke-width="2" d="M27.662 58.841L14.038 43.5 31.449 47" transform="translate(-800 -1089) translate(448 949) translate(352 140) translate(64)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="ezb37sca8a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#ezb37sca8a)" transform="translate(-1386 -2522) translate(0 2342) translate(794 180) translate(592)">
|
||||
<g>
|
||||
<path fill="#000" fill-rule="nonzero" d="M18.722 5.35c-1.218 0-2.341-.404-3.243-1.084-1.035-.78-1.778-1.924-2.04-3.243-.066-.326-.1-.662-.104-1.007H9.857V9.52l-.004 5.205c0 1.392-.906 2.572-2.163 2.987-.364.12-.758.177-1.168.155-.523-.03-1.014-.187-1.44-.442-.907-.543-1.522-1.527-1.539-2.652-.026-1.76 1.397-3.195 3.155-3.195.347 0 .68.057.992.16V8.207c-.329-.05-.664-.075-1.003-.075-1.924 0-3.724.8-5.01 2.242C.703 11.463.12 12.852.03 14.31c-.117 1.914.583 3.733 1.941 5.076.2.197.41.38.629.549 1.164.896 2.588 1.382 4.088 1.382.338 0 .673-.025 1.002-.074 1.401-.208 2.694-.849 3.714-1.857 1.253-1.239 1.946-2.883 1.953-4.634L13.34 6.98c.598.461 1.252.843 1.954 1.139 1.09.46 2.248.694 3.439.693V5.35h-.01z" transform="translate(6.667 5.333)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="sfiklfri1a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#sfiklfri1a)" transform="translate(-914 -2522) translate(0 2342) translate(794 180) translate(120)">
|
||||
<g>
|
||||
<path fill="#000" fill-rule="nonzero" d="M17.627 3.993c.798-.567 1.47-1.275 2.018-2.09v-.001c-.73.32-1.508.533-2.32.636.834-.498 1.472-1.282 1.772-2.226-.779.464-1.638.792-2.554.975C15.803.5 14.75.013 13.6.013c-2.23 0-4.025 1.81-4.025 4.028 0 .32.027.626.093.918C6.322 4.796 3.36 3.191 1.368.746 1.02 1.35.816 2.04.816 2.782c0 1.395.718 2.63 1.79 3.347-.648-.012-1.282-.2-1.82-.496v.044c0 1.957 1.395 3.583 3.227 3.958-.329.09-.686.132-1.056.132-.258 0-.519-.014-.762-.068.52 1.594 2.002 2.767 3.762 2.806-1.37 1.071-3.11 1.717-4.994 1.717-.33 0-.646-.015-.963-.055 1.784 1.15 3.898 1.807 6.178 1.807 7.108 0 11.74-5.93 11.449-11.98z" transform="translate(6.667 8)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<filter id="28rlgib7da">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 0 0.109804 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#28rlgib7da)" transform="translate(-1262 -2522) translate(0 2342) translate(794 180) translate(468)">
|
||||
<g>
|
||||
<path fill="#1C1C1C" fill-rule="nonzero" d="M22.052 2.307l.028.184c-.272-.965-1.007-1.71-1.94-1.98l-.02-.005C18.367.029 11.307.029 11.307.029S4.264.02 2.491.506C1.541.78.805 1.526.538 2.47l-.005.02c-.655 3.423-.66 7.537.03 11.203l-.03-.186c.272.965 1.007 1.71 1.94 1.98l.02.005c1.752.478 8.814.478 8.814.478s7.041 0 8.815-.478c.951-.275 1.687-1.02 1.954-1.965l.005-.02c.298-1.592.468-3.424.468-5.296v-.207-.216c0-1.873-.17-3.705-.497-5.482zM9.054 11.424v-6.84l5.875 3.425-5.875 3.415z" transform="translate(4.667 8)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
export { default as ArrowRight } from "./ArrowRight.svg";
|
||||
export { default as ArrowRightPrimary } from "./ArrowRightPrimary.svg";
|
||||
export { default as CheckActive } from "./CheckActive.svg";
|
||||
export { default as DiscordSmall } from "./DiscordSmall.svg";
|
||||
export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg";
|
||||
export { default as LogoBlackText } from "./LogoBlackText.svg";
|
||||
export { default as LogoWhiteText } from "./LogoWhiteText.svg";
|
||||
export { default as MediumSmall } from "./MediumSmall.svg";
|
||||
export { default as MenuMobile } from "./MenuMobile.svg";
|
||||
export { default as MenuMobileClose } from "./MenuMobileClose.svg";
|
||||
export { default as RedditSmall } from "./RedditSmall.svg";
|
||||
export { default as SkynetMonetizationSmall } from "./SkynetMonetizationSmall.svg";
|
||||
export { default as SkynetPersistenceSmall } from "./SkynetPersistenceSmall.svg";
|
||||
export { default as SkynetPowerBig } from "./SkynetPowerBig.svg";
|
||||
export { default as SkynetSiaSmall } from "./SkynetSiaSmall.svg";
|
||||
export { default as SkynetSpeedSmall } from "./SkynetSpeedSmall.svg";
|
||||
export { default as SkynetToolBig } from "./SkynetToolBig.svg";
|
||||
export { default as SkynetUsageSmall } from "./SkynetUsageSmall.svg";
|
||||
export { default as SkynetUserBig } from "./SkynetUserBig.svg";
|
||||
export { default as TikTokSmall } from "./TikTokSmall.svg";
|
||||
export { default as TwitterSmall } from "./TwitterSmall.svg";
|
||||
export { default as YoutubeSmall } from "./YoutubeSmall.svg";
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* Layout component that queries for data
|
||||
* with Gatsby's useStaticQuery component
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
import BackgroundImage from "gatsby-background-image";
|
||||
import Navigation from "../Navigation/Navigation";
|
||||
import NewsHeader from "../NewsHeader/NewsHeader";
|
||||
import Footer from "../Footer/Footer";
|
||||
import FooterNavigation from "../FooterNavigation/FooterNavigation";
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
// const data = useStaticQuery(graphql`
|
||||
// query SiteTitleQuery {
|
||||
// site {
|
||||
// siteMetadata {
|
||||
// title
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// `);
|
||||
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
ripple: file(relativePath: { eq: "ripple.png" }) {
|
||||
childImageSharp {
|
||||
fluid(maxWidth: 1440) {
|
||||
...GatsbyImageSharpFluid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
return (
|
||||
<>
|
||||
<NewsHeader />
|
||||
<BackgroundImage fluid={data.ripple.childImageSharp.fluid} className="bg-palette-600">
|
||||
<Navigation mode="dark" />
|
||||
|
||||
<main>{children}</main>
|
||||
</BackgroundImage>
|
||||
<FooterNavigation />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Link } from "gatsby";
|
||||
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";
|
||||
|
||||
const routes = [
|
||||
{ title: "Home", route: "/" },
|
||||
{ title: "About", route: "/about" },
|
||||
{ title: "Developers", route: "/developers" },
|
||||
{ title: "News", route: "/news" },
|
||||
];
|
||||
|
||||
const LogInLink = () => (
|
||||
<a href="https://secure.siasky.net" className="text-primary text-xs uppercase whitespace-nowrap">
|
||||
Log in
|
||||
</a>
|
||||
);
|
||||
|
||||
const LogInButton = ({ className, ...props }) => (
|
||||
<a
|
||||
href="https://secure.siasky.net/auth/register"
|
||||
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
|
||||
</a>
|
||||
);
|
||||
|
||||
const SignUpButton = ({ className, ...props }) => (
|
||||
<a
|
||||
href="https://secure.siasky.net/auth/register"
|
||||
className={classnames(
|
||||
"bg-primary text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
);
|
||||
|
||||
const Navigation = ({ mode }) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<nav className={classnames("p-8", { "bg-palette-600": open }, "desktop:bg-transparent")}>
|
||||
<div className="max-w-layout mx-auto">
|
||||
<div className="flex justify-between">
|
||||
<Link to="/" className={classnames("flex flex-shrink-0 items-center", { hidden: open }, "desktop:flex")}>
|
||||
{mode === "dark" && <LogoWhiteText className="h-8 w-auto" />}
|
||||
{mode === "light" && <LogoBlackText className="h-8 w-auto" />}
|
||||
</Link>
|
||||
<div className="ml-auto flex items-center desktop:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<MenuMobile className={classnames({ hidden: open })} aria-hidden="true" />
|
||||
<MenuMobileClose className={classnames({ hidden: !open })} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12">
|
||||
{routes.map(({ title, route }) => (
|
||||
<Link
|
||||
key={route}
|
||||
to={route}
|
||||
className={classnames("text-sm font-light", {
|
||||
"text-white": mode === "dark",
|
||||
"text-palette-600": mode === "light",
|
||||
})}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
<LogInLink />
|
||||
<SignUpButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames("desktop:hidden", { block: open, hidden: !open })} id="mobile-menu">
|
||||
<div className="pt-4 pb-10 flex flex-col space-y-2">
|
||||
{routes.map(({ title, route }) => (
|
||||
<Link key={route} to={route} className="text-xl leading-7 font-semibold text-white">
|
||||
{title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-palette-500 py-7">
|
||||
<a
|
||||
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" />
|
||||
<span>Join our Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-12 pb-8 border-t border-palette-500">
|
||||
<div className="flex items-center px-4 space-x-6">
|
||||
<LogInButton className="flex-grow" />
|
||||
<SignUpButton className="flex-grow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
mode: PropTypes.oneOf(["dark", "light"]),
|
||||
};
|
||||
|
||||
Navigation.defaultProps = {
|
||||
mode: "dark",
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from "react";
|
||||
import Navigation from "./Navigation";
|
||||
|
||||
export default {
|
||||
title: "Layout/Navigation",
|
||||
component: Navigation,
|
||||
argTypes: {
|
||||
mode: {
|
||||
table: {
|
||||
disable: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => <Navigation {...args} />;
|
||||
|
||||
export const OnDarkBackground = Template.bind({});
|
||||
OnDarkBackground.parameters = {
|
||||
backgrounds: { default: "dark" },
|
||||
};
|
||||
OnDarkBackground.args = {
|
||||
mode: "dark",
|
||||
};
|
||||
|
||||
export const OnLightBackground = Template.bind({});
|
||||
OnLightBackground.parameters = {
|
||||
backgrounds: { default: "light" },
|
||||
};
|
||||
OnLightBackground.args = {
|
||||
mode: "light",
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
import { ArrowRightPrimary, DiscordSmallWhite } from "../Icons";
|
||||
|
||||
const NewsHeader = () => {
|
||||
return (
|
||||
<div className="bg-palette-500 px-8 p-3">
|
||||
<div className="max-w-layout mx-auto">
|
||||
<div className="flex justify-between">
|
||||
<Link
|
||||
to="/news"
|
||||
className="text-palette-300 font-content leading-8 flex items-center overflow-hidden"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<ArrowRightPrimary className="mr-2 flex-shrink-0" />
|
||||
<span className="truncate">Skynet Announces SkyDB, Unlocking Fully Decentralized Internet</span>
|
||||
</Link>
|
||||
|
||||
<div className="ml-auto items-center pl-8 hidden desktop:block">
|
||||
<a
|
||||
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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
NewsHeader.propTypes = {};
|
||||
|
||||
NewsHeader.defaultProps = {};
|
||||
|
||||
export default NewsHeader;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import NewsHeader from "./NewsHeader";
|
||||
|
||||
export default {
|
||||
title: "Layout/NewsHeader",
|
||||
component: NewsHeader,
|
||||
};
|
||||
|
||||
const Template = (args) => <NewsHeader {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.parameters = {};
|
||||
Default.args = {};
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Link } from "gatsby";
|
||||
import LogoWhiteText from "./Icons/LogoWhiteText.svg";
|
||||
|
||||
const Header = () => (
|
||||
<nav className="bg-gray-800">
|
||||
<div className="max-w-desktop mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex">
|
||||
<div className="-ml-2 mr-2 flex items-center desktop:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{/*
|
||||
Icon when menu is closed.
|
||||
|
||||
Heroicon name: outline/menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
*/}
|
||||
<svg
|
||||
className="block h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
{/*
|
||||
Icon when menu is open.
|
||||
|
||||
Heroicon name: outline/x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
*/}
|
||||
<svg
|
||||
className="hidden h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<LogoWhiteText className="h-8 w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-4">
|
||||
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
||||
<Link to="/" className="text-white px-3 py-2 text-sm font-medium">
|
||||
Home
|
||||
</Link>
|
||||
<Link to="/about" className="text-white px-3 py-2 text-sm font-medium">
|
||||
About
|
||||
</Link>
|
||||
<a href="#" className="text-white px-3 py-2 text-sm font-medium">
|
||||
Developers
|
||||
</a>
|
||||
<a href="#" className="text-white px-3 py-2 text-sm font-medium">
|
||||
News
|
||||
</a>
|
||||
<a href="#" className="text-white px-3 py-2 rounded-md text-sm font-medium uppercase">
|
||||
Log in
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="bg-green-500 text-black hover:bg-green-600 px-3 py-2 rounded-full text-sm font-medium uppercase"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile menu, show/hide based on menu state. */}
|
||||
<div className="desktop:hidden" id="mobile-menu">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
||||
<a href="#" className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Team
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Projects
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Calendar
|
||||
</a>
|
||||
</div>
|
||||
<div className="pt-4 pb-3 border-t border-gray-700">
|
||||
<div className="flex items-center px-5 sm:px-6">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="h-10 w-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=KSH2sjxhcz&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-base font-medium text-white">Tom Cook</div>
|
||||
<div className="text-sm font-medium text-gray-400">tom@example.com</div>
|
||||
</div>
|
||||
<button className="ml-auto flex-shrink-0 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span className="sr-only">View notifications</span>
|
||||
{/* Heroicon name: outline/bell */}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 px-2 space-y-1 sm:px-3">
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Your Profile
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Sign out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
Header.propTypes = {
|
||||
siteTitle: PropTypes.string,
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
siteTitle: ``,
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/**
|
||||
* SEO component that queries for data with
|
||||
* Gatsby's useStaticQuery React hook
|
||||
*
|
||||
* 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"
|
||||
|
||||
function SEO({ description, lang, meta, title }) {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
const defaultTitle = site.siteMetadata?.title
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title}
|
||||
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata?.author || ``,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
].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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 974 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
import * as React from "react";
|
||||
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import SEO from "../components/seo";
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<Layout>
|
||||
<SEO title="404: Not found" />
|
||||
<h1>404: Not Found</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default NotFoundPage;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import SEO from "../components/seo";
|
||||
|
||||
const SecondPage = () => (
|
||||
<Layout>
|
||||
<SEO title="Page two" />
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default SecondPage;
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
import * as React from "react";
|
||||
// import { StaticImage } from "gatsby-plugin-image";
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import SEO from "../components/seo";
|
||||
import HeroStartPage from "../components/HeroStartPage/HeroStartPage";
|
||||
import CommunitySection from "../components/CommunitySection";
|
||||
import {
|
||||
ArrowRight,
|
||||
SkynetToolBig,
|
||||
SkynetUserBig,
|
||||
SkynetPowerBig,
|
||||
SkynetMonetizationSmall,
|
||||
SkynetPersistenceSmall,
|
||||
SkynetSpeedSmall,
|
||||
SkynetUsageSmall,
|
||||
SkynetSiaSmall,
|
||||
} from "../components/Icons";
|
||||
import classnames from "classnames";
|
||||
|
||||
const Section = ({ children, className }) => (
|
||||
<div className={classnames("px-8 p-3", className)}>
|
||||
<div className="max-w-content mx-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const BigIcon = ({ Icon, text }) => (
|
||||
<div className="flex flex-col items-center">
|
||||
<Icon height="142" />
|
||||
<p className="text-center mt-4 font-light text-palette-600 text-lg">{text}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SmallIconCard = ({ Icon, title, text }) => (
|
||||
<div className="flex flex-col">
|
||||
<Icon />
|
||||
<h3 className="font-light text-lg mt-6">{title}</h3>
|
||||
<p className="text-palette-400 font-content mt-6">{text}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const IndexPage = () => (
|
||||
<Layout>
|
||||
<SEO title="Home" />
|
||||
|
||||
<Section className="py-24">
|
||||
<HeroStartPage />
|
||||
</Section>
|
||||
|
||||
<Section className="bg-white py-32">
|
||||
<h2 className="text-4xl font-semibold text-palette-600 text-center mb-11">
|
||||
The new decentralized
|
||||
<br />
|
||||
internet is here
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 desktop:grid-cols-3">
|
||||
<BigIcon Icon={SkynetToolBig} text="Build a freer future" />
|
||||
<BigIcon Icon={SkynetUserBig} text="Fight corporate control of user data" />
|
||||
<BigIcon Icon={SkynetPowerBig} text="Empower global citizens" />
|
||||
</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>
|
||||
|
||||
<a href="/" className="mt-6 uppercase flex items-center text-xs text-palette-600">
|
||||
Try Skynet Apps <ArrowRight />
|
||||
</a>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-palette-100 py-32">
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3 desktop:grid-rows-2">
|
||||
<div>
|
||||
<h3 className="text-4xl font-semibold text-palette-600">Ready to build your application?</h3>
|
||||
<a
|
||||
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"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<SmallIconCard
|
||||
Icon={SkynetUsageSmall}
|
||||
title="Easy to use"
|
||||
text="Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps. "
|
||||
/>
|
||||
<SmallIconCard
|
||||
Icon={SkynetSpeedSmall}
|
||||
title="Fast"
|
||||
text="Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!"
|
||||
/>
|
||||
<SmallIconCard
|
||||
Icon={SkynetSiaSmall}
|
||||
title="Free to use"
|
||||
text="Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it."
|
||||
/>
|
||||
<SmallIconCard
|
||||
Icon={SkynetMonetizationSmall}
|
||||
title="Monetization"
|
||||
text="Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers."
|
||||
/>
|
||||
<SmallIconCard
|
||||
Icon={SkynetPersistenceSmall}
|
||||
title="Persistence"
|
||||
text="Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down."
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="py-24 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>
|
||||
);
|
||||
|
||||
export default IndexPage;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// If you don't want to use TypeScript you can delete this file!
|
||||
import * as React from "react";
|
||||
import { PageProps, Link, graphql } from "gatsby";
|
||||
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import SEO from "../components/seo";
|
||||
|
||||
type DataProps = {
|
||||
site: {
|
||||
buildTime: string;
|
||||
};
|
||||
};
|
||||
|
||||
const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
|
||||
<Layout>
|
||||
<SEO title="Using TypeScript" />
|
||||
<h1>Gatsby supports TypeScript by default!</h1>
|
||||
<p>
|
||||
This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that
|
||||
the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.
|
||||
</p>
|
||||
<p>
|
||||
For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a{" "}
|
||||
<em>.tsconfig</em> file.
|
||||
</p>
|
||||
<p>
|
||||
You're currently on the page "{path}" which was built on {data.site.buildTime}.
|
||||
</p>
|
||||
<p>
|
||||
To learn more, head over to our{" "}
|
||||
<a href="https://www.gatsbyjs.com/docs/typescript/">documentation about TypeScript</a>.
|
||||
</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default UsingTypescript;
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
site {
|
||||
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './button.css';
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
style={backgroundColor && { backgroundColor }}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary: PropTypes.bool,
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor: PropTypes.string,
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: PropTypes.string.isRequired,
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
Button.defaultProps = {
|
||||
backgroundColor: null,
|
||||
primary: false,
|
||||
size: 'medium',
|
||||
onClick: undefined,
|
||||
};
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => <Button {...args} />;
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Large = Template.bind({});
|
||||
Large.args = {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
};
|
||||
|
||||
export const Small = Template.bind({});
|
||||
Small.args = {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
};
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
|
||||
export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
|
||||
<header>
|
||||
<div className="wrapper">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9"
|
||||
/>
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{user ? (
|
||||
<Button size="small" onClick={onLogout} label="Log out" />
|
||||
) : (
|
||||
<>
|
||||
<Button size="small" onClick={onLogin} label="Log in" />
|
||||
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Header.propTypes = {
|
||||
user: PropTypes.shape({}),
|
||||
onLogin: PropTypes.func.isRequired,
|
||||
onLogout: PropTypes.func.isRequired,
|
||||
onCreateAccount: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
user: null,
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Header } from './Header';
|
||||
|
||||
export default {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
};
|
||||
|
||||
const Template = (args) => <Header {...args} />;
|
||||
|
||||
export const LoggedIn = Template.bind({});
|
||||
LoggedIn.args = {
|
||||
user: {},
|
||||
};
|
||||
|
||||
export const LoggedOut = Template.bind({});
|
||||
LoggedOut.args = {};
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
import Code from './assets/code-brackets.svg';
|
||||
import Colors from './assets/colors.svg';
|
||||
import Comments from './assets/comments.svg';
|
||||
import Direction from './assets/direction.svg';
|
||||
import Flow from './assets/flow.svg';
|
||||
import Plugin from './assets/plugin.svg';
|
||||
import Repo from './assets/repo.svg';
|
||||
import StackAlt from './assets/stackalt.svg';
|
||||
|
||||
<Meta title="Example/Introduction" />
|
||||
|
||||
<style>{`
|
||||
.subheading {
|
||||
--mediumdark: '#999999';
|
||||
font-weight: 900;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
letter-spacing: 6px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
.link-list {
|
||||
row-gap: 20px;
|
||||
column-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
.link-list {
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 1fr;
|
||||
-ms-grid-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: block;
|
||||
padding: 20px 30px 20px 15px;
|
||||
border: 1px solid #00000010;
|
||||
border-radius: 5px;
|
||||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
border-color: #1EA7FD50;
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
||||
}
|
||||
|
||||
.link-item:active {
|
||||
border-color: #1EA7FD;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.link-item strong {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.link-item img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 15px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.link-item span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #E7FDD8;
|
||||
color: #66BF3C;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tip-wrapper code {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
`}</style>
|
||||
|
||||
# Welcome to Storybook
|
||||
|
||||
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
|
||||
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
|
||||
|
||||
Browse example stories now by navigating to them in the sidebar.
|
||||
View their code in the `src/stories` directory to learn how they work.
|
||||
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
||||
|
||||
<div className="subheading">Configure</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/addons/addon-types"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Plugin} alt="plugin" />
|
||||
<span>
|
||||
<strong>Presets for popular tools</strong>
|
||||
Easy setup for TypeScript, SCSS and more.
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/webpack"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={StackAlt} alt="Build" />
|
||||
<span>
|
||||
<strong>Build configuration</strong>
|
||||
How to customize webpack and Babel
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/configure/styling-and-css"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Colors} alt="colors" />
|
||||
<span>
|
||||
<strong>Styling</strong>
|
||||
How to load and configure CSS libraries
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="link-item"
|
||||
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
||||
target="_blank"
|
||||
>
|
||||
<img src={Flow} alt="flow" />
|
||||
<span>
|
||||
<strong>Data</strong>
|
||||
Providers and mocking for data libraries
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="subheading">Learn</div>
|
||||
|
||||
<div className="link-list">
|
||||
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
||||
<img src={Repo} alt="repo" />
|
||||
<span>
|
||||
<strong>Storybook documentation</strong>
|
||||
Configure, customize, and extend
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://www.learnstorybook.com" target="_blank">
|
||||
<img src={Direction} alt="direction" />
|
||||
<span>
|
||||
<strong>In-depth guides</strong>
|
||||
Best practices from leading teams
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
|
||||
<img src={Code} alt="code" />
|
||||
<span>
|
||||
<strong>GitHub project</strong>
|
||||
View the source and add issues
|
||||
</span>
|
||||
</a>
|
||||
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
|
||||
<img src={Comments} alt="comments" />
|
||||
<span>
|
||||
<strong>Discord chat</strong>
|
||||
Chat with maintainers and the community
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span>Edit the Markdown in{' '}
|
||||
<code>src/stories/Introduction.stories.mdx</code>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Header } from './Header';
|
||||
import './page.css';
|
||||
|
||||
export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
|
||||
<article>
|
||||
<Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
|
||||
|
||||
<section>
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a{' '}
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>{' '}
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page data
|
||||
in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at{' '}
|
||||
<a href="https://www.learnstorybook.com" target="_blank" rel="noopener noreferrer">
|
||||
Learn Storybook
|
||||
</a>
|
||||
. Read more in the{' '}
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
|
||||
docs
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="tip-wrapper">
|
||||
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
|
||||
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
Page.propTypes = {
|
||||
user: PropTypes.shape({}),
|
||||
onLogin: PropTypes.func.isRequired,
|
||||
onLogout: PropTypes.func.isRequired,
|
||||
onCreateAccount: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
Page.defaultProps = {
|
||||
user: null,
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Page } from './Page';
|
||||
import * as HeaderStories from './Header.stories';
|
||||
|
||||
export default {
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
};
|
||||
|
||||
const Template = (args) => <Page {...args} />;
|
||||
|
||||
export const LoggedIn = Template.bind({});
|
||||
LoggedIn.args = {
|
||||
...HeaderStories.LoggedIn.args,
|
||||
};
|
||||
|
||||
export const LoggedOut = Template.bind({});
|
||||
LoggedOut.args = {
|
||||
...HeaderStories.LoggedOut.args,
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
.storybook-button {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.storybook-button--primary {
|
||||
color: white;
|
||||
background-color: #1ea7fd;
|
||||
}
|
||||
.storybook-button--secondary {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.storybook-button--small {
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.storybook-button--medium {
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.storybook-button--large {
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.wrapper {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin: 6px 0 6px 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
section {
|
||||
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 48px 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 900;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1ea7fd;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #e7fdd8;
|
||||
color: #66bf3c;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tip-wrapper svg {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.tip-wrapper svg path {
|
||||
fill: #1ea7fd;
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
|
||||
const palette = {
|
||||
100: "#f5f7f7",
|
||||
200: "#d4dddb",
|
||||
300: "#9e9e9e",
|
||||
400: "#555555",
|
||||
500: "#242424",
|
||||
600: "#0d0d0d",
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
screens: {
|
||||
sm: "640px",
|
||||
tablet: "640px",
|
||||
md: "768px",
|
||||
lg: "1024px",
|
||||
desktop: "1088px",
|
||||
xl: "1280px",
|
||||
hires: "1408px",
|
||||
"2xl": "1536px",
|
||||
},
|
||||
backgroundColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
borderColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
textColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
placeholderColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Sora", ...defaultTheme.fontFamily.sans],
|
||||
content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: "#00c65e",
|
||||
},
|
||||
},
|
||||
maxWidth: {
|
||||
tablet: "640px",
|
||||
desktop: "1024px",
|
||||
content: "992px",
|
||||
layout: "1408px",
|
||||
},
|
||||
lineHeight: {
|
||||
16: "4rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
backgroundColor: ["disabled"],
|
||||
textColor: ["disabled"],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue