move webpage to Gatsby (#32)

* migrate to gatsby in subfolder
* move gatsby to main package
* use targeted light syntax highlighter
* clean up gatsby leftovers

.gitignore

@@ -54,9 +54,9 @@ typings/
 # dotenv environment variable files
 .env*
 
-# build files
+# gatsby files
 .cache/
-build
+public
 
 # Mac files
 .DS_Store

gatsby-config.js

@@ -0,0 +1,35 @@
+module.exports = {
+  siteMetadata: {
+    title: `Skynet`,
+    description: `Skynet is a decentralized file sharing and content distribution protocol.`,
+    author: `Nebulous`
+  },
+  plugins: [
+    `gatsby-plugin-sass`,
+    `gatsby-plugin-react-helmet`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/images`
+      }
+    },
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `Skynet`,
+        short_name: `Skynet`,
+        start_url: `/`,
+        background_color: `#f1f7f2`,
+        theme_color: `#f1f7f2`,
+        display: `minimal-ui`,
+        icon: `src/images/logo.svg` // This path is relative to the root of the site.
+      }
+    }
+    // this (optional) plugin enables Progressive Web App + Offline functionality
+    // To learn more, visit: https://gatsby.dev/offline
+    // `gatsby-plugin-offline`,
+  ]
+};

netlify.toml

@@ -0,0 +1,21 @@
+[[redirects]]
+    from = "/skynet/skyfile"
+    to = "https://siasky.net/skynet/skyfile"
+    status = 200
+    force = true
+
+[[redirects]]
+    from = "/file/*"
+    to = "https://siasky.net/file/:splat"
+    status = 200
+    force = true
+
+[[redirects]]
+    from = "/"
+    to = "/"
+    status = 200
+
+[[redirects]]
+    from = "/*"
+    to = "https://siasky.net/:splat"
+    status = 200

package.json

