diff --git a/package.json b/package.json index b72b8379..959770a2 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,18 @@ { "private": true, "scripts": { - "client-dev": "yarn workspace siaviewnode-client dev -p 3000", - "server-dev": "yarn workspace siaviewnode-server dev", - "client-prod": "yarn workspace siaviewnode-client build && yarn workspace siaviewnode-client start -p 3000", - "server-prod": "yarn workspace siaviewnode-server build && yarn workspace siaviewnode-server start", - "dev": "concurrently \"yarn client-dev\" \"yarn server-dev\"", - "start": "NODE_ENV=production concurrently \"yarn client-prod\" \"yarn server-prod\"" + "start:client": "yarn workspace sia-skynet start", + "start:server": "yarn workspace siaviewnode-server dev", + "build:client": "yarn workspace sia-skynet build", + "build:server": "yarn workspace siaviewnode-server build && yarn workspace siaviewnode-server start", + "dev": "concurrently \"yarn start:client\" \"yarn start:server\"", + "start": "NODE_ENV=production concurrently \"yarn build:client && npx http-server -p 3000 packages/sia-skynet/build\" \"yarn build:server\"" }, "workspaces": { "packages": [ "packages/*" ] }, - "devDependencies": { - "lerna": "3.16.5" - }, "dependencies": { "concurrently": "5.0.0" } diff --git a/packages/sia-skynet/.gitignore b/packages/sia-skynet/.gitignore new file mode 100644 index 00000000..c795b054 --- /dev/null +++ b/packages/sia-skynet/.gitignore @@ -0,0 +1 @@ +build \ No newline at end of file diff --git a/packages/sia-skynet/README.md b/packages/sia-skynet/README.md new file mode 100644 index 00000000..89b278ae --- /dev/null +++ b/packages/sia-skynet/README.md @@ -0,0 +1,68 @@ +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `yarn start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `yarn test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `yarn build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `yarn eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting + +### Analyzing the Bundle Size + +This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size + +### Making a Progressive Web App + +This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app + +### Advanced Configuration + +This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration + +### Deployment + +This section has moved here: https://facebook.github.io/create-react-app/docs/deployment + +### `yarn build` fails to minify + +This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify diff --git a/packages/sia-skynet/package.json b/packages/sia-skynet/package.json new file mode 100644 index 00000000..36215078 --- /dev/null +++ b/packages/sia-skynet/package.json @@ -0,0 +1,49 @@ +{ + "name": "sia-skynet", + "version": "0.1.0", + "private": true, + "homepage": "https://siasky.net", + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "classnames": "^2.2.6", + "gh-pages": "^2.2.0", + "jsonp": "^0.2.1", + "node-sass": "^4.13.1", + "prop-types": "^15.7.2", + "react": "^16.12.0", + "react-countup": "^4.3.3", + "react-dom": "^16.12.0", + "react-dropzone": "^10.2.1", + "react-mailchimp-form": "^1.0.2", + "react-mailchimp-subscribe": "^2.1.0", + "react-reveal": "^1.2.2", + "react-scripts": "3.3.1", + "react-syntax-highlighter": "^12.2.1", + "react-visibility-sensor": "^5.1.1" + }, + "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/packages/sia-skynet/public/favicon.ico b/packages/sia-skynet/public/favicon.ico new file mode 100644 index 00000000..926749b4 Binary files /dev/null and b/packages/sia-skynet/public/favicon.ico differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff new file mode 100644 index 00000000..dcbfaecb Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2 b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2 new file mode 100644 index 00000000..6670f1e3 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2 differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff new file mode 100644 index 00000000..40282000 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2 b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2 new file mode 100644 index 00000000..4e1d8e70 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2 differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff new file mode 100644 index 00000000..394db4ed Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2 b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2 new file mode 100644 index 00000000..bb3e7893 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2 differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff new file mode 100644 index 00000000..1410b9f7 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2 b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2 new file mode 100644 index 00000000..7887c1fc Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2 differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff new file mode 100644 index 00000000..f9682a2e Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff differ diff --git a/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2 b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2 new file mode 100644 index 00000000..d48b1459 Binary files /dev/null and b/packages/sia-skynet/public/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2 differ diff --git a/packages/sia-skynet/public/images/footer-cube.svg b/packages/sia-skynet/public/images/footer-cube.svg new file mode 100644 index 00000000..fd60814b --- /dev/null +++ b/packages/sia-skynet/public/images/footer-cube.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/sia-skynet/public/images/green-check.svg b/packages/sia-skynet/public/images/green-check.svg new file mode 100644 index 00000000..cdee65cb --- /dev/null +++ b/packages/sia-skynet/public/images/green-check.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/sia-skynet/public/images/top-swoosh.svg b/packages/sia-skynet/public/images/top-swoosh.svg new file mode 100644 index 00000000..e3b4c20f --- /dev/null +++ b/packages/sia-skynet/public/images/top-swoosh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/sia-skynet/public/index.html b/packages/sia-skynet/public/index.html new file mode 100644 index 00000000..fbe1314e --- /dev/null +++ b/packages/sia-skynet/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + Skynet + + + +
+ + + diff --git a/packages/sia-skynet/public/logo192.png b/packages/sia-skynet/public/logo192.png new file mode 100644 index 00000000..d5220003 Binary files /dev/null and b/packages/sia-skynet/public/logo192.png differ diff --git a/packages/sia-skynet/public/logo512.png b/packages/sia-skynet/public/logo512.png new file mode 100644 index 00000000..740a3ace Binary files /dev/null and b/packages/sia-skynet/public/logo512.png differ diff --git a/packages/sia-skynet/public/manifest.json b/packages/sia-skynet/public/manifest.json new file mode 100644 index 00000000..e552c0cd --- /dev/null +++ b/packages/sia-skynet/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "Skynet", + "name": "Skynet", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/packages/sia-skynet/public/robots.txt b/packages/sia-skynet/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/packages/sia-skynet/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/packages/sia-skynet/src/.DS_Store b/packages/sia-skynet/src/.DS_Store new file mode 100644 index 00000000..7ceb3145 Binary files /dev/null and b/packages/sia-skynet/src/.DS_Store differ diff --git a/packages/sia-skynet/src/components/.DS_Store b/packages/sia-skynet/src/components/.DS_Store new file mode 100644 index 00000000..ac757cac Binary files /dev/null and b/packages/sia-skynet/src/components/.DS_Store differ diff --git a/packages/sia-skynet/src/components/App/App.js b/packages/sia-skynet/src/components/App/App.js new file mode 100644 index 00000000..aabde905 --- /dev/null +++ b/packages/sia-skynet/src/components/App/App.js @@ -0,0 +1,30 @@ +import React from 'react' + +import './App.scss' +import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from '../' + +function App() { + return ( +
+ top swoosh + +
+ + + + +
+ +
+
+ + +
+
+ +
+ ) +} + +export default App diff --git a/packages/sia-skynet/src/components/App/App.scss b/packages/sia-skynet/src/components/App/App.scss new file mode 100644 index 00000000..9dac4b03 --- /dev/null +++ b/packages/sia-skynet/src/components/App/App.scss @@ -0,0 +1,30 @@ +@import '../../variables.scss'; + +.app { + position: relative; + overflow-x: hidden; + max-width: 100%; +} + +.top-swoosh { + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + margin-left: 340px; + width: 622px; + max-width: none; + + @media (min-width: $largebp) { + margin-left: 380px; + } +} + +.home-white { + background: $white; + padding: 80px 0; + + @media (min-width: $largebp) { + padding: 120px 0; + } +} diff --git a/packages/sia-skynet/src/components/Button/Button.js b/packages/sia-skynet/src/components/Button/Button.js new file mode 100644 index 00000000..9bad3f96 --- /dev/null +++ b/packages/sia-skynet/src/components/Button/Button.js @@ -0,0 +1,28 @@ +import React from 'react' +import classNames from 'classnames' + +import './Button.scss' + +export default function Button({ href, type, children, full, className, ...rest }) { + const classes = classNames('button', { full }, className) + + if (href) { + return ( + + {children} + + ) + } else if (type) { + return ( + + ) + } else { + return ( + + ) + } +} diff --git a/packages/sia-skynet/src/components/Button/Button.scss b/packages/sia-skynet/src/components/Button/Button.scss new file mode 100644 index 00000000..bc270d88 --- /dev/null +++ b/packages/sia-skynet/src/components/Button/Button.scss @@ -0,0 +1,22 @@ +@import '../../variables.scss'; + +.button { + display: inline-block; + background: $green; + color: $white; + border-radius: 4px; + box-shadow: 0 0 16px 0 rgba(87, 181, 96, 0.1); + line-height: 48px; + font-weight: bold; + padding: 0 32px; + transition: 0.2s background-color, 0.2s color, 0.2s transform; + + @media (min-width: $largebp) { + font-size: 18px; + } + + &:hover { + background-color: $greenHover; + transform: translateY(-2px); + } +} diff --git a/packages/sia-skynet/src/components/CircleIcon/CircleIcon.js b/packages/sia-skynet/src/components/CircleIcon/CircleIcon.js new file mode 100644 index 00000000..c670d766 --- /dev/null +++ b/packages/sia-skynet/src/components/CircleIcon/CircleIcon.js @@ -0,0 +1,7 @@ +import React from 'react' + +import './CircleIcon.scss' + +export default function CircleIcon({ children }) { + return
{children}
+} diff --git a/packages/sia-skynet/src/components/CircleIcon/CircleIcon.scss b/packages/sia-skynet/src/components/CircleIcon/CircleIcon.scss new file mode 100644 index 00000000..b9a14f55 --- /dev/null +++ b/packages/sia-skynet/src/components/CircleIcon/CircleIcon.scss @@ -0,0 +1,10 @@ +.circle-icon { + width: 64px; + height: 64px; + border-radius: 32px; + box-shadow: 0 0 8px 0 rgba(23, 25, 23, 0.2); + border: solid 2px currentColor; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/packages/sia-skynet/src/components/CodeExamples/Code.js b/packages/sia-skynet/src/components/CodeExamples/Code.js new file mode 100644 index 00000000..2b101982 --- /dev/null +++ b/packages/sia-skynet/src/components/CodeExamples/Code.js @@ -0,0 +1,37 @@ +export const python = `from siaskynet import Skynet +path = "./image.jpg" +skylink = Skynet.UploadFile(path) +print("Upload successful, skylink: " + skylink)` + +export const curl = `curl -X POST "https://siasky.net/api/skyfile" -F file=@image.jpg` + +export const node = `const skynet = require('@nebulous/skynet'); + +(async () => { + const path = "./image.jpg" + const skylink = await skynet.UploadFile( + path, + skynet.DefaultUploadOptions + ) + console.log(\`Upload successful, skylink: \${skylink}\`) +})()` + +export const go = `package main + +import ( + "fmt" + skynet "github.com/NebulousLabs/go-skynet" +) + +func main() { + skylink, err := skynet.UploadFile("./image.jpg", skynet.DefaultUploadOptions) + if err != nil { + fmt.Printf("Unable to upload: %v\n", err.Error()) + return + } + fmt.Printf("Upload successful, skylink: %v\n", skylink) +}` + +export const ruby = `` + +export const php = `` diff --git a/packages/sia-skynet/src/components/CodeExamples/CodeExamples.js b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.js new file mode 100644 index 00000000..39ec9b2d --- /dev/null +++ b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.js @@ -0,0 +1,56 @@ +import React, { useState } from 'react' +import SyntaxHighlighter from 'react-syntax-highlighter' +import classNames from 'classnames' + +import './CodeExamples.scss' +import Colors from './Colors' +import { python, curl, node, go } from './Code' + +export default function CodeExamples() { + const [active, setActive] = useState(1) + + return ( +
+ + +
+ {active === 1 && ( + + {python} + + )} + + {active === 2 && ( + + {curl} + + )} + + {active === 3 && ( + + {node} + + )} + + {active === 4 && ( + + {go} + + )} +
+
+ ) +} diff --git a/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss new file mode 100644 index 00000000..53efe9ea --- /dev/null +++ b/packages/sia-skynet/src/components/CodeExamples/CodeExamples.scss @@ -0,0 +1,64 @@ +@import '../../variables.scss'; + +.code-examples-tabs { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + display: flex; + align-items: flex-end; + height: 65px; + + li { + display: block; + flex: 1; + color: $white60; + line-height: 57px; + padding: 0 16px; + cursor: pointer; + user-select: none; + background-color: #343734; + transition: 0.2s line-height, 0.2s background-color, 0.2s color; + text-align: center; + + @media (min-width: $largebp) { + padding: 0 32px; + font-size: 18px; + } + } + + li:hover, + li.active { + color: $white; + background-color: #171917; + line-height: 65px; + } + + li:first-child { + border-top-left-radius: 12px; + } + + li:last-child { + border-top-right-radius: 12px; + } + + li.filler, + li.filler:hover { + flex: 1; + height: 57px; + border-top-right-radius: 12px; + background-color: #343734; + cursor: default; + } +} + +.code-examples-body { + padding: 24px; + background-color: #171917; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + font-size: 14px; +} + +.react-syntax-highlighter-line-number { + color: $white50; + margin-right: 16px; +} diff --git a/packages/sia-skynet/src/components/CodeExamples/Colors.js b/packages/sia-skynet/src/components/CodeExamples/Colors.js new file mode 100644 index 00000000..b38351b3 --- /dev/null +++ b/packages/sia-skynet/src/components/CodeExamples/Colors.js @@ -0,0 +1,108 @@ +export default { + hljs: { + display: 'block', + overflowX: 'auto', + padding: '0.5em', + background: '#171917', + color: '#e6e1dc', + }, + 'hljs-comment': { + color: '#bc9458', + fontStyle: 'italic', + }, + 'hljs-quote': { + color: '#bc9458', + fontStyle: 'italic', + }, + 'hljs-keyword': { + color: '#c26230', + }, + 'hljs-selector-tag': { + color: '#c26230', + }, + 'hljs-string': { + color: '#a5c261', + }, + 'hljs-number': { + color: '#a5c261', + }, + 'hljs-regexp': { + color: '#a5c261', + }, + 'hljs-variable': { + color: '#a5c261', + }, + 'hljs-template-variable': { + color: '#a5c261', + }, + 'hljs-subst': { + color: '#519f50', + }, + 'hljs-tag': { + color: '#e8bf6a', + }, + 'hljs-name': { + color: '#e8bf6a', + }, + 'hljs-type': { + color: '#da4939', + }, + 'hljs-symbol': { + color: '#6d9cbe', + }, + 'hljs-bullet': { + color: '#6d9cbe', + }, + 'hljs-built_in': { + color: '#6d9cbe', + }, + 'hljs-builtin-name': { + color: '#6d9cbe', + }, + 'hljs-attr': { + color: '#6d9cbe', + }, + 'hljs-link': { + color: '#6d9cbe', + textDecoration: 'underline', + }, + 'hljs-params': { + color: '#d0d0ff', + }, + 'hljs-attribute': { + color: '#cda869', + }, + 'hljs-meta': { + color: '#9b859d', + }, + 'hljs-title': { + color: '#ffc66d', + }, + 'hljs-section': { + color: '#ffc66d', + }, + 'hljs-addition': { + backgroundColor: '#144212', + color: '#e6e1dc', + display: 'inline-block', + width: '100%', + }, + 'hljs-deletion': { + backgroundColor: '#600', + color: '#e6e1dc', + display: 'inline-block', + width: '100%', + }, + 'hljs-selector-class': { + color: '#9b703f', + }, + 'hljs-selector-id': { + color: '#8b98ab', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +} diff --git a/packages/sia-skynet/src/components/FAQ/FAQ.js b/packages/sia-skynet/src/components/FAQ/FAQ.js new file mode 100644 index 00000000..6b6f9b26 --- /dev/null +++ b/packages/sia-skynet/src/components/FAQ/FAQ.js @@ -0,0 +1,15 @@ +import React from 'react' + +import './FAQ.scss' + +export default function FAQ({ title, children }) { + return ( +
+
+
+

{title}

+ {children} +
+
+ ) +} diff --git a/packages/sia-skynet/src/components/FAQ/FAQ.scss b/packages/sia-skynet/src/components/FAQ/FAQ.scss new file mode 100644 index 00000000..7ab70633 --- /dev/null +++ b/packages/sia-skynet/src/components/FAQ/FAQ.scss @@ -0,0 +1,41 @@ +@import '../../variables.scss'; + +.faq { + display: flex; + margin-bottom: 30px; +} + +.faq-text { + flex: 1; + margin-left: 16px; + + h3 { + font-weight: 700; + color: $gray; + margin-bottom: 10px; + line-height: 1.78; + font-size: 16px; + + @media (min-width: $largebp) { + font-size: 18px; + } + } + + p { + color: $lightGray; + line-height: 1.7; + font-size: 13px; + + @media (min-width: $largebp) { + font-size: 14px; + } + } +} + +.faq-dash { + height: 2px; + width: 32px; + background: $green; + box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); + margin-top: 16px; +} diff --git a/packages/sia-skynet/src/components/Footer/Footer.js b/packages/sia-skynet/src/components/Footer/Footer.js new file mode 100644 index 00000000..abc2e8e1 --- /dev/null +++ b/packages/sia-skynet/src/components/Footer/Footer.js @@ -0,0 +1,92 @@ +import React from "react"; +import Fade from "react-reveal/Fade"; +import Reveal from "react-reveal/Reveal"; + +import { Arrow, FooterOrb, FooterCube, Built } from "../../svg"; +import "./Footer.scss"; +import { Mailing } from ".."; + +export default function Footer() { + return ( + + + + ); +} diff --git a/packages/sia-skynet/src/components/Footer/Footer.scss b/packages/sia-skynet/src/components/Footer/Footer.scss new file mode 100644 index 00000000..c5c0b14f --- /dev/null +++ b/packages/sia-skynet/src/components/Footer/Footer.scss @@ -0,0 +1,100 @@ +@import '../../variables.scss'; + +.footer { + background-color: #171917; + padding: 60px 0 100px; + overflow: hidden; + position: relative; + + @media (min-width: $largebp) { + padding: 60px 0 140px; + } + + .width { + @media (min-width: $largebp) { + display: flex; + justify-content: space-between; + } + } + + .footer-column + .footer-column { + margin-top: 40px; + + @media (min-width: $largebp) { + margin: 0 0 0 60px; + } + } + + h2 { + font-size: 16px; + color: $white; + margin-bottom: 25px; + + @media (min-width: $largebp) { + font-size: 18px; + } + } + + li + li { + margin-top: 5px; + } + + ul + h2 { + margin-top: 40px; + } + + a { + color: $green; + display: inline-flex; + align-items: center; + transition: 0.2s color; + font-size: 13px; + + @media (min-width: $largebp) { + font-size: 14px; + } + + &:hover { + color: $white; + } + + svg { + margin-left: 10px; + } + } +} + +.footer-orb { + position: absolute; + right: 10px; + bottom: 100px; + margin-top: -13px; + margin-left: -13px; + animation: 8s floatLarge infinite; + + @media (min-width: $largebp) { + margin-left: 180px; + right: auto; + left: 50%; + bottom: 90px; + } +} + +.footer-cube { + position: absolute; + right: 30px; + top: 100%; + margin-top: -109px; + margin-left: -163px; + animation: 8s float infinite; + + @media (min-width: $largebp) { + margin-left: -100px; + right: auto; + left: 50%; + } +} + +.footer-built { + margin-top: 30px; +} diff --git a/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js new file mode 100644 index 00000000..4bec746f --- /dev/null +++ b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.js @@ -0,0 +1,39 @@ +import React from "react"; +import Fade from "react-reveal/Fade"; + +import "./HomeBuilt.scss"; +import { CircleIcon, CodeExamples } from "../"; +import { Cylinder, SmallOrb } from "../../svg"; + +export default function HomeBuilt() { + return ( +
+
+ +
+
+
+ + + + + +
+
+
+ + +

+ Infrastructure built for +
+ application developers +

+ +
+ + + + +
+ ); +} diff --git a/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.scss b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.scss new file mode 100644 index 00000000..fe5b7733 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeBuilt/HomeBuilt.scss @@ -0,0 +1,53 @@ +@import '../../variables.scss'; + +.home-built { + padding-top: 80px; + + @media (min-width: $largebp) { + padding-top: 150px; + } +} + +.home-built-header { + text-align: center; + + h2 { + text-align: center; + font-size: 32px; + margin-bottom: 50px; + + @media (min-width: $largebp) { + margin-bottom: 70px; + } + } +} + +.home-built-divider { + display: inline-flex; + align-items: center; + margin: 0 auto 32px; + + @media (min-width: $largebp) { + margin-bottom: 40px; + } + + .circle-icon { + margin: 0 14px; + } + + .small-orb:first-of-type { + margin-left: 14px; + } + + .small-orb:last-of-type { + margin-right: 14px; + } + + .small-divider:first-of-type { + margin-right: 8px; + } + + .small-divider:last-of-type { + margin-left: 8px; + } +} diff --git a/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js new file mode 100644 index 00000000..4e210c4a --- /dev/null +++ b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.js @@ -0,0 +1,171 @@ +import React, { Component } from "react"; +import CountUp from "react-countup"; +import VisibilitySensor from "react-visibility-sensor"; +import Fade from "react-reveal/Fade"; + +import "./HomeNetwork.scss"; +import { CircleIcon, FAQ } from "../"; +import { SmallOrb, LogoSolid, Arrow, Deco6, Deco7, Deco8 } from "../../svg"; + +const stats = [ + { name: "TB Used", value: 664 }, + { name: "TB Capacity", value: 2315 }, + { name: "Hosts", value: 335 }, + { name: "Storage/TB", value: 91, cent: true }, + { name: "Bandwidth/TB", value: 18, cent: true } +]; + +export default class HomeNetwork extends Component { + state = { + visable: false + }; + + onChange = isVisible => { + if (isVisible && !this.state.visable) { + this.setState({ visable: true }); + } + }; + + render() { + return ( +
+
+ +
+ + + + +
+
+
+ + +

+ Sia +
+ Network +

+ +
+ + + +
+ {stats.map((stat, i) => ( + +
+
+

+ {this.state.visable ? ( + + ) : ( + 0 + )} + {stat.cent && "¢"} +

+ {stat.name} +
+
+ {i !== 4 &&
} + + ))} + + + +
+ + + +
+
+ +

+ Skynet Webportal is a low cost server that sits between Skynet + and everyday users, enabling them to access Skynet content + without needing to operate any special software. Once the + Skylinks are generated, they can be shared with anyone to fetch + data from Skynet. The original uploader does not need to stay + online in order for the file to remain available. The Sia + network handles all of the pinning, guaranteeing both high + speeds and excellent uptime. A typical Skynet download starts in + under 500 milliseconds and can stream at rates as high as 1 + gigabit per second. The Sia network serves as the backend + storage layer for Skynet. +

+ + + +

+ Sia is the leading decentralized cloud storage platform. No + signups, no servers, no trusted third parties. Sia leverages + blockchain technology to create a data storage marketplace that + is more robust and more affordable than traditional cloud + storage providers. Storage costs are as much as 10x lower than + traditional infrastructure, bandwidth costs as much as 100x + lower, all without sacrificing performance or reliability. +

+ +

+ + Learn more about Sia + +

+ +
+
+ + +

+ Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type + and scrambled it to make. +

+ + + + + +

+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Sed posuere consectetur est at lobortis. +

+ + + + + +

+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Sed posuere consectetur est at lobortis. +

+ + + + + +

+ Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type + and scrambled it to make a type specimen book. +

+ + + + + + View more faq + + + +
+
+
+ ); + } +} diff --git a/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.scss b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.scss new file mode 100644 index 00000000..1792209e --- /dev/null +++ b/packages/sia-skynet/src/components/HomeNetwork/HomeNetwork.scss @@ -0,0 +1,192 @@ +@import '../../variables.scss'; + +.home-network { + padding: 80px 0; + + @media (min-width: $largebp) { + padding: 120px 0; + } +} + +.home-network-header { + h2 { + font-size: 32px; + margin-bottom: 36px; + } +} + +.home-network-divider { + display: flex; + align-items: center; + color: $green; + margin-bottom: 32px; + + @media (min-width: $largebp) { + margin-bottom: 40px; + } + + .circle-icon { + box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); + margin-right: 14px; + } + + .divider { + margin: 0 8px 0 14px; + } +} + +.home-network-stats { + background: $green; + border-radius: 12px; + box-shadow: 0 4px 24px 0 rgba(87, 181, 96, 0.3); + padding: 32px 24px; + position: relative; + + @media (min-width: $largebp) { + display: flex; + align-items: center; + padding: 40px 30px; + } + + @media (min-width: $largebp) { + padding: 50px 20px; + } + + .divider { + height: 2px; + width: 240px; + background: $black10; + margin: 20px auto; + + @media (min-width: $largebp) { + height: 56px; + width: 2px; + } + } +} + +.deco-6 { + position: absolute; + top: -185px; + right: 10px; + animation: 8s float infinite; +} + +.deco-7 { + position: absolute; + top: -130px; + right: 35px; + animation: 6s float infinite; +} + +.deco-8 { + position: absolute; + top: -65px; + right: -95px; + animation: 10s float infinite; +} + +.home-network-stat { + text-align: center; + + @media (min-width: $largebp) { + text-align: center; + width: calc(20% - 2px); + } + + .inner { + @media (min-width: $largebp) { + margin: 0 auto; + display: inline-block; + text-align: left; + min-width: 110px; + } + } + + h3 { + font-weight: 700; + color: $white; + font-size: 32px; + min-width: 10px; + + @media (min-width: $largebp) { + font-size: 40px; + } + } +} + +.network-stat-name { + font-size: 14px; + color: $white50; +} + +.home-network-columns { + margin-top: 40px; + + @media (min-width: $largebp) { + display: flex; + margin-top: 60px; + } +} + +.home-network-column { + @media (min-width: $largebp) { + flex: 1; + display: flex; + flex-direction: column; + } + + & + & { + margin-top: 40px; + + @media (min-width: $largebp) { + margin: 0 0 0 30px; + } + } + + &.left p { + color: $gray; + + @media (min-width: $largebp) { + font-size: 18px; + } + } + + &.left p + p { + margin-top: 30px; + + @media (min-width: $largebp) { + margin-top: 40px; + } + } + + .more { + color: $green; + font-size: 13px; + display: inline-flex; + align-items: center; + transition: 0.2s color; + + &:hover { + color: $black; + } + + @media (min-width: $largebp) { + font-size: 14px; + } + + svg { + margin-left: 10px; + transition: 0.2s transform, 0.2s color; + } + + &:hover svg { + transform: translateX(2px); + color: $black; + } + } + + .more-faq { + margin-left: 48px; + } +} diff --git a/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js new file mode 100644 index 00000000..4e3043a3 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.js @@ -0,0 +1,42 @@ +import React from "react"; +import Fade from "react-reveal/Fade"; +import Reveal from "react-reveal/Reveal"; + +import "./HomeSamples.scss"; +import { Sample } from "../"; + +const samples = [ + { type: "HTML", url: "/PAJF7fi2dK0CpcrhcXXReyufMO2s8k25sWL_XQjBW5a0mA" }, + { type: "PDF", url: "/XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg" }, + { type: "Image", url: "/IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ" }, + { type: "Audio", url: "/_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA" }, + { type: "Video", url: "/CABAB_1Dt0FJsxqsu_J4TodNCbCGvtFf1Uys_3EgzOlTcg" }, + { type: "JSON", url: "/AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ" }, + // { type: "Dapps", url: "#" } +]; + +export default function HomeSamples() { + return ( +
+ +

+ Skynet has SDKs for popular programming languages which integrate + seamlessly with existing applications. Above are a few code snippets + for uploading and downloading data from Skynet. +

+ + + +
+ {samples.map((sample, i) => ( + + ))} +
+ +
+ ); +} diff --git a/packages/sia-skynet/src/components/HomeSamples/HomeSamples.scss b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.scss new file mode 100644 index 00000000..19d96f74 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeSamples/HomeSamples.scss @@ -0,0 +1,36 @@ +@import '../../variables.scss'; + +.home-samples { + text-align: center; + margin: 0; + padding: 60px 0; + + @media (min-width: $largebp) { + padding: 65px 0 100px; + } + + p { + margin: 0 auto 48px; + max-width: 460px; + + @media (min-width: $largebp) { + font-size: 18px; + max-width: 560px; + } + } + + .sample { + display: inline-block; + margin: 10px; + min-width: 124px; + text-align: center; + + @media (min-width: $tinybp) { + margin: 10px 20px; + } + + @media (min-width: $smallbp) { + margin: 10px 40px; + } + } +} diff --git a/packages/sia-skynet/src/components/HomeStay/HomeStay.js b/packages/sia-skynet/src/components/HomeStay/HomeStay.js new file mode 100644 index 00000000..6e3263b3 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeStay/HomeStay.js @@ -0,0 +1,93 @@ +import React, { Component } from "react"; +import Fade from "react-reveal/Fade"; + +import "./HomeStay.scss"; +import { SocialLink, CircleIcon, Mailing } from "../"; +import { SmallOrb, Pyramid } from "../../svg"; + +export default class HomeStay extends Component { + render() { + return ( +
+
+ +
+ + + + +
+
+
+ + +

+ Stay up to date with +
+ Skynet updates +

+ +
+ +
+
+ +

+ Integer posuere erat a ante venenatis dapibus posuere velit + aliquet. Cras justo odio, dapibus ac facilisis in. +

+ + + + + + + +

+ Integer posuere erat a ante venenatis dapibus posuere velit + aliquet. Cras justo odio, dapibus ac facilisis in. +

+ +
+ +
    + +
  • + + NebulousLabs/Skynet-Webportal + + } + /> +
    • +     + +
  • + /Sia} + /> +
    • +     + +
  • + @SiaTechHQ} + /> +
    • +     +
