feat: Index and About pages

package-lock.json

@@ -1258,6 +1258,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@webcomponents/webcomponentsjs": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
+      "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg=="
+    },
     "@webpack-cli/info": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.1.tgz",
@@ -1285,6 +1290,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "@zeit/schemas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.6.0.tgz",
+      "integrity": "sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1325,6 +1336,42 @@
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true
     },
+    "ansi-align": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
+      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "dev": true,
+      "requires": {
+        "string-width": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -1373,6 +1420,18 @@
         }
       }
     },
+    "arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true
+    },
+    "arg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-2.0.0.tgz",
+      "integrity": "sha512-XxNTUzKnz1ctK3ZIcI2XUPlD96wbHP2nGqkPKpvk/HNRlPveYrXIVSTk9m3LcqOgDPg3B1nMvdV/K8wZd7PG4w==",
+      "dev": true
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1616,6 +1675,54 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "boxen": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
+      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "dev": true,
+      "requires": {
+        "ansi-align": "^2.0.0",
+        "camelcase": "^4.0.0",
+        "chalk": "^2.0.1",
+        "cli-boxes": "^1.0.0",
+        "string-width": "^2.0.0",
+        "term-size": "^1.2.0",
+        "widest-line": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1788,6 +1895,117 @@
         }
       }
     },
+    "cli-boxes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
+      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
+      "dev": true
+    },
+    "clipboardy": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
+      "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==",
+      "dev": true,
+      "requires": {
+        "arch": "^2.1.0",
+        "execa": "^0.8.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.8.0.tgz",
+          "integrity": "sha1-2NdrvBtVIX7RkP1t1J08d07PyNo=",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "npm-run-path": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+          "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+          "dev": true,
+          "requires": {
+            "path-key": "^2.0.0"
+          }
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+          "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+          "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+          "dev": true
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
+        }
+      }
+    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -2176,6 +2394,12 @@
         "regexp.prototype.flags": "^1.2.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -2868,6 +3092,23 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
+    "fast-url-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=",
+      "dev": true,
+      "requires": {
+        "punycode": "^1.3.2"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        }
+      }
+    },
     "fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@@ -3332,6 +3573,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -3638,6 +3885,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4438,6 +4690,12 @@
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
       "dev": true
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+      "dev": true
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -4507,6 +4765,52 @@
         }
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -4606,6 +4910,25 @@
         "unicode-match-property-value-ecmascript": "^1.2.0"
       }
     },
+    "registry-auth-token": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
+      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
+      "dev": true,
+      "requires": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "dev": true,
+      "requires": {
+        "rc": "^1.0.1"
+      }
+    },
     "regjsgen": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
@@ -4750,6 +5073,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.0.tgz",
+      "integrity": "sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-loader": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.0.tgz",
@@ -4883,6 +5215,135 @@
         "randombytes": "^2.1.0"
       }
     },
+    "serve": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/serve/-/serve-11.3.2.tgz",
+      "integrity": "sha512-yKWQfI3xbj/f7X1lTBg91fXBP0FqjJ4TEi+ilES5yzH0iKJpN5LjNb1YzIfQg9Rqn4ECUS2SOf2+Kmepogoa5w==",
+      "dev": true,
+      "requires": {
+        "@zeit/schemas": "2.6.0",
+        "ajv": "6.5.3",
+        "arg": "2.0.0",
+        "boxen": "1.3.0",
+        "chalk": "2.4.1",
+        "clipboardy": "1.2.3",
+        "compression": "1.7.3",
+        "serve-handler": "6.1.3",
+        "update-check": "1.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.5.3",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
+          "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "compression": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.3.tgz",
+          "integrity": "sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==",
+          "dev": true,
+          "requires": {
+            "accepts": "~1.3.5",
+            "bytes": "3.0.0",
+            "compressible": "~2.0.14",
+            "debug": "2.6.9",
+            "on-headers": "~1.0.1",
+            "safe-buffer": "5.1.2",
+            "vary": "~1.1.2"
+          }
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "serve-handler": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.3.tgz",
+      "integrity": "sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "fast-url-parser": "1.1.3",
+        "mime-types": "2.1.18",
+        "minimatch": "3.0.4",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "2.2.1",
+        "range-parser": "1.2.0"
+      },
+      "dependencies": {
+        "content-disposition": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+          "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
+          "dev": true
+        },
+        "mime-db": {
+          "version": "1.33.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+          "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.18",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+          "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+          "dev": true,
+          "requires": {
+            "mime-db": "~1.33.0"
+          }
+        },
+        "path-to-regexp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+          "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==",
+          "dev": true
+        },
+        "range-parser": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+          "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
+          "dev": true
+        }
+      }
+    },
     "serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -5374,6 +5835,12 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true
