about page
This commit is contained in:
Karol Wypchlo
parent
2dba3f1131
commit
ac43c5b28b
|
|
@ -4,4 +4,13 @@
|
|||
* See: https://www.gatsbyjs.com/docs/node-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
exports.onCreateWebpackConfig = ({ actions }) => {
|
||||
actions.setWebpackConfig({
|
||||
resolve: {
|
||||
fallback: {
|
||||
crypto: require.resolve("crypto-browserify"),
|
||||
stream: require.resolve("stream-browserify"),
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,47 +12,50 @@
|
|||
"bytes": "^3.1.0",
|
||||
"classnames": "^2.2.6",
|
||||
"copy-text-to-clipboard": "^3.0.1",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"framer-motion": "^4.0.3",
|
||||
"gatsby": "^3.0.1",
|
||||
"gatsby": "^3.1.2",
|
||||
"gatsby-background-image": "^1.5.0",
|
||||
"gatsby-plugin-gatsby-cloud": "^2.0.0",
|
||||
"gatsby-plugin-image": "^1.0.0",
|
||||
"gatsby-plugin-image": "^1.1.2",
|
||||
"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-plugin-sharp": "^3.1.2",
|
||||
"gatsby-source-filesystem": "^3.0.0",
|
||||
"gatsby-transformer-json": "^3.1.0",
|
||||
"gatsby-transformer-sharp": "^3.0.0",
|
||||
"gbimage-bridge": "^0.1.1",
|
||||
"http-status-codes": "^2.1.4",
|
||||
"ms": "^2.1.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"path-browserify": "^0.0.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"polished": "^4.1.1",
|
||||
"popmotion": "^9.3.4",
|
||||
"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-dropzone": "^11.3.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-dropzone": "^11.3.2",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-svg-loader": "^3.0.3",
|
||||
"react-use": "^17.2.1",
|
||||
"skynet-js": "^3.0.0",
|
||||
"skynet-js": "^3.0.2",
|
||||
"stream-browserify": "^2.0.2",
|
||||
"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",
|
||||
"@babel/core": "^7.13.13",
|
||||
"@storybook/addon-actions": "^6.2.0-rc.10",
|
||||
"@storybook/addon-essentials": "^6.2.0-rc.10",
|
||||
"@storybook/addon-links": "^6.2.0-rc.10",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-viewport": "^6.2.0-rc.2",
|
||||
"@storybook/react": "^6.2.0-rc.2",
|
||||
"@storybook/addon-viewport": "^6.2.0-rc.10",
|
||||
"@storybook/react": "^6.2.0-rc.10",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-inline-react-svg": "^2.0.1",
|
||||
"prettier": "2.2.1"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
export const OutlineButton = () => {
|
||||
<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>;
|
||||
};
|
||||
|
|
@ -13,11 +13,11 @@ import {
|
|||
|
||||
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: "/" },
|
||||
{ name: "Twitter", Icon: TwitterSmall, href: "https://twitter.com/SiaTechHQ" },
|
||||
{ name: "Reddit", Icon: RedditSmall, href: "https://www.reddit.com/r/siacoin" },
|
||||
{ name: "Medium", Icon: MediumSmall, href: "https://blog.sia.tech" },
|
||||
{ name: "Youtube", Icon: YoutubeSmall, href: "https://www.youtube.com/c/SiaTVOfficial/featured" },
|
||||
{ name: "Tik Tok", Icon: TikTokSmall, href: "https://www.tiktok.com/@decentralizedfuture" },
|
||||
];
|
||||
|
||||
const SectionHeader = ({ children }) => <h3 className="uppercase text-xs text-palette-600 desktop:mb-1">{children}</h3>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./Footer";
|
||||
|
|
@ -9,8 +9,8 @@ const sections = [
|
|||
{ title: "About us", href: "/" },
|
||||
{ title: "Brand Guidelines", href: "/" },
|
||||
{ title: "Careers", href: "/" },
|
||||
{ title: "Terms of Use", href: "/" },
|
||||
{ title: "Privacy Policy", href: "/" },
|
||||
{ title: "Terms of Use", href: "/terms-of-use.pdf" },
|
||||
{ title: "Privacy Policy", href: "/privacy-policy.pdf" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -18,7 +18,7 @@ const sections = [
|
|||
links: [
|
||||
{ title: "About us", href: "/" },
|
||||
{ title: "API Documentation", href: "/" },
|
||||
{ title: "SDK Documentation", href: "/" },
|
||||
{ title: "SDK Documentation", href: "https://siasky.net/docs/" },
|
||||
{ title: "Developer Guide", href: "/" },
|
||||
{ title: "Portal Setup", href: "/" },
|
||||
],
|
||||
|
|
@ -28,7 +28,7 @@ const sections = [
|
|||
links: [
|
||||
{ title: "What is Skynet?", href: "/" },
|
||||
{ title: "Technology Guide", href: "/" },
|
||||
{ title: "Pricing", href: "/" },
|
||||
{ title: "Pricing", href: "/pricing" },
|
||||
{ title: "Skynet Wiki", href: "/" },
|
||||
{ title: "Support", href: "https://support.siasky.net", target: "_blank" },
|
||||
],
|
||||
|
|
@ -60,29 +60,32 @@ const FooterNavigation = () => {
|
|||
<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(activeSection === section ? null : section)}
|
||||
>
|
||||
{section.header}
|
||||
</h3>
|
||||
|
||||
{/* desktop */}
|
||||
<ul className="hidden desktop:block">
|
||||
{section.links.map(({ title, ...rest }) => (
|
||||
<li key={title} className="mt-1 first:mt-4">
|
||||
<a {...rest} className="text-white font-content">
|
||||
{title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="hidden desktop:block">
|
||||
<div className="text-lg text-palette-300 font-light">{section.header}</div>
|
||||
<ul>
|
||||
{section.links.map(({ title, ...rest }) => (
|
||||
<li key={title} className="mt-1 first:mt-4">
|
||||
<a {...rest} className="text-white font-content">
|
||||
{title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* mobile */}
|
||||
<div className="desktop:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className={classnames("text-lg font-light", {
|
||||
"text-primary": activeSection === section,
|
||||
"text-palette-300": activeSection !== section,
|
||||
})}
|
||||
onClick={() => setActiveSection(activeSection === section ? null : section)}
|
||||
>
|
||||
{section.header}
|
||||
</button>
|
||||
<AnimatePresence initial={false}>
|
||||
{activeSection === section && (
|
||||
<motion.ul
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./FooterNavigation";
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="6-a">
|
||||
<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">
|
||||
<polygon fill="#00C65E" points="69 17 63 17 63 11 58 9 54 14 50 9 45 11 45 17 39 17 37 22 42 26 37 30 39 35 45 35 45 41 50 43 54 38 58 43 63 41 63 35 69 35 71 30 66 26 71 22"/>
|
||||
<g filter="url(#6-a)">
|
||||
<g transform="translate(9 9)">
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M48 17C48 18.656 46.656 20 45 20 43.344 20 42 18.656 42 17 42 15.344 43.344 14 45 14 46.656 14 48 15.344 48 17zM4 33L4 6C4 4.896 4.896 4 6 4L33 4M58 29L58 56C58 57.104 57.104 58 56 58L29 58"/>
|
||||
<line x1="7" x2="21" y1="8" y2="8" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="7" x2="9" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="11" x2="13" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="15" x2="17" y1="12" y2="12" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="30" x2="32" y1="31" y2="31" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="41" y1="54" y2="54" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="53" y1="50" y2="50" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="51" x2="49" y1="50" y2="50" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="47" x2="45" y1="50" y2="50" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M14,48 C14,49.656 15.344,51 17,51 C18.656,51 20,49.656 20,48 C20,46.344 17,45 17,45 C17,45 14,43.656 14,42 C14,40.344 15.344,39 17,39 C18.656,39 20,40.344 20,42"/>
|
||||
<line x1="17" x2="17" y1="39" y2="36" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="17" x2="17" y1="51" y2="54" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="23" x2="25" y1="45" y2="45" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="9" x2="11" y1="45" y2="45" stroke="#222829" stroke-width="2"/>
|
||||
<polygon stroke="#222829" stroke-linejoin="round" stroke-width="2" points="60 8 54 8 54 2 49 0 45 5 41 0 36 2 36 8 30 8 28 13 33 17 28 21 30 26 36 26 36 32 41 34 45 29 49 34 54 32 54 26 60 26 62 21 57 17 62 13"/>
|
||||
<polygon stroke="#222829" stroke-linejoin="round" stroke-width="2" points="32 36 26 36 26 30 21 28 17 33 13 28 8 30 8 36 2 36 0 41 5 45 0 49 2 54 8 54 8 60 13 62 17 57 21 62 26 60 26 54 32 54 34 49 29 45 34 41"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,33 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="5-a">
|
||||
<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>
|
||||
<polygon id="5-b" points="0 58 64 58 64 0 0 0"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<polygon fill="#00C65E" points="13 50 46 50 46 16 13 16"/>
|
||||
<g filter="url(#5-a)">
|
||||
<g transform="translate(8 11)">
|
||||
<polygon stroke="#222829" stroke-linejoin="round" stroke-width="2" points="20 32 11 27 11 17 20 22"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="20 22 29 17 29 27 20 32"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="29 17 20 12 11 17"/>
|
||||
<line x1="34" x2="54" y1="16" y2="16" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="34" x2="54" y1="22" y2="22" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="34" x2="54" y1="28" y2="28" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="14" y2="18" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="49" x2="49" y1="20" y2="24" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="26" y2="30" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M4.0002,1 C2.3442,1 1.0002,2.343 1.0002,4 L1.0002,44 C1.0002,45.657 2.3442,47 4.0002,47 L60.0002,47 C61.6562,47 63.0002,45.657 63.0002,44 L63.0002,4 C63.0002,2.343 61.6562,1 60.0002,1 L4.0002,1 Z"/>
|
||||
<line x1="38" x2="40" y1="47" y2="57" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="24" x2="26" y1="57" y2="47" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="19" x2="45" y1="57" y2="57" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="31" x2="33" y1="43" y2="43" stroke="#222829" stroke-width="2"/>
|
||||
<mask id="5-c" fill="#fff">
|
||||
<use xlink:href="#5-b"/>
|
||||
</mask>
|
||||
<polygon stroke="#222829" stroke-width="2" points="5 39 59 39 59 5 5 5" mask="url(#5-c)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<path fill-rule="evenodd" d="M20,4 C28.836,4 36,11.164 36,20 C36,28.836 28.836,36 20,36 C11.164,36 4,28.836 4,20 C4,11.164 11.164,4 20,4 Z M20,6 C12.2685695,6 6,12.2685695 6,20 C6,27.7314305 12.2685695,34 20,34 C27.7314305,34 34,27.7314305 34,20 C34,12.2685695 27.7314305,6 20,6 Z M24.9497475,13.636039 L26.363961,15.0502525 L21.4142136,20 L26.363961,24.9497475 L24.9497475,26.363961 L20,21.4142136 L15.0502525,26.363961 L13.636039,24.9497475 L18.5857864,20 L13.636039,15.0502525 L15.0502525,13.636039 L20,18.5857864 L24.9497475,13.636039 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 637 B |
|
|
@ -0,0 +1,86 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="3-a">
|
||||
<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>
|
||||
<polygon id="3-b" points="0 .5 64 .5 64 3.5 0 3.5"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<rect width="31" height="32" x="9" y="9" fill="#00C65E"/>
|
||||
<g filter="url(#3-a)">
|
||||
<g transform="translate(8 9)">
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M29.0002 27C29.0002 25.344 30.3442 24 32.0002 24 33.6562 24 35.0002 25.344 35.0002 27M32.0002 20C35.8662 20 39.0002 23.134 39.0002 27M25.0002 27C25.0002 25.093 25.7632 23.363 27.0002 22.102"/>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M21.0002 27C21.0002 20.925 25.9252 16 32.0002 16 38.0752 16 43.0002 20.925 43.0002 27M41.9982 15.8184C45.0682 18.5644 47.0002 22.5564 47.0002 27.0004M17.0002 27C17.0002 18.716 23.7162 12 32.0002 12"/>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M26.0002 8.9668C27.8862 8.3398 29.9022 7.9998 32.0002 7.9998 42.4932 7.9998 51.0002 16.5068 51.0002 26.9998M13.0002 27C13.0002 21.971 14.9532 17.398 18.1452 14M53.1721 17.998C54.3501 20.763 55.0001 23.806 55.0001 27"/>
|
||||
<path stroke="#222829" stroke-linejoin="round" stroke-width="2" d="M10.0852,20 C13.0472,10.72 21.7382,4 32.0002,4 C39.8782,4 46.8302,7.961 50.9762,13.999"/>
|
||||
<g transform="translate(0 31)">
|
||||
<mask id="3-c" fill="#fff">
|
||||
<use xlink:href="#3-b"/>
|
||||
</mask>
|
||||
<line x2="64" y1="2" y2="2" stroke="#222829" stroke-linejoin="round" stroke-width="2" mask="url(#3-c)"/>
|
||||
</g>
|
||||
<line x1="9" x2="9" y1="43" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="9" x2="9" y1="37" y2="41" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="17" x2="17" y1="41" y2="47" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="17" x2="17" y1="49" y2="55" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="17" x2="17" y1="35" y2="37" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="13" x2="13" y1="47" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="13" x2="13" y1="39" y2="45" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="13" x2="13" y1="32" y2="37" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="13" x2="13" y1="51" y2="57" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="9" x2="9" y1="51" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="25" x2="25" y1="51" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="21" x2="21" y1="55" y2="57" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="25" x2="25" y1="35" y2="39" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="25" x2="25" y1="41" y2="47" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="21" x2="21" y1="39" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="21" x2="21" y1="32" y2="37" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="21" x2="21" y1="45" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="41" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="51" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="32" y2="39" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="45" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="35" x2="35" y1="55" y2="57" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="47" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="37" y2="45" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="51" y2="57" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="51" x2="51" y1="53" y2="57" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="51" x2="51" y1="35" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="51" x2="51" y1="45" y2="51" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="47" x2="47" y1="35" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="47" x2="47" y1="47" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="55" y1="32" y2="39" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="55" y1="47" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="55" y1="53" y2="55" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="55" y1="41" y2="45" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="35" x2="35" y1="45" y2="47" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="35" x2="35" y1="35" y2="43" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="35" x2="35" y1="49" y2="53" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="29" x2="29" y1="47" y2="49" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="29" x2="29" y1="43" y2="45" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="29" x2="29" y1="32" y2="41" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="29" x2="29" y1="51" y2="55" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="55" x2="55" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="51" x2="51" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="43" x2="43" y1="27" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="35" x2="35" y1="27" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="29" x2="29" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="25" x2="25" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="21" x2="21" y1="27" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="9" x2="9" y1="27" y2="35" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="17" x2="17" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="27" y2="32" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="13" x2="13" y1="27" y2="29" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="39" x2="39" y1="32" y2="35" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="63 53 63 62 54 62"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="10 62 1 62 1 53"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="10 0 1 0 1 9"/>
|
||||
<polyline stroke="#222829" stroke-linejoin="round" stroke-width="2" points="54 0 63 0 63 9"/>
|
||||
<line x1="4" x2="6" y1="4" y2="4" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="58" x2="60" y1="4" y2="4" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="4" x2="6" y1="58" y2="58" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
<line x1="58" x2="60" y1="58" y2="58" stroke="#222829" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M12,5.0203252 C7.58,5.0203252 4,8.45447154 4,12.6899187 C4,16.079187 6.292,18.9533333 9.47,19.9666667 C9.87,20.0388618 10.0166667,19.8014634 10.0166667,19.5978862 C10.0166667,19.4157724 10.01,18.9331707 10.0066667,18.2938211 C7.78133333,18.7562602 7.312,17.264878 7.312,17.264878 C6.948,16.3796748 6.422,16.1429268 6.422,16.1429268 C5.69733333,15.6674797 6.478,15.6772358 6.478,15.6772358 C7.28133333,15.7305691 7.70333333,16.4674797 7.70333333,16.4674797 C8.41666667,17.6401626 9.576,17.3013008 10.0333333,17.1055285 C10.1053333,16.6092683 10.3113333,16.2717073 10.54,16.0798374 C8.76333333,15.8879675 6.896,15.2284553 6.896,12.2899187 C6.896,11.4528455 7.206,10.7686179 7.71933333,10.2320325 C7.62933333,10.0382114 7.35933333,9.25837398 7.78933333,8.20211382 C7.78933333,8.20211382 8.45933333,7.99658537 9.98933333,8.98845528 C10.6293333,8.81804878 11.3093333,8.73349593 11.9893333,8.7295935 C12.6693333,8.73349593 13.3493333,8.81804878 13.9893333,8.98845528 C15.5093333,7.99658537 16.1793333,8.20211382 16.1793333,8.20211382 C16.6093333,9.25837398 16.3393333,10.0382114 16.2593333,10.2320325 C16.7693333,10.7686179 17.0793333,11.4528455 17.0793333,12.2899187 C17.0793333,15.2362602 15.2093333,15.8847154 13.4293333,16.0733333 C13.7093333,16.3035772 13.9693333,16.7738211 13.9693333,17.4925203 C13.9693333,18.5188618 13.9593333,19.3435772 13.9593333,19.5926829 C13.9593333,19.7936585 14.0993333,20.0336585 14.5093333,19.9569106 C17.71,18.9500813 20,16.0739837 20,12.6899187 C20,8.45447154 16.418,5.0203252 12,5.0203252 L12,5.0203252 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M5.098,10.7753333 C5.098,8.35 7.672,7.196 9.56866667,8.30333333 C10.232,8.30333333 10.884,8.12533333 11.49,7.882 L11.49,7.882 L11.49,9.68533333 C11.2613333,9.764 11.032,9.82866667 10.796,9.882 C11.2993333,11.256 10.5046667,13.2013333 8.55733333,13.5673333 C8.11733333,13.66 7.86333333,13.846 7.86333333,14.328 C7.86333333,15.696 11.424,14.7673333 11.424,17.2853333 C11.424,19.332 10.06,20 8.226,20 C6.72,20 5,19.4893333 5,17.65 C5,16.5826667 5.634,15.9646667 6.59666667,15.644 L6.59666667,15.644 L6.59666667,15.608 C5.71533333,15.0653333 5.89866667,13.5546667 6.56133333,13.258 L6.56133333,13.258 L6.56133333,13.222 C5.66933333,12.9186667 5.09866667,11.6793333 5.09866667,10.7753333 L5.09866667,10.7753333 Z M8.19066667,16.6253333 L8.07905516,16.6275183 C7.47745559,16.6442814 6.79047059,16.8087843 6.78733333,17.5573333 C6.78733333,18.3606667 7.704,18.4573333 8.314,18.4573333 C8.956,18.4573333 9.64333333,18.2966667 9.64333333,17.518 C9.64333333,16.7326667 8.79,16.6253333 8.19066667,16.6253333 L8.19066667,16.6253333 Z M17.918,6.50666667 C17.8473333,7 17.8653333,7.48866667 17.8653333,7.978 L17.8653333,7.978 L19.664,7.978 L19.664,9.67533333 C19.664,9.67533333 18.9833333,9.63933333 17.8653333,9.63933333 L17.8653333,9.63933333 L17.8653333,12.8926667 C17.8653333,13.4213333 17.982,14.0646667 18.634,14.0646667 C18.9793333,14.0646667 19.3846667,13.9646667 19.6666667,13.768 L19.6666667,13.768 L19.6666667,15.518 C19.198,15.7786667 18.5913333,15.868 18.062,15.867337 C16.176,15.867337 15.954,14.36 15.954,12.8066667 L15.954,12.8066667 L15.954,9.67466667 L15.9713333,9.67466667 L15.9713333,9.63866667 C15.7246667,9.63866667 15.714,9.582 15.1253333,9.67466667 L15.1253333,9.67466667 L15.1253333,7.978 L15.9713333,7.978 L15.9713333,7.978 L15.9714936,7.27606361 C15.9693058,6.94861157 15.9589697,6.73830303 15.9186667,6.50666667 L15.9186667,6.50666667 Z M14.3013333,7.97133333 C14.2733922,8.20133333 14.2590755,9.61744925 14.2566661,11.1834698 L14.2566356,12.1327809 C14.2590727,13.8229504 14.2746667,15.4478824 14.3013333,15.75 L14.3013333,15.75 L12.344,15.75 C12.374,15.408 12.3899862,13.3959239 12.3889908,11.4995966 L12.3880261,10.8742242 C12.3842884,9.43645675 12.3700784,8.1887451 12.344,7.97133333 L12.344,7.97133333 Z M9.12533333,10.7766667 C9.12533333,9.05133333 6.97466667,9.03333333 6.97466667,10.794 C6.97466667,11.5366667 7.30266667,12.0006667 8.078,12.0006667 L8.078,12.0006667 C8.84266667,12.0013333 9.12466667,11.5013333 9.12533333,10.7766667 Z M13.328,4 C14.0253333,4 14.5193333,4.64333333 14.5193333,5.31066667 C14.5193333,5.97933333 14.008,6.604 13.328,6.604 C12.63,6.604 12.112,5.98933333 12.112,5.31066667 C12.112,4.62066667 12.6233333,4 13.328,4 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<path fill-rule="evenodd" d="M16.0282136,6 C21.551061,6 26.0282135,10.4771526 26.0282135,16 C26.0282135,21.5228474 21.551061,26 16.0282136,26 L16.0282136,26 L7.02821361,26 C6.62326982,26.0170498 6.24808191,25.7879877 6.07821361,25.42 C5.92161688,25.0476029 6.00446904,24.6175607 6.28821361,24.33 L6.28821361,24.33 L8.28821361,22.33 C6.81900581,20.5485381 6.01947144,18.3091344 6.02821361,16 C6.02821361,10.4771525 10.5053661,6 16.0282136,6 Z M19.0784296,8.60691339 C15.5515371,7.1487988 11.4857836,8.38498377 9.36744069,11.5595219 C7.24909779,14.7340601 7.66809693,18.9628832 10.3682136,21.66 C10.5566279,21.8446305 10.6644566,22.0962307 10.6682136,22.36 C10.6671042,22.6272459 10.5590693,22.8829286 10.3682136,23.07 L10.3682136,23.07 L9.43821361,24 L16.0282136,24 C19.8446334,23.996999 23.1275213,21.298638 23.8693403,17.5550069 C24.6111593,13.8113758 22.6053222,10.065028 19.0784296,8.60691339 Z M16.0282136,18 C16.5804984,18 17.0282136,18.4477153 17.0282136,19 C17.0282136,19.5522847 16.5804984,20 16.0282136,20 C15.4759289,20 15.0282136,19.5522847 15.0282136,19 C15.0282136,18.4477153 15.4759289,18 16.0282136,18 Z M17,12 L17,17 L15,17 L15,12 L17,12 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="83" height="84" viewBox="0 0 83 84">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1.717 1.987)">
|
||||
<circle cx="45.283" cy="35.013" r="32" fill="#00C65E"/>
|
||||
<path stroke="#0D0D0D" stroke-width="2" d="M66.9650516,64.7590969 C70.2005407,59.7585671 72.0789302,53.798026 72.0789302,47.3987635 C72.0789302,29.7256515 57.7520422,15.3987635 40.0789302,15.3987635 C22.4058182,15.3987635 8.07893022,29.7256515 8.07893022,47.3987635" transform="rotate(-135 40.079 40.079)"/>
|
||||
<path fill="#0D0D0D" fill-rule="nonzero" d="M17.4969298,9.4969297 L17.4960469,19.1129297 L20.7869064,15.797325 L22.2069531,17.2056813 L17.2526515,22.2011078 C16.8937661,22.5629722 16.3268563,22.5931492 15.9333017,22.289983 L15.8387453,22.2072458 L10.7930469,17.2072458 L12.2008126,15.7866136 L15.4960469,19.0519297 L15.4969298,9.4969297 L17.4969298,9.4969297 Z" transform="rotate(-90 40.148 11.362)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 949 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M15.0195,8.787 C17.5365,8.787 18,10.4455 18,12.5985 L18,12.5985 L18,16.9995 L17.997,16.9995 L17.997,17 L15.5145,17 L15.5143116,12.9820505 C15.510737,12.0727361 15.4423958,10.978 14.221,10.978 C12.9275,10.978 12.7295,11.988 12.7295,13.0325 L12.7295,13.0325 L12.7295,16.9995 L10.2445,16.9995 L10.2445,8.988 L12.631,8.988 L12.631,10.0805 L12.666,10.0805 C12.9975,9.451 13.8095,8.787 15.0195,8.787 Z M8.686,8.9885 L8.686,17 L6.198,17 L6.198,8.9885 L8.686,8.9885 Z M7.441,5 C8.236,5 8.8815,5.6455 8.882,6.441 C8.882,7.2365 8.2365,7.8955 7.441,7.8955 C6.6455,7.8955 6,7.2365 6,6.441 C6,5.6455 6.6455,5 7.441,5 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 731 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<path fill="#0D0D0D" d="M20,4 C28.836,4 36,11.164 36,20 C36,28.836 28.836,36 20,36 C11.164,36 4,28.836 4,20 C4,11.164 11.164,4 20,4 Z M20,6 C12.2685695,6 6,12.2685695 6,20 C6,27.7314305 12.2685695,34 20,34 C27.7314305,34 34,27.7314305 34,20 C34,12.2685695 27.7314305,6 20,6 Z M21,26 L21,30 L19,30 L19,26 L21,26 Z M15.0502525,23.5355339 L16.4644661,24.9497475 L13.636039,27.7781746 L12.2218254,26.363961 L15.0502525,23.5355339 Z M24.9497475,23.5355339 L27.7781746,26.363961 L26.363961,27.7781746 L23.5355339,24.9497475 L24.9497475,23.5355339 Z M14,19 L14,21 L10,21 L10,19 L14,19 Z M30,19 L30,21 L26,21 L26,19 L30,19 Z M13.636039,12.2218254 L16.4644661,15.0502525 L15.0502525,16.4644661 L12.2218254,13.636039 L13.636039,12.2218254 Z M26.363961,12.2218254 L27.7781746,13.636039 L24.9497475,16.4644661 L23.5355339,15.0502525 L26.363961,12.2218254 Z M21,10 L21,14 L19,14 L19,10 L21,10 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 978 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#0D0D0D" d="M15.0195,8.787 C17.5365,8.787 18,10.4455 18,12.5985 L18,12.5985 L18,16.9995 L17.997,16.9995 L17.997,17 L15.5145,17 L15.5143116,12.9820505 C15.510737,12.0727361 15.4423958,10.978 14.221,10.978 C12.9275,10.978 12.7295,11.988 12.7295,13.0325 L12.7295,13.0325 L12.7295,16.9995 L10.2445,16.9995 L10.2445,8.988 L12.631,8.988 L12.631,10.0805 L12.666,10.0805 C12.9975,9.451 13.8095,8.787 15.0195,8.787 Z M8.686,8.9885 L8.686,17 L6.198,17 L6.198,8.9885 L8.686,8.9885 Z M7.441,5 C8.236,5 8.8815,5.6455 8.882,6.441 C8.882,7.2365 8.2365,7.8955 7.441,7.8955 C6.6455,7.8955 6,7.2365 6,6.441 C6,5.6455 6.6455,5 7.441,5 Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 726 B |
|
|
@ -0,0 +1,23 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="2-a">
|
||||
<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">
|
||||
<path fill="#00C65E" d="M29.9995,22.8085938 C30.1359824,30.4981283 30.6818034,36.1106364 31.6369629,39.6461182 C32.5921224,43.1815999 34.0268555,48.737915 35.9411621,56.3150635 L39.5767822,64.1800537 C41.6760661,62.1558838 42.9145915,60.492391 43.2923584,59.1895752 C43.8590088,57.2353516 48.1157227,43.7679443 48.5151367,40.7745361 C48.7814128,38.7789307 49.2762005,34.81486 49.9995,28.8823242 L49.7983398,22.8085938 C46.3836263,21.8491211 44.3798014,20.931722 43.7868652,20.0563965 C43.193929,19.181071 41.931474,18.023234 39.9995,16.5828857 L37.0494385,19.3743896 L33.2687988,21.4703369 L29.9995,22.8085938 Z"/>
|
||||
<g stroke-linejoin="round" filter="url(#2-a)">
|
||||
<g transform="translate(13 9)">
|
||||
<path stroke="#222829" stroke-width="2" d="M26.9995,-0.0002 L27.9995,-0.0002 C27.9995,-0.0002 33.9995,8.9998 40.9995,8.9998 L53.9995,8.9998 L53.9995,12.9998 C53.9995,50.9998 26.9995,61.9998 26.9995,61.9998 C26.9995,61.9998 -0.0005,50.9998 -0.0005,12.9998 L-0.0005,8.9998 L12.9995,8.9998 C19.9995,8.9998 25.9995,-0.0002 25.9995,-0.0002 L26.9995,-0.0002 Z"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M26.9995 55.9998C26.9995 55.9998 48.9995 43.9998 48.9995 13.9998L40.9995 13.9998C30.9995 13.9998 26.9995 6.9998 26.9995 6.9998 26.9995 6.9998 22.9995 13.9998 12.9995 13.9998L4.9995 13.9998C4.9995 43.9998 26.9995 55.9998 26.9995 55.9998zM16.9995 13.9998C16.9995 40.9998 26.9995 55.9998 26.9995 55.9998M36.9995 13.9998C36.9995 40.9998 26.9995 55.9998 26.9995 55.9998"/>
|
||||
<line x1="27" x2="27" y1="17" y2="19" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="27" x2="27" y1="13" y2="15" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="27" x2="27" y1="21" y2="23" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="10.999" x2="10.999" y1="17" y2="19" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="10.999" x2="10.999" y1="21" y2="23" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="42.999" x2="42.999" y1="17" y2="19" stroke="#222829" stroke-width="2"/>
|
||||
<line x1="42.999" x2="42.999" y1="21" y2="23" stroke="#222829" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<path fill-rule="evenodd" d="M14.0834601,6.38295607 C15.9498159,5.60840746 18.0989197,6.03338904 19.53,7.46 C20.160339,8.09493515 20.6121836,8.88480087 20.84,9.75 C20.9293164,10.0965476 20.8269672,10.4644206 20.5715064,10.7150447 C20.3160455,10.9656688 19.9462836,11.0609682 19.6015063,10.9650447 C19.2567291,10.8691211 18.9893164,10.5965476 18.9,10.25 C18.7648544,9.72982559 18.4959483,9.25406854 18.12,8.87 C17.2607657,8.01182697 15.9689164,7.75630901 14.8476815,8.22276026 C13.7264466,8.68921151 12.997017,9.78561306 13,11 L13,11 L13,13 L21,13 C22.6568542,13 24,14.3431458 24,16 L24,16 L24,23 C24,24.6568542 22.6568542,26 21,26 L21,26 L11,26 C9.34314575,26 8,24.6568542 8,23 L8,23 L8,16 C8,14.3431458 9.34314575,13 11,13 L11,13 L11,11 C11.000428,8.9793047 12.2171042,7.15750468 14.0834601,6.38295607 Z M21,15 L11,15 C10.4477153,15 10,15.4477153 10,16 L10,16 L10,23 C10,23.5522847 10.4477153,24 11,24 L11,24 L21,24 C21.5522847,24 22,23.5522847 22,23 L22,23 L22,16 C22,15.4477153 21.5522847,15 21,15 L21,15 Z M17,17.0009146 L17,22.0009146 L15,22.0009146 L15,17.0009146 L17,17.0009146 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 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="4-a">
|
||||
<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">
|
||||
<path fill="#00C65E" d="M70.999,9 L71,29 L67.4160156,29.8366699 L66,31.8007812 L66,36 L68,40 L40,40 C40,22.8791728 53.8791728,9 71,9 L70.999,9 Z" transform="matrix(-1 0 0 1 111 0)"/>
|
||||
<g filter="url(#4-a)">
|
||||
<g transform="translate(9 9)">
|
||||
<path stroke="#222829" stroke-width="2" d="M26,25.5 C26,29 27.963,32 31,32 C34.037,32 36,29 36,25.5 C36,22 35,20 31,20 C27,20 26,22 26,25.5 Z"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M28,31 L21,35 L21,37 C21,38.656 22,40 23,40 L39,40 C40,40 41,38.656 41,37 L41,35 L34,31"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M62,31 C62,48.121 48.121,62 31,62 C13.879,62 0,48.121 0,31 C0,13.879 13.879,0 31,0 C48.121,0 62,13.879 62,31 Z"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M31,15 L31,4 C18.51,4 8,12.482 4.916,24"/>
|
||||
<polyline stroke="#222829" stroke-width="2" points="35 11 31 15 27 11"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M31,47 L31,58 C43.49,58 54,49.518 57.084,38"/>
|
||||
<polyline stroke="#222829" stroke-width="2" points="35 51 31 47 27 51"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M47,31 L58,31 C58,18.51 49.518,8 38,4.916"/>
|
||||
<polyline stroke="#222829" stroke-width="2" points="51 35 47 31 51 27"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M15,31 L4,31 C4,43.49 12.482,54 24,57.084"/>
|
||||
<polyline stroke="#222829" stroke-width="2" points="11 35 15 31 11 27"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<filter id="1-a">
|
||||
<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">
|
||||
<path fill="#00C65E" d="M29.031876,20.9098666 L28.9376,20.9996 L26.0006,32.418457 L26.0002217,47.4850772 C15.5253909,39.5307935 9.94339742,30.0594707 13.1535,24.4995 C15.3983377,20.6113901 21.4491262,19.4904168 29.031876,20.9098666 Z"/>
|
||||
<g filter="url(#1-a)">
|
||||
<g transform="translate(10 9)">
|
||||
<path stroke="#222829" stroke-width="2" d="M25.1486,1.9116 C26.6606,0.6766 28.2946,-0.0004 30.0006,-0.0004 C37.7326,-0.0004 44.0006,13.8786 44.0006,30.9996 C44.0006,48.1206 37.7326,61.9996 30.0006,61.9996 C22.2676,61.9996 16.0006,48.1206 16.0006,30.9996 C16.0006,23.8406 17.0956,17.2476 18.9376,11.9996"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M57.6955,41.9185 C57.8795,43.6185 57.6145,45.1705 56.8465,46.4995 C52.9805,53.1955 37.8275,51.6855 23.0005,43.1245 C8.1735,34.5645 -0.7125,22.1955 3.1535,15.4995 C7.0195,8.8035 22.1735,10.3145 37.0005,18.8745 C43.2405,22.4785 48.4285,26.7565 52.0565,31.0025"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M2.3049,41.9155 C2.1199,43.6165 2.3859,45.1695 3.1539,46.4995 C7.0199,53.1955 22.1729,51.6855 36.9999,43.1245 C51.8269,34.5645 60.7129,22.1955 56.8469,15.4995 C52.9809,8.8035 37.8269,10.3145 22.9999,18.8745 C16.7599,22.4785 11.5729,26.7545 7.9459,30.9995"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M6.0002 38.9995C6.0002 40.6565 4.6562 41.9995 3.0002 41.9995 1.3442 41.9995.0002 40.6565.0002 38.9995.0002 37.3435 1.3442 35.9995 3.0002 35.9995 4.6562 35.9995 6.0002 37.3435 6.0002 38.9995zM60.0002 38.9995C60.0002 40.6565 58.6562 41.9995 57.0002 41.9995 55.3442 41.9995 54.0002 40.6565 54.0002 38.9995 54.0002 37.3435 55.3442 35.9995 57.0002 35.9995 58.6562 35.9995 60.0002 37.3435 60.0002 38.9995zM26.0002 3.9995C26.0002 5.6565 24.6562 6.9995 23.0002 6.9995 21.3442 6.9995 20.0002 5.6565 20.0002 3.9995 20.0002 2.3435 21.3442.9995 23.0002.9995 24.6562.9995 26.0002 2.3435 26.0002 3.9995zM21.0002 38.9995C21.0002 32.9995 27.0002 31.9995 27.0002 31.9995M39.0002 38.9995C39.0002 32.9995 33.0002 31.9995 33.0002 31.9995"/>
|
||||
<path stroke="#222829" stroke-width="2" d="M35.0002,26.4995 C35.0002,29.9995 33.0372,32.9995 30.0002,32.9995 C26.9632,32.9995 25.0002,29.9995 25.0002,26.4995 C25.0002,22.9995 26.0002,20.9995 30.0002,20.9995 C34.0002,20.9995 35.0002,22.9995 35.0002,26.4995 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -4,14 +4,25 @@ export { default as ArrowUpCircle } from "./ArrowUpCircle.svg";
|
|||
export { default as CheckActive } from "./CheckActive.svg";
|
||||
export { default as CheckCircle } from "./CheckCircle.svg";
|
||||
export { default as Cloud } from "./Cloud.svg";
|
||||
export { default as Cogs } from "./Cogs.svg";
|
||||
export { default as ComputerScreen } from "./ComputerScreen.svg";
|
||||
export { default as DiscordSmall } from "./DiscordSmall.svg";
|
||||
export { default as DiscordSmallWhite } from "./DiscordSmallWhite.svg";
|
||||
export { default as Error } from "./Error.svg";
|
||||
export { default as Fingerprint } from "./Fingerprint.svg";
|
||||
export { default as GithubSmall } from "./GithubSmall.svg";
|
||||
export { default as GitlabSmall } from "./GitlabSmall.svg";
|
||||
export { default as Info } from "./Info.svg";
|
||||
export { default as Join } from "./Join.svg";
|
||||
export { default as LinkedinSmall } from "./LinkedinSmall.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 ProgressRound } from "./ProgressRound.svg";
|
||||
export { default as RedditSmall } from "./RedditSmall.svg";
|
||||
export { default as Shield } from "./Shield.svg";
|
||||
export { default as SkynetMonetizationSmall } from "./SkynetMonetizationSmall.svg";
|
||||
export { default as SkynetPersistenceSmall } from "./SkynetPersistenceSmall.svg";
|
||||
export { default as SkynetPowerBig } from "./SkynetPowerBig.svg";
|
||||
|
|
@ -22,4 +33,7 @@ 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 Unlock } from "./Unlock.svg";
|
||||
export { default as UserArrows } from "./UserArrows.svg";
|
||||
export { default as UserAtom } from "./UserAtom.svg";
|
||||
export { default as YoutubeSmall } from "./YoutubeSmall.svg";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
export default function Grid({ cols, columns }) {
|
||||
return (
|
||||
<div
|
||||
className={classnames("grid grid-cols-1 gap-y-16 ", {
|
||||
"desktop:grid-cols-2 gap-x-32": cols === 2,
|
||||
"desktop:grid-cols-3 gap-x-16": cols === 3,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,28 +11,29 @@ import { useStaticQuery, graphql } from "gatsby";
|
|||
import { getImage } from "gatsby-plugin-image";
|
||||
import { convertToBgImage } from "gbimage-bridge";
|
||||
import BackgroundImage from "gatsby-background-image";
|
||||
import Navigation from "../Navigation/Navigation";
|
||||
import NewsHeader from "../NewsHeader/NewsHeader";
|
||||
import Footer from "../Footer/Footer";
|
||||
import FooterNavigation from "../FooterNavigation/FooterNavigation";
|
||||
import Navigation from "../Navigation";
|
||||
import NewsHeader from "../NewsHeader";
|
||||
import Footer from "../Footer";
|
||||
import FooterNavigation from "../FooterNavigation";
|
||||
import { useWindowScroll } from "react-use";
|
||||
import classnames from "classnames";
|
||||
import { readableColor } from "polished";
|
||||
|
||||
const modeMap = { "#fff": "dark", "#000": "light" };
|
||||
|
||||
const StickyHeader = () => {
|
||||
useWindowScroll();
|
||||
|
||||
const { y } = useWindowScroll();
|
||||
const ref = React.useRef(null);
|
||||
const element = document.elementFromPoint(0, ref.current?.offsetHeight ?? 0);
|
||||
const [mode, setMode] = React.useState();
|
||||
|
||||
const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
|
||||
const color = React.useMemo(() => readableColor(backgroundColor), [backgroundColor]);
|
||||
const mode = modeMap[color];
|
||||
React.useLayoutEffect(() => {
|
||||
const element = document.elementFromPoint(0, ref.current.offsetHeight);
|
||||
const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color");
|
||||
const color = readableColor(backgroundColor); // returns either #fff or #000
|
||||
const mode = { "#fff": "dark", "#000": "light" }[color];
|
||||
|
||||
setMode(mode);
|
||||
}, [setMode, y]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={classnames("sticky top-0 z-50", { "bg-white border-b border-palette-200": false })}>
|
||||
<div ref={ref} className="sticky top-0 z-50">
|
||||
<NewsHeader />
|
||||
<Navigation mode={mode} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
export const Section = ({ children, className, ...props }) => (
|
||||
<div className={classnames("p-8", className)} {...props}>
|
||||
<div className="max-w-content mx-auto">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const SectionTitle = ({ children, className, ...props }) => (
|
||||
<h2 className={classnames("text-3xl desktop:text-4xl font-semibold", className)} {...props}>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
export const SectionTitleCaption = ({ children, className, ...props }) => (
|
||||
<h6 className={classnames("text-xs uppercase my-3", className)} {...props}>
|
||||
{children}
|
||||
</h6>
|
||||
);
|
||||
|
|
@ -1 +1,2 @@
|
|||
export { default } from "./Layout";
|
||||
export * from "./Section";
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const LogInLink = () => (
|
|||
|
||||
const LogInButton = ({ className, ...props }) => (
|
||||
<a
|
||||
href="https://secure.siasky.net/auth/register"
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
className={classnames(
|
||||
"border-2 border-white text-white px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
|
||||
className
|
||||
|
|
@ -38,7 +38,7 @@ const LogInButton = ({ className, ...props }) => (
|
|||
|
||||
const SignUpButton = ({ className, ...props }) => (
|
||||
<a
|
||||
href="https://secure.siasky.net/auth/register"
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
className={classnames(
|
||||
"bg-primary text-palette-600 px-7 leading-10 rounded-full text-xs uppercase text-center whitespace-nowrap",
|
||||
className
|
||||
|
|
@ -107,6 +107,7 @@ const Navigation = ({ mode }) => {
|
|||
<Link
|
||||
key={route}
|
||||
to={route}
|
||||
activeClassName="underline-navigation"
|
||||
className={classnames("text-sm font-light transition-colors duration-500", {
|
||||
"text-white": mode === "dark",
|
||||
"text-palette-600": mode === "light",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./Navigation";
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from "./NewsHeader";
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export default function Underline({ children, color, size }) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(to bottom, ${color}, ${color})`,
|
||||
backgroundPosition: "0 1.1rem",
|
||||
backgroundRepeat: "repeat-x",
|
||||
backgroundSize: `${size} ${size}`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import { Add, Cloud, ArrowUpCircle, CheckCircle } from "../Icons";
|
||||
import { Add, Cloud, ArrowUpCircle, Error, CheckCircle, Unlock, Info, ProgressRound } from "../Icons";
|
||||
import bytes from "bytes";
|
||||
import classNames from "classnames";
|
||||
import { getReasonPhrase, StatusCodes } from "http-status-codes";
|
||||
|
|
@ -8,6 +8,8 @@ import copy from "copy-text-to-clipboard";
|
|||
import path from "path-browserify";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { SkynetClient } from "skynet-js";
|
||||
import { useTimeoutFn } from "react-use";
|
||||
import ms from "ms";
|
||||
|
||||
const getFilePath = (file) => file.webkitRelativePath || file.path || file.name;
|
||||
|
||||
|
|
@ -56,17 +58,34 @@ const createUploadErrorMessage = (error) => {
|
|||
|
||||
const client = new SkynetClient("https://siasky.net");
|
||||
|
||||
const UploadElement = ({ file, status, url = "", progress = 0 }) => {
|
||||
const RegistrationLink = () => (
|
||||
<a
|
||||
href="https://secure.siasky.net/auth/registration"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="uppercase border-b-2 border-primary"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
);
|
||||
|
||||
const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
|
||||
const [copied, setCopied] = React.useState(false);
|
||||
const [, , reset] = useTimeoutFn(() => setCopied(false), ms("3 seconds"));
|
||||
|
||||
const handleCopy = (url) => {
|
||||
copy(url);
|
||||
setCopied(true);
|
||||
reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
{status === "uploading" && <ArrowUpCircle className="flex-shrink-0" />}
|
||||
{status === "processing" && <ArrowUpCircle className="flex-shrink-0" />}
|
||||
{status === "processing" && <ProgressRound className="flex-shrink-0 animate-spin" />}
|
||||
{status === "complete" && <CheckCircle className="flex-shrink-0" />}
|
||||
{status === "error" && <Error className="flex-shrink-0 fill-current text-error" />}
|
||||
<div className="flex flex-col flex-grow ml-3 overflow-hidden">
|
||||
<div className="text-palette-600 text-sm font-light">{file.name}</div>
|
||||
<div className="flex justify-between text-palette-400 text-xs space-x-2">
|
||||
|
|
@ -77,13 +96,15 @@ const UploadElement = ({ file, status, url = "", progress = 0 }) => {
|
|||
</span>
|
||||
)}
|
||||
|
||||
{status === "processing" && <span>Processing...</span>}
|
||||
{status === "processing" && <span className="text-palette-300">Processing...</span>}
|
||||
|
||||
{status === "complete" && (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||
{url}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{status === "error" && error && <span className="text-error">{error}</span>}
|
||||
</div>
|
||||
<div>
|
||||
{status === "uploading" && (
|
||||
|
|
@ -91,10 +112,12 @@ const UploadElement = ({ file, status, url = "", progress = 0 }) => {
|
|||
{Math.floor(progress * 100)}%<span className="hidden desktop:inline"> completed</span>
|
||||
</span>
|
||||
)}
|
||||
{status === "processing" && <span className="uppercase text-palette-300">Wait</span>}
|
||||
{status === "complete" && (
|
||||
<button className="uppercase" onClick={() => handleCopy(url)}>
|
||||
<span className="hidden desktop:inline">Copy link</span>
|
||||
<span className="inline desktop:hidden">Copy</span>
|
||||
<span className={classnames({ hidden: copied, "hidden desktop:inline": !copied })}>Copy link</span>
|
||||
<span className={classnames({ hidden: copied, "inline desktop:hidden": !copied })}>Copy</span>
|
||||
<span className={classnames({ hidden: !copied })}>Copied</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -102,8 +125,17 @@ const UploadElement = ({ file, status, url = "", progress = 0 }) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-palette-200 mt-1" style={{ height: "5px" }}>
|
||||
<div style={{ width: `${Math.floor(progress * 100)}%` }} className="bg-primary" />
|
||||
<div
|
||||
className={classnames("flex bg-palette-200 mt-1", {
|
||||
"bg-error-dashed opacity-20": status === "error",
|
||||
"bg-primary-dashed opacity-20": status === "processing",
|
||||
})}
|
||||
style={{ height: "5px" }}
|
||||
>
|
||||
<div
|
||||
style={{ width: `${Math.floor(progress * 100)}%` }}
|
||||
className={classnames("bg-primary", { hidden: status === "processing" || status === "error" })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -251,9 +283,33 @@ const Uploader = () => {
|
|||
{files.map((file, index) => (
|
||||
<UploadElement key={index} {...file} />
|
||||
))}
|
||||
|
||||
<div className="z-0 relative flex flex-col items-center space-y-1 pt-8">
|
||||
<Info />
|
||||
|
||||
{/* mobile - 2 lines */}
|
||||
<p className="text-sm font-light text-palette-600 desktop:hidden">Your files are available for 90 days</p>
|
||||
<p className="text-sm font-light text-palette-600 desktop:hidden">
|
||||
<RegistrationLink /> to keep them forever
|
||||
</p>
|
||||
|
||||
{/* desktop - 1 line */}
|
||||
<p className="text-sm font-light text-palette-600 hidden desktop:block">
|
||||
Your files are available for 90 days, <RegistrationLink /> to keep them forever
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{files.length === 0 && (
|
||||
<div className="z-0 relative flex flex-col items-center space-y-1 mt-10">
|
||||
<Unlock />
|
||||
<p className="text-sm font-light text-palette-600">
|
||||
<RegistrationLink /> for free and unlock all features
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -1,14 +1,369 @@
|
|||
import * as React from "react";
|
||||
import { Link } from "gatsby";
|
||||
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import { StaticImage } from "gatsby-plugin-image";
|
||||
import Layout, { Section, SectionTitle, SectionTitleCaption } from "../components/Layout";
|
||||
import SEO from "../components/seo";
|
||||
import {
|
||||
ArrowRight,
|
||||
Join,
|
||||
UserAtom,
|
||||
Shield,
|
||||
Fingerprint,
|
||||
UserArrows,
|
||||
ComputerScreen,
|
||||
Cogs,
|
||||
TwitterSmall,
|
||||
GithubSmall,
|
||||
GitlabSmall,
|
||||
LinkedinSmall,
|
||||
} from "../components/Icons";
|
||||
|
||||
const SecondPage = () => (
|
||||
const aboutCards = [
|
||||
{
|
||||
Icon: UserAtom,
|
||||
title: "Own your data",
|
||||
text:
|
||||
"No one owns or controls your account data except for you. Ownership extends to original blogs, music, and videos too. This is all possible through decentralized apps built on decentralized storage.",
|
||||
},
|
||||
{
|
||||
Icon: Shield,
|
||||
title: "Censorship-resistant content",
|
||||
text:
|
||||
"Today, censorship can come arbitrarily, top-down, and as a tool to silence expression. Post and share content on Skynet, or use Skynet as a fail-over for your website if a service provider goes down.",
|
||||
},
|
||||
{
|
||||
Icon: Fingerprint,
|
||||
title: "One universal digital identity",
|
||||
text:
|
||||
"Log into any Skynet app with just one ID. Once logged in, your storage and data can follow you across the ecosystem. Access your friend lists, followers, and content from any Skynet app.",
|
||||
},
|
||||
{
|
||||
Icon: UserArrows,
|
||||
title: "Innovation built for users",
|
||||
text:
|
||||
"All Skynet apps are open-source. If you dislike an app’s feature or want to make your own improvements, you’re welcome to do so. (We of course encourage collaboration and hope you chat with the developer first!) Existing users can then consent to the migration of all their account data to the latest version. ",
|
||||
},
|
||||
{
|
||||
Icon: ComputerScreen,
|
||||
label: "Coming soon",
|
||||
title: "Control your content feed",
|
||||
text:
|
||||
"We believe that users, not tech platforms should fully control how content is moderated. A decentralized internet is not an information free-for-all. It means that the individual holds the power to personalize their online experiences. For example, users will decide what content appears in their social media feeds, not a corporate algorithm.",
|
||||
},
|
||||
{
|
||||
Icon: Cogs,
|
||||
label: "Coming soon",
|
||||
title: "Developer and Creator-centric monetization",
|
||||
text:
|
||||
"As a content creator, set your own terms and price for your art. You and your collaborators can get paid directly, fairly, and automatically in crypto without relying on advertising as a sole source of income.",
|
||||
},
|
||||
];
|
||||
|
||||
const teamCards = [
|
||||
{
|
||||
name: "David Vorick",
|
||||
position: "CEO and Lead Developer",
|
||||
Image: <StaticImage src="../images/team/david-vorick.png" alt="David Vorick" />,
|
||||
social: {
|
||||
github: "https://github.com/DavidVorick",
|
||||
gitlab: "https://gitlab.com/DavidVorick",
|
||||
twitter: "https://twitter.com/davidvorick",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Chris Schinnerl",
|
||||
position: "VP of Technology",
|
||||
Image: <StaticImage src="../images/team/chris-schinnerl.png" alt="Chris Schinnerl" />,
|
||||
social: {
|
||||
github: "https://github.com/ChrisSchinnerl",
|
||||
gitlab: "https://gitlab.com/ChrisSchinnerl",
|
||||
twitter: "https://twitter.com/ChrisSchinnerl",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Steve Funk",
|
||||
position: "Head of Support",
|
||||
Image: <StaticImage src="../images/team/steve-funk.png" alt="Steve Funk" />,
|
||||
social: {
|
||||
linkedin: "https://www.linkedin.com/in/stevengfunk",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Matt Sevey",
|
||||
position: "Engineering Manager",
|
||||
Image: <StaticImage src="../images/team/matt-sevey.png" alt="Matt Sevey" />,
|
||||
social: {
|
||||
github: "https://github.com/MSevey",
|
||||
gitlab: "https://gitlab.com/MSevey",
|
||||
linkedin: "https://www.linkedin.com/in/sevey",
|
||||
twitter: "https://twitter.com/MJSevey",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Manasi Vora",
|
||||
position: "VP of Strategy and Ops",
|
||||
Image: <StaticImage src="../images/team/manasi-vora.png" alt="Manasi Vora" />,
|
||||
social: {
|
||||
linkedin: "https://linkedin.com/in/manasi-vora-cfa-bb9a1715",
|
||||
twitter: "https://twitter.com/manasilvora",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "PJ Brone",
|
||||
position: "Core Developer",
|
||||
Image: <StaticImage src="../images/team/pj-brone.png" alt="PJ Brone" />,
|
||||
social: {
|
||||
github: "https://github.com/peterjan",
|
||||
gitlab: "https://gitlab.com/pjbrone",
|
||||
linkedin: "https://www.linkedin.com/in/peterjanbrone",
|
||||
twitter: "https://twitter.com/peterjanbrone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Marcin Swieczkowski",
|
||||
position: "Core Developer",
|
||||
Image: <StaticImage src="../images/team/marcin-swieczkowski.png" alt="Marcin Swieczkowski" />,
|
||||
social: {
|
||||
github: "https://github.com/m-cat",
|
||||
gitlab: "https://gitlab.com/m-cat",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Karol Wypchlo",
|
||||
position: "Full Stack Developer",
|
||||
Image: <StaticImage src="../images/team/karol-wypchlo.png" alt="Karol Wypchlo" />,
|
||||
social: {
|
||||
github: "https://github.com/kwypchlo",
|
||||
gitlab: "https://gitlab.com/kwypchlo",
|
||||
linkedin: "https://www.linkedin.com/in/karolwypchlo/",
|
||||
twitter: "https://twitter.com/kwypchlo",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Ivaylo Novakov",
|
||||
position: "Core Developer",
|
||||
Image: <StaticImage src="../images/team/ivaylo-novakov.png" alt="Ivaylo Novakov" />,
|
||||
social: {
|
||||
github: "https://github.com/ro-tex",
|
||||
gitlab: "https://gitlab.com/kwypchlo",
|
||||
linkedin: "https://www.linkedin.com/in/karolwypchlo/",
|
||||
twitter: "https://twitter.com/kwypchlo",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Filip Rysavy",
|
||||
position: "Testing Developer",
|
||||
Image: <StaticImage src="../images/team/filip-rysavy.png" alt="Filip Rysavy" />,
|
||||
social: {
|
||||
linkedin: "https://www.linkedin.com/in/filiprysavy/",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Nicole Tay",
|
||||
position: "Head of Marketing",
|
||||
Image: <StaticImage src="../images/team/nicole-tay.png" alt="Nicole Tay" />,
|
||||
social: {},
|
||||
},
|
||||
{
|
||||
name: "Daniel Helm",
|
||||
position: "Developer Evangelist",
|
||||
Image: <StaticImage src="../images/team/daniel-helm.png" alt="Daniel Helm" />,
|
||||
social: {},
|
||||
},
|
||||
];
|
||||
|
||||
const Label = ({ children }) => (
|
||||
<span className="inline-flex items-center px-3 leading-5 rounded-full text-xxs bg-palette-200 text-palette-600 lowercase">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
const EcosystemCard = ({ Icon, label, title, text }) => (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Icon />
|
||||
{label && <Label>{label}</Label>}
|
||||
</div>
|
||||
<h3 className="font-light text-lg mt-6">{title}</h3>
|
||||
<p className="text-palette-400 font-content mt-6">{text}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SocialIcon = ({ name }) => {
|
||||
switch (name) {
|
||||
case "twitter":
|
||||
return <TwitterSmall />;
|
||||
case "linkedin":
|
||||
return <LinkedinSmall />;
|
||||
case "github":
|
||||
return <GithubSmall />;
|
||||
case "gitlab":
|
||||
return <GitlabSmall />;
|
||||
default:
|
||||
throw new Error(`Cannot find an icon for "${name}"`);
|
||||
}
|
||||
};
|
||||
|
||||
const TeamCard = ({ Image, name, position, social }) => (
|
||||
<div className="flex">
|
||||
{Image}
|
||||
<div className="flex flex-col justify-between ml-3">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-light text-lg">{name}</span>
|
||||
<span className="text-palette-400 text-xs">{position}</span>
|
||||
</div>
|
||||
{social && (
|
||||
<div className="flex flex-row">
|
||||
{Object.entries(social).map(([platform, href]) => (
|
||||
<a href={href} title={platform}>
|
||||
<SocialIcon name={platform} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AboutPage = () => (
|
||||
<Layout>
|
||||
<SEO title="Page two" />
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
<SEO title="About" />
|
||||
<Section className="bg-palette-100">
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
|
||||
<div className="col-span-3">
|
||||
<h1 className="font-semibold text-3xl desktop:text-6xl desktop:leading-16">
|
||||
Skynet is the foundation for a new, <span className="underline text-primary">decentralized internet</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
|
||||
<p className="text-palette-600 font-light text-lg">
|
||||
Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
|
||||
applications.
|
||||
</p>
|
||||
|
||||
<p className="font-content text-palette-400">
|
||||
Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
|
||||
application, integration, and innovation that simply cannot be replicated by the centralized world. Now, we
|
||||
can break free of the walled gardens and data silos that have constricted invention and interoperability.
|
||||
Key features of decentralization such as user-owned personal data, persistent identity across apps, and
|
||||
censorship-resistance will be the new standards of the digital world.
|
||||
</p>
|
||||
|
||||
<a href="/" className="uppercase inline-flex items-center text-xs text-palette-600">
|
||||
Learn more about how our technology works <ArrowRight />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-white">
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
|
||||
<div className="desktop:col-span-2">
|
||||
<SectionTitle>What does the decentralized future look like?</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-2">
|
||||
{aboutCards.map((card, index) => (
|
||||
<EcosystemCard key={index} {...card} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-14 text-center space-y-6">
|
||||
<p className="font-light text-lg text-palette-600">Want to build apps with these features?</p>
|
||||
<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"
|
||||
>
|
||||
Get started here
|
||||
</a>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-palette-600">
|
||||
<SectionTitle className="text-white my-20">
|
||||
Skynet Labs builds uncompromising software infrastructure for the{" "}
|
||||
<span className="underline text-primary">decentralized internet</span>
|
||||
</SectionTitle>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3">
|
||||
<div className="col-span-3 desktop:col-start-2 desktop:col-span-2 space-y-12">
|
||||
<p className="text-white font-light text-lg">
|
||||
Skynet is an open protocol and toolkit for creating a better web-one built on decentralized storage and
|
||||
applications.
|
||||
</p>
|
||||
|
||||
<p className="font-content text-palette-300">
|
||||
Skynet apps transform what’s possible on the web. Beyond protecting privacy, decentralization enables
|
||||
application, integration, and innovation that simply cannot be replicated by the centralized world. Now, we
|
||||
can break free of the walled gardens and data silos that have constricted invention and interoperability.
|
||||
Key features of decentralization such as user-owned personal data, persistent identity across apps, and
|
||||
censorship-resistance will be the new standards of the digital world.
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg desktop:text-3xl font-semibold text-white">
|
||||
Decentralization isn’t just what we do, <span className="underline text-primary">it’s how we do it</span>
|
||||
</h3>
|
||||
|
||||
<p className="font-content text-palette-300">
|
||||
Our commitment to decentralization is at our core. With this ethos in mind, we believe in empowering local
|
||||
leaders to decide what is best for their communities in adoption of this technology. Individuals and
|
||||
communities deserve self-determination.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-white">
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
|
||||
<div className="desktop:col-span-2">
|
||||
<SectionTitleCaption>Team</SectionTitleCaption>
|
||||
<SectionTitle>Skynet stands with you in the fight for a freer future</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-16 desktop:grid-cols-3">
|
||||
{teamCards.map((card, index) => (
|
||||
<TeamCard key={index} {...card} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
|
||||
<div className="desktop:col-span-2 flex items-center space-x-8">
|
||||
<Join className="flex-shrink-0" />
|
||||
<p className="font-light text-lg">
|
||||
Join us! We're looking for talented & passionate individuals to join our team. Check out our job
|
||||
postings today.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-palette-100">
|
||||
<div className="grid grid-cols-1 gap-x-16 gap-y-16 desktop:grid-cols-3 my-20">
|
||||
<div className="desktop:col-span-2">
|
||||
<SectionTitleCaption>Investors</SectionTitleCaption>
|
||||
<SectionTitle>Support for the Skynet Vision</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-10">quotes</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 desktop:grid-cols-4">
|
||||
<StaticImage src="../images/investors/investors-logo-1.png" alt="A.Capital Ventures" />
|
||||
<StaticImage src="../images/investors/investors-logo-2.png" alt="Bain Capital" />
|
||||
<StaticImage src="../images/investors/investors-logo-3.png" alt="Bessemer Venture Partners" />
|
||||
<StaticImage src="../images/investors/investors-logo-4.png" alt="Collab" />
|
||||
<StaticImage src="../images/investors/investors-logo-5.png" alt="Dragonfly Capital" />
|
||||
<StaticImage src="../images/investors/investors-logo-6.png" alt="Fenbushi Capital" />
|
||||
<StaticImage src="../images/investors/investors-logo-7.png" alt="First Star Ventures" />
|
||||
<StaticImage src="../images/investors/investors-logo-8.png" alt="Hack VC" />
|
||||
<StaticImage src="../images/investors/investors-logo-9.png" alt="INBlockchain" />
|
||||
<StaticImage src="../images/investors/investors-logo-10.png" alt="Paradigm" />
|
||||
<StaticImage src="../images/investors/investors-logo-11.png" alt="SV Angel" />
|
||||
</div>
|
||||
</Section>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default SecondPage;
|
||||
export default AboutPage;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import * as React from "react";
|
||||
|
||||
import Layout from "../components/Layout/Layout";
|
||||
import SEO from "../components/seo";
|
||||
|
||||
const DevelopersPage = () => (
|
||||
<Layout>
|
||||
<SEO title="Developers" />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default DevelopersPage;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react";
|
||||
// import { StaticImage } from "gatsby-plugin-image";
|
||||
import Layout from "../components/Layout";
|
||||
import Layout, { Section, SectionTitle } from "../components/Layout";
|
||||
import SEO from "../components/seo";
|
||||
import HeroStartPage from "../components/HeroStartPage";
|
||||
import CommunitySection from "../components/CommunitySection";
|
||||
|
|
@ -16,18 +16,11 @@ import {
|
|||
SkynetUsageSmall,
|
||||
SkynetSiaSmall,
|
||||
} from "../components/Icons";
|
||||
import classnames from "classnames";
|
||||
|
||||
const Section = React.forwardRef(({ children, className, ...props }, ref) => (
|
||||
<div ref={ref} className={classnames("p-8", className)} {...props}>
|
||||
<div className="max-w-content mx-auto">{children}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
const EtosCard = ({ Icon, text }) => (
|
||||
const EtosCard = ({ Icon, title }) => (
|
||||
<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>
|
||||
<p className="text-center mt-4 font-light text-palette-600 text-lg">{title}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -48,12 +41,6 @@ const LearnMoreButton = () => (
|
|||
</a>
|
||||
);
|
||||
|
||||
const SectionTitle = ({ children, className, ...props }) => (
|
||||
<h2 className={classnames("text-4xl font-semibold text-palette-600", className)} {...props}>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
|
||||
const etosCards = [
|
||||
{
|
||||
Icon: SkynetToolBig,
|
||||
|
|
@ -140,7 +127,7 @@ const IndexPage = () => {
|
|||
<Section className="bg-palette-100 py-32">
|
||||
<SectionTitle className="mb-7 desktop:hidden">Ready to build your application?</SectionTitle>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3 desktop:grid-rows-2">
|
||||
<div className="grid grid-cols-1 gap-x-8 gap-y-16 desktop:grid-cols-3">
|
||||
<div className="hidden desktop:inline-block">
|
||||
<SectionTitle>Ready to build your application?</SectionTitle>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.underline-navigation,
|
||||
.underline-primary-thick {
|
||||
background-image: linear-gradient(to bottom, #00c65e, #00c65e);
|
||||
background-position: 0 1.1rem;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
.bg-primary-dashed {
|
||||
background: repeating-linear-gradient(to right, #00c65e, #00c65e 10px, transparent 10px, transparent 15px);
|
||||
}
|
||||
|
||||
.bg-error-dashed {
|
||||
background: repeating-linear-gradient(to right, #ed5454, #ed5454 10px, transparent 10px, transparent 15px);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -1,12 +1,17 @@
|
|||
const defaultTheme = require("tailwindcss/defaultTheme");
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
const palette = {
|
||||
100: "#f5f7f7",
|
||||
200: "#d4dddb",
|
||||
300: "#9e9e9e",
|
||||
400: "#555555",
|
||||
500: "#242424",
|
||||
600: "#0d0d0d",
|
||||
const colors = {
|
||||
primary: "#00c65e",
|
||||
error: "#ED5454",
|
||||
palette: {
|
||||
100: "#f5f7f7",
|
||||
200: "#d4dddb",
|
||||
300: "#9e9e9e",
|
||||
400: "#555555",
|
||||
500: "#242424",
|
||||
600: "#0d0d0d",
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -23,10 +28,10 @@ module.exports = {
|
|||
hires: "1408px",
|
||||
"2xl": "1536px",
|
||||
},
|
||||
backgroundColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
borderColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
textColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
placeholderColor: (theme) => ({ ...theme("colors"), palette }),
|
||||
backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||
borderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||
textColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||
placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Sora", ...defaultTheme.fontFamily.sans],
|
||||
|
|
@ -35,11 +40,6 @@ module.exports = {
|
|||
fontSize: {
|
||||
xxs: ["0.625rem", "0.75rem"],
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
DEFAULT: "#00c65e",
|
||||
},
|
||||
},
|
||||
maxWidth: {
|
||||
column: "320px",
|
||||
tablet: "640px",
|
||||
|
|
@ -60,5 +60,11 @@ module.exports = {
|
|||
margin: ["first"],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
plugin(function ({ addBase, theme }) {
|
||||
addBase({
|
||||
body: { color: theme("textColor.palette.600") },
|
||||
});
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Reference in New Issue