+
+
+ ); + } +} diff --git a/packages/sia-skynet/src/components/HomeStay/HomeStay.scss b/packages/sia-skynet/src/components/HomeStay/HomeStay.scss new file mode 100644 index 00000000..c986b3e6 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeStay/HomeStay.scss @@ -0,0 +1,73 @@ +@import '../../variables.scss'; + +.home-stay-header { + h2 { + font-size: 32px; + margin-bottom: 36px; + } +} + +.home-stay-divider { + display: flex; + align-items: center; + color: $green; + margin-bottom: 32px; + + @media (min-width: $largebp) { + margin-bottom: 40px; + } + + .circle-icon { + box-shadow: 0 0 8px 0 rgba(87, 181, 96, 0.3); + margin-right: 14px; + } + + .divider { + margin: 0 8px 0 14px; + } +} + +.home-stay-flex { + @media (min-width: $largebp) { + display: flex; + } +} + +.home-stay-left { + @media (min-width: $largebp) { + flex: 1; + margin-right: 60px; + } + + p { + max-width: 553px; + + @media (min-width: $largebp) { + font-size: 18px; + } + } + + .disclaimer-text { + font-size: 13px; + color: $lightGray; + line-height: 1.7; + max-width: 438px; + + @media (min-width: $largebp) { + font-size: 14px; + } + } +} + +.home-stay-right { + margin-top: 40px; + + @media (min-width: $largebp) { + width: 305px; + margin-top: 0; + } + + li + li { + margin-top: 24px; + } +} diff --git a/packages/sia-skynet/src/components/HomeStay/MailchimpForm.js b/packages/sia-skynet/src/components/HomeStay/MailchimpForm.js new file mode 100644 index 00000000..e69de29b diff --git a/packages/sia-skynet/src/components/HomeTop/HomeTop.js b/packages/sia-skynet/src/components/HomeTop/HomeTop.js new file mode 100644 index 00000000..05cd71c4 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeTop/HomeTop.js @@ -0,0 +1,25 @@ +import React from "react"; +import Reveal from "react-reveal/Reveal"; + +import "./HomeTop.scss"; +import { Skynet, Deco1, Deco2 } from "../../svg"; + +export default function HomeTop() { + return ( + +
+ + +

Build the Future Web.

+ +

+ Skynet is a decentralized file sharing and content distribution + protocol. +

+ + + +
+ + ); +} diff --git a/packages/sia-skynet/src/components/HomeTop/HomeTop.scss b/packages/sia-skynet/src/components/HomeTop/HomeTop.scss new file mode 100644 index 00000000..b2b32b22 --- /dev/null +++ b/packages/sia-skynet/src/components/HomeTop/HomeTop.scss @@ -0,0 +1,69 @@ +@import "../../variables.scss"; + +.home-top { + text-align: center; + padding: 60px 0 50px; + position: relative; + + @media (min-width: $largebp) { + padding: 60px 0 70px; + } + + .logo { + margin: 0 auto 35px; + transform: translateY(40px); + opacity: 0; + transition: 1s transform, 1s opacity; + } + + &.active .logo { + transform: none; + opacity: 1; + } + + h1 { + font-size: 44px; + line-height: 1.14; + margin-bottom: 38px; + + @media (min-width: $largebp) { + font-size: 56px; + } + } + + p { + font-size: 20px; + line-height: 1.33; + max-width: 560px; + margin: 0 auto; + + @media (min-width: $largebp) { + font-size: 24px; + max-width: 670px; + } + } +} + +.deco-1 { + position: absolute; + left: 100%; + bottom: 25%; + margin-left: 20px; + animation: 6s float infinite; + + @media (min-width: 591px) { + margin-left: 100px; + } +} + +.deco-2 { + position: absolute; + left: 100%; + bottom: 5%; + margin-left: -15px; + animation: 8s float infinite; + + @media (min-width: 591px) { + margin-left: 50px; + } +} diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js new file mode 100644 index 00000000..96aa152e --- /dev/null +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.js @@ -0,0 +1,107 @@ +import React, { Component } from "react"; +import classNames from "classnames"; +import Dropzone from "react-dropzone"; +import Reveal from "react-reveal/Reveal"; + +import { Button, UploadFile } from "../"; +import { Deco3, Deco4, Deco5 } from "../../svg"; +import "./HomeUpload.scss"; + +export default class HomeUpload extends Component { + state = { files: [] }; + + handleDrop = async acceptedFiles => { + this.setState({ + files: [ + ...acceptedFiles.map(file => { + return { file, status: "uploading" }; + }), + ...this.state.files + ] + }); + + acceptedFiles.forEach(async file => { + const url = `/api/skyfile?filename=${file.name}`; + const fd = new FormData(); + fd.append("file", file); + + const onComplete = (status, skylink) => { + this.setState(state => { + const index = state.files.findIndex(f => f.file === file); + + return { + files: [ + ...state.files.slice(0, index), + { + ...state.files[index], + status, + url: `https://siasky.net/${skylink}` + }, + ...state.files.slice(index + 1) + ] + }; + }); + }; + + try { + const response = await fetch(url, { + method: "POST", + body: fd, + mode: "cors" + }); + const { skylink } = await response.json(); + + onComplete("complete", skylink); + } catch (error) { + onComplete("error"); + } + }); + }; + + render() { + return ( + +
+
+ this.handleDrop(acceptedFiles)}> + {({ getRootProps, getInputProps, isDragActive }) => ( + <> +
+ + Drag & drop your file(s) here to pin + + +
+ + + )} + + + {this.state.files.length > 0 && ( +
+ {this.state.files.map((file, i) => { + return ; + })} +
+ )} +
+ +

+ Once a file has been uploaded, a 46 byte link called a 'Skylink' is + generated. That link can then be shared with anyone to fetch the + file from Skynet. +

+ + + + +
+ + ); + } +} diff --git a/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss new file mode 100644 index 00000000..90bcd0db --- /dev/null +++ b/packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss @@ -0,0 +1,112 @@ +@import "../../variables.scss"; + +.home-upload { + position: relative; + + .bottom-text { + color: $lightGray; + font-size: 13px; + text-align: center; + max-width: 670px; + margin: 25px auto 0; + + @media (min-width: $largebp) { + font-size: 14px; + } + } +} + +.home-upload-box { + background: $white; + border-radius: 12px; + box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15), + 0 2px 4px 0 rgba(0, 0, 0, 0.05); + padding: 16px; +} + +.home-upload-dashed { + border: 1px dashed #c5cec7; + border-radius: 4px; + padding: 0 20px; + height: 210px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + outline: none; + transition: 0.2s background-color, 0.2s border, 0.2s color; + + &:hover { + background-color: rgba(0, 0, 0, 0.03); + cursor: pointer; + } + + &:hover .button { + background-color: $greenHover; + transform: translateY(-2px); + } + + &.drop-active { + background-color: $green; + border: 1px solid $green; + + .button { + display: none; + } + } + + .button { + margin-top: 15px; + } +} + +.home-upload-text { + color: $gray; + display: block; + transition: 0.2s color; + + @media (min-width: $largebp) { + font-size: 18px; + } + + .drop-active & { + color: $white; + } +} + +.deco-3 { + position: absolute; + top: -70px; + left: -5px; + animation: 8s float infinite; +} + +.deco-4 { + position: absolute; + top: -32px; + left: -90px; + animation: 6s float infinite; +} + +.deco-5 { + position: absolute; + top: 52px; + left: -56px; + animation: 10s float infinite; +} + +.home-uploaded-files { + border: solid 1px #c5cec7; + padding: 0 20px; + margin-top: 10px; + border-radius: 4px; + + @media (min-width: $largebp) { + padding: 0 40px; + } + + .upload-file + .upload-file { + border-top: 1px solid rgba(197, 206, 199, 0.4); + } +} diff --git a/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.js b/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.js new file mode 100644 index 00000000..a3839482 --- /dev/null +++ b/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.js @@ -0,0 +1,12 @@ +import React from 'react' + +import './LoadingSpinner.scss' +import { Loading } from '../../svg' + +export default function LoadingSpinner() { + return ( +
+ +
+ ) +} diff --git a/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.scss b/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.scss new file mode 100644 index 00000000..f2cf8596 --- /dev/null +++ b/packages/sia-skynet/src/components/LoadingSpinner/LoadingSpinner.scss @@ -0,0 +1,19 @@ +@import '../../variables.scss'; + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.loading-spinner { + -webkit-animation: spin 1.5s linear infinite; + animation: spin 1.5s linear infinite; +} diff --git a/packages/sia-skynet/src/components/Mailing/Mailing.js b/packages/sia-skynet/src/components/Mailing/Mailing.js new file mode 100644 index 00000000..3b5257ca --- /dev/null +++ b/packages/sia-skynet/src/components/Mailing/Mailing.js @@ -0,0 +1,54 @@ +import React, { Component } from 'react' +import MailchimpSubscribe from 'react-mailchimp-subscribe' +import classNames from 'classnames' + +import './Mailing.scss' + +const url = 'https://tech.us11.list-manage.com/subscribe/post?u=5df238d9e852f9801b5f2c92e&id=ab6bea4cc2' + +const CustomForm = ({ status, message, onValidated, light, id }) => { + let email, user + + const submit = () => { + if ((email, user, email.value.indexOf('@') > -1)) { + onValidated({ + EMAIL: email.value, + USER: user.checked ? 'Yes' : 'No', + }) + } + } + + return ( +
e.preventDefault()}> + (email = node)} type="email" placeholder="Email Address" validate /> +
+ (user = node)} type="checkbox" id={id} /> + +
+ + + {status === 'sending' &&

sending...

} + {status === 'error' &&

} + {status === 'success' &&

} +