+    },
     "style-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
@@ -5423,6 +5890,110 @@
       "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
       "dev": true
     },
+    "term-size": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
+      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
+      "dev": true,
+      "requires": {
+        "execa": "^0.7.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+          "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "npm-run-path": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+          "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+          "dev": true,
+          "requires": {
+            "path-key": "^2.0.0"
+          }
+        },
+        "path-key": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+          "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+          "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^1.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+          "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+          "dev": true
+        },
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
+        }
+      }
+    },
     "terser": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
@@ -5658,6 +6229,16 @@
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
+    "update-check": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.2.tgz",
+      "integrity": "sha512-1TrmYLuLj/5ZovwUS7fFd1jMH3NnFDN1y1A8dboedIDt7zs/zJMo6TwwlhYKkSeEwzleeiSBV5/3c9ufAQWDaQ==",
+      "dev": true,
+      "requires": {
+        "registry-auth-token": "3.3.2",
+        "registry-url": "3.1.0"
+      }
+    },
     "uri-js": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
@@ -6111,6 +6692,42 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "widest-line": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "start": "webpack serve",
     "build": "cross-env NODE_ENV=production webpack",
+    "build:dev": "cross-env NODE_ENV=development webpack",
     "format": "prettier --write src",
+    "serve": "serve build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Fandly Gergo",
@@ -19,10 +21,17 @@
     "cross-env": "^7.0.3",
     "css-loader": "^5.0.1",
     "prettier": "^2.2.1",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.32.0",
     "sass-loader": "^10.1.0",
+    "serve": "^11.3.2",
     "style-loader": "^2.0.0",
     "webpack": "^5.11.1",
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.11.1"
+  },
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "jquery": "^3.5.1"
   }
 }