@@ -1,13 +1,19 @@
 {
   "name": "skynet-webportal",
+  "description": "Sia Skynet",
   "version": "1.0.0",
-  "homepage": "https://siasky.net",
+  "author": "Nebulous",
   "dependencies": {
-    "@testing-library/dom": "^6.12.2",
-    "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^10.0.0",
     "classnames": "^2.2.6",
+    "gatsby": "^2.19.7",
+    "gatsby-image": "^2.2.39",
+    "gatsby-plugin-manifest": "^2.2.39",
+    "gatsby-plugin-offline": "^3.0.32",
+    "gatsby-plugin-react-helmet": "^3.1.21",
+    "gatsby-plugin-sass": "^2.1.28",
+    "gatsby-plugin-sharp": "^2.4.3",
+    "gatsby-source-filesystem": "^2.1.46",
+    "gatsby-transformer-sharp": "^2.3.13",
     "jsonp": "^0.2.1",
     "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
@@ -15,10 +21,10 @@
     "react-countup": "^4.3.3",
     "react-dom": "^16.12.0",
     "react-dropzone": "^10.2.1",
+    "react-helmet": "^5.2.1",
     "react-mailchimp-form": "^1.0.2",
     "react-mailchimp-subscribe": "^2.1.0",
     "react-reveal": "^1.2.2",
-    "react-scripts": "^3.4.0",
     "react-syntax-highlighter": "^12.2.1",
     "react-visibility-sensor": "^5.1.1",
     "shortid": "^2.2.15"
@@ -26,25 +32,28 @@
   "devDependencies": {
     "prettier": "^1.19.1"
   },
-  "scripts": {
+  "keywords": [
-    "start": "react-scripts start",
+    "sia", 
-    "build": "react-scripts build",
+    "skynet", 
-    "test": "react-scripts test",
+    "nebulous",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
+    "blockchain",
-  },
+    "decentralized",
-  "eslintConfig": {
+    "cloud storage"
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
   ],
-    "development": [
+  "license": "MIT",
-      "last 1 chrome version",
+  "scripts": {
-      "last 1 firefox version",
+    "build": "gatsby build",
-      "last 1 safari version"
+    "develop": "gatsby develop",
-    ]
+    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "start": "yarn run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NebulousLabs/skynet-webportal"
+  },
+  "bugs": {
+    "url": "https://github.com/NebulousLabs/skynet-webportal/issues"
   }
 }

public/images/footer-cube.svg

@@ -1,13 +0,0 @@
-
-<svg width="263px" height="258px" viewBox="0 0 263 258" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-983.000000, -4278.000000)" id="Group-3">
-            <g transform="translate(1114.599987, 4407.025517) rotate(10.000000) translate(-1114.599987, -4407.025517) translate(994.099987, 4276.525517)">
-                <g id="Group-15" transform="translate(0.889504, 0.405409)">
-                    <polygon id="Path-6" fill="#343734" points="120 130 2.27373675e-13 199.666667 2.27373675e-13 200 120 260 240 200 240 199.666667"></polygon>
-                    <path d="M120,0 L0,66.6666667 L0,200 L120,260 L240,200 L240,66.6666667 L120,0 Z M240,66.6666667 L120,130 L0,66.6666667 M240,200 L120,130 L0,200" id="Path-9-Copy" stroke="#343734" stroke-width="2" stroke-linejoin="round"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

public/images/top-swoosh.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 622 151" width="622" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-1.7%" y="-1.7%" width="103.4%" height="103.4%" filterUnits="objectBoundingBox" id="a"><feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/><feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feMorphology radius="1" in="SourceAlpha" result="shadowInner"/><feOffset in="shadowInner" result="shadowInner"/><feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.341176471 0 0 0 0 0.709803922 0 0 0 0 0.376470588 0 0 0 0.3 0" in="shadowBlurOuter1"/></filter><path d="M384 768c212.077 0 384-171.923 384-384S596.077 0 384 0 0 171.923 0 384s171.923 384 384 384zm192-51.446c-91.832 53.02-252.238-52.89-358.277-236.554C111.684 296.336 100.168 104.466 192 51.446" id="b"/></defs><g fill="none" fill-rule="evenodd"><g stroke-linejoin="round" transform="translate(-73 -626)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use stroke="#57B560" stroke-width="2" xlink:href="#b"/></g><path d="M119.706-574.998l-.78.524C27.13-521.461 38.642-329.612 144.64-145.968 250.637 37.676 410.982 143.572 502.779 90.559l.218-.052C446.488 123.254 380.859 142 310.853 142 98.857 142-73-29.904-73-241.957c0-142.44 77.542-266.765 192.706-333.04z" fill="#57B560"/></g></svg>

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Skynet is a decentralized file sharing and content distribution protocol."
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Skynet</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "Skynet",
-  "name": "Skynet",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "android-chrome-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "android-chrome-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

setup-scripts/README.md

@@ -82,4 +82,4 @@ You can check that with `node -v` and `yarn -v` commands respectively.
 - run `yarn` to build dependencies
 - run `yarn build` to build the client package
 
-Client package will be outputted to `/build` and nginx configuration will pick it up automatically.
+Client package will be outputted to `/public` and nginx configuration will pick it up automatically.

setup-scripts/setup.sh

@@ -11,10 +11,10 @@ sudo cp ./ssh_config /etc/ssh/ssh_config
 mkdir -p ~/.ssh
 cat ./authorized_keys >>  ~/.ssh/authorized_keys
 
-# Nodejs install prerequisite. From official documentation.
+# Nodejs install prerequisite https://nodejs.org/en/download/package-manager/
 curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
 
-# Yarn install prerequisite.
+# Yarn install prerequisite https://classic.yarnpkg.com/en/docs/install
 curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
 echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
 
@@ -23,9 +23,6 @@ sudo apt-get update
 sudo apt-get -y install ufw tmux ranger htop nload nginx certbot \
   python-certbot-nginx nodejs gcc g++ make yarn git vim
 
-# Install pm2
-sudo npm i -g pm2
-
 # terminfo for alacritty terminal via ssh
 # If you don't use the alacritty terminal you can remove this step.
 wget -c https://raw.githubusercontent.com/alacritty/alacritty/master/extra/alacritty.info
@@ -66,3 +63,4 @@ cd Sia && git checkout viewnode && make
 cd $cwd
 cd ../
 yarn
+yarn build

setup-scripts/skynet-nginx.conf

@@ -10,8 +10,10 @@ server {
 	listen [::]:443 ssl http2;
 	server_name siasky.net www.siasky.net; # replace with actual server names
 
+	# NOTE: make sure to enable any additional configuration you might need like gzip
+
 	location / {
-		root /home/user/skynet-webportal/build; # path to root of index.html
+		root /home/user/skynet-webportal/public; # path to root of index.html
 	}
 
 	location /skynet/skyfile/ {

src/components/App/App.js

@@ -1,12 +1,12 @@
 import React from "react";
-
+import TopSwoosh from "../../svg/TopSwoosh";
 import "./App.scss";
 import { HomeTop, HomeUpload, HomeBuilt, HomeSamples, HomeStay, HomeNetwork, Footer } from "../";
 
 function App() {
   return (
     <div className="app">
-      <img className="top-swoosh" src="/images/top-swoosh.svg" alt="top swoosh" />
+      <TopSwoosh className="top-swoosh" />
 
       <div className="width">
         <HomeTop />

src/components/CodeExamples/CodeExamples.js

@@ -1,53 +1,58 @@
 import React, { useState } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
 import classNames from "classnames";
-
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import "./CodeExamples.scss";
+import { javascript, go, python, bash } from 'react-syntax-highlighter/dist/esm/languages/hljs';
 import Colors from "./Colors";
-import { python, curl, node, go } from "./Code";
+import * as snippets from "./Code";
+import "./CodeExamples.scss";
+
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('go', go);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('bash', bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
 
   return (
     <div className="code-examples">
-      <ul className="code-examples-tabs">
+      <div className="code-examples-tabs">
-        <li onClick={() => setActive(1)} className={classNames({ active: active === 1 })}>
+        <button type="button" onClick={() => setActive(1)} className={classNames({ active: active === 1 })}>
           CURL
-        </li>
+        </button>
-        <li onClick={() => setActive(2)} className={classNames({ active: active === 2 })}>
+        <button type="button" onClick={() => setActive(2)} className={classNames({ active: active === 2 })}>
           Python
-        </li>
+        </button>
-        <li onClick={() => setActive(3)} className={classNames({ active: active === 3 })}>
+        <button type="button" onClick={() => setActive(3)} className={classNames({ active: active === 3 })}>
           Node.js
-        </li>
+        </button>
-        <li onClick={() => setActive(4)} className={classNames({ active: active === 4 })}>
+        <button type="button" onClick={() => setActive(4)} className={classNames({ active: active === 4 })}>
           Go
-        </li>
+        </button>
-      </ul>
+      </div>
 
       <div className="code-examples-body">
         {active === 1 && (
-          <SyntaxHighlighter wrapLines showLineNumbers={true} language="curl" style={Colors}>
+          <SyntaxHighlighter wrapLines showLineNumbers={true} language="bash" style={Colors}>
-            {curl}
+            {snippets.curl}
           </SyntaxHighlighter>
         )}
 
         {active === 2 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="python" style={Colors}>
-            {python}
+            {snippets.python}
           </SyntaxHighlighter>
         )}
 
         {active === 3 && (
-          <SyntaxHighlighter wrapLines showLineNumbers={true} language="node" style={Colors}>
+          <SyntaxHighlighter wrapLines showLineNumbers={true} language="javascript" style={Colors}>
-            {node}
+            {snippets.node}
           </SyntaxHighlighter>
         )}
 
         {active === 4 && (
           <SyntaxHighlighter wrapLines showLineNumbers={true} language="go" style={Colors}>
-            {go}
+            {snippets.go}
           </SyntaxHighlighter>
         )}
       </div>

src/components/CodeExamples/CodeExamples.scss

@@ -7,7 +7,7 @@
   align-items: flex-end;
   height: 65px;
 
-  li {
+  button {
     display: block;
     flex: 1;
     color: $white60;
@@ -30,23 +30,23 @@
     }
   }
 
-  li:hover,
+  button:hover,
-  li.active {
+  button.active {
     color: $white;
     background-color: #171917;
     line-height: 65px;
   }
 
-  li:first-child {
+  button:first-child {
     border-top-left-radius: 12px;
   }
 
-  li:last-child {
+  button:last-child {
     border-top-right-radius: 12px;
   }
 
-  li.filler,
+  button.filler,
-  li.filler:hover {
+  button.filler:hover {
     flex: 1;
     height: 57px;
     border-top-right-radius: 12px;

src/components/Mailing/Mailing.scss

@@ -43,7 +43,7 @@
     display: inline-block;
     vertical-align: middle;
     margin: -2px 8px 0 0;
-    background-image: url('/images/green-check.svg');
+    background-image: url('../../images/green-check.svg');
     background-repeat: no-repeat;
     background-size: 28px;
     background-position: top -300px center;

src/components/seo.js

@@ -0,0 +1,83 @@
+/**
+ * SEO component that queries for data with
+ *  Gatsby's useStaticQuery React hook
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Helmet from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
+
+function SEO({ lang, meta }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            author
+            description
+          }
+        }
+      }
+    `
+  );
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang
+      }}
+      title={site.siteMetadata.title}
+      meta={[
+        {
+          name: `description`,
+          content: site.siteMetadata.description
+        },
+        {
+          property: `og:title`,
+          content: site.siteMetadata.title
+        },
+        {
+          property: `og:description`,
+          content: site.siteMetadata.description
+        },
+        {
+          property: `og:type`,
+          content: `website`
+        },
+        {
+          name: `twitter:card`,
+          content: `summary`
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author
+        },
+        {
+          name: `twitter:title`,
+          content: site.siteMetadata.title
+        },
+        {
+          name: `twitter:description`,
+          content: site.siteMetadata.description
+        }
+      ].concat(meta)}
+    />
+  );
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``
+};
+
+SEO.propTypes = {
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default SEO;

src/global.scss

@@ -2,40 +2,40 @@
 
 @font-face {
   font-family: "Haas Grot Disp";
-  src: url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
+  src: url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff2") format("woff2"),
-    url("/fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
+    url("./fonts/hinted-subset-HaasGrotDispR-55Roman.woff") format("woff");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Haas Grot Disp";
-  src: url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
+  src: url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff2") format("woff2"),
-    url("/fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
+    url("./fonts/hinted-subset-HaasGrotDispR-65Medium.woff") format("woff");
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Haas Grot Text";
-  src: url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
+  src: url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff2") format("woff2"),
-    url("/fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
+    url("./fonts/hinted-subset-HaasGrotTextR-75Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Haas Grot Text";
-  src: url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
+  src: url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff2") format("woff2"),
-    url("/fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
+    url("./fonts/hinted-subset-HaasGrotTextR-65Medium.woff") format("woff");
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: "Haas Grot Text";
-  src: url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
+  src: url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff2") format("woff2"),
-    url("/fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
+    url("./fonts/hinted-subset-HaasGrotTextR-55Roman.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

src/images/logo.svg

@@ -1,4 +1,4 @@
-<svg viewBox="19.88800048828125 48.90407943725586 132.07760620117188 108.50448608398438" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="19.88800048828125 37.1175193787 132.07760620117188 132.07760620117188" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <style>.cls-1,.cls-2{fill:#0071bc;}.cls-1{fill-rule:evenodd;}.cls-2{font-size:87px;font-family:Karbon-Light, Karbon;font-weight:300;letter-spacing:-0.05em;}.cls-3{letter-spacing:-0.05em;}.cls-4{letter-spacing:-0.05em;}</style>
   </defs>

src/index.js

@@ -1,7 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
-import "./global.scss";
-import { App } from "./components";
-
-ReactDOM.render(<App />, document.getElementById("root"));

src/pages/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import SEO from "../components/seo";
+import { App } from "../components";
+import "../global.scss";
+
+const IndexPage = () => (
+  <>
+    <SEO />
+    <App />
+  </>
+);
+
+export default IndexPage;

src/svg/TopSwoosh.js

@@ -0,0 +1,70 @@
+import React from "react";
+
+export default function TopSwoosh({ ...props }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="622"
+      viewBox="0 0 622 151"
+      {...props}
+    >
+      <defs>
+        <filter
+          id="a"
+          width="103.4%"
+          height="103.4%"
+          x="-1.7%"
+          y="-1.7%"
+          filterUnits="objectBoundingBox"
+        >
+          <feMorphology
+            in="SourceAlpha"
+            operator="dilate"
+            radius="1"
+            result="shadowSpreadOuter1"
+          ></feMorphology>
+          <feOffset
+            in="shadowSpreadOuter1"
+            result="shadowOffsetOuter1"
+          ></feOffset>
+          <feMorphology
+            in="SourceAlpha"
+            radius="1"
+            result="shadowInner"
+          ></feMorphology>
+          <feOffset in="shadowInner" result="shadowInner"></feOffset>
+          <feComposite
+            in="shadowOffsetOuter1"
+            in2="shadowInner"
+            operator="out"
+            result="shadowOffsetOuter1"
+          ></feComposite>
+          <feGaussianBlur
+            in="shadowOffsetOuter1"
+            result="shadowBlurOuter1"
+            stdDeviation="4"
+          ></feGaussianBlur>
+          <feColorMatrix
+            in="shadowBlurOuter1"
+            values="0 0 0 0 0.341176471 0 0 0 0 0.709803922 0 0 0 0 0.376470588 0 0 0 0.3 0"
+          ></feColorMatrix>
+        </filter>
+        <path
+          id="b"
+          d="M384 768c212.077 0 384-171.923 384-384S596.077 0 384 0 0 171.923 0 384s171.923 384 384 384zm192-51.446c-91.832 53.02-252.238-52.89-358.277-236.554C111.684 296.336 100.168 104.466 192 51.446"
+        ></path>
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <g strokeLinejoin="round" transform="translate(-73 -626)">
+          <use fill="#000" filter="url(#a)" xlinkHref="#b"></use>
+          <use stroke="#57B560" strokeWidth="2" xlinkHref="#b"></use>
+        </g>
+        <path
+          fill="#57B560"
+          d="M119.706-574.998l-.78.524C27.13-521.461 38.642-329.612 144.64-145.968 250.637 37.676 410.982 143.572 502.779 90.559l.218-.052C446.488 123.254 380.859 142 310.853 142 98.857 142-73-29.904-73-241.957c0-142.44 77.542-266.765 192.706-333.04z"
+        ></path>
+      </g>
+    </svg>
+  );
+}