+ ) +} + +export default function Mailing({ light, id }) { + return ( + ( + subscribe(formData)} + /> + )} + /> + ) +} diff --git a/packages/sia-skynet/src/components/Mailing/Mailing.scss b/packages/sia-skynet/src/components/Mailing/Mailing.scss new file mode 100644 index 00000000..33b46dd2 --- /dev/null +++ b/packages/sia-skynet/src/components/Mailing/Mailing.scss @@ -0,0 +1,109 @@ +@import '../../variables.scss'; + +.home-stay-form { + max-width: 342px; + margin: 36px 0 24px; + + .relative { + position: relative; + } + + .message { + font-size: 12px; + margin-top: 10px; + color: $lightGray; + + &.red-text { + color: $red; + } + } + + input[type='email'] { + border-radius: 4px; + box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1); + border: solid 1px #cbd3cd; + padding: 12px 0 12px 16px; + transition: 0.2s border-color; + + &:hover { + border-color: rgb(143, 143, 143); + } + + &:focus { + border-color: $green; + } + } + + input[type='checkbox'] { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px solid #cbd3cd; + margin-right: 8px; + display: inline-block; + vertical-align: middle; + margin: -2px 8px 0 0; + background-image: url('/images/green-check.svg'); + background-repeat: no-repeat; + background-size: 28px; + background-position: top -300px center; + + &:checked { + background-position: top -3px center; + } + } + + button { + font-weight: 400; + + @media (min-width: $largebp) { + font-size: 16px; + } + } + + .email-error { + font-size: 12px; + margin-top: 8px; + color: $red; + } +} + +.home-stay-form.light { + input[type='email'] { + box-shadow: 0 2px 4px 0 rgba(90, 94, 91, 0.1); + border-color: $white50; + color: $white; + + &:hover { + border-color: $white; + } + + &:focus { + border-color: $green; + } + } + + input[type='checkbox'] { + border-color: $white50; + } + + label { + color: $white50; + } + + .message { + color: $white30; + + &.red-text { + color: $red; + } + } +} + +.home-form-stay-existing { + margin: 15px 0 20px 0; + + label { + color: $darkGray; + } +} diff --git a/packages/sia-skynet/src/components/Sample/Sample.js b/packages/sia-skynet/src/components/Sample/Sample.js new file mode 100644 index 00000000..c44a1c8e --- /dev/null +++ b/packages/sia-skynet/src/components/Sample/Sample.js @@ -0,0 +1,19 @@ +import React from 'react' +import classNames from 'classnames' + +import './Sample.scss' +import { Download } from '../../svg' + +export default function Sample({ type, url, className }) { + return ( + + ) +} diff --git a/packages/sia-skynet/src/components/Sample/Sample.scss b/packages/sia-skynet/src/components/Sample/Sample.scss new file mode 100644 index 00000000..e5e23aca --- /dev/null +++ b/packages/sia-skynet/src/components/Sample/Sample.scss @@ -0,0 +1,48 @@ +@import '../../variables.scss'; + +.sample { + display: block; + text-align: center; + + a { + transition: 0.2s transform; + display: block; + } + + a:hover { + transform: translateY(5px); + } + + svg { + margin: 0 auto; + width: 34px; + height: 46px; + } +} + +.sample-name { + color: $darkGray; + display: block; + + @media (min-width: $largebp) { + font-size: 18px; + } + + a:hover & { + color: $black; + } +} + +.sample-download { + display: block; + color: $green; + font-size: 13px; + + @media (min-width: $largebp) { + font-size: 14px; + } + + a:hover & { + color: $greenHover; + } +} diff --git a/packages/sia-skynet/src/components/SocialLink/SocialLink.js b/packages/sia-skynet/src/components/SocialLink/SocialLink.js new file mode 100644 index 00000000..7a6d4336 --- /dev/null +++ b/packages/sia-skynet/src/components/SocialLink/SocialLink.js @@ -0,0 +1,26 @@ +import React from 'react' + +import './SocialLink.scss' +import { Github, Discord, Twitter } from '../../svg' + +export default function SocialLink({ icon, title, greenText, url }) { + const getIcon = () => { + if (icon === 'github') { + return + } else if (icon === 'discord') { + return + } else if (icon === 'twitter') { + return + } + } + + return ( + + {getIcon(icon)} + + {title} + {greenText} + + + ) +} diff --git a/packages/sia-skynet/src/components/SocialLink/SocialLink.scss b/packages/sia-skynet/src/components/SocialLink/SocialLink.scss new file mode 100644 index 00000000..d861681f --- /dev/null +++ b/packages/sia-skynet/src/components/SocialLink/SocialLink.scss @@ -0,0 +1,42 @@ +@import '../../variables.scss'; + +.social-link { + display: flex; + color: $darkGray; +} + +.social-link-icon { + width: 32px; + transition: 0.2s transform; + + a:hover & { + transform: scale(1.07); + } + + svg { + width: 32px; + height: 32px; + } +} + +.social-link-text { + flex: 1; + margin-left: 16px; + transition: 0.2s color; +} + +.social-link-title { + display: block; +} + +.social-link-green { + color: $green; + font-size: 14px; + display: inline-flex; + + transition: 0.2s color; + + a:hover & { + color: $darkGray; + } +} diff --git a/packages/sia-skynet/src/components/UploadFile/UploadFile.js b/packages/sia-skynet/src/components/UploadFile/UploadFile.js new file mode 100644 index 00000000..02c73457 --- /dev/null +++ b/packages/sia-skynet/src/components/UploadFile/UploadFile.js @@ -0,0 +1,78 @@ +import React, { Component } from "react"; + +import "./UploadFile.scss"; +import { LoadingSpinner } from "../"; +import { File, FileCheck, FileError, Copy } from "../../svg"; + +export default class UploadFile extends Component { + state = { + copied: false + }; + + getIcon = () => { + const { status } = this.props; + + if (status === "uploading" || status === "processing") { + return ; + } else if (status === "error") { + return ; + } else { + return ; + } + }; + + copyToClipboard = e => { + this.urlRef.current.select(); + document.execCommand("copy"); + e.target.focus(); + + this.setState({ copied: true }, () => { + setTimeout(() => { + this.setState({ copied: false }); + }, 1500); + }); + }; + + urlRef = React.createRef(); + + render() { + const { file, url, status } = this.props; + const copyText = this.state.copied ? "Copied!" : "Copy to clipboard"; + return ( +
+
{this.getIcon()}
+
+

{file.name}

+

+ {status === "uploading" && "Uploading..."} + {status === "processing" && "Processing..."} + {status === "error" && ( + Error processing file. + )} + {status === "complete" && ( + + {url} + + )} +

+
+ {(status === "uploading" || status === "processing") && ( +
+ +
+ )} + + {status === "complete" && ( +