src/about.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Core Computing</title>
+	<meta charset="utf-8" />
+	<script src="./index.js"></script>
+</head>
+<body>
+	<app-header></app-header>
+	<div class="about_bg"></div>
+	<div class="about_content">
+		<p class="about_header">Ce facem</p>
+		<div class="about_col2 about_col2__center">
+			<div class="about_col2_col">
+				<p>Core Computing este o companie de IT înființată în 2020, care, până în prezent, a dezvoltat o echipa de specialiști cu o vastă experiență în domeniu. Prin tot ceea ce facem, ne asumăm rolul de a eficientiza munca partenerilor noștri prin dezvoltarea de soluții tehnice customizate după nevoile lor</p>
+<p>Suntem mereu la curent cu cele mai noi tehnologii și ne adaptăm fiecărui proiect, respectând cerințele specifice. Dăm dovadă de eficiență și răspundem cu promptitudine cererilor tuturor clienților noștri.</p>
+			</div>
+			<div class="about_col2_col">
+				<p>Colaborăm cu companii mici, medii și mari, atât la nivel național cât și global. În munca noastră de dezvoltare software, ne place să facem lucrurile diferit. Nu folosim platforme predefinite sau șabloane standard. Realizăm, de la zero, codul brut pentru toate proiectele pe care le dezvoltăm. Astfel, obținem de fiecare dată rezultate unice, personalizate pentru fiecare client.</p>
+<p>Dăm dovadă de flexibilitate și ne adaptăm cu ușurință cerințelor, oferind soluții de dezvoltare menite să ajute la o mai bună organizare, dar și la creșterea afacerilor partenerilor noștri.</p>
+			</div>
+		</div>
+		<p class="about_header">Centrul de date</p>
+		<div>
+			<div class="about_col2 about_col2__imgtext">
+				<p class="about_col2_text">Sistem Emerson SmartAisle Containment ce controleaza intregul ansamblu CRAC in vederea securizarii SLA-ului garantat pe temperatura. Procent de umiditate controlat si constant.</p>
+				<img class="about_col2_img" src="../res/dc1.jpg" />
+			</div>
+			<div class="about_col2 about_col2__imgtext">
+				<img class="about_col2_img" src="../res/dc2.jpg" />
+				<p class="about_col2_text">Sistem de detectie incendiu format din detectori adresabili (fum si temperatura). Sistem VESDA de aspiratie pentru detectia timpurie a fumului in camere de colocare si camera tehnica. Sistem de stingere cu gaz inert (INERGEN). Acesta este un amestec de gaze naturale prezente in mod obisnuit in atmosfera - astfel, gazul inergen nu contribuie la fenomenul de incalzire globala si nu are impact asupra stratului de ozon.</p>
+			</div>
+			<div class="about_col2 about_col2__imgtext">
+				<p class="about_col2_text">Sistemul de control access biometric (scanare amprenta faciala, fingerprint, cod si card) asigura un nivel inalt de securitate. Sistem de monitorizare video(camere IP 3mp) cu circuit intern ce monitorizeaza interiorul si exteriorul, detectoare de miscare, indicatoare de usi deschise, senzori de inundatie, sisteme de acces cu cardul. In inspectiile de rutina, efectuate de agentii de securitate, sunt incluse toate punctele de intrare/iesire ale cladirii, precum si zonele interne securizate.</p>
+				<img class="about_col2_img" src="../res/dc3.jpg" />
+			</div>
+			<div class="about_col2 about_col2__imgtext">
+				<img class="about_col2_img" src="../res/dc4.jpg" />
+				<p class="about_col2_text">Protectie standard pentru fiecare rack: 16A, 32A, 63A, sau chiar mai mult, daca este necesar. Alimentarea cu energie de 380VAC, 230VAC, 48VDC. Fiecare rack beneficiaza de doua circuite separate de curent. Putere instalata de 1.25 MW. UPS si generatoare diesel pentru backup. </p>
+			</div>
+		</div>
+</body>
+</head>

src/contact.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Core Computing</title>
+	<meta charset="utf-8" />
+	<script src="./index.js"></script>
+</head>
+<body>
+	<app-header />
+</body>
+</head>

src/index.html

@@ -1,15 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
-    <title>Index</title>
+	<title>Core Computing</title>
-    <meta charset="utf-8" />
+	<meta charset="utf-8" />
-    <script src="./index.js"></script>
+	<script src="./index.js"></script>
-  </head>
+</head>
-  <body>
+<body>
-    <p>Test</p>
+	<app-header></app-header>
-    <p id="test"></p>
+	<div class="index_bg"></div>
-    <script>
+	<div class="index_content">
-      ui.doTest();
+		<div class="index_content_box">
-    </script>
+			<p class="index_content_slogan">Mută-te în Cloud!</p>
-  </body>
+			<p class="index_content_description">Core Computing îți oferă toate serviciile necesare pentru realizarea unei infrastructurii cloud-native.</p>
-</html>
+		</div>
+		<div class="index_content_box">
+			<div class="index_content_signupForm">
+				<p class="index_content_signupForm_title">Începe astăzi!</p>
+				<input id="su_email" type="email" class="index_content_signupForm_field" placeholder="Email" />
+				<app-button onclick="alert('Sign up using: ' + document.getElementById('su_email').value)" data-text="Crează un cont"></app-button>
+			</div>
+		</div>
+	</div>
+</body>
+</head>

src/prices.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Core Computing</title>
+	<meta charset="utf-8" />
+	<script src="./index.js"></script>
+</head>
+<body>
+	<app-header />
+</body>
+</head>

src/script/components/app-button.js

@@ -0,0 +1,28 @@
+import styles from '!raw-loader!sass-loader!./styles/app-button.scss';
+
+class AppButton extends HTMLElement {
+	constructor () {
+		super();
+
+		const root = this.attachShadow({mode: 'open'});
+
+		const style = document.createElement('style');
+		style.textContent = styles;
+		root.appendChild(style);
+
+		const button = document.createElement('div');
+		button.className='button';
+		this.button = button
+		root.appendChild(button);
+	}
+
+	connectedCallback() {
+		this.button.innerText = this.dataset.text;
+	}
+
+	static get observedAttributes() {
+		return ['data-text', 'onclick'];
+	}
+}
+
+customElements.define('app-button', AppButton);

src/script/components/app-header.js

@@ -0,0 +1,53 @@
+import styles from '!raw-loader!sass-loader!./styles/app-header.scss';
+
+class AppHeader extends HTMLElement {
+	constructor(){
+		super();
+
+		const root = this.attachShadow({mode: 'open'});
+
+		const style =document.createElement('style');
+		style.textContent = styles;
+		root.appendChild(style);
+
+		const div = document.createElement('div');
+		div.className = 'header';
+
+		const logo = document.createElement('img');
+		logo.src = '/res/logo.png';
+		logo.alt = 'logo';
+		logo.className = 'header_icon';
+		logo.onclick = () => {
+			window.location = '/';
+		};
+		div.appendChild(logo);
+
+		this.getMenuItems().forEach(item => {
+			const menuItem = document.createElement('div');
+			menuItem.className='header_item';
+			menuItem.innerText=item.name;
+			menuItem.onclick=() => {
+				window.location.href = item.to;
+			};
+
+			if(window.location.pathname == item.to){
+				menuItem.classList.add('header_item_active');
+			}
+
+			div.appendChild(menuItem);
+		})
+
+		root.appendChild(div);
+	}
+
+	getMenuItems() {
+		return [
+		{name:'Firma', to: '/about'},
+		{name: 'Servicii', to: '/services'},
+		{name: 'Prețuri', to: '/prices'},
+		{name: 'Contact', to: '/contact'}
+	];
+	} 
+}
+
+customElements.define('app-header', AppHeader);

src/script/components/styles/app-button.scss

@@ -0,0 +1,16 @@
+.button {
+	background-color: #0072BC;
+	color: #ffffff;
+	padding: 15px 45px;
+	font-size: 24px;
+	line-height: 32px;
+	text-align: center;
+	cursor: pointer;
+	border-radius: 8px;
+	margin: auto;
+	width: fit-content;
+
+	&:hover {
+		opacity: 0.7;
+	}
+}

src/script/components/styles/app-header.scss

@@ -0,0 +1,45 @@
+.header{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 0 20px;
+	height: 60px;
+	background-color: #ffffff;
+	box-shadow: 0 5px 5px #00000010;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+
+	&_icon {
+		height: 80%;
+		margin-right: 30px;
+		cursor: pointer;
+	}
+
+	&_item {
+		box-sizing: border-box;
+		font-size: 26px;
+		font-weight: bold;
+		line-height: 35px;
+		padding: 0 30px;
+		text-align: center;
+		color: #0072BC;
+		cursor: pointer;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		border-bottom: 5px solid transparent;
+		padding-top: 5px;
+
+		&:hover {
+			background-color: #0072BC10;
+		}
+
+		&_active {
+			border-bottom: 5px solid #0072BC;
+		}
+	}
+}

src/script/index.js

@@ -1,3 +1,10 @@
-export const doTest = () => {
+import "@webcomponents/webcomponentsjs";
-	document.getElementById('test').innerHTML = 'test';
+
-};
+// load styles
+import '../style/main.scss';
+import '../style/index.scss';
+import '../style/about.scss';
+
+// load components
+import './components/app-header';
+import './components/app-button';

src/services.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Core Computing</title>
+	<meta charset="utf-8" />
+	<script src="./index.js"></script>
+</head>
+<body>
+	<app-header />
+</body>
+</head>

src/style/about.scss

@@ -0,0 +1,63 @@
+.about {
+	&_bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: url('../res/about_bg.jpg') center center;
+		background-repeat: no-repeat;
+		background-size: cover;
+	}
+
+	&_content {
+		position: relative;
+		margin-top: 60px;
+		padding-top: 40px;
+		width: 60%;
+		margin: auto;
+	}
+
+	&_header {
+		font-size: 48px;
+		font-weight: bold;
+		line-height: 64px;
+		margin-top: 60px;
+		margin-bottom: 30px;
+		color: #015082;
+	}
+
+	&_col2 {
+		display: flex;
+		justify-content: flex-start;
+
+		&__center {
+			justify-content: space-between;
+		}
+
+		&__imgtext {
+			align-items: center;
+
+			&:nth-child(2n){
+				justify-content: flex-end;
+			}
+		}
+
+		&_col {
+			width: 40%;
+			font-size: 24px;
+			line-height: 36px;
+		}
+
+		&_text {
+			width: 60%;
+			font-size: 24px;
+			line-height: 36px;
+		}
+
+		&_img {
+			width: 300px;
+			margin: 0 10px;
+		}
+	}
+}

src/style/index.scss

@@ -0,0 +1,72 @@
+.index {
+	&_bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: url('../res/cover.jpg') center center;
+		background-repeat: no-repeat;
+		background-size: cover;
+	}
+
+	&_content {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 100%;
+		padding: 0 70px;
+		margin-top: 60px;
+
+		&_box {
+			max-width: 35%;
+		}
+
+		&_slogan {
+			font-size: 100px;
+			font-weight: bold;
+			line-height: 133px;
+			color: #ffffff;
+			text-shadow: 5px 5px 16px #ffffff7f;
+
+			margin-top: 60px;
+			margin-bottom: 80px;
+		}
+
+		&_description {
+			font-size: 36px;
+			font-weight: bold;
+			line-height: 48px;
+			color: #ffffff;
+			text-shadow: 0 0 10px #000000b2
+		}
+
+		&_signupForm {
+			background: #ffffffd0;
+			padding: 20px;
+			border-radius: 16px;
+			margin-top: 200px;
+			width: 450px;
+
+			&_title {
+				font-size: 32px;
+				line-height: 48px;
+				text-align: center;
+				margin-bottom: 40px;
+				color: #0072BC;
+			}
+
+			&_field {
+				width: 100%;
+				border-radius: 8px;
+				border: 1px solid #707070;
+				padding: 10px 15px;
+				font-size: 24px;
+				line-height: 32px;
+				color: #707070;
+				margin-bottom: 20px;
+			}
+		}
+	}
+}

src/style/main.scss

@@ -0,0 +1,8 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+}

webpack.config.js

@@ -10,11 +10,18 @@ module.exports = {
 		libraryTarget: 'var',
 		library: 'ui'
 	},
+	resolve: {
+		extensions: ['.js']
+	},
 	module: {
 		rules: [
 			{
 				test: /\.scss$/,
-				use: ['style-loader', 'css-loader', 'sass-loader']
+				use: [
+					'style-loader',
+					{ loader: 'css-loader', options: { url: false } },
+					'sass-loader'
+				]
 			},
 			{
 				test: /\.js$/,