Adds new doc site (#124)

* Adds base template for new docs site

* Adds Apis to docs

* add some css from rn

* Fix right side sidebar functionality

* Basic docs

* adds old docs

* Cleans up unnecessary files

* Chane links

* Adds docusaurus v2

* Styling fixes

* adds wip and new assets

* adds code image

* Add FAQ link

* Adds analytics

* adds cname

* cleanup blogs

docs/api/QTabWidget.md

@@ -1,3 +0,0 @@
-## Class: QTabWidget
-
-Will be available from NodeGUI v0.1.10 and up

website/.gitignore

@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using Docusaurus 2, a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/blog/2019-05-30-welcome.md

@@ -0,0 +1,12 @@
+---
+id: welcome
+title: Welcome
+author: Atul R
+authorTitle: Maintainer @NodeGui
+authorURL: https://github.com/master-atul
+authorImageURL: https://avatars2.githubusercontent.com/u/4029423?s=460&v=4
+authorTwitter: masteratul94
+tags: [nodegui, hello]
+---
+
+This is the new blog site for NodeGui. This will be updated soon.

website/docs/api/Component.md

@@ -1,4 +1,7 @@
-## Class: Component
+---
+sidebar_label: Component
+title: Component
+---
 
 > Abstract class that is root most base class for all widgets and layouts in the NodeGui World.
 
@@ -10,14 +13,14 @@
 
 To get a clearer picture you can take a look at the Component source code here: `src/lib/core/Component/index.ts`
 
-### Static Methods
+## Static Methods
 
 There are no public static methods for Component.
 
-### Instance Properties
+## Instance Properties
 
 There are no public instance properties for Component.
 
-### Instance Methods
+## Instance Methods
 
 There are no public instance methods for Component.

website/docs/api/EventWidget.md

@@ -1,4 +1,7 @@
-## Class: EventWidget
+---
+sidebar_label: EventWidget
+title: EventWidget
+---
 
 > Abstract class that adds event handling support to all widgets.
 
@@ -29,21 +32,21 @@ view.addEventListener(QWidgetEvents.MouseMove, () => {
 
 EventWidget will contain all methods and properties that are useful to handle events and signals of widgets in the NodeGui world.
 
-### Static Methods
+## Static Methods
 
 EventWidget can access all the static methods defined in [YogaWidget](api/YogaWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 EventWidget can access all the instance properties defined in [YogaWidget](api/YogaWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 EventWidget can access all the instance methods defined in [YogaWidget](api/YogaWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `widget.addEventListener(eventType, callback)`
+### `widget.addEventListener(eventType, callback)`
 
 Adds an event listener to the widget to listen to events that occur on a widget.
 
@@ -51,7 +54,7 @@ Adds an event listener to the widget to listen to events that occur on a widget.
 
 - `callback` (payload?: NativeEvent | any) => void - A callback function to invoke when an event occurs. Usually you receive a nativeEvent or a string as argument.
 
-#### `widget.removeEventListener(eventType, callback?)`
+### `widget.removeEventListener(eventType, callback?)`
 
 Removes the specified event listener from the widget.
 

website/docs/api/FlexLayout.md

@@ -1,4 +1,7 @@
-## Class: FlexLayout
+---
+sidebar_label: FlexLayout
+title: FlexLayout
+---
 
 > Custom layout to help layout child widgets using flex layout.
 
@@ -26,28 +29,28 @@ layout.addWidget(label);
 layout.addWidget(label2);
 ```
 
-### Static Methods
+## Static Methods
 
 FlexLayout can access all the static methods defined in [NodeLayout](api/NodeLayout.md)
 
-### Instance Properties
+## Instance Properties
 
 FlexLayout can access all the instance properties defined in [NodeLayout](api/NodeLayout.md)
 
-### Instance Methods
+## Instance Methods
 
 FlexLayout can access all the instance methods defined in [NodeLayout](api/NodeLayout.md)
 
 Additionally it also has the following instance methods:
 
-#### `layout.addWidget(childWidget, childFlexNode?)`
+### `layout.addWidget(childWidget, childFlexNode?)`
 
 Adds the childWidget to the layout. It calls the native method of custom FlexLayout.
 
 - `childWidget` NodeWidget - child widget that needs to be added to the layout.
 - `childFlexNode` flexNode ref (_Optional_) - flexNode reference of the child widget. You can get this by calling `childWidget.getFlexNode()`.
 
-#### `layout.insertChildBefore(childWidget, beforeChildWidget, childFlexNode?, beforeChildFlexNode?)`
+### `layout.insertChildBefore(childWidget, beforeChildWidget, childFlexNode?, beforeChildFlexNode?)`
 
 Adds the childWidget before another already set childWidget in the layout. It calls the native method of custom FlexLayout.
 
@@ -56,14 +59,14 @@ Adds the childWidget before another already set childWidget in the layout. It ca
 - `childFlexNode` flexNode ref (_Optional_) - flexNode reference of the child widget. You can get this by calling `childWidget.getFlexNode()`.
 - `beforeChildFlexNode` flexNode ref (_Optional_) - flexNode reference of the before child widget. You can get this by calling `beforeChildWidget.getFlexNode()`.
 
-#### `layout.removeWidget(childWidget, childFlexNode?)`
+### `layout.removeWidget(childWidget, childFlexNode?)`
 
 Removes the childWidget from the layout. It calls the native method of custom FlexLayout.
 
 - `childWidget` NodeWidget - child widget that needs to be added to the layout.
 - `childFlexNode` flexNode ref (_Optional_) - flexNode reference of the child widget. You can get this by calling `childWidget.getFlexNode()`.
 
-#### `layout.setFlexNode(flexNode)`
+### `layout.setFlexNode(flexNode)`
 
 A layout doesnt have its own flexNode. This method sets the flex Node to use for calculating position of the child widgets. Hence this should be always equal to the flex node of widget for which this layout is set. This is called internally by `widget.setLayout`.
 

website/docs/api/NodeLayout.md

@@ -1,4 +1,7 @@
-## Class: NodeLayout
+---
+sidebar_label: NodeLayout
+title: NodeLayout
+---
 
 > Abstract class to add functionalities common to all Layout.
 
@@ -31,41 +34,41 @@ addChildToLayout(new GridLayout(), new QWidget());
 
 NodeLayout will list all methods and properties that are common to all layouts in the NodeGui world.
 
-### Static Methods
+## Static Methods
 
 NodeLayout can access all the static methods defined in [Component](api/Component.md)
 
-### Instance Properties
+## Instance Properties
 
 NodeLayout can access all the instance properties defined in [Component](api/Component.md)
 
 Additionally it also has the following instance properties:
 
-#### `layout.type`
+### `layout.type`
 
 This will return the string `layout` for all layouts.
 
-### Instance Methods
+## Instance Methods
 
 NodeLayout can access all the instance methods defined in [Component](api/Component.md)
 
 Additionally it also has the following instance methods:
 
-#### `layout.addWidget(childWidget, ...args)`
+### `layout.addWidget(childWidget, ...args)`
 
 This is an abstract method in NodeLayout class. All Layouts inheriting from NodeLayout should implement this method.
 
 - `childWidget` NodeWidget - Any widget in the NodeGui world.
 - `...args` any[] - Additional params as required by the layout.
 
-#### `layout.activate()`
+### `layout.activate()`
 
 Redoes the layout for parent widget of this layout if necessary. Returns true if the layout was redone.
 
-#### `layout.invalidate()`
+### `layout.invalidate()`
 
 Invalidates any cached information in this layout.
 
-#### `layout.update()`
+### `layout.update()`
 
 Updates the layout for parent widget of this layout. You should generally not need to call this because it is automatically called at the most appropriate times.

website/docs/api/NodeWidget.md

@@ -1,4 +1,7 @@
-## Class: NodeWidget
+---
+sidebar_label: NodeWidget
+title: NodeWidget
+---
 
 > Abstract class to add functionalities common to all Widgets.
 
@@ -30,127 +33,127 @@ showWidget(new QRadioButton());
 
 NodeWidget will list all methods and properties that are common to all widgets in the NodeGui world.
 
-### Static Methods
+## Static Methods
 
 NodeWidget can access all the static methods defined in [EventWidget](api/EventWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 NodeWidget can access all the instance properties defined in [EventWidget](api/EventWidget.md)
 
 Additionally it also has the following instance properties:
 
-#### `widget.layout`
+### `widget.layout`
 
 A `NodeLayout` representing current layout that is set on the widget.
 
-#### `widget.type`
+### `widget.type`
 
 This will return the string `widget` for all widgets.
 
-### Instance Methods
+## Instance Methods
 
 NodeWidget can access all the instance methods defined in [EventWidget](api/EventWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `widget.show()`
+### `widget.show()`
 
 Shows the widget and its children. It calls the native method [QWidget: show](https://doc.qt.io/qt-5/qwidget.html#show).
 
-#### `widget.resize(width, height)`
+### `widget.resize(width, height)`
 
 Resizes the widget. It calls the native method [QWidget: resize](https://doc.qt.io/qt-5/qwidget.html#resize-1).
 
 - `width` number - Pixels.
 - `height` number - Pixels.
 
-#### `widget.close()`
+### `widget.close()`
 
 Closes this widget. It calls the native method [QWidget: close](https://doc.qt.io/qt-5/qwidget.html#close).
 Returns true if the widget was closed; otherwise returns false.
 
-#### `widget.setLayout(layout)`
+### `widget.setLayout(layout)`
 
 Sets the layout manager for this widget to layout. It calls the native method [QWidget: setLayout](https://doc.qt.io/qt-5/qwidget.html#setLayout).
 
 - `layout` NodeLayout - Any layout that inherits from NodeLayout class.
 
-#### `widget.setStyleSheet(styleSheet)`
+### `widget.setStyleSheet(styleSheet)`
 
 Sets the property that holds the widget's style sheet. It calls the native method [QWidget: styleSheet](https://doc.qt.io/qt-5/qwidget.html#styleSheet-prop).
 
 - `styleSheet` string - String which holds the widget's style sheet. Make sure you create this string using `StyleSheet.create()`
 
-#### `widget.setCursor(cursor)`
+### `widget.setCursor(cursor)`
 
 Sets the window mouse cursor. It calls the native method [QWidget: setCursor](https://doc.qt.io/qt-5/qwidget.html#cursor-prop).
 
 - `cursor` CursorShape - Specifies current cursor for the window [CursorShape is an enum from Qt](api/QtEnums.md)
 
-#### `widget.setWindowIcon(icon)`
+### `widget.setWindowIcon(icon)`
 
 Sets the window icon. It calls the native method [QWidget: setWindowIcon](https://doc.qt.io/qt-5/qwidget.html#windowIcon-prop).
 
 - `icon` QIcon - Specifies icon for the window.
 
-#### `widget.setWindowState(state)`
+### `widget.setWindowState(state)`
 
 Sets the window state. It calls the native method [QWidget: setWindowState](https://doc.qt.io/qt-5/qwidget.html#setWindowState).
 
 - `state` WindowState - Specifies current state for the window [WindowState is an enum from Qt](api/QtEnums.md)
 
-#### `widget.setWindowTitle(title)`
+### `widget.setWindowTitle(title)`
 
 Sets the window title property. It calls the native method [QWidget: setWindowTitle](https://doc.qt.io/qt-5/qwidget.html#windowTitle-prop).
 
 - `title` string - String which holds the windows title.
 
-#### `widget.styleSheet()`
+### `widget.styleSheet()`
 
 Gets the property that holds the widget's style sheet. It calls the native method [QWidget: styleSheet](https://doc.qt.io/qt-5/qwidget.html#styleSheet-prop).
 
-#### `widget.hide()`
+### `widget.hide()`
 
 Hides the widget and its children. It calls the native method [QWidget: hide](https://doc.qt.io/qt-5/qwidget.html#hide).
 
-#### `widget.move(x, y)`
+### `widget.move(x, y)`
 
 Sets the screen position of the widget. It calls the native method [QWidget: move](https://doc.qt.io/qt-5/qwidget.html#move-1).
 
 - `x` number - Pixels.
 - `y` number - Pixels.
 
-#### `widget.setObjectName(objectName)`
+### `widget.setObjectName(objectName)`
 
 Sets the object name of the widget in Qt. It calls the native method [QObject: setObjectName](https://doc.qt.io/qt-5/qobject.html#objectName-prop). Object name can be analogous to `id` of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world.
 
 - `objectName` string - String which holds the widget's object name.
 
-#### `widget.objectName()`
+### `widget.objectName()`
 
 Gets the property that holds the widget's object name. It calls the native method [QObject: setObjectName](https://doc.qt.io/qt-5/qobject.html#objectName-prop).
 
-#### `widget.setMouseTracking(isMouseTracked)`
+### `widget.setMouseTracking(isMouseTracked)`
 
 Sets the property that tells whether mouseTracking is enabled for the widget. It calls the native method [QWidget: mouseTracking](https://doc.qt.io/qt-5/qwidget.html#mouseTracking-prop).
 
 - `isMouseTracked` boolean - Set it to true to enable mouse tracking.
 
-#### `widget.setEnabled(enabled)`
+### `widget.setEnabled(enabled)`
 
 Sets the property that tells whether the widget is enabled. It calls the native method [QWidget: enabled](https://doc.qt.io/qt-5/qwidget.html#enabled-prop). In general an enabled widget handles keyboard and mouse events; a disabled widget does not.
 
 - `enabled` boolean - Set it to true to enable the widget.
 
-#### `widget.setFixedSize(width, height)`
+### `widget.setFixedSize(width, height)`
 
 Sets both the minimum and maximum sizes of the widget. It calls the native method [QWidget: setFixedSize](https://doc.qt.io/qt-5/qwidget.html#setFixedSize).
 
 - `width` number - Pixels.
 - `height` number - Pixels.
 
-#### `widget.setGeometry(x, y, width, height)`
+### `widget.setGeometry(x, y, width, height)`
 
 Sets the screen position as well as size of the widget. It calls the native method [QWidget: setGeometry](https://doc.qt.io/qt-5/qwidget.html#setGeometry-1).
 
@@ -159,48 +162,48 @@ Sets the screen position as well as size of the widget. It calls the native meth
 - `width` number - Pixels.
 - `height` number - Pixels.
 
-#### `widget.setMaximumSize(width, height)`
+### `widget.setMaximumSize(width, height)`
 
 Sets the maximum size of the widget. It calls the native method [QWidget: setMaximumSize](https://doc.qt.io/qt-5/qwidget.html#setMaximumSize-1).
 
 - `width` number - Pixels.
 - `height` number - Pixels.
 
-#### `widget.setMinimumSize(width, height)`
+### `widget.setMinimumSize(width, height)`
 
 Sets the minimum size of the widget. It calls the native method [QWidget: setMinimumSize](https://doc.qt.io/qt-5/qwidget.html#setMinimumSize-1).
 
 - `width` number - Pixels.
 - `height` number - Pixels.
 
-#### `widget.repaint()`
+### `widget.repaint()`
 
 Repaints the widget. It calls the native method [QWidget: repaint](https://doc.qt.io/qt-5/qwidget.html#repaint).
 
-#### `widget.update()`
+### `widget.update()`
 
 Updates the widget. It calls the native method [QWidget: update](https://doc.qt.io/qt-5/qwidget.html#update).
 
-#### `widget.pos()`
+### `widget.pos()`
 
 returns the current widget position. It calls the native method [QWidget: pos](https://doc.qt.io/qt-5/qwidget.html#pos-prop). The returned size object contains x and y coordinates in pixels.
 
-#### `widget.size()`
+### `widget.size()`
 
 returns the current widget size. It calls the native method [QWidget: size](https://doc.qt.io/qt-5/qwidget.html#size-prop). The returned size object contains width and height in pixels.
 
-#### `widget.updateGeometry()`
+### `widget.updateGeometry()`
 
 Notifies the layout system that this widget has changed and may need to change geometry.
 
-#### `widget.setAttribute(attributeName, switchOn)`
+### `widget.setAttribute(attributeName, switchOn)`
 
 Sets the attribute attribute on this widget if on is true; otherwise clears the attribute. It calls the native method [QWidget: setAttribute](https://doc.qt.io/qt-5/qwidget.html#setAttribute).
 
 - `attributeName` WidgetAttribute - Enum from WidgetAttribute.
 - `switchOn` - set it to true if you want to enable an attribute.
 
-#### `widget.testAttribute(attributeName)`
+### `widget.testAttribute(attributeName)`
 
 Returns true if attribute attribute is set on this widget; otherwise returns false. It calls the native method [QWidget: testAttribute](https://doc.qt.io/qt-5/qwidget.html#testAttribute).
 

website/docs/api/QAbstractScrollArea.md

@@ -1,4 +1,7 @@
-## Class: QAbstractScrollArea
+---
+sidebar_label: QAbstractScrollArea
+title: QAbstractScrollArea
+---
 
 > Abstract class to add functionalities common to all scrollarea based widgets.
 
@@ -10,26 +13,26 @@
 
 QAbstractScrollArea will list all methods and properties that are common to all scrollable widgets in the NodeGui world.
 
-### Static Methods
+## Static Methods
 
 QAbstractScrollArea can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QAbstractScrollArea can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QAbstractScrollArea can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `widget.setViewport(widget)`
+### `widget.setViewport(widget)`
 
 Sets the viewport to be the given widget. It calls the native method [QAbstractScrollArea: setViewport](https://doc.qt.io/qt-5/qabstractscrollarea.html#setViewport).
 
 - `widget` NodeWidget.
 
-#### `widget.viewport()`
+### `widget.viewport()`
 
 Returns the viewport widget (NodeWidget). It calls the native method [QAbstractScrollArea: viewport](https://doc.qt.io/qt-5/qabstractscrollarea.html#viewport).

website/docs/api/QAbstractSlider.md

@@ -1,4 +1,7 @@
-## Class: QAbstractSlider
+---
+sidebar_label: QAbstractSlider
+title: QAbstractSlider
+---
 
 > Abstract class to add functionalities common to all slider based widgets.
 
@@ -10,58 +13,58 @@
 
 QAbstractSlider will list all methods and properties that are common to all slider widgets in the NodeGui world.
 
-### Static Methods
+## Static Methods
 
 QAbstractSlider can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QAbstractSlider can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QAbstractSlider can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `widget.setSingleStep(step)`
+### `widget.setSingleStep(step)`
 
 Sets the step value for user arrow key slider interaction. It calls the native method [QAbstractSlider: setSingleStep](https://doc.qt.io/qt-5/qabstractslider.html#singleStep-prop).
 
 - `step` number - Specified single step value.
 
-#### `widget.setMaximum(maximum)`
+### `widget.setMaximum(maximum)`
 
 Sets the maximum value for slider. It calls the native method [QAbstractSlider: setMaximum](https://doc.qt.io/qt-5/qabstractslider.html#maximum-prop).
 
 - `maximum` number - Specified maximum slider value.
 
-#### `widget.setMinimum(minimum)`
+### `widget.setMinimum(minimum)`
 
 Sets the minimum value for slider. It calls the native method [QAbstractSlider: setMinimum](https://doc.qt.io/qt-5/qabstractslider.html#minimum-prop).
 
 - `minimum` number - Specified minimum slider value.
 
-#### `widget.setValue(value)`
+### `widget.setValue(value)`
 
 Sets the current value for slider. It calls the native method [QAbstractSlider: setValue](https://doc.qt.io/qt-5/qabstractslider.html#value-prop).
 
 - `value` number - Specified current slider value.
 
-#### `widget.setOrientation(orientation)`
+### `widget.setOrientation(orientation)`
 
 Sets the current orientation for slider. It calls the native method [QAbstractSlider: setOrientation](https://doc.qt.io/qt-5/qabstractslider.html#orientation-prop).
 
 - `orientation` Orientation - Specifies visual orientation of the slider. [Orientation is an enum from Qt](api/QtEnums.md)
 
-#### `slider.maximum()`
+### `slider.maximum()`
 
 Returns the maximum value (Number) of the slider. It calls the native method [QAbstractSlider: maximum](https://doc.qt.io/qt-5/qabstractslider.html#maximum-prop).
 
-#### `slider.minimum()`
+### `slider.minimum()`
 
 Returns the minimum value (Number) of the slider. It calls the native method [QAbstractSlider: minimum](https://doc.qt.io/qt-5/qabstractslider.html#minimum-prop).
 
-#### `slider.value()`
+### `slider.value()`
 
-Returns the current value (Number) of the slider. It calls the native method [QAbstractSlider: value](https://doc.qt.io/qt-5/qabstractslider.html#value-prop).
+Returns the current value (Number) of the slider. It calls the native method [QAbstractSlider: value](https://doc.qt.io/qt-5/qabstractslider.html#value-prop).

website/docs/api/QApplication.md

@@ -1,4 +1,7 @@
-## Class: QApplication
+---
+sidebar_label: QApplication
+title: QApplication
+---
 
 > QApplication is the root object for the entire application. It manages app level settings.
 
@@ -10,48 +13,48 @@ The QApplication class manages the GUI application's control flow and main setti
 
 ### Example
 
-```javascript
+```js
 const { QApplication } = require("@nodegui/nodegui");
 
 const qApp = QApplication.instance();
 qApp.quit();
 ```
 
-### Static Methods
+## Static Methods
 
 QApplication can access all the static methods defined in [Component](api/Component.md). Additionally it also has the following static methods.
 
-#### `QApplication.instance()`
+### `QApplication.instance()`
 
 Returns the already initialised QApplication instance. It calls the native method [QApplication: instance](https://doc.qt.io/qt-5/qcoreapplication.html#instance).
 
-#### `QApplication.clipboard()`
+### `QApplication.clipboard()`
 
 Returns the object for interacting with the clipboard. It calls the native method [QApplication: clipboard](https://doc.qt.io/qt-5/qguiapplication.html#clipboard). See QClipboard.
 
-### Instance Properties
+## Instance Properties
 
 QApplication can access all the instance properties defined in [Component](api/Component.md)
 
-### Instance Methods
+## Instance Methods
 
 QApplication can access all the instance methods defined in [Component](api/Component.md). Additionally it also has the following instance methods:
 
-#### `qApp.quit()`
+### `qApp.quit()`
 
 Quits the entire app. It calls the native method [QApplication: quit](https://doc.qt.io/qt-5/qcoreapplication.html#quit).
 
-#### `qApp.exit(returnCode)`
+### `qApp.exit(returnCode)`
 
 Tells the application to exit with a return code. It calls the native method [QApplication: exit](https://doc.qt.io/qt-5/qcoreapplication.html#exit).
 
 - `returnCode` number - The exit code while quitting the app.
 
-#### `qApp.processEvents()`
+### `qApp.processEvents()`
 
 Processes all pending events for the calling thread . It calls the native method [QApplication: processEvents](https://doc.qt.io/qt-5/qcoreapplication.html#processEvents).
 
-#### `qApp.exec()`
+### `qApp.exec()`
 
 > We will never call this method in NodeGui, since Qode will execute this function for us. It exists for experiments only.
 

website/docs/api/QCheckBox.md

@@ -1,4 +1,7 @@
-## Class: QCheckBox
+---
+sidebar_label: QCheckBox
+title: QCheckBox
+---
 
 > Create and control checkbox.
 
@@ -21,31 +24,31 @@ checkbox.setText("Hello");
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QCheckBox can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QCheckBox can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QCheckBox can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `checkbox.setText(text)`
+### `checkbox.setText(text)`
 
 Sets the given text to the checkbox.
 
 - `text` string
 
-#### `checkbox.isChecked()`
+### `checkbox.isChecked()`
 
 returns whether the checkbox is checked or not. It calls the native method [QAbstractButton: isChecked](https://doc.qt.io/qt-5/qabstractbutton.html#checked-prop).
 
-#### `checkbox.setChecked(check)`
+### `checkbox.setChecked(check)`
 
 This property holds whether the button is checked. It calls the native method [QAbstractButton: setChecked](https://doc.qt.io/qt-5/qabstractbutton.html#checked-prop).
 

website/docs/api/QClipboard.md

@@ -1,4 +1,7 @@
-## Class: QClipboard
+---
+sidebar_label: QClipboard
+title: QClipboard
+---
 
 > The QClipboard class provides access to the window system clipboard.
 
@@ -19,15 +22,15 @@ const clipboard = QApplication.clipboard();
 const text = clipboard.text(QClipboardMode.Clipboard);
 ```
 
-### Static Methods
+## Static Methods
 
 QClipboard can access all the static methods defined in [Component](api/Component.md)
 
-### Instance Properties
+## Instance Properties
 
 QClipboard can access all the instance properties defined in [Component](api/Component.md)
 
-### Instance Methods
+## Instance Methods
 
 QClipboard can access all the instance methods defined in [Component](api/Component.md). Additionally it has:
 

website/docs/api/QCursor.md

@@ -1,4 +1,7 @@
-## Class: QCursor
+---
+sidebar_label: QCursor
+title: QCursor
+---
 
 > The QCursor class provides scalable icons in different modes and states.
 

website/docs/api/QDial.md

@@ -1,4 +1,7 @@
-## Class: QDial
+---
+sidebar_label: QDial
+title: QDial
+---
 
 > Create and control dial slider widgets.
 
@@ -20,48 +23,48 @@ const dial = new QDial();
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QDial can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QDial can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QDial can access all the instance methods defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance methods:
 
-#### `dial.setNotchesVisible(visible)`
+### `dial.setNotchesVisible(visible)`
 
 Sets the visibility of notches drawn around the dial. It calls the native method [QDial: setNotchesVisible](https://doc.qt.io/qt-5/qdial.html#notchTarget-prop).
 
 - `visible` boolean - Set the value as current notch visibility.
 
-#### `dial.setWrapping(on)`
+### `dial.setWrapping(on)`
 
 Sets the ability to wrap arrow around the dial instead of limiting it to upper part of the dial. It calls the native method [QDial: setWrapping](https://doc.qt.io/qt-5/qdial.html#wrapping-prop).
 
 - `on` boolean - Set the value as current wrapping setting.
 
-#### `dial.setNotchTarget(target)`
+### `dial.setNotchTarget(target)`
 
 Sets the number of pixels between dial notches. It calls the native method [QDial: setNotchTarget](https://doc.qt.io/qt-5/qdial.html#notchTarget-prop).
 
 - `target` number - Specifies number of pixels between notches.
 
-#### `dial.notchTarget()`
+### `dial.notchTarget()`
 
 Returns the current number of pixels between dial notches. It calls the native method [QDial: notchTarget](https://doc.qt.io/qt-5/qdial.html#notchTarget-prop).
 
-#### `dial.notchesVisible()`
+### `dial.notchesVisible()`
 
 Returns the visibility status (Boolean) of dial notches. It calls the native method [QDial: notchesVisible](https://doc.qt.io/qt-5/qdial.html#notchesVisible-prop).
 
-#### `dial.notchesVisible()`
+### `dial.notchesVisible()`
 
 Returns the visibility status (Boolean) of dial notches. It calls the native method [QDial: notchesVisible](https://doc.qt.io/qt-5/qdial.html#notchesVisible-prop).
 
-#### `dial.wrapping()`
+### `dial.wrapping()`
 
-Returns the current wrapping (Boolean) state of the dial. It calls the native method [QDial: wrapping](https://doc.qt.io/qt-5/qdial.html#wrapping-prop).
+Returns the current wrapping (Boolean) state of the dial. It calls the native method [QDial: wrapping](https://doc.qt.io/qt-5/qdial.html#wrapping-prop).

website/docs/api/QGridLayout.md

@@ -0,0 +1,54 @@
+---
+sidebar_label: QGridLayout
+title: QGridLayout
+---
+
+> The QGridLayout class lays out widgets in a grid.
+
+**This class is a JS wrapper around Qt's [QGridLayout](https://doc.qt.io/qt-5/qgridlayout.html)**
+
+**QGridLayout inherits from [NodeLayout](api/NodeLayout.md)**
+
+### Example
+
+```javascript
+const { QGridLayout, QWidget, QLabel } = require("@nodegui/nodegui");
+
+const view = new QWidget();
+const layout = new QGridLayout();
+view.setLayout(layout);
+
+const label = new QLabel();
+label.setText("label1");
+const label2 = new QLabel();
+label2.setText("label2");
+
+layout.addWidget(label);
+layout.addWidget(label2);
+```
+
+## Static Methods
+
+QGridLayout can access all the static methods defined in [NodeLayout](api/NodeLayout.md)
+
+## Instance Properties
+
+QGridLayout can access all the instance properties defined in [NodeLayout](api/NodeLayout.md)
+
+## Instance Methods
+
+QGridLayout can access all the instance methods defined in [NodeLayout](api/NodeLayout.md)
+
+Additionally it also has the following instance methods:
+
+### `layout.addWidget(childWidget)`
+
+Adds the childWidget to the layout. It calls the native method QGridLayout [QGridLayout: addWidget](https://doc.qt.io/qt-5/qwidget.html#show).
+
+- `childWidget` NodeWidget - child widget that needs to be added to the layout.
+
+### `layout.removeWidget(childWidget)`
+
+Removes the childWidget from the layout. It calls the native method of custom QGridLayout. [QGridLayout: removeWidget](https://doc.qt.io/qt-5/qlayout.html#removeWidget).
+
+- `childWidget` NodeWidget - child widget that needs to be added to the layout.

website/docs/api/QIcon.md

@@ -1,4 +1,7 @@
-## Class: QIcon
+---
+sidebar_label: QIcon
+title: QIcon
+---
 
 > The QIcon class provides scalable icons in different modes and states.
 
@@ -19,20 +22,20 @@ const icon = new QIcon(imageUrl);
 
 - `imageUrl` string (_optional_). Absolute path of the image that needs to be loaded in the memory.
 
-### Static Methods
+## Static Methods
 
 QIcon can access all the static methods defined in [Component](api/Component.md)
 
-### Instance Properties
+## Instance Properties
 
 QIcon can access all the instance properties defined in [Component](api/Component.md)
 
-### Instance Methods
+## Instance Methods
 
 QIcon can access all the instance methods defined in [Component](api/Component.md)
 Additionally it also has the following instance methods:
 
-#### `icon.pixmap(width, height, mode?, state?)` (v0.1.10 & up)
+### `icon.pixmap(width, height, mode?, state?)` (v0.1.10 & up)
 
 Returns a pixmap with the requested size, mode, and state, generating one if necessary. The pixmap might be smaller than requested, but never larger.
 . It calls the native method [QIcon: pixmap](https://doc.qt.io/qt-5/qicon.html#pixmap-3).

website/docs/api/QLabel.md

@@ -1,4 +1,7 @@
-## Class: QLabel
+---
+sidebar_label: QLabel
+title: QLabel
+---
 
 > Create and control text.
 
@@ -21,37 +24,37 @@ label.setText("Hello");
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QLabel can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QLabel can access all the instance properties defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance properties:
 
-#### `label.pixmap`
+### `label.pixmap`
 
 The pixmap currently set on this label.
 
-#### `label.text`
+### `label.text`
 
 the current text set on the label.
 
-### Instance Methods
+## Instance Methods
 
 QLabel can access all the instance methods defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance methods:
 
-#### `label.setText(text)`
+### `label.setText(text)`
 
 Sets the given text to the label.
 
 - `text` string
 
-#### `label.setWordWrap(on)`
+### `label.setWordWrap(on)`
 
 - `on` boolean - If true it sets wordwrap on the label
 
-#### `label.setPixmap(pixMap)`
+### `label.setPixmap(pixMap)`
 
 Images in the form of a pixmap can be set as the label content
 

website/docs/api/QLineEdit.md

@@ -1,4 +1,7 @@
-## Class: QLineEdit
+---
+sidebar_label: QLineEdit
+title: QLineEdit
+---
 
 > Create and control editable text field.
 
@@ -20,44 +23,44 @@ const lineEdit = new QLineEdit();
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QLineEdit can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QLineEdit can access all the instance properties defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance properties:
 
-#### `lineEdit.placeholderText`
+### `lineEdit.placeholderText`
 
 The placeholder text set on the lineEdit.
 
-### Instance Methods
+## Instance Methods
 
 QLineEdit can access all the instance methods defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance methods:
 
-#### `lineEdit.setText(text)`
+### `lineEdit.setText(text)`
 
 Sets the given text to the lineEdit.
 
 - `text` string
 
-#### `lineEdit.setPlaceholderText(text)`
+### `lineEdit.setPlaceholderText(text)`
 
 Sets the given text to the lineEdit's placeholder.
 
 - `text` string
 
-#### `lineEdit.text()`
+### `lineEdit.text()`
 
 Returns the currently set text from native lineEdit widget.
 
-#### `lineEdit.setReadOnly(isReadOnly)`
+### `lineEdit.setReadOnly(isReadOnly)`
 
 Sets the lineEdit to be read only. lineEdit property holds whether the line edit is read only.
 
 - `isReadOnly` boolean
 
-#### `lineEdit.clear()`
+### `lineEdit.clear()`
 
 Clears the lineEdit.

website/docs/api/QMainWindow.md

@@ -1,4 +1,7 @@
-## Class: QMainWindow
+---
+sidebar_label: QMainWindow
+title: QMainWindow
+---
 
 > Create and control windows.
 
@@ -26,31 +29,31 @@ global.win = win; // prevent's gc of win
 QMainWindow needs to have a central widget set before other widgets can be added as a children/nested children.
 Once a central widget is set you can add children/layout to the central widget.
 
-### Static Methods
+## Static Methods
 
 QMainWindow can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QMainWindow can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance properties:
 
-#### `win.layout`
+### `win.layout`
 
 A `NodeLayout` representing current layout that is set on the window. If a centralWidget is set then the layout of central widget is returned.
 
-#### `win.centralWidget`
+### `win.centralWidget`
 
 A `NodeWidget` representing currently set central widget on the window.
 
-### Instance Methods
+## Instance Methods
 
 QMainWindow can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `win.setCentralWidget(widget)`
+### `win.setCentralWidget(widget)`
 
 Sets the given widget to be the main window's central widget.
 

website/docs/api/QPixmap.md

@@ -1,4 +1,7 @@
-## Class: QPixmap
+---
+sidebar_label: QPixmap
+title: QPixmap
+---
 
 > The QPixmap class helps hold an image in the form of off-screen image representation.
 
@@ -21,21 +24,21 @@ const pixMap = new QPixmap(imageUrl);
 
 - `imageUrl` string (_optional_). Absolute path of the image that needs to be loaded in the memory.
 
-### Static Methods
+## Static Methods
 
 QPixmap can access all the static methods defined in [Component](api/Component.md)
 
-### Instance Properties
+## Instance Properties
 
 QPixmap can access all the instance properties defined in [Component](api/Component.md)
 
-### Instance Methods
+## Instance Methods
 
 QPixmap can access all the instance methods defined in [Component](api/Component.md)
 
 Additionally it also has the following instance methods:
 
-#### `pixMap.load(imageUrl)`
+### `pixMap.load(imageUrl)`
 
 loads an image from the url into memory as a Pixmap.
 returns true if load was successful otherwise returns false.
@@ -46,13 +49,11 @@ returns true if load was successful otherwise returns false.
 
 Saves the pixmap to the file with the given fileName using the specified image file format and quality factor. Returns `true` if successful; otherwise returns false.
 
-The quality factor must be in the range `[0,100]` or -1. Specify 0 to obtain small compressed files, 100 for large uncompressed files, and -1 to use the default settings.
-
 If format is 0, an image format will be chosen from fileName's suffix.
 
 See also [Reading and Writing Image Files.](https://doc.qt.io/qt-5/qpixmap.html#reading-and-writing-image-files).
 
-- `fileName` string.  
+- `fileName` string.
 - `format` string. (_optional_).
 
 #### `pixMap.scaled(width, height, aspectRatioMode?)`

website/docs/api/QPlainTextEdit.md

@@ -1,4 +1,7 @@
-## Class: QPlainTextEdit
+---
+sidebar_label: QPlainTextEdit
+title: QPlainTextEdit
+---
 
 > Used to edit and display plain text.
 
@@ -20,62 +23,62 @@ const plainTextEdit = new QPlainTextEdit();
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QPlainTextEdit can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QPlainTextEdit can access all the instance properties defined in [NodeWidget](api/NodeWidget.md).
 
-#### `plainTextEdit.placeholderText`
+### `plainTextEdit.placeholderText`
 
 The placeholder text set on the plainTextEdit.
 
-### Instance Methods
+## Instance Methods
 
 QPlainTextEdit can access all the instance methods defined in [NodeWidget](api/NodeWidget.md).
 
-#### `plainTextEdit.setPlainText(text)`
+### `plainTextEdit.setPlainText(text)`
 
 Sets the given text to the plainTextEdit. It calls the native method [QPlainTextEdit: setPlainText](https://doc.qt.io/qt-5/qplaintextedit.html#setPlainText).
 
 - `text` string
 
-#### `plainTextEdit.setPlaceholderText(text)`
+### `plainTextEdit.setPlaceholderText(text)`
 
 Sets the given text to the plainTextEdit's placeholder.
 
 - `text` string
 
-#### `plainTextEdit.toPlainText()`
+### `plainTextEdit.toPlainText()`
 
 Returns the text of the text edit as plain text. [QPlainTextEdit: toPlainText](https://doc.qt.io/qt-5/qplaintextedit.html#toPlainText).
 
-#### `plainTextEdit.setReadOnly(isReadOnly)`
+### `plainTextEdit.setReadOnly(isReadOnly)`
 
 Sets the plainTextEdit to be read only. [QPlainTextEdit: isReadOnly](https://doc.qt.io/qt-5/qplaintextedit.html#readOnly-prop).
 
-#### `plainTextEdit.clear()`
+### `plainTextEdit.clear()`
 
 Deletes all the text in the text edit.[QPlainTextEdit: clear](https://doc.qt.io/qt-5/qplaintextedit.html#clear).
 
-#### `plainTextEdit.setWordWrapMode(mode)`
+### `plainTextEdit.setWordWrapMode(mode)`
 
 This property holds the mode QPlainTextEdit will use when wrapping text by words.[QPlainTextEdit: setWordWrapMode](https://doc.qt.io/qt-5/qplaintextedit.html#wordWrapMode-prop).
 
 - mode: QTextOptionWrapMode
 
-#### `plainTextEdit.wordWrapMode()`
+### `plainTextEdit.wordWrapMode()`
 
 returns word wrap mode. [QPlainTextEdit: wordWrapMode](https://doc.qt.io/qt-5/qplaintextedit.html#wordWrapMode-prop).
 
-#### `plainTextEdit.setLineWrapMode(mode)`
+### `plainTextEdit.setLineWrapMode(mode)`
 
 This property holds the line wrap mode. [QPlainTextEdit: setLineWrapMode](https://doc.qt.io/qt-5/qplaintextedit.html#lineWrapMode-prop).
 
 - mode: LineWrapMode
 
-#### `plainTextEdit.lineWrapMode()`
+### `plainTextEdit.lineWrapMode()`
 
 returns line wrap mode. [QPlainTextEdit: setLineWrapMode](https://doc.qt.io/qt-5/qplaintextedit.html#lineWrapMode-prop).

website/docs/api/QProgressBar.md

@@ -1,4 +1,7 @@
-## Class: QProgressBar
+---
+sidebar_label: QProgressBar
+title: QProgressBar
+---
 
 > Create and control progress bar widgets.
 
@@ -20,42 +23,42 @@ const progressBar = new QProgressBar();
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QProgressBar can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QProgressBar can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QProgressBar can access all the instance methods defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance methods:
 
-#### `progressBar.setValue(value)`
+### `progressBar.setValue(value)`
 
 Sets the current value of the progressBar. It calls the native method [QProgressBar: setValue](https://doc.qt.io/qt-5/qprogressbar.html#value-prop).
 
 - `value` number - Set the value as current value
 
-#### `progressBar.setMaximum(max)`
+### `progressBar.setMaximum(max)`
 
 Sets the max value of the progressBar. It calls the native method [QProgressBar: setMaximum](https://doc.qt.io/qt-5/qprogressbar.html#maximum-prop).
 
 - `max` number - Set the value as max value of the progress bar.
 
-#### `progressBar.setMinimum(min)`
+### `progressBar.setMinimum(min)`
 
 Sets the min value of the progressBar. It calls the native method [QProgressBar: setMinimum](https://doc.qt.io/qt-5/qprogressbar.html#minimum-prop).
 
 - `min` number - Set the value as min value of the progress bar.
 
-#### `progressBar.setOrientation(orientation)`
+### `progressBar.setOrientation(orientation)`
 
 Sets the orientation of the progressBar. It calls the native method [QProgressBar: setOrientation](https://doc.qt.io/qt-5/qprogressbar.html#orientation-prop).
 
 - `orientation` Orientation - Specifies visual orientation of the progress bar. [Orientation is an enum from Qt](api/QtEnums.md)
 
-#### `progressBar.value()`
+### `progressBar.value()`
 
 Returns the current value (Number) of the progressBar. It calls the native method [QProgressBar: value](https://doc.qt.io/qt-5/qprogressbar.html#value-prop).

website/docs/api/QPushButton.md

@@ -1,4 +1,7 @@
-## Class: QPushButton
+---
+sidebar_label: QPushButton
+title: QPushButton
+---
 
 > Create and control buttons.
 
@@ -21,34 +24,34 @@ button.setText("Hello");
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QPushButton can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QPushButton can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QPushButton can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `button.setText(text)`
+### `button.setText(text)`
 
 Sets the given text to the button.
 
 - `text` string
 
-#### `button.setFlat(isFlat)`
+### `button.setFlat(isFlat)`
 
 Sets whether the button border is raised.
 
 - `isFlat` boolean
 
-#### `button.setIcon(icon)`
+### `button.setIcon(icon)`
 
 Sets an icon in the button.
 
-- `icon` QIcon
+- `icon` QIcon

website/docs/api/QRadioButton.md

@@ -1,4 +1,7 @@
-## Class: QRadioButton
+---
+sidebar_label: QRadioButton
+title: QRadioButton
+---
 
 > Create and control radio button.
 
@@ -21,21 +24,21 @@ radioButton.setText("Hello");
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QRadioButton can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QRadioButton can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QRadioButton can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)
 
 Additionally it also has the following instance methods:
 
-#### `radioButton.setText(text)`
+### `radioButton.setText(text)`
 
 Sets the given text to the radioButton.
 

website/docs/api/QScrollArea.md

@@ -1,4 +1,7 @@
-## Class: QScrollArea
+---
+sidebar_label: QScrollArea
+title: QScrollArea
+---
 
 > A `QScrollArea` provides a scrolling view onto another widget.
 
@@ -27,19 +30,19 @@ scrollArea.setWidget(imageLabel);
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QScrollArea can access all the static methods defined in [QAbstractScrollArea](api/QAbstractScrollArea.md)
 
-### Instance Properties
+## Instance Properties
 
 QScrollArea can access all the instance properties defined in [QAbstractScrollArea](api/QAbstractScrollArea.md)
 
-### Instance Methods
+## Instance Methods
 
 QScrollArea can access all the instance methods defined in [QAbstractScrollArea](api/QAbstractScrollArea.md). Additionally it also has the following instance methods:
 
-#### `scrollArea.setWidget(widget)`
+### `scrollArea.setWidget(widget)`
 
 Sets the scroll area's widget. It calls the native method [QScrollArea: setWidget](https://doc.qt.io/qt-5/qscrollarea.html#setWidget).
 

website/docs/api/QSpinBox.md

@@ -1,4 +1,7 @@
-## Class: QSpinBox
+---
+sidebar_label: QSpinBox
+title: QSpinBox
+---
 
 > Create and control spin box widgets.
 
@@ -20,61 +23,60 @@ const spinBox = new QSpinBox();
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QSpinBox can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QSpinBox can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QSpinBox can access all the instance methods defined in [NodeWidget](api/NodeWidget.md). Additionally it also has the following instance methods:
 
-#### `spinBox.setValue(val)`
+### `spinBox.setValue(val)`
 
 Sets the current value of the spinBox. It calls the native method [QSpinBox: setValue](https://doc.qt.io/qt-5/qspinbox.html#value-prop).
 
 - `val` number - Set the value as current value
 
-#### `spinBox.setRange(minimum, maximum)`
+### `spinBox.setRange(minimum, maximum)`
 
 Sets the min/max value of the spinBox. It calls the native method [QSpinBox: setRange](https://doc.qt.io/qt-5/qspinbox.html#setRange).
 
 - `max` number - Set the value as max value of the progress bar.
 
-#### `spinBox.setPrefix(prefix)`
+### `spinBox.setPrefix(prefix)`
 
 Sets the prefix of the spinBox. It calls the native method [QSpinBox: setPrefix](https://doc.qt.io/qt-5/qspinbox.html#prefix-prop).
 
 - `prefix` string - Specifies prefix content shows before the spinBox value. [Prefix is an enum from Qt](api/QtEnums.md)
 
-#### `spinBox.setSuffix(suffix)`
+### `spinBox.setSuffix(suffix)`
 
 Sets the suffix of the spinBox. It calls the native method [QSpinBox: setSuffix](https://doc.qt.io/qt-5/qspinbox.html#suffix-prop).
 
 - `suffix` string - Specifies suffix content shows after the spinBox value. [Suffix is an enum from Qt](api/QtEnums.md)
 
-#### `spinBox.setSingleStep(val)`
+### `spinBox.setSingleStep(val)`
 
 Sets the single step value of the spinBox. It calls the native method [QSpinBox: setSingleStep](https://doc.qt.io/qt-5/qspinbox.html#singleStep-prop).
 
 - `val` number - Specifies amount value changes with each step. [Suffix is an enum from Qt](api/QtEnums.md)
 
-
+### `spinBox.cleanText()`
-#### `spinBox.cleanText()`
 
 Returns the text content (String) of the spinBox excluding any prefix, suffix, or leading or trailing whitespace. It calls the native method [QSpinBox: value](https://doc.qt.io/qt-5/qspinbox.html#minimum-prop).
 
-#### `spinBox.minimum()`
+### `spinBox.minimum()`
 
 Returns the minimum value (Number) of the spinBox. It calls the native method [QSpinBox: value](https://doc.qt.io/qt-5/qspinbox.html#minimum-prop).
 
-#### `spinBox.maximum()`
+### `spinBox.maximum()`
 
 Returns the maximum value (Number) of the spinBox. It calls the native method [QSpinBox: value](https://doc.qt.io/qt-5/qspinbox.html#maximum-prop).
 
-#### `spinBox.value()`
+### `spinBox.value()`
 
 Returns the current value (Number) of the spinBox. It calls the native method [QSpinBox: value](https://doc.qt.io/qt-5/qspinbox.html#value-prop).

website/docs/api/QTabWidget.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: QTabWidget
+title: QTabWidget
+---
+
+Will be available from NodeGUI v0.1.10 and up

website/docs/api/QWidget.md

@@ -1,4 +1,7 @@
-## Class: QWidget
+---
+sidebar_label: QWidget
+title: QWidget
+---
 
 > Create and control views.
 
@@ -22,14 +25,14 @@ view.setLayout(new FlexLayout());
 
 - `parent` NodeWidget (_optional_). Any widget inheriting from NodeWidget can be passed as a parent. This will make this widget, the child of the parent widget.
 
-### Static Methods
+## Static Methods
 
 QWidget can access all the static methods defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Properties
+## Instance Properties
 
 QWidget can access all the instance properties defined in [NodeWidget](api/NodeWidget.md)
 
-### Instance Methods
+## Instance Methods
 
 QWidget can access all the instance methods defined in [NodeWidget](api/NodeWidget.md)

website/docs/api/QtEnums.md

@@ -1,3 +1,8 @@
+---
+sidebar_label: Qt Enums
+title: Qt Enums
+---
+
 ## Enums from Qt
 
 For a complete list of Enums that we can use from Javascript see file

website/docs/api/YogaWidget.md

@@ -1,4 +1,7 @@
-## Class: YogaWidget
+---
+sidebar_label: YogaWidget
+title: YogaWidget
+---
 
 > Abstract class to add common functionality related to Flex layout to all Widgets.
 
@@ -18,20 +21,20 @@ const flexNode = view.getFlexNode();
 
 YogaWidget helps in storing all flex properties of a widget.
 
-### Static Methods
+## Static Methods
 
 YogaWidget can access all the static methods defined in [Component](api/Component.md)
 
-### Instance Properties
+## Instance Properties
 
 YogaWidget can access all the instance properties defined in [Component](api/Component.md)
 
-### Instance Methods
+## Instance Methods
 
 YogaWidget can access all the instance methods defined in [Component](api/Component.md)
 
 Additionally it also has the following instance methods:
 
-#### `widget.getFlexNode()`
+### `widget.getFlexNode()`
 
 Returns a native reference to the flex node used in c++ instance for the widget. This is not a regular javascript object and hence no methods or properties can be accessed from it. It exists so that we pass around a widgets flex node to layouts, etc.

website/docs/api/process.md

@@ -1,4 +1,7 @@
-# process
+---
+sidebar_label: process
+title: process
+---
 
 > Extensions to process object.
 

website/docs/api/synopsis.md

@@ -1,13 +1,16 @@
-# Synopsis
+---
+sidebar_label: Synopsis
+title: Synopsis
+---
 
 > How to use Node.js and NodeGui's APIs.
 
 All of [Node.js's built-in modules](https://nodejs.org/api/) are available in
-NodeGui and third-party node modules also fully supported as well (including
+NodeGui. Also, third-party node modules that are known to work with Node.Js are fully supported as well (including
-the [native modules](../tutorial/using-native-node-modules.md)).
+the native node modules).
 
-NodeGui also provides some extra built-in modules for developing native
+Apart from Node.Js ecosystem, NodeGui also provides some extra built-in widget and modules for developing native
-desktop applications.
+desktop applications. So, you can think of NodeGui as NodeJs + Gui Widgets powered by Qt.
 
 The app script is like a normal Node.js script:
 
@@ -21,7 +24,7 @@ win.show();
 global.win = win; // To prevent win from being garbage collected.
 ```
 
-To run your app, read [Run your app](../tutorial/first-app.md#running-your-app).
+To run your app, read [Run your app](/docs/guides/tutorial).
 
 ## Destructuring assignment
 
@@ -34,8 +37,7 @@ const {
   QMainWindow,
   QWidget,
   QLabel,
-  FlexLayout,
+  FlexLayout
-  StyleSheet
 } = require("@nodegui/nodegui");
 
 const win = new QMainWindow();
@@ -46,23 +48,17 @@ const rootLayout = new FlexLayout();
 centralWidget.setLayout(rootLayout);
 
 const label = new QLabel();
-label.setObjectName("mylabel");
+label.setInlineStyle("font-size: 16px; font-weight: bold;");
 label.setText("Hello World");
 
 rootLayout.addWidget(label);
 win.setCentralWidget(centralWidget);
 win.setStyleSheet(
-  StyleSheet.create(
+  `
-    `
     #myroot {
       background-color: #009688;
     }
-    #mylabel {
-      font-size: 16px;
-      font-weight: bold;
-    }
   `
-  )
 );
 win.show();
 

website/docs/development/README.md

@@ -0,0 +1,48 @@
+# Contributor's guide
+
+This guide is for everyone who want's to contribute to the development of NodeGui.
+
+Please make sure you have read the [User's guides](/) before reading this guide.
+
+- [Setting up the NodeGui Contributor's Environment](development/setting-up.md)
+  - [Setting up macOS](development/setting-up.md#macosx)
+  - [Setting up Windows](development/setting-up.md#windows)
+  - [Setting up Linux](development/setting-up.md#linux)
+- [Getting started](development/getting-started.md)
+  - [Code Structure](development/getting-started.md#Code-Structure)
+  - [Wrapping a widget: TLDR version](development/getting-started.md#Wrapping-a-widget)
+  - [Learning Materials](development/getting-started.md#Learning-Materials)
+- [Styling](development/styling.md)
+  - [Painting](development/styling.md#painting)
+  - [Layout](development/styling.md#layout)
+- [Signal and Event Handling](development/signal_and_event_handling.md)
+- [Debugging](development/debugging.md)
+- [Common Errors](development/common_errors.md)
+- [Wrapping a Widget: Detailed](development/wrapping_widgets.md)
+- [Getting Support](tutorial/support.md)
+
+
+# Where to start or How can you help?
+
+ You can follow the contributors guide above to get a gist.
+
+ It is fairly straightforward to get started. I would start with a project of my own and start adding missing functionalities.
+ 
+ Or simply put I would recommend you start by adding an unexported method to an existing widget.
+ 
+ **For example:**
+ 
+ You could add the corresponding Qt method to QProgressbar
+ https://doc.qt.io/qt-5/qprogressbar.html#textVisible-prop to get a grip on it.
+
+ This PR can be used as a guide
+ 
+ https://github.com/nodegui/nodegui/issues/36
+ 
+ https://github.com/nodegui/nodegui/pull/39
+
+ You can also take a look at few bugs or the issue board here to know what you can pick up if you are out of ideas.
+ 
+ https://github.com/nodegui/nodegui/projects/
+ 
+ https://github.com/nodegui/react-nodegui/projects/

website/docs/development/common_errors.md

@@ -0,0 +1,7 @@
+# Common errors
+
+1. **Segmentation fault:** Segmentation fault occurs when you access a Pointer that is pointing to an invalid memory address. One major reason for this can be that JS garbage collector would have garbage collected the addon generated value and you try accessing it after a while. This is mostly the case if you see seg fault happening randomly after some time of startup.
+
+2. **Widget not visible in Flex layout** Widget might have gotten zero height/width. This can occur if yoga was not able to get the default height/width of the widget. Make sure you have implemented  
+   `YGNodeSetMeasureFunc(this->instance->getFlexNode(), &extrautils::measureQtWidget);`
+   if its a leaf node widget(doesnt contain any children).

website/docs/development/debugging.md

@@ -0,0 +1,11 @@
+# debugging
+
+## Debugging JS
+
+// TODO
+
+## Debugging C++
+
+https://medium.com/@atulanand94/debugging-nodejs-c-addons-using-vs-code-27e9940fc3ad
+
+https://medium.com/cameron-nokes/how-to-debug-native-node-addons-in-mac-osx-66f69f81afcb

website/docs/development/getting-started.md

@@ -0,0 +1,113 @@
+## Getting started
+
+This library aims to be a nodejs addon which can export Qt Widgets to the Javascript world. By doing so one can develop fully fledged cross platform native GUI applications using only Javascript.
+
+The library depends on `qode` which is a lightly modified version of NodeJS. The slight modification was needed to make it work with this addon. In essense, we will do `qode your_file.js` instead of `node your_file.js`.
+
+Qode is inspired by this post by [Cheng Zhao](https://github.com/zcbenz): https://electronjs.org/blog/electron-internals-node-integration
+
+This library does not modify Qt in any way and only use it as it is. This library also dynamically links to Qt. So it needs Qt libs to be installed in your system to work (This is done to keep in compliance with open source LGPL license of Qt). We can think of exporting the required libs later.
+
+## Code Structure
+
+```
+.
+├── binding.gyp
+├── config
+├── demo.ts
+├── package.json
+├── src
+│   ├── cpp    <-- C++ source code
+│   └── lib    <-- Typescript source code
+├── tsconfig.json
+└── yarn.lock
+```
+
+The main folder is `src`. It contains
+
+- `cpp` : This folder contains all the C++ source code. Basically all the wrapper code using NAPI to export Qt Widgets and other helper functions to Javascript.
+- `lib` : This folder contains all the Typescript code of the library. This is used to add additonal helper methods and types to exported addon.
+
+**Detailed version:**
+
+```
+.
+├── binding.gyp
+├── config
+│   ├── application.gypi
+│   ├── common.gypi
+│   └── yoga.gypi
+├── demo.ts
+├── package.json
+├── src
+│   ├── cpp
+│   │   ├── Extras
+│   │   ├── QtGui         <------ All exported classes found inside Qts Gui dynamic library
+│   │   ├── QtWidgets     <------ All exported classes found inside Qts Widgets dynamic library
+│   │   ├── core
+│   │   └── main.cpp
+│   └── lib
+│       ├── QtGui
+│       ├── QtWidgets
+│       └── core
+├── tsconfig.json
+└── yarn.lock
+
+```
+
+First step to seeing how everything works is to take a look at `demo.ts` file. This file is basically like a Kitchen application showcasing all the exported widgets currently with the library.
+
+Make sure you have read how to write native NodeJS Addons blog first. https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f
+
+Once you have done that check out `src/cpp/main.cpp` and `config/application.gypi` to see the list of exported C++ classes.
+
+Then maybe you can take a look at `src/cpp/QtWidgets/QLabel/qlabel_wrap.h`. This will show you how to wrap a simple Qt Widget.
+Check the corresponding JS file for the addon here `src/lib/QtWidgets/QLabel/index.ts`.
+
+## Wrapping a widget
+
+Create wrappers for each and every Qt class that you will use with N-API (using node-addon-api since it is c++) and export it onto JS side.
+
+Taking the example of QLabel, if you look inside the directory `src/cpp/QtWidgets/QLabel`, you should see:
+
+```
+├── QLabel
+│   ├── nlabel.cpp
+│   ├── nlabel.h     <---- Extended QLabel
+│   ├── nlabel_moc.cpp <--- Autogenerated file by qt moc.
+│   ├── qlabel_wrap.cpp
+│   └── qlabel_wrap.h <--- Wrapper file
+```
+
+The idea is :
+
+1. We will first extend QLabel class to form NLabel. NLabel is basically QLabel with some extra methods and variables. More on it below.
+2. Then we will use NLabel and wrap it using NAPI and export it to JS side. This is what qlabel_wrap does.
+
+**NLabel**: Since NLabel has inherited from QLabel we can treat is as QLabel with extra methods and properties. Primary reason to extend QLabel to create NLabel is to add support for Event listeners and CSS styling using Flex.
+So if you take a look at NLabel you will see, it inherits from QLabel and NodeWidget. NodeWidget inturn inherits from YogaWidget and EventWidget. Event widget adds event handling support. YogaWidget is a class that contains the magic that enables a regular Qt Widget to have Yoga node. A Yoga node is an instance used by yoga library to calculate a widgets position on the screen. Yoga is a library that will layout the widget on the screen. To do so we will specify the flex properties like alignitems, justify content, margin, paddings etc on the Yoga node of the widget. Apart from adding yoga node, YogaWidget adds support for specifying those yoga properties via Qt's stylesheet. (This is done by using Q_PROPERTY). To make this work we need to use something called as Q_OBJECT inside the class which is a C++ macro. Q_OBJECT will be expanded to relevant code by the compiler. In Qt whenever we add Q_OBJECT to a header file, we need to use a pre compiler called Qt MOC (Meta Object Compiler). The way we use it is
+
+```
+moc headername.h -o headername_moc.cpp --include <any_include_file_which_contains_macro>  // example : ../../core/YogaWidget/yogawidget.h
+```
+
+So for nlabel I would run it as:
+
+```
+moc nlabel.h -o nlabel_moc.cpp --include ../../core/YogaWidget/yogawidget.h
+```
+
+This will run moc on `headername.h` and generate `headername_moc.cpp`. We will include `headername_moc.cpp` in `config/moc.gypi`. If you dont do this. Then it will give a symbol not found error.
+
+I hope QLabel's example is enough for now. For more examples and inspirations we can take a look at other wrapped widgets.
+
+## Learning Materials
+
+1. Beginners guide to NodeJS Addon - https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f
+2. First read this: N-API in nodejs docs
+3. https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be
+4. See samples at https://github.com/nodejs/abi-stable-node-addon-examples/
+   4.1. You can see the readme of https://github.com/nodejs/node-addon-api.git/
+5. See node-qt implementation. It is implemented in Nan (explained in video).
+6. Now try to match the implementation in node-qt and convert to N-API using examples from samples.
+7. Implementations not in node-qt need to be done with effort.

website/docs/development/setting-up.md

@@ -0,0 +1,55 @@
+# Setup project for development
+
+## Development setup and getting started
+
+Make sure you follow the setup guide of [Qode][qode_setup] so that you have a build environment ready for Qode.
+
+### MacOSX:
+
+**Requirements**
+
+1. Node version: > 11
+2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+3. Make, GCC v7
+4. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
+
+### Windows:
+
+**Requirements**
+
+1. Node version: > 11
+2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+3. Visual Studio Community 2017
+4. Powershell
+5. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
+
+### Linux:
+
+Supported versions: Ubuntu 17.10 and up
+
+**Requirements**
+
+1. Node version: > 11
+2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+3. Make, GCC v7, pkg-config
+4. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
+
+On Ubuntu: `$ sudo apt-get install pkg-config build-essentials` should install everything except Qt5.
+
+Note: If you are using your own version of Qt make sure to
+
+`export PKG_CONFIG_PATH="<path to qt installation>/5.13.0/gcc_64/lib/pkgconfig"`
+
+### Common:
+
+1. Once you have setup the platform specific stuff as mentioned above, follow these:
+2. `git clone` this repo.
+3. `yarn install`
+4. `yarn build:addon`
+5. `yarn dev`
+
+If you want to run with your own version of Qt make sure to pass qt_home_dir variable when building addon.
+
+`npm run rebuild:addon [--qt_home_dir=/path/to/qt]`
+
+[qode_setup]: https://github.com/nodegui/qode

website/docs/development/signal_and_event_handling.md

@@ -0,0 +1,150 @@
+# Event handling
+
+In Qt you can respond to an external event like a key press via event handling. Events always are processed by the event loop. Alongside events Qt also has a concept of Signals/Slots. Signals and slots are used to primarily communicate between widgets (more precisely QObjects). So the most common way of interacting between Qt Widgets is done through signals/slots. (More details here: https://doc.qt.io/qt-5/signalsandslots.html). Hence we would be implementing support for both events and signals.
+
+**Technicals:**
+
+> An event is a message encapsulated in a class (QEvent) which is processed in an event loop and dispatched to a recipient that can either accept the message or pass it along to others to process. They are usually created in response to external system events like mouse clicks.
+> Signals and Slots are a convenient way for QObjects to communicate with one another and are more similar to callback functions. In most circumstances, when a "signal" is emitted, any slot function connected to it is called directly. The exception is when signals and slots cross thread boundaries. In this case, the signal will essentially be converted into an event.
+
+# Implementing Signal handling
+
+In Qt signals and slots are used to communicate between different qt widgets. So they can be used to implement things like
+onClick, onHover etc.
+
+The way Qt Signals work is explained here:
+
+https://doc.qt.io/qt-5/signalsandslots.html
+
+The way you use them in Qt for a PushButton is explained here:
+https://wiki.qt.io/How_to_Use_QPushButton#Signals
+
+# Adding signal/event handling support to a NodeWidget
+
+We will take the example of PushButton
+
+**Javascript**
+
+Steps:
+
+The widget should inherit from `NodeWidget`. NodeWidget inherits from EventWidget internally. EventWidget constructor needs native object while initialising. So arrange your code such that native object gets initialised before calling `super(native)`.
+
+EventWidget adds `addEventListener` method to the widget which can be called
+like this:
+
+```js
+button.addEventListener("clicked", () => {
+  console.log("clicked");
+});
+```
+
+To help the user know what all signals/events are supported, export an enum like `QPushButtonEvents` as shown below.
+
+So the user can then use it as below:
+
+```js
+button.addEventListener(QPushButtonEvents.clicked, () => {
+  console.log("clicked");
+});
+```
+
+Example:
+
+```js
+import addon from "../../core/addon";
+import { NodeWidget } from "../../QtGui/QWidget";
+import { BaseWidgetEvents } from "../../core/EventWidget";
+
+export const QPushButtonEvents = Object.freeze({
+  ...BaseWidgetEvents,
+  clicked: "clicked",
+  pressed: "pressed",
+  released: "released",
+  toggled: "toggled"
+});
+
+export class QPushButton extends NodeWidget {
+  native: NativeElement;
+  constructor(parent?: NodeWidget) {
+    let native;
+    if (parent) {
+      native = new addon.QPushButton(parent.native);
+    } else {
+      native = new addon.QPushButton();
+    }
+    super(native);
+    this.parent = parent;
+    this.native = native;
+    // bind member functions
+    this.setText.bind(this);
+  }
+
+  setText(text: string | number) {
+    this.native.setText(`${text}`);
+  }
+}
+```
+
+**C++**
+
+Steps:
+
+1. `NPushButton`
+
+Inherit from both QPushButton and NodeWidget. Make sure you have added NODEWIDGET_IMPLEMENTATIONS macro. This adds a crucial method for events support. It will override `event(QEvent *)` method of QPushbutton so that nodejs can listen to the events of this widget. This makes sure we convert all the QEvent's of this widget to an event for the nodejs event emitter.
+
+Also make sure to connect all the signals of the widgets to the event emitter instance from NodeJS. This way we kindof convert the signal to a simple nodejs event.
+
+```cpp
+#pragma once
+
+#include <QPushButton>
+#include "src/cpp/core/NodeWidget/nodewidget.h"
+#include "napi.h"
+
+class NPushButton: public QPushButton, public NodeWidget
+{
+    NODEWIDGET_IMPLEMENTATIONS(QPushButton)
+public:
+    using QPushButton::QPushButton; //inherit all constructors of QPushButton
+
+    // override this method and implement all signals here
+    void connectWidgetSignalsToEventEmitter() {
+        // Qt Connects: Implement all signal connects here
+        QObject::connect(this, &QPushButton::clicked, [=](bool checked) {
+            Napi::Env env = this->emitOnNode.Env();
+            Napi::HandleScope scope(env);
+            this->emitOnNode.Call({  Napi::String::New(env, "clicked"), Napi::Value::From(env, checked) });
+        });
+        QObject::connect(this, &QPushButton::released, [=]() {
+            Napi::Env env = this->emitOnNode.Env();
+            Napi::HandleScope scope(env);
+            this->emitOnNode.Call({  Napi::String::New(env, "released") });
+        });
+        QObject::connect(this, &QPushButton::pressed, [=]() {
+            Napi::Env env = this->emitOnNode.Env();
+            Napi::HandleScope scope(env);
+            this->emitOnNode.Call({  Napi::String::New(env, "pressed") });
+        });
+        QObject::connect(this, &QPushButton::toggled, [=](bool checked) {
+            Napi::Env env = this->emitOnNode.Env();
+            Napi::HandleScope scope(env);
+            this->emitOnNode.Call({  Napi::String::New(env, "toggled"), Napi::Value::From(env, checked) });
+        });
+    }
+};
+
+```
+
+**Additional**
+
+Make sure `npushbutton.h` is added to `config/moc.json`.
+And run `npm run automoc` before running `npm run build:addon`
+
+We need to run Qt's MOC (Meta Object Compiler) on the file whenever we use Q_OBJECT in a class or use QObject::connect. This is so that Qt can expand the macros and add necessary implementations to our class.
+
+# How does it work ?
+
+1. On JS side for each widget instance we create an instance of NodeJS's Event Emitter. This is done by the class `EventWidget` from which `NodeWidget` inherits
+2. We send this event emiiter's `emit` function to the C++ side by calling `initNodeEventEmitter` method and store a pointer to the event emitter's emit function using `emitOnNode`. initNodeEventEmitter function is added by a macro from EventWidget (c++). You can find the initNodeEventEmitter method with the event widget macros.
+3. We setup Qt's connect method for all the signals that we want to listen to and call the emitOnNode (which is actually emit from Event emitter) whenever a signal arrives. This is done manually on every widget by overriding the method `connectWidgetSignalsToEventEmitter`. Check `npushbutton.h` for details. This takes care of all the signals of the widgets. Now to export all qt events of the widget, we had overriden the widgets `event(Event*)` method to listen to events received by the widget and send it to the event emitter. This is done inside the EVENTWIDGET_IMPLEMENTATIONS macro

website/docs/development/styling.md

@@ -0,0 +1,100 @@
+# How styling works?
+
+There are two parts to styling.
+
+1. Layout
+2. Painting : Colors, text color, etc
+
+## Painting
+
+The regular styles such as text color, font-size, font weight etc are achieved using Qt's stylesheet.
+We just call Qt's setStyleSheet method on the native widget and pass in the styles as a string.
+
+This method is implemented as part of `QWIDGET_WRAPPED_METHODS_DECLARATION` in `qwidget_macro.h`.
+So all widgets using this macro will get the setStyleSheet method.
+
+## Layout
+
+Layouting is basically positioning widgets on the screen. It takes into account everything from margins, paddings, positions etc. Our main focus will be Flex layouting. For flex layout we are using yoga library from facebook. This is the same library used by React Native. Before looking at flaxlayout in this libarary I recommend browsing Yoga's C API doc here: `deps/yoga/doc.md`
+
+In case `nodegui`. I have implemented a custom Qt layout by extending `QLayout`, hence Qt is able to take over automagically when window is resized or any other layouting event occurs.
+You can find the implementation at `src/cpp/core/FlexLayout/flexlayout.h`.
+
+The c++ api provided by this custom layout looks like this:
+
+```cpp
+    // FlexLayout is a custom Layout built for QT. This layout will be used to layout qt widgets using facebook's yoga library.
+    // Thus giving ability to layout Qt Widgets using Flexbox.
+    // Usage:
+    QWidget *container = new QWidget();
+    YGNodeRef root = YGNodeNew();
+    YGNodeRef child1 = YGNodeNew();
+    YGNodeRef child2 = YGNodeNew();
+    FlexLayout * flayout = new FlexLayout(container,root);
+// or  FlexLayout * flayout = new FlexLayout(container);
+// or  FlexLayout *flayout = new FlexLayout();
+
+    flayout->addWidget(btn1, child1);
+    flayout->addWidget(btn2, child2);
+
+```
+
+This layout is exported to Javascript side via `src/cpp/core/FlexLayout/flexlayout_wrap.h`
+
+The JS Api looks like this:
+
+```js
+const view = new QWidget(rootView);
+
+const flayout = new FlexLayout(); // Create layout
+flayout.setFlexNode(view.getFlexNode()); // Set widget's flex as layout's flex node.
+
+view.setLayout(flayout); // set layout as view's layout
+
+const label = new QLabel(view);
+label.setText("Hello12321");
+
+const label2 = new QLabel(view);
+label2.setText("SECOND LABEL");
+
+flayout.addWidget(label2, label2.getFlexNode()); // Add child to layout
+flayout.addWidget(label, label.getFlexNode()); // Add child to layout
+```
+
+### Implementation
+
+1. Every widget that wants to use flex layout should extend from `flexItem` found at `src/cpp/core/FlexLayout/flexitem.h`.
+   For example, see `nlabel.h` at `src/cpp/QtWidgets/QLabel/nlabel.h`
+
+   NLabel inherits from `NodeWidget` which inherits from `YogaWidget` which inturn inherits from `FlexItem`
+
+   - `FlexItem` adds a YogaNode to every widget.
+   - `YogaWidget` adds Yoga specific q-properties to the widget, which is useful to assign yoga properties via qstylesheet. More on this below.
+   - `NodeWidget` adds layout support via `YogaWidget` and event handling support via `EventWidget`
+
+### FlexItem
+
+FlexItem : `src/cpp/core/FlexLayout/flexitem.h` add flexnode to each widget.
+FlexItem adds methods like getFlexNode.
+
+### YogaWidget
+
+Qt StyleSheet allows you to specify style properties just like in web. You could specify font-size, margin, padding, etc. Qt StyleSheet also allows custom style properties via Qt's q-property system.
+
+So in order to enable yoga based properties like alignItems, justifyContent, flex, etc via qt's stylesheet we
+declare and define q properties for each of those custom properties we want.
+This allows us to use something like:
+
+```js
+view.setStyleSheet(`
+    background-color:green;
+    qproperty-flex: 1;
+    qproperty-alignItems: 'center';
+`);
+```
+
+Notice `qproperty-` prefix? These are the custom q-properties we defined in `YogaWidget.h`. We do not need to prefix `qproperty-` if a stylehsheet string is passed through `StyleSheet.create()`. StyleSheet.create has an autoprefixer which will do the right thing.
+
+### NodeWidget
+
+Every widget we implement should inherit from NodeWidget. This helps us add all the properties we want in the widgets via a single class. NodeWidget is the class that contains properties and methods shared by all widgets. This class allows us to add features to all widgets easily.

website/docs/development/wrapping_widgets.md

@@ -0,0 +1,3 @@
+# Exporting a new method from a widget
+
+# Exporting a new widget from scratch

website/docs/doc1.md

@@ -0,0 +1,162 @@
+---
+id: doc1
+title: Style Guide
+sidebar_label: Style Guide
+---
+
+You can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/).
+
+## Markdown Syntax
+
+To serve as an example page when styling markdown based Docusaurus sites.
+
+## Headers
+
+# H1 - Create the best documentation
+
+## H2 - Create the best documentation
+
+### H3 - Create the best documentation
+
+#### H4 - Create the best documentation
+
+##### H5 - Create the best documentation
+
+###### H6 - Create the best documentation
+
+---
+
+## Emphasis
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+---
+
+## Lists
+
+1. First ordered list item
+1. Another item ⋅⋅\* Unordered sub-list.
+1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list
+1. And another item.
+
+⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
+
+⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
+
+- Unordered list can use asterisks
+
+* Or minuses
+
+- Or pluses
+
+---
+
+## Links
+
+[I'm an inline-style link](https://www.google.com)
+
+[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
+
+[I'm a reference-style link][arbitrary case-insensitive reference text]
+
+[I'm a relative reference to a repository file](../blob/master/LICENSE)
+
+[You can use numbers for reference-style link definitions][1]
+
+Or leave it empty and use the [link text itself].
+
+URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or <http://www.example.com> and sometimes example.com (but not on Github, for example).
+
+Some text to show that the reference links can follow later.
+
+[arbitrary case-insensitive reference text]: https://www.mozilla.org
+[1]: http://slashdot.org
+[link text itself]: http://www.reddit.com
+
+---
+
+## Images
+
+Here's our logo (hover to see the title text):
+
+Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 1')
+
+Reference-style: ![alt text][logo]
+
+[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
+
+---
+
+## Code
+
+```javascript
+var s = 'JavaScript syntax highlighting';
+alert(s);
+```
+
+```python
+s = "Python syntax highlighting"
+print s
+```
+
+```
+No language indicated, so no syntax highlighting.
+But let's throw in a <b>tag</b>.
+```
+
+---
+
+## Tables
+
+Colons can be used to align columns.
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
+
+| Markdown | Less      | Pretty     |
+| -------- | --------- | ---------- |
+| _Still_  | `renders` | **nicely** |
+| 1        | 2         | 3          |
+
+---
+
+## Blockquotes
+
+> Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
+
+Quote break.
+
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
+
+---
+
+## Inline HTML
+
+<dl>
+  <dt>Definition list</dt>
+  <dd>Is something people use sometimes.</dd>
+
+  <dt>Markdown in HTML</dt>
+  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
+</dl>
+
+---
+
+## Line Breaks
+
+Here's a line for us to start with.
+
+This line is separated from the one above by two newlines, so it will be a _separate paragraph_.
+
+This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the _same paragraph_.

website/docs/faq.md

@@ -0,0 +1,65 @@
+---
+title: FAQ
+sidebar_label: FAQ
+---
+
+## Why am I having trouble installing Qode?
+
+When running `npm install @nodegui/qode`, some users occasionally encounter
+installation errors.
+
+In almost all cases, these errors are the result of network problems and not
+actual issues with the `@nodegui/qode` npm package. Errors like `ELIFECYCLE`,
+`EAI_AGAIN`, `ECONNRESET`, and `ETIMEDOUT` are all indications of such
+network problems. The best resolution is to try switching networks, or
+wait a bit and try installing again.
+
+You can also attempt to download Qode directly from
+[nodegui/qode/releases](https://github.com/nodegui/qode/releases)
+if installing via `npm` is failing.
+
+## Javascript widgets are missing methods and properties as compared to QT widget?
+
+As you would have noticed, the list of methods and properties are less compared to what is present in the Qt's corresponding widget class. This is because we havent written wrappers for them yet. You can help add more methods by following the development guide for contributors. Overtime this gap would reduce.
+
+## When will Qode upgrade to latest Node.js / Qt version?
+
+When a new version of Node.js/Qt gets released, we usually wait for about a month
+before upgrading the one in Qode. So we can avoid getting affected by bugs
+introduced in new Node.js/Qt versions, which happens very often.
+
+## My app's window/widgets/tray disappeared after a few minutes.
+
+This happens when the variable which is used to store the window/tray gets
+garbage collected.
+
+If you encounter this problem, the following articles may prove helpful:
+
+- [Memory Management][memory-management]
+- [Variable Scope][variable-scope]
+
+If you want a quick fix, you can make the variables global by changing your
+code from this:
+
+```javascript
+const { QWidget } = require("@nodegui/nodegui");
+
+const view = new QWidget();
+view.setObjectName("container");
+view.setLayout(new FlexLayout());
+```
+
+to this:
+
+```javascript
+const { QWidget } = require("@nodegui/nodegui");
+
+const view = new QWidget();
+view.setObjectName("container");
+view.setLayout(new FlexLayout());
+
+global.view = view; //prevent GC
+```
+
+[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
+[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx

website/docs/guides/custom-nodegui-native-plugin.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: Custom NodeGui Plugin
+title: Custom NodeGui Plugin
+---
+
+WIP

website/docs/guides/debugging-in-vscode.md

@@ -0,0 +1,39 @@
+---
+sidebar_label: Debugging in VSCode
+title: Debugging in VSCode
+---
+
+- **Open a NodeGui project in VSCode.**
+
+  ```sh
+  $ git clone git@github.com:nodegui/nodegui-starter.git
+  $ code nodegui-starter
+  ```
+
+- **Add a file `.vscode/launch.json` with the following configuration:**
+
+  ```json
+  {
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Debug Qode Process",
+        "type": "node",
+        "request": "launch",
+        "cwd": "${workspaceRoot}",
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode",
+        "windows": {
+          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode.exe"
+        },
+        "args": ["./dist/index.js"],
+        "outputCapture": "std"
+      }
+    ]
+  }
+  ```
+
+  **Tip**: You could also configure a preLaunchTask for building typescript before launching the debugger everytime.
+
+- **Debugging**
+
+  Set some breakpoints in `index.js`, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging). You should be able to hit the breakpoints.

website/docs/guides/debugging.md

@@ -0,0 +1,59 @@
+---
+sidebar_label: Debugging
+title: Debugging
+---
+
+## Application Debugging
+
+Whenever your NodeGui application is not behaving the way you wanted it to,
+an array of debugging tools might help you find coding errors, performance
+bottlenecks, or optimization opportunities.
+
+Since a NodeGui application runs on Qode. And Qode is essentially Node.Js. We can consider a NodeGui app as a regular NodeJs app. Hence, you can use any debugging tool that you use with Node.Js
+One of the most popular way of debugging a Node.Js app is by making use of the [Chromium Developer Tools][node-inspect].
+
+Google offers [excellent documentation for their developer tools][devtools].
+We recommend that you make yourself familiar with them - they are usually one
+of the most powerful utilities in any NodeGui Developer's tool belt.
+
+## Debugging Qode process
+
+To debug JavaScript that's executed in the Qode/Node process you will need to use an external debugger and
+launch Qode with the `--inspect` or `--inspect-brk` switch. Once you run it you can open up Chrome and visit `chrome://inspect` where you should see your app listed.
+
+### Command Line Switches
+
+Use one of the following command line switches to enable debugging of the process:
+
+#### `--inspect=[port]`
+
+Qode will listen for V8 inspector protocol messages on the specified `port`,
+an external debugger will need to connect on this port. The default `port` is
+`9229`.
+
+```shell
+qode --inspect=9229 your/app
+```
+
+#### `--inspect-brk=[port]`
+
+Like `--inspect` but pauses execution on the first line of JavaScript.
+
+**Note**
+
+If you are using the official boilerplate `nodegui-starter`, then you can achieve this by running
+
+```
+npm run debug
+```
+
+### External Debuggers
+
+You will need to use a debugger that supports the V8 inspector protocol.
+
+- Connect Chrome by visiting `chrome://inspect` and selecting to inspect the
+  launched NodeGui app present there.
+- [Debugging the NodeGui app in VSCode](debugging-in-vscode.md)
+
+[node-inspect]: https://nodejs.org/en/docs/inspector/
+[devtools]: https://developer.chrome.com/devtools

website/docs/guides/getting-started.md

@@ -0,0 +1,139 @@
+---
+sidebar_label: Getting started
+title: Getting started
+---
+
+NodeGui enables you to create desktop applications with JavaScript. You could see it
+as a lightly modified variant of the Node.js runtime that is focused on desktop applications
+instead of web servers.
+
+NodeGui is also an efficient JavaScript binding to a cross platform graphical user interface
+(GUI) library `Qt`. Qt is one of the most mature and efficient library for building desktop applications.
+This enabled NodeGui to be extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. A hello world app built with NodeGui runs on less than 20Mb of memory.
+
+## Developer environment
+
+To turn your operating system into an environment capable of building desktop apps with NodeGui, you would need Node.js, npm,a code editor of your choice, and a rudimentary understanding of your operating system's command line client.
+
+Along with these, there are a few operating system dependent instructions that are listed below.
+
+### Setting up on macOS
+
+**Requirements:**
+
+- NodeGui supports macOS 10.10 (Yosemite) and up. NodeGui currently only supports 64bit OS.
+- CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+- Make, GCC v7
+- Currently supported Node.Js versions are 12.x and up.
+
+We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm
+
+Confirm that both `node` and `npm` are available by running:
+
+```sh
+# This command should print the version of Node.js
+node -v
+
+# This command should print the version of npm
+npm -v
+```
+
+If both commands printed a version number, you are all set! Before you get
+started, you might want to install a [code editor](#a-good-editor) suited
+for JavaScript development.
+
+### Setting up on Windows
+
+> NodeGui supports Windows 7 and later versions – attempting to develop NodeGui
+> applications on earlier versions of Windows might not work. NodeGui currently only supports 64bit OS.
+
+**Requirements:**
+
+- Visual studio 2017 and up.
+- CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+- Currently supported Node.Js versions are 12.x and up.
+
+We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm
+
+We strongly recommend Powershell as preferred terminal in Windows.
+
+Confirm that both `node` and `npm` are available by running:
+
+```powershell
+# This command should print the version of Node.js
+node -v
+
+# This command should print the version of npm
+npm -v
+```
+
+If both commands printed a version number, you are all set! Before you get
+started, you might want to install a [code editor](#a-good-editor) suited
+for JavaScript development.
+
+### Setting up on Linux
+
+> NodeGui currently supports Ubuntu 16.04 and Debian 10 and up. Although other Linux distributions can also be easily supported. NodeGui currently only supports 64bit OS.
+
+**Requirements:**
+
+- Make, GCC v7
+- CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
+- Currently supported Node.Js versions are 12.x and up.
+- On Ubuntu and Ubuntu-based distros it is advisable to run `sudo apt-get update`, followed by `sudo apt-get install pkg-config build-essential`
+
+We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm
+
+Confirm that both `node` and `npm` are available by running:
+
+```sh
+# This command should print the version of Node.js
+node -v
+
+# This command should print the version of npm
+npm -v
+```
+
+If both commands printed a version number, you are all set! Before you get
+started, you might want to install a [code editor](#a-good-editor) suited
+for JavaScript development.
+
+### A Good Editor
+
+We might suggest two free popular editors:
+GitHub's [Atom][atom] and Microsoft's [Visual Studio Code][code]. Both of
+them have excellent JavaScript support.
+
+If you are one of the many developers with a strong preference, know that
+virtually all code editors and IDEs these days support JavaScript.
+
+[code]: https://code.visualstudio.com/
+[atom]: https://atom.io/
+
+### Hello World
+
+Clone and run the code in this tutorial by using the
+[`nodegui/nodegui-starter`][quick-start] repository.
+
+**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
+
+```sh
+# Clone the repository
+$ git clone https://github.com/nodegui/nodegui-starter
+# Go into the repository
+$ cd nodegui-starter
+# Install dependencies
+$ npm install
+# Run the app
+$ npm start
+```
+
+That's it!
+
+Congratulations! You've successfully run and modified your first NodeGui app.
+
+### Now what?
+
+If you're curious to learn more about NodeGui, continue on to the [tutorial](tutorial.md).
+
+[quick-start]: https://github.com/nodegui/nodegui-starter

website/docs/guides/handle-events.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: Handle Events
+title: Handle Events
+---
+
+WIP

website/docs/guides/images.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: Images
+title: Images
+---
+
+WIP

website/docs/guides/layout.md

@@ -0,0 +1,112 @@
+---
+sidebar_label: Layout
+title: Layout
+---
+
+NodeGui uses a layout system to automatically arranging child widgets within a widget to ensure that they make good use of the available space.
+
+## Fixed Dimensions
+
+A widget's height and width determine its size on the screen. The simplest way to set the dimensions of a widget is by adding a fixed width and height to style. Setting dimensions this way is common for widgets that should always render at exactly the same size, regardless of screen dimensions.
+
+```javascript
+
+const { QMainWindow, QWidget } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+const view = new QWidget(win);
+
+view.setInlineStyle("width:50px; height:30px; background-color: yellow;");
+
+win.show();
+(global as any).win = win;
+
+```
+
+## Dynamic Layouts
+
+Dynamic layouts automatically position and resize widgets when the amount of space available for them changes, ensuring that they are consistently arranged and that the user interface as a whole remains usable.
+
+NodeGui currently supports the following layouts at the moment:
+
+- FlexLayout
+- QGridLayout
+
+_More layouts will be added as time goes on. You can also add layouts yourself by creating custom native plugins for NodeGui usng the [Custom Native Plugin API.](custom-nodegui-native-plugin.md)_
+
+## FlexLayout
+
+Use FlexLayout to have the children expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a widget to fill all available space, shared evenly amongst other widgets with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
+
+> A widget can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
+
+Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.
+
+### Example:
+
+Lets say you want to build a UI that has a parent view which has two child widgets. One a label with text Hello and another a view with background color white. Now you want the label to occupy 1/3 of the available space while the white colored child view to occupy the remaining 2/3 space.
+
+<img src="/img/docs/flex-layout-1.png" alt="flex layout example 1" style={{maxWidth: 700, width:'100%'}}/>
+
+The code for that would look something like this:
+
+```javascript
+let { QLabel, FlexLayout, QWidget, QMainWindow } = require("@nodegui/nodegui");
+
+// Create a root view and assign a flex layout to it.
+const rootView = new QWidget();
+rootView.setLayout(new FlexLayout());
+rootView.setObjectName("rootView");
+
+// Create two widgets - one label and one view
+const label = new QLabel();
+label.setText("Hello");
+label.setObjectName("label");
+
+const view = new QWidget();
+view.setObjectName("view");
+
+// Now tell rootView layout that the label and the other view are its children
+rootView.layout.addWidget(label);
+rootView.layout.addWidget(view);
+
+// Tell FlexLayout how you want children of rootView to be poisitioned
+rootView.setStyleSheet(`
+  #rootView{
+    flex: 1;
+    background-color: blue;
+  }
+  #label {
+   flex: 1;
+   color: white;
+   background-color: green;
+  }
+  #view {
+    flex: 3;
+    background-color: white;
+  }
+`);
+
+const win = new QMainWindow();
+win.setCentralWidget(rootView);
+win.show();
+global.win = win;
+```
+
+### TLDR
+
+- First step is to set a layout on the parent widget. You can do this using the widget's `setLayout` method. Here we are using FlexLayout.
+
+- For a layout to work you must let the layout know which widgets are the children and how to lay them on the available screen space within the parent widget. You do this using a layout's `addWidget` method. In the case of FlexLayout you will specify properties by setting flex properties on the parent and child widgets.
+
+> To know more on how FlexBox layout works in depth you can visit: https://facebook.github.io/react-native/docs/0.60/flexbox.
+>
+> NodeGui uses the same library that React Native uses underneath for FlexBox ([Yoga](https://github.com/facebook/yoga)).
+
+- You can specify layout properties via inline styles also.
+
+## Conclusion
+
+The primary layout in NodeGui is the Flexbox layout. Flexbox layout can be controlled via stylesheet just as in web. So both paint and layout properties are available at the same place.
+
+NodeGui will also try to support other available layouts in Qt. But, If you need a special layout that Qt/NodeGui doesnt yet support you can always create a [native plugin for NodeGui](custom-nodegui-native-plugin.md) and use Qt's APIs to create one. In fact, Qt doesnt have a FlexLayout built in, FlexLayout is actually a custom Qt layout written with the help of Yoga library.

website/docs/guides/networking.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: Networking
+title: Networking
+---
+
+WIP

website/docs/guides/nodegui-architecture.md

@@ -0,0 +1,107 @@
+---
+sidebar_label: Architecture
+title: Architecture
+---
+
+By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are.
+
+## Qode
+
+NodeGui uses Qt for creating Windows and other UI element. Hence it exports thin wrappers of native C++ widgets from Qt into Javascript world. Now, every Qt application needs to initialize an instance of `QApplication` before creating widgets. The way we do it in C++ Qt application is (dont worry if it doesnt make sense right now):
+
+```cpp
+ #include <QApplication>
+ #include <QPushButton>
+
+ int main(int argc, char *argv[])
+ {
+     QApplication app(argc, argv); // Important
+
+     QPushButton hello("Hello world!");
+     hello.resize(100, 30);
+     hello.show();
+
+     return app.exec(); // Important
+ }
+```
+
+Like many Gui libraries Qt uses an event/message loop to handle events from widgets. Hence, when we call `app.exec()` Qt starts its message loop and blocks on that line. This is all good when there is only one message loop in the entire app. But since we want to use Qt with NodeJS and NodeJs has its own event loop, we cannot run both Qt and NodeJs on the same thread easily.
+
+Then following questions arise:
+
+- **What if we run Qt on a separate thread?** : No this is not possible since Qt has a requirement that it needs to run on the main thread.
+- **What if we run Node on a separate thread?** : This would mean we need to build a complex bridge between Node and Qt threads to make them communicate. A strict no no.
+
+So in order to make both NodeJs and Qt work together we need to find a way to merge these two event loop into one. This is achieved by a custom NodeJs binary we call as `Qode`.
+
+Qode is a lightly modified fork of Node.js that merges Node's event loop with Qt's event loop. The idea of merging event loops is inspired by Electron and [other](https://github.com/yue) Gui libraries developed by [zcbenz (Cheng Zhao)](https://github.com/zcbenz). It has been detailed in a post here: [Electron internals](https://electronjs.org/blog/electron-internals-node-integration). Hence, we reused the logic from electron to achieve smooth integration between Qt and NodeJs.
+
+The idea is to release a corresponding Qode binary for every NodeJs version that comes out after Node v12.6.
+The source code of Qode can be found [here](https://github.com/nodegui/qode).
+
+_\*PS: Qode is a fork of [Yode](https://github.com/yue/yode)_
+
+## Using NodeGui APIs
+
+NodeGui offers a number of APIs that support the development of a desktop
+application. You'd access NodeGui's APIs by requiring its included module:
+
+```javascript
+require("@nodegui/nodegui");
+```
+
+A window in NodeGui is for instance created using the `QMainWindow`
+class.
+
+```javascript
+const { QMainWindow } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+```
+
+## Using Nodejs APIs
+
+NodeGui exposes full access to Node.js. This has two important implications:
+
+1. All APIs available in Node.js are available in NodeGui. Calling the
+   following code from an NodeGui app works:
+
+```javascript
+const fs = require("fs");
+
+const root = fs.readdirSync("/");
+
+// This will print all files at the root-level of the disk,
+// either '/' or 'C:\'.
+console.log(root);
+```
+
+2. You can use Node.js modules in your application. Pick your favorite npm
+   module. npm offers currently the world's biggest repository of open-source
+   code – the ability to use well-maintained and tested code that used to be
+   reserved for server applications is one of the key features of NodeGui.
+
+As an example, to use the official AWS SDK in your application, you'd first
+install it as a dependency:
+
+```sh
+npm install --save aws-sdk
+```
+
+Then, in your NodeGui app, require and use the module as if you were
+building a Node.js application:
+
+```javascript
+// A ready-to-use S3 Client
+const S3 = require("aws-sdk/clients/s3");
+```
+
+There is one important caveat: Native Node.js modules (that is, modules that
+require compilation of native code before they can be used) will need to be
+compiled with Qode or a compatible Node version to be used with NodeGui.
+
+The vast majority of Node.js modules are _not_ native. Only 400 out of the
+~650.000 modules are native. However, if you do need native modules, please
+consult [this guide on how to recompile them for NodeGui][native-node].
+
+[native-node]: using-native-node-modules.md

website/docs/guides/scroll-view.md

@@ -0,0 +1,6 @@
+---
+sidebar_label: Scroll View
+title: Scroll View
+---
+
+WIP

website/docs/guides/styling.md

@@ -0,0 +1,175 @@
+---
+sidebar_label: Styling
+title: Styling
+---
+
+With NodeGui, you can style a widget to your needs. If you are familiar with CSS in the web world you would feel right at home. All widgets have a method `setInlineStyle` for setting inline styles for the respective widget. The style names and values usually match how CSS works on the web.
+
+Here's an example:
+
+```js
+const { QLabel, QMainWindow } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+
+const label = new QLabel(win);
+label.setText("Hello world");
+label.setInlineStyle("color: green; background-color: white;");
+
+win.show();
+global.win = win;
+```
+
+## Overview
+
+NodeGui makes use of [Qt's stylesheet](https://doc.qt.io/qt-5/stylesheet-syntax.html) for styling. Qt Style Sheet terminology and syntactic rules are almost identical to those of HTML CSS. Additionally, NodeGui adds support for layout using flex properties like align-items, justify-content, etc. Flexbox layout support is added using [facebook's yoga library](https://github.com/facebook/yoga).
+
+You would write your style properties in a string and pass it to the NodeGui widgets either via global styles or inline styles (similar to how it works in the web).
+
+## Global styles
+
+Lets take a look at an example:
+
+```js
+const { QLabel, FlexLayout, QWidget } = require("@nodegui/nodegui");
+
+const view = new QWidget();
+view.setObjectName("rootView");
+view.setLayout(new FlexLayout());
+
+const label = new QLabel();
+label.setObjectName("helloLabel");
+label.setText("Hello");
+
+const label2 = new QLabel();
+label2.setObjectName("worldLabel");
+label2.setText("World");
+
+view.layout.addWidget(label);
+view.layout.addWidget(label2);
+
+view.setStyleSheet(`
+  #helloLabel {
+    color: red;
+    padding: 10px;
+  }
+  #worldLabel {
+    color: green;
+    padding: 10px;
+  }
+  #rootView {
+    background-color: black;
+  }
+`);
+view.show();
+(global as any).view = view;
+
+```
+
+In the case of global stylesheet you can define all your style properties in a stylesheet string and the tell the root view or window to set it as a stylsheet for it and its child widgets. The only difference here from web is that you can set a stylesheet on a widget at any level in the whole tree of widgets, the stylesheet will affect the widget and its children.
+
+In the above example, in order to reference a widget in a stylesheet we will assign it a `objectName` using setObjectName instance method. Think of objectName as something similar to an `id` in the case of web. Now using the objectName you could reference the widget in the stylesheet and set style properties on them. Do not worry about the layout stuff that is going on here, that will be covered in the next section.
+
+Global stylesheet really becomes powerful when you use things like pseudo-selectors (hover, checked, etc). It also has helps in implementing cascaded styles which allow you to style a group of widgets at once. We will see more about these features below.
+
+> More details on all the features and the syntax can be found here: https://doc.qt.io/qt-5/stylesheet-syntax.html
+
+## Inline styles
+
+Lets look at this example again:
+
+```js
+const { QLabel, QMainWindow } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+
+const label = new QLabel(win);
+label.setText("Hello world");
+label.setInlineStyle("color: green; background-color: white;");
+
+win.show();
+global.win = win;
+```
+
+In most cases it would be easier to style the widgets inline. NodeGui supports inline styling using `setInlineStyle` instance method. Inline styles will only affect the widget to which the style is applied to and is often easier to understand and manage. All properties you use in the global stylesheet are available in inline styles as well.
+
+## Selectors
+
+NodeGui style sheets support all the selectors defined in CSS2.
+Some examples include:
+
+```css
+* {
+  color: blue;
+}
+
+QPushButton {
+  padding: 10px;
+}
+
+#okButton {
+  margin: 10px;
+}
+
+#mainView > QPushButton {
+  margin: 10px;
+}
+```
+
+To see a complete list of selectors see here: https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types
+
+## Pseudo states
+
+Like in the web, you can style your widget based on its state. An example would be, you might want the color of the button text to be red when its hovered upon. These are possible with pseudo states. Pseudo-states appear at the end of the selector, with a colon (:) in between.
+
+```css
+#okButton:hover {
+  color: red;
+}
+```
+
+> More details here : https://doc.qt.io/qt-5/stylesheet-syntax.html#pseudo-states
+
+## Cascading
+
+Style sheets can be set on the parent widgets and on child widgets. An arbitrary widget's effective style sheet is obtained by merging the style sheets set on the widget's ancestors (parent, grandparent, etc.).
+
+When conflicts arise, the widget's own inline style sheet is always preferred to any inherited style sheet, irrespective of the specificity of the conflicting rules. Likewise, the parent widget's style sheet is preferred to the grandparent's, etc.
+
+The behaviour is similar to what we see on the web.
+
+> For more in depth examples see here: https://doc.qt.io/qt-5/stylesheet-syntax.html#cascading
+
+## Supported properties
+
+Since we are not running inside a web browser, there are few differences in the properties you could use in NodeGui vs in web.
+
+The complete list is detailed here: https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties
+
+Apart from the properties listed in the link, NodeGui also supports layout properties related to Flex. You can use all flex properties such as align-items, justify-content, flex, etc on all widgets. [The layout styling will be coverted in more detail in the section: Layout.](layout.md)
+
+## Advanced usage (Setting QObject Properties)
+
+In Qt, every widget has certain properties set on them using something called as [Q_PROPERTY](https://doc.qt.io/qt-5/qobject.html#Q_PROPERTY). There are many q-properties that are defined on each widget already. You can also define custom qproperties in the native C++ code yourself too. What does it have to do with styling ? The thing is some of these properties can be altered using qt stylesheet. In Qt's terminology, these properties are called designable properties.
+
+For example:
+
+```css
+MyLabel {
+  qproperty-alignment: AlignCenter;
+}
+MyGroupBox {
+  qproperty-titlecolor: rgb(100, 200, 100);
+}
+QPushButton {
+  qproperty-iconsize: 20px 20px;
+}
+```
+
+You can discover these properties by following Qt's documentation or by running a simple google search like "center text in QLabel using stylesheet in Qt". These are advanced properties and in practice will come in use rarely but its good to know.
+
+> More details : https://doc.qt.io/qt-5/stylesheet-syntax.html#setting-qobject-properties
+
+---
+
+In this section, we mostly covered the paint properties in the NodeGui stylesheet. The next section would cover on how you can use flex to layout your widgets with stylesheet.

website/docs/guides/tutorial.md

@@ -0,0 +1,72 @@
+---
+sidebar_label: Learn the Basics
+title: Learn the Basics
+---
+
+NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development.
+
+## NodeGui development in a nutshell
+
+As far as development is concerned, an NodeGui application is essentially a Node.js application. The starting point is a `package.json` that is identical to that of a Node.js module. A most basic NodeGui app would have the following
+folder structure:
+
+```text
+your-app/
+├── package.json
+├── index.js
+```
+
+All APIs and features found in NodeGui are accessible through the `@nodegui/nodegui` module, which can be required like any other Node.js module. Additionally you have access to all Node.js apis and node modules.
+
+```javascript
+require("@nodegui/nodegui");
+```
+
+The `@nodegui/nodegui` module exports features in namespaces. As an example, a window can be created
+using the `QMainWindow` class. A simple `main.js` file might open a window:
+
+```javascript
+const { QMainWindow } = require("@nodegui/nodegui");
+
+const win = new QMainWindow();
+win.show();
+
+global.win = win; // To prevent win from being garbage collected.
+```
+
+The `index.js` should create windows and handle all the system events your
+application might encounter.
+
+## What's going on here?
+
+Firstly, we are running a regular Node.js app. This means that we are not running in a browser environment. The window you see is actually a native widget created by Qt. QMainWindow is essentially a lightweight javascript wrapper over Qt's QMainWindow. Hence every method you call on QMainWindow instance is actually affecting a native window widget. This is very light weight as compared to browser based solutions and hence is more closer to the Operating system.s
+
+## Trying out the starter project
+
+Clone and run the code by using the
+[`nodegui/nodegui-starter`][quick-start] repository.
+
+**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/).
+
+```sh
+# Clone the repository
+$ git clone https://github.com/nodegui/nodegui-starter
+# Go into the repository
+$ cd nodegui-starter
+# Install dependencies
+$ npm install
+# Run the app
+$ npm start
+```
+
+[quick-start]: https://github.com/nodegui/nodegui-starter
+
+## What else other than a basic window?
+
+NodeGui has support for basic widgets like QWidget (similar to div), QCheckBox, QPushButton and many more.
+You can take a look at the list of native widgets that NodeGui currently supports here : [Native widgets in NodeGui](/docs/api/QWidget).
+With time more widgets and APIs will be added to NodeGui. Apart from modules in NodeGui, you also have access to the entire node modules ecosystem. Thus, any node module that you can use with Node.js, can be used with NodeGui. This makes it extremely powerful.
+
+Fine, I want something more custom and beautiful than just native looking widgets. What do I do?
+
+To make things more beautiful, you will have to [learn about styling](styling). Lets take a look at that next.

website/docs/guides/using-native-node-modules.md

@@ -0,0 +1,55 @@
+---
+sidebar_label: Native Node Modules
+title: Using native Node Modules
+---
+
+Native Node modules are supported by NodeGui, but since NodeGui is very
+likely to use a different V8 version from the Node binary installed on your
+system, the modules you use will need to be recompiled for NodeGui's node/v8 version. Otherwise,
+you will get the following class of error when you try to run your app:
+
+```sh
+Error: The module '/path/to/native/module.node'
+was compiled against a different Node.js version using
+NODE_MODULE_VERSION $XYZ. This version of Node.js requires
+NODE_MODULE_VERSION $ABC. Please try re-compiling or re-installing
+the module (for instance, using `npm rebuild` or `npm install`).
+```
+
+## How to install native modules
+
+To compile native Node modules against a build of NodeGui that doesn't
+match a public release, instruct `npm` to use the version of Qode (NodeJs) you have bundled
+with your custom build.
+
+```sh
+npm rebuild --nodedir=/path/to/nodegui/vendor/qode
+```
+
+or
+
+```sh
+qode /path/to/npm rebuild
+```
+
+## Troubleshooting
+
+If you installed a native module and found it was not working, you need to check
+the following things:
+
+- When in doubt, rebuild native modules with qode first.
+- Make sure the native module is compatible with the target platform and
+  architecture for your NodeGui app.
+- After you upgrade NodeGui, you usually need to rebuild the modules.
+
+## Modules that rely on `node-pre-gyp`
+
+The [`node-pre-gyp` tool][node-pre-gyp] provides a way to deploy native Node
+modules with prebuilt binaries, and many popular modules are using it.
+
+Usually those modules work fine under NodeGui, but sometimes when NodeGui uses
+a newer version of V8 than Node and/or there are ABI changes, bad things may
+happen. So in general, it is recommended to always build native modules from
+source code.
+
+[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp

website/docs/mdx.md

@@ -0,0 +1,22 @@
+---
+id: mdx
+title: Powered by MDX
+---
+
+You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
+
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}>
+    {children}
+  </span>
+);
+
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

website/docusaurus.config.js

@@ -0,0 +1,92 @@
+module.exports = {
+  title: "NodeGui",
+  tagline:
+    "Build performant, native, cross platform desktop apps with JavaScript and CSS 🚀",
+  url: "https://nodegui.org",
+  baseUrl: "/",
+  favicon: "img/favicon.ico",
+  organizationName: "nodegui", // Usually your GitHub org/user name.
+  projectName: "nodegui", // Usually your repo name.
+  themeConfig: {
+    navbar: {
+      title: "NodeGui",
+      logo: {
+        alt: "NodeGui Logo",
+        src: "img/logo-circle.png"
+      },
+      links: [
+        { to: "docs/guides/getting-started", label: "Docs", position: "right" },
+        { to: "docs/api/QApplication", label: "API", position: "right" },
+        { to: "blog", label: "Blog", position: "right" },
+        {
+          href: "https://github.com/nodegui/nodegui",
+          label: "GitHub",
+          position: "right"
+        }
+      ]
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            { to: "docs/guides/getting-started", label: "Getting Started" },
+            { to: "docs/api/QApplication", label: "API" }
+          ]
+        },
+        {
+          title: "Community",
+          items: [
+            {
+              label: "Spectrum",
+              href: "https://spectrum.chat/nodegui"
+            },
+            {
+              label: "Twitter",
+              to: "https://twitter.com/node_gui"
+            },
+            {
+              label: "Medium",
+              to: "https://medium.com/nodegui"
+            }
+          ]
+        },
+        {
+          title: "More",
+          items: [
+            {
+              label: "Blog",
+              to: "blog"
+            },
+            {
+              label: "React NodeGui",
+              to: "https://react.nodegui.org"
+            },
+            {
+              label: "FAQ",
+              to: "docs/faq"
+            }
+          ]
+        }
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} NodeGui`
+    },
+    googleAnalytics: {
+      trackingID: "UA-145065218-1"
+    }
+  },
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      {
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js")
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css")
+        }
+      }
+    ]
+  ]
+};

website/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "nodegui",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.24",
+    "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.23",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.24",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "styled-components": "^4.4.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

website/sidebars.js

@@ -0,0 +1,53 @@
+module.exports = {
+  api: {
+    General: ["api/synopsis"],
+    Widgets: [
+      "api/QApplication",
+      "api/QCheckBox",
+      "api/QDial",
+      "api/QIcon",
+      "api/QLabel",
+      "api/QLineEdit",
+      "api/QMainWindow",
+      "api/QPlainTextEdit",
+      "api/QProgressBar",
+      "api/QPushButton",
+      "api/QRadioButton",
+      "api/QScrollArea",
+      "api/QSpinBox",
+      "api/QTabWidget",
+      "api/QWidget"
+    ],
+    Layouts: ["api/FlexLayout", "api/QGridLayout"],
+    Modules: ["api/QClipboard", "api/QCursor", "api/QPixmap", "api/QtEnums"],
+    "Internal Modules": [
+      "api/Component",
+      "api/EventWidget",
+      "api/NodeLayout",
+      "api/NodeWidget",
+      "api/YogaWidget",
+      "api/QAbstractScrollArea",
+      "api/QAbstractSlider"
+    ],
+    APIs: ["api/process"]
+  },
+  guides: {
+    "The Basics": [
+      "guides/getting-started",
+      "guides/tutorial",
+      "guides/styling",
+      "guides/layout",
+      "guides/handle-events",
+      "guides/scroll-view",
+      "guides/images",
+      "guides/networking"
+    ],
+    Guides: [
+      "guides/nodegui-architecture",
+      "guides/debugging",
+      "guides/debugging-in-vscode",
+      "guides/using-native-node-modules",
+      "guides/custom-nodegui-native-plugin"
+    ]
+  }
+};

website/src/css/custom.css

@@ -0,0 +1,34 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #0195a5;
+  --ifm-color-primary-dark: rgb(2, 117, 129);
+  --ifm-color-primary-darker: rgb(2, 94, 104);
+  --ifm-color-primary-darkest: rgb(1, 61, 68);
+  --ifm-color-primary-light: #0299aa;
+  --ifm-color-primary-lighter: #03b5c9;
+  --ifm-color-primary-lightest: #04d4eb;
+
+  /* Navbar*/
+
+  --ifm-navbar-background-color: rgb(51, 54, 59);
+  --ifm-navbar-link-color: white;
+}
+
+.navbar__sidebar__items .menu__list-item .menu__link {
+  color: white;
+}
+.navbar__toggle {
+  color: white;
+}
+.contents .contents__link {
+  color: var(--ifm-font-base-color);
+}
+a:hover {
+  text-decoration: underline dotted;
+}

website/src/pages/components/CodeExample.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { SplitView } from "./SplitView";
+import styled from "styled-components";
+
+const Image = styled.img`
+  max-height: 300px;
+  padding-bottom: 40px;
+`;
+
+export const CodeExample = () => {
+  const ColumnOne = () => {
+    return (
+      <div>
+        <Image src="img/code-sample.png" />
+      </div>
+    );
+  };
+  const ColumnTwo = () => {
+    return (
+      <div>
+        <h3>Written in JavaScript—rendered with native code by Qt</h3>
+        <p>
+          Apps can be built completely in JavaScript. This enables native app
+          development for whole new teams of developers, and can let existing
+          native teams work much faster.
+        </p>
+
+        <p>
+          With NodeGui you get flexibility of web and perfromance of Native
+          desktop apps.
+        </p>
+      </div>
+    );
+  };
+  return (
+    <SplitView
+      columnOneClass={"text"}
+      columnOne={<ColumnTwo />}
+      columnTwo={<ColumnOne />}
+    />
+  );
+};

website/src/pages/components/CreateNativeApps.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { SplitView } from "./SplitView";
+import styled from "styled-components";
+
+const Image = styled.img`
+  max-height: 300px;
+  padding-bottom: 40px;
+`;
+
+export const CreateNativeApps = () => {
+  const ColumnOne = () => {
+    return <Image src="img/demo.png" />;
+  };
+  const ColumnTwo = () => {
+    return (
+      <div>
+        <h3>
+          Create native apps for Windows, MacOs and Linux using JavaScript and
+          CSS
+        </h3>
+
+        <p>
+          lets you create truly native apps and doesn't compromise on your
+          users' experience. It provides a core set of platform agnostic native
+          widgets that map directly to the platform’s native UI building blocks.
+        </p>
+
+        <p>
+          NodeGui widgets are built on top of{" "}
+          <a href="https://www.qt.io/" target="_blank">
+            Qt
+          </a>{" "}
+          which is a mature dekstop apps framework. NodeGui widgets are
+          extremely customizable just like in the web but does{" "}
+          <strong>NOT</strong> use a Web browser under the hood.
+        </p>
+      </div>
+    );
+  };
+  return (
+    <SplitView
+      columnTwoClass={"text"}
+      columnOne={<ColumnOne />}
+      columnTwo={<ColumnTwo />}
+    />
+  );
+};

website/src/pages/components/Features.js

@@ -0,0 +1,63 @@
+import React from "react";
+import withBaseUrl from "@docusaurus/withBaseUrl";
+import styles from "../styles.module.css";
+import classnames from "classnames";
+
+const features = [
+  {
+    title: <>Web Technologies</>,
+    imageUrl: "img/undraw_website_setup.svg",
+    description: (
+      <>
+        With NodeGui, you can build your app with familiar web technologies like
+        CSS and JavaScript. There is even a{" "}
+        <a href="https://react.nodegui.org">React based version</a>.
+      </>
+    )
+  },
+  {
+    title: <>Open Source</>,
+    imageUrl: "img/undraw_code_review.svg",
+    description: (
+      <>
+        NodeGui is an open source project maintained by an active community of
+        contributors.
+      </>
+    )
+  },
+  {
+    title: <> Cross Platform</>,
+    imageUrl: "img/undraw_windows.svg",
+    description: (
+      <>
+        Compatible with Mac, Windows, and Linux, Electron apps build and run on
+        three platforms.
+      </>
+    )
+  }
+];
+export const Features = () => {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {features.map(({ imageUrl, title, description }, idx) => (
+            <div key={idx} className={classnames("col col--4", styles.feature)}>
+              {imageUrl && (
+                <div className="text--center">
+                  <img
+                    className={styles.featureImage}
+                    src={withBaseUrl(imageUrl)}
+                    alt={title}
+                  />
+                </div>
+              )}
+              <h3 className="text--center">{title}</h3>
+              <p className="text--center">{description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

website/src/pages/components/Hero.js

@@ -0,0 +1,85 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styled from "styled-components";
+import { Header, Container, H1, Center } from "./common";
+import styles from "../styles.module.css";
+import withBaseUrl from "@docusaurus/withBaseUrl";
+
+const ActionButton = styled.a`
+  ${props => {
+    switch (props.type) {
+      case "primary":
+        return `
+          color: white; 
+          background: var(--ifm-color-primary);
+          &:hover {
+            color: white;
+            text-decoration: none;
+            background: var(--ifm-color-primary-dark);
+          }
+        `;
+      case "secondary":
+        return `
+          &::after {
+            content: "›";
+            font-size: 24px;
+            margin-left: 5px;
+            text-align: center;
+          }
+        `;
+    }
+  }}
+  padding: 0.7rem 1.1rem;
+  font-size: 1.2em;
+`;
+const Title = styled(H1)`
+  font-size: 3em;
+  font-weight: 600;
+`;
+const Tagline = styled.p`
+  font-size: 1.6em;
+  text-align: center;
+`;
+const MainLogo = styled.img`
+  max-width: 170px;
+`;
+
+const MainHeader = styled(Header)`
+  padding-bottom: 40px;
+`;
+
+function ActionContainer() {
+  return (
+    <div>
+      <ActionButton type="primary" href={"#quick-start"} target="_self">
+        Quick start
+      </ActionButton>
+      <ActionButton
+        type="secondary"
+        href={withBaseUrl("docs/guides/getting-started")}
+        target="_self"
+      >
+        Learn basics
+      </ActionButton>
+    </div>
+  );
+}
+
+export const Hero = () => {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  return (
+    <MainHeader>
+      <Container>
+        <Center>
+          <MainLogo src={"img/logox200.png"} />
+          <Title>{siteConfig.title}</Title>
+          <Tagline>{siteConfig.tagline}</Tagline>
+          <div className={styles.buttons}>
+            <ActionContainer />
+          </div>
+        </Center>
+      </Container>
+    </MainHeader>
+  );
+};

website/src/pages/components/SplitView/index.js

@@ -0,0 +1,18 @@
+import { Section } from "../common";
+import "./styles.modules.css";
+import React from "react";
+
+export const SplitView = props => {
+  return (
+    <Section>
+      <div className="SplitView">
+        <div className={`column first left ${props.columnOneClass}`}>
+          {props.columnOne}
+        </div>
+        <div className={`column last right ${props.columnTwoClass}`}>
+          {props.columnTwo}
+        </div>
+      </div>
+    </Section>
+  );
+};

website/src/pages/components/SplitView/styles.modules.css

@@ -0,0 +1,61 @@
+.SplitView {
+  display: grid;
+}
+
+.SplitView .column {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.SplitView .column.first {
+  grid-area: first;
+}
+
+.SplitView .column.text {
+  padding: 0 50px;
+}
+
+.SplitView .column.last {
+  grid-area: last;
+}
+
+@media only screen and (min-width: 961px) {
+  .SplitView {
+    max-width: 80%;
+    margin: 0 auto;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "first last";
+  }
+
+  .SplitView.reverse {
+    grid-template-areas: "last first";
+  }
+
+  .SplitView .column.left {
+    padding-right: 50px;
+  }
+
+  .SplitView .column.right {
+    padding-left: 50px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  .SplitView,
+  .SplitView.reverse {
+    grid-template-columns: 1fr;
+    grid-template-areas: "first" "last";
+  }
+
+  .SplitView .column {
+    padding: 0 4rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .SplitView .column {
+    padding: 0 1.25rem;
+  }
+}

website/src/pages/components/Try.js

@@ -0,0 +1,76 @@
+import React from "react";
+import styled from "styled-components";
+import { Section, Container, Center, H2, H4 } from "./common";
+
+const Code = styled.code`
+  color: white !important;
+  font-size: 14px;
+  position: relative;
+  &::before {
+    content: "$";
+    position: absolute;
+    left: -13px;
+    color: gray;
+  }
+`;
+const Terminal = styled.div`
+  background: black;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid gray;
+  border-bottom: none;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  padding: 50px 30px 30px 30px;
+  width: 600px;
+  max-width: 100%;
+  position: relative;
+  margin-bottom: 20px;
+  &::before {
+    content: "○ ○ ○";
+    color: gray;
+    font-size: 14px;
+    position: absolute;
+    left: 15px;
+    top: 5px;
+  }
+`;
+
+const SubTitle = styled.h4`
+  font-weight: 400;
+`;
+const Description = styled.div`
+  width: 600px;
+  max-width: 100%;
+`;
+
+export const Try = () => {
+  return (
+    <Section id="quick-start">
+      <Container>
+        <Center>
+          <H2>Give it a try</H2>
+          <Description>
+            <SubTitle>1. Run these commands</SubTitle>
+            <Terminal>
+              <Code>git clone https://github.com/nodegui/nodegui-starter</Code>
+              <Code>cd nodegui-starter</Code>
+              <Code>npm install</Code>
+              <Code>npm start</Code>
+            </Terminal>
+            <SubTitle>
+              2.{" "}
+              <a className="LinkBasics" href={"docs/guides/getting-started"}>
+                Learn the basics
+              </a>{" "}
+              or dive deeper and take a{" "}
+              <a className="LinkBasics" href={"docs/api/QApplication"}>
+                look at the APIs.
+              </a>
+            </SubTitle>
+          </Description>
+        </Center>
+      </Container>
+    </Section>
+  );
+};

website/src/pages/components/common.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const Header = styled.header``;
+
+export const Section = styled.section`
+  display: flex;
+  align-items: center;
+  padding: 2rem 0 0 0;
+  width: 100%;
+  margin: 0 auto;
+`;
+
+export const Container = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1140px;
+  max-width: var(--ifm-container-width);
+  padding-left: 1rem;
+  padding-left: var(--ifm-spacing-horizontal);
+  padding-right: 1rem;
+  padding-right: var(--ifm-spacing-horizontal);
+  width: 100%;
+`;
+
+export const Center = styled.div`
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+`;
+
+export const Ol = styled.ol``;
+
+export const Li = styled.li`
+  font-size: 20px;
+`;
+
+export const H1 = styled.h1``;
+export const H2 = styled.h2``;
+export const H4 = styled.h4`
+  font-weight: 600;
+`;

website/src/pages/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+import { Try } from "./components/Try";
+import { Hero } from "./components/Hero";
+import { Features } from "./components/Features";
+import { CreateNativeApps } from "./components/CreateNativeApps";
+import { CodeExample } from "./components/CodeExample";
+
+function Home() {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Build performant, native and cross-platform desktop applications with JavaScript and CSS 🚀"
+    >
+      <Hero />
+      <main>
+        <Features />
+        <CreateNativeApps />
+        <CodeExample />
+        <Try />
+      </main>
+    </Layout>
+  );
+}
+
+export default Home;

website/src/pages/styles.module.css

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}

website/static/CNAME

@@ -0,0 +1 @@
+docs.nodegui.org

website/static/img/undraw_docusaurus_mountain.svg

@@ -0,0 +1,170 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1088" height="687.962" viewBox="0 0 1088 687.962">
+  <g id="Group_12" data-name="Group 12" transform="translate(-57 -56)">
+    <g id="Group_11" data-name="Group 11" transform="translate(57 56)">
+      <path id="Path_83" data-name="Path 83" d="M1017.81,560.461c-5.27,45.15-16.22,81.4-31.25,110.31-20,38.52-54.21,54.04-84.77,70.28a193.275,193.275,0,0,1-27.46,11.94c-55.61,19.3-117.85,14.18-166.74,3.99a657.282,657.282,0,0,0-104.09-13.16q-14.97-.675-29.97-.67c-15.42.02-293.07,5.29-360.67-131.57-16.69-33.76-28.13-75-32.24-125.27-11.63-142.12,52.29-235.46,134.74-296.47,155.97-115.41,369.76-110.57,523.43,7.88C941.15,276.621,1036.99,396.031,1017.81,560.461Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_84" data-name="Path 84" d="M986.56,670.771c-20,38.52-47.21,64.04-77.77,80.28a193.272,193.272,0,0,1-27.46,11.94c-55.61,19.3-117.85,14.18-166.74,3.99a657.3,657.3,0,0,0-104.09-13.16q-14.97-.675-29.97-.67-23.13.03-46.25,1.72c-100.17,7.36-253.82-6.43-321.42-143.29L382,283.981,444.95,445.6l20.09,51.59,55.37-75.98L549,381.981l130.2,149.27,36.8-81.27L970.78,657.9l14.21,11.59Z" transform="translate(-56 -106.019)" fill="#f2f2f2"/>
+      <path id="Path_85" data-name="Path 85" d="M302,282.962l26-57,36,83-31-60Z" opacity="0.1"/>
+      <path id="Path_86" data-name="Path 86" d="M610.5,753.821q-14.97-.675-29.97-.67L465.04,497.191Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <path id="Path_87" data-name="Path 87" d="M464.411,315.191,493,292.962l130,150-132-128Z" opacity="0.1"/>
+      <path id="Path_88" data-name="Path 88" d="M908.79,751.051a193.265,193.265,0,0,1-27.46,11.94L679.2,531.251Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <circle id="Ellipse_11" data-name="Ellipse 11" cx="3" cy="3" r="3" transform="translate(479 98.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_12" data-name="Ellipse 12" cx="3" cy="3" r="3" transform="translate(396 201.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_13" data-name="Ellipse 13" cx="2" cy="2" r="2" transform="translate(600 220.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_14" data-name="Ellipse 14" cx="2" cy="2" r="2" transform="translate(180 265.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_15" data-name="Ellipse 15" cx="2" cy="2" r="2" transform="translate(612 96.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_16" data-name="Ellipse 16" cx="2" cy="2" r="2" transform="translate(736 192.962)" fill="#f2f2f2"/>
+      <circle id="Ellipse_17" data-name="Ellipse 17" cx="2" cy="2" r="2" transform="translate(858 344.962)" fill="#f2f2f2"/>
+      <path id="Path_89" data-name="Path 89" d="M306,121.222h-2.76v-2.76h-1.48v2.76H299V122.7h2.76v2.759h1.48V122.7H306Z" fill="#f2f2f2"/>
+      <path id="Path_90" data-name="Path 90" d="M848,424.222h-2.76v-2.76h-1.48v2.76H841V425.7h2.76v2.759h1.48V425.7H848Z" fill="#f2f2f2"/>
+      <path id="Path_91" data-name="Path 91" d="M1144,719.981c0,16.569-243.557,74-544,74s-544-57.431-544-74,243.557,14,544,14S1144,703.413,1144,719.981Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_92" data-name="Path 92" d="M1144,719.981c0,16.569-243.557,74-544,74s-544-57.431-544-74,243.557,14,544,14S1144,703.413,1144,719.981Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <ellipse id="Ellipse_18" data-name="Ellipse 18" cx="544" cy="30" rx="544" ry="30" transform="translate(0 583.962)" fill="#3f3d56"/>
+      <path id="Path_93" data-name="Path 93" d="M624,677.981c0,33.137-14.775,24-33,24s-33,9.137-33-24,33-96,33-96S624,644.844,624,677.981Z" transform="translate(-56 -106.019)" fill="#ff6584"/>
+      <path id="Path_94" data-name="Path 94" d="M606,690.66c0,15.062-6.716,10.909-15,10.909s-15,4.153-15-10.909,15-43.636,15-43.636S606,675.6,606,690.66Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <rect id="Rectangle_97" data-name="Rectangle 97" width="92" height="18" rx="9" transform="translate(489 604.962)" fill="#2f2e41"/>
+      <rect id="Rectangle_98" data-name="Rectangle 98" width="92" height="18" rx="9" transform="translate(489 586.962)" fill="#2f2e41"/>
+      <path id="Path_95" data-name="Path 95" d="M193,596.547c0,55.343,34.719,100.126,77.626,100.126" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_96" data-name="Path 96" d="M270.626,696.673c0-55.965,38.745-101.251,86.626-101.251" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_97" data-name="Path 97" d="M221.125,601.564c0,52.57,22.14,95.109,49.5,95.109" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_98" data-name="Path 98" d="M270.626,696.673c0-71.511,44.783-129.377,100.126-129.377" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_99" data-name="Path 99" d="M254.3,697.379s11.009-.339,14.326-2.7,16.934-5.183,17.757-1.395,16.544,18.844,4.115,18.945-28.879-1.936-32.19-3.953S254.3,697.379,254.3,697.379Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_100" data-name="Path 100" d="M290.716,710.909c-12.429.1-28.879-1.936-32.19-3.953-2.522-1.536-3.527-7.048-3.863-9.591l-.368.014s.7,8.879,4.009,10.9,19.761,4.053,32.19,3.953c3.588-.029,4.827-1.305,4.759-3.2C294.755,710.174,293.386,710.887,290.716,710.909Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_101" data-name="Path 101" d="M777.429,633.081c0,38.029,23.857,68.8,53.341,68.8" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_102" data-name="Path 102" d="M830.769,701.882c0-38.456,26.623-69.575,59.525-69.575" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_103" data-name="Path 103" d="M796.755,636.528c0,36.124,15.213,65.354,34.014,65.354" transform="translate(-56 -106.019)" fill="#6c63ff"/>
+      <path id="Path_104" data-name="Path 104" d="M830.769,701.882c0-49.139,30.773-88.9,68.8-88.9" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+      <path id="Path_105" data-name="Path 105" d="M819.548,702.367s7.565-.233,9.844-1.856,11.636-3.562,12.2-.958,11.368,12.949,2.828,13.018-19.844-1.33-22.119-2.716S819.548,702.367,819.548,702.367Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_106" data-name="Path 106" d="M844.574,711.664c-8.54.069-19.844-1.33-22.119-2.716-1.733-1.056-2.423-4.843-2.654-6.59l-.253.01s.479,6.1,2.755,7.487,13.579,2.785,22.119,2.716c2.465-.02,3.317-.9,3.27-2.2C847.349,711.159,846.409,711.649,844.574,711.664Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_107" data-name="Path 107" d="M949.813,724.718s11.36-1.729,14.5-4.591,16.89-7.488,18.217-3.667,19.494,17.447,6.633,19.107-30.153,1.609-33.835-.065S949.813,724.718,949.813,724.718Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_108" data-name="Path 108" d="M989.228,734.173c-12.86,1.659-30.153,1.609-33.835-.065-2.8-1.275-4.535-6.858-5.2-9.45l-.379.061s1.833,9.109,5.516,10.783,20.975,1.725,33.835.065c3.712-.479,4.836-1.956,4.529-3.906C993.319,732.907,991.991,733.817,989.228,734.173Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_109" data-name="Path 109" d="M670.26,723.9s9.587-1.459,12.237-3.875,14.255-6.32,15.374-3.095,16.452,14.725,5.6,16.125-25.448,1.358-28.555-.055S670.26,723.9,670.26,723.9Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_110" data-name="Path 110" d="M703.524,731.875c-10.853,1.4-25.448,1.358-28.555-.055-2.367-1.076-3.827-5.788-4.39-7.976l-.32.051s1.547,7.687,4.655,9.1,17.7,1.456,28.555.055c3.133-.4,4.081-1.651,3.822-3.3C706.977,730.807,705.856,731.575,703.524,731.875Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_111" data-name="Path 111" d="M178.389,719.109s7.463-1.136,9.527-3.016,11.1-4.92,11.969-2.409,12.808,11.463,4.358,12.553-19.811,1.057-22.23-.043S178.389,719.109,178.389,719.109Z" transform="translate(-56 -106.019)" fill="#a8a8a8"/>
+      <path id="Path_112" data-name="Path 112" d="M204.285,725.321c-8.449,1.09-19.811,1.057-22.23-.043-1.842-.838-2.979-4.506-3.417-6.209l-.249.04s1.2,5.984,3.624,7.085,13.781,1.133,22.23.043c2.439-.315,3.177-1.285,2.976-2.566C206.973,724.489,206.1,725.087,204.285,725.321Z" transform="translate(-56 -106.019)" opacity="0.2"/>
+      <path id="Path_113" data-name="Path 113" d="M439.7,707.337c0,30.22-42.124,20.873-93.7,20.873s-93.074,9.347-93.074-20.873,42.118-36.793,93.694-36.793S439.7,677.117,439.7,707.337Z" transform="translate(-56 -106.019)" opacity="0.1"/>
+      <path id="Path_114" data-name="Path 114" d="M439.7,699.9c0,30.22-42.124,20.873-93.7,20.873s-93.074,9.347-93.074-20.873S295.04,663.1,346.616,663.1,439.7,669.676,439.7,699.9Z" transform="translate(-56 -106.019)" fill="#3f3d56"/>
+    </g>
+    <g id="docusaurus_keytar" transform="translate(312.271 493.733)">
+      <path id="Path_40" data-name="Path 40" d="M99,52h91.791V89.153H99Z" transform="translate(5.904 -14.001)" fill="#fff" fill-rule="evenodd"/>
+      <path id="Path_41" data-name="Path 41" d="M24.855,163.927A21.828,21.828,0,0,1,5.947,153a21.829,21.829,0,0,0,18.908,32.782H46.71V163.927Z" transform="translate(-3 -4.634)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_42" data-name="Path 42" d="M121.861,61.1l76.514-4.782V45.39A21.854,21.854,0,0,0,176.52,23.535H78.173L75.441,18.8a3.154,3.154,0,0,0-5.464,0l-2.732,4.732L64.513,18.8a3.154,3.154,0,0,0-5.464,0l-2.732,4.732L53.586,18.8a3.154,3.154,0,0,0-5.464,0L45.39,23.535c-.024,0-.046,0-.071,0l-4.526-4.525a3.153,3.153,0,0,0-5.276,1.414l-1.5,5.577-5.674-1.521a3.154,3.154,0,0,0-3.863,3.864L26,34.023l-5.575,1.494a3.155,3.155,0,0,0-1.416,5.278l4.526,4.526c0,.023,0,.046,0,.07L18.8,48.122a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,59.05a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,69.977a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,80.9a3.154,3.154,0,0,0,0,5.464L23.535,89.1,18.8,91.832a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,102.76a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,113.687a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,124.615a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,135.542a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,146.469a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,157.4a3.154,3.154,0,0,0,0,5.464l4.732,2.732L18.8,168.324a3.154,3.154,0,0,0,0,5.464l4.732,2.732A21.854,21.854,0,0,0,45.39,198.375H176.52a21.854,21.854,0,0,0,21.855-21.855V89.1l-76.514-4.782a11.632,11.632,0,0,1,0-23.219" transform="translate(-1.681 -17.226)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_43" data-name="Path 43" d="M143,186.71h32.782V143H143Z" transform="translate(9.984 -5.561)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_44" data-name="Path 44" d="M196.71,159.855a5.438,5.438,0,0,0-.7.07c-.042-.164-.081-.329-.127-.493a5.457,5.457,0,1,0-5.4-9.372q-.181-.185-.366-.367a5.454,5.454,0,1,0-9.384-5.4c-.162-.046-.325-.084-.486-.126a5.467,5.467,0,1,0-10.788,0c-.162.042-.325.08-.486.126a5.457,5.457,0,1,0-9.384,5.4,21.843,21.843,0,1,0,36.421,21.02,5.452,5.452,0,1,0,.7-10.858" transform="translate(10.912 -6.025)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_45" data-name="Path 45" d="M153,124.855h32.782V103H153Z" transform="translate(10.912 -9.271)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_46" data-name="Path 46" d="M194.855,116.765a2.732,2.732,0,1,0,0-5.464,2.811,2.811,0,0,0-.349.035c-.022-.082-.04-.164-.063-.246a2.733,2.733,0,0,0-1.052-5.253,2.7,2.7,0,0,0-1.648.566q-.09-.093-.184-.184a2.7,2.7,0,0,0,.553-1.633,2.732,2.732,0,0,0-5.245-1.07,10.928,10.928,0,1,0,0,21.031,2.732,2.732,0,0,0,5.245-1.07,2.7,2.7,0,0,0-.553-1.633q.093-.09.184-.184a2.7,2.7,0,0,0,1.648.566,2.732,2.732,0,0,0,1.052-5.253c.023-.081.042-.164.063-.246a2.814,2.814,0,0,0,.349.035" transform="translate(12.767 -9.377)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_47" data-name="Path 47" d="M65.087,56.891a2.732,2.732,0,0,1-2.732-2.732,8.2,8.2,0,0,0-16.391,0,2.732,2.732,0,0,1-5.464,0,13.659,13.659,0,0,1,27.319,0,2.732,2.732,0,0,1-2.732,2.732" transform="translate(0.478 -15.068)" fill-rule="evenodd"/>
+      <path id="Path_48" data-name="Path 48" d="M103,191.347h65.565a21.854,21.854,0,0,0,21.855-21.855V93H124.855A21.854,21.854,0,0,0,103,114.855Z" transform="translate(6.275 -10.199)" fill="#ffff50" fill-rule="evenodd"/>
+      <path id="Path_49" data-name="Path 49" d="M173.216,129.787H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0,21.855H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186m0,21.855H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0-54.434H118.535a1.093,1.093,0,1,1,0-2.185h54.681a1.093,1.093,0,0,1,0,2.185m0,21.652H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186m0,21.855H118.535a1.093,1.093,0,1,1,0-2.186h54.681a1.093,1.093,0,0,1,0,2.186M189.585,61.611c-.013,0-.024-.007-.037-.005-3.377.115-4.974,3.492-6.384,6.472-1.471,3.114-2.608,5.139-4.473,5.078-2.064-.074-3.244-2.406-4.494-4.874-1.436-2.835-3.075-6.049-6.516-5.929-3.329.114-4.932,3.053-6.346,5.646-1.5,2.762-2.529,4.442-4.5,4.364-2.106-.076-3.225-1.972-4.52-4.167-1.444-2.443-3.112-5.191-6.487-5.1-3.272.113-4.879,2.606-6.3,4.808-1.5,2.328-2.552,3.746-4.551,3.662-2.156-.076-3.27-1.65-4.558-3.472-1.447-2.047-3.077-4.363-6.442-4.251-3.2.109-4.807,2.153-6.224,3.954-1.346,1.709-2.4,3.062-4.621,2.977a1.093,1.093,0,0,0-.079,2.186c3.3.11,4.967-1.967,6.417-3.81,1.286-1.635,2.4-3.045,4.582-3.12,2.1-.09,3.091,1.218,4.584,3.327,1.417,2,3.026,4.277,6.263,4.394,3.391.114,5.022-2.42,6.467-4.663,1.292-2,2.406-3.734,4.535-3.807,1.959-.073,3.026,1.475,4.529,4.022,1.417,2.4,3.023,5.121,6.324,5.241,3.415.118,5.064-2.863,6.5-5.5,1.245-2.282,2.419-4.437,4.5-4.509,1.959-.046,2.981,1.743,4.492,4.732,1.412,2.79,3.013,5.95,6.365,6.071l.185,0c3.348,0,4.937-3.36,6.343-6.331,1.245-2.634,2.423-5.114,4.444-5.216Z" transform="translate(7.109 -13.11)" fill-rule="evenodd"/>
+      <path id="Path_50" data-name="Path 50" d="M83,186.71h43.71V143H83Z" transform="translate(4.42 -5.561)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <g id="Group_8" data-name="Group 8" transform="matrix(0.966, -0.259, 0.259, 0.966, 109.327, 91.085)">
+        <rect id="Rectangle_3" data-name="Rectangle 3" width="92.361" height="36.462" rx="2" transform="translate(0 0)" fill="#d8d8d8"/>
+        <g id="Group_2" data-name="Group 2" transform="translate(1.531 23.03)">
+          <rect id="Rectangle_4" data-name="Rectangle 4" width="5.336" height="5.336" rx="1" transform="translate(16.797 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_5" data-name="Rectangle 5" width="5.336" height="5.336" rx="1" transform="translate(23.12 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_6" data-name="Rectangle 6" width="5.336" height="5.336" rx="1" transform="translate(29.444 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_7" data-name="Rectangle 7" width="5.336" height="5.336" rx="1" transform="translate(35.768 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_8" data-name="Rectangle 8" width="5.336" height="5.336" rx="1" transform="translate(42.091 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_9" data-name="Rectangle 9" width="5.336" height="5.336" rx="1" transform="translate(48.415 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_10" data-name="Rectangle 10" width="5.336" height="5.336" rx="1" transform="translate(54.739 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_11" data-name="Rectangle 11" width="5.336" height="5.336" rx="1" transform="translate(61.063 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_12" data-name="Rectangle 12" width="5.336" height="5.336" rx="1" transform="translate(67.386 0)" fill="#4a4a4a"/>
+          <path id="Path_51" data-name="Path 51" d="M1.093,0H14.518a1.093,1.093,0,0,1,1.093,1.093V4.243a1.093,1.093,0,0,1-1.093,1.093H1.093A1.093,1.093,0,0,1,0,4.243V1.093A1.093,1.093,0,0,1,1.093,0ZM75,0H88.426a1.093,1.093,0,0,1,1.093,1.093V4.243a1.093,1.093,0,0,1-1.093,1.093H75a1.093,1.093,0,0,1-1.093-1.093V1.093A1.093,1.093,0,0,1,75,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(1.531 10.261)">
+          <path id="Path_52" data-name="Path 52" d="M1.093,0H6.218A1.093,1.093,0,0,1,7.31,1.093V4.242A1.093,1.093,0,0,1,6.218,5.335H1.093A1.093,1.093,0,0,1,0,4.242V1.093A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_13" data-name="Rectangle 13" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_14" data-name="Rectangle 14" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_15" data-name="Rectangle 15" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_16" data-name="Rectangle 16" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_17" data-name="Rectangle 17" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_18" data-name="Rectangle 18" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_20" data-name="Rectangle 20" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_21" data-name="Rectangle 21" width="5.336" height="5.336" rx="1" transform="translate(58.888 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_22" data-name="Rectangle 22" width="5.336" height="5.336" rx="1" transform="translate(65.212 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_23" data-name="Rectangle 23" width="5.336" height="5.336" rx="1" transform="translate(71.536 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_24" data-name="Rectangle 24" width="5.336" height="5.336" rx="1" transform="translate(77.859 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_25" data-name="Rectangle 25" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_4" data-name="Group 4" transform="translate(91.05 9.546) rotate(180)">
+          <path id="Path_53" data-name="Path 53" d="M1.093,0H6.219A1.093,1.093,0,0,1,7.312,1.093v3.15A1.093,1.093,0,0,1,6.219,5.336H1.093A1.093,1.093,0,0,1,0,4.243V1.093A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_26" data-name="Rectangle 26" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_27" data-name="Rectangle 27" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_28" data-name="Rectangle 28" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_29" data-name="Rectangle 29" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_30" data-name="Rectangle 30" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_31" data-name="Rectangle 31" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_32" data-name="Rectangle 32" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_33" data-name="Rectangle 33" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_34" data-name="Rectangle 34" width="5.336" height="5.336" rx="1" transform="translate(58.889 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_35" data-name="Rectangle 35" width="5.336" height="5.336" rx="1" transform="translate(65.213 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_36" data-name="Rectangle 36" width="5.336" height="5.336" rx="1" transform="translate(71.537 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_37" data-name="Rectangle 37" width="5.336" height="5.336" rx="1" transform="translate(77.86 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_38" data-name="Rectangle 38" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_39" data-name="Rectangle 39" width="5.336" height="5.336" rx="1" transform="translate(8.299 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_40" data-name="Rectangle 40" width="5.336" height="5.336" rx="1" transform="translate(14.623 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_41" data-name="Rectangle 41" width="5.336" height="5.336" rx="1" transform="translate(20.947 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_42" data-name="Rectangle 42" width="5.336" height="5.336" rx="1" transform="translate(27.271 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_43" data-name="Rectangle 43" width="5.336" height="5.336" rx="1" transform="translate(33.594 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_44" data-name="Rectangle 44" width="5.336" height="5.336" rx="1" transform="translate(39.918 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_45" data-name="Rectangle 45" width="5.336" height="5.336" rx="1" transform="translate(46.242 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_46" data-name="Rectangle 46" width="5.336" height="5.336" rx="1" transform="translate(52.565 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_47" data-name="Rectangle 47" width="5.336" height="5.336" rx="1" transform="translate(58.889 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_48" data-name="Rectangle 48" width="5.336" height="5.336" rx="1" transform="translate(65.213 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_49" data-name="Rectangle 49" width="5.336" height="5.336" rx="1" transform="translate(71.537 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_50" data-name="Rectangle 50" width="5.336" height="5.336" rx="1" transform="translate(77.86 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_51" data-name="Rectangle 51" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_6" data-name="Group 6" transform="translate(1.531 16.584)">
+          <path id="Path_54" data-name="Path 54" d="M1.093,0h7.3A1.093,1.093,0,0,1,9.485,1.093v3.15A1.093,1.093,0,0,1,8.392,5.336h-7.3A1.093,1.093,0,0,1,0,4.243V1.094A1.093,1.093,0,0,1,1.093,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <g id="Group_5" data-name="Group 5" transform="translate(10.671 0)">
+            <rect id="Rectangle_52" data-name="Rectangle 52" width="5.336" height="5.336" rx="1" fill="#4a4a4a"/>
+            <rect id="Rectangle_53" data-name="Rectangle 53" width="5.336" height="5.336" rx="1" transform="translate(6.324 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_54" data-name="Rectangle 54" width="5.336" height="5.336" rx="1" transform="translate(12.647 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_55" data-name="Rectangle 55" width="5.336" height="5.336" rx="1" transform="translate(18.971 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_56" data-name="Rectangle 56" width="5.336" height="5.336" rx="1" transform="translate(25.295 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_57" data-name="Rectangle 57" width="5.336" height="5.336" rx="1" transform="translate(31.619 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_58" data-name="Rectangle 58" width="5.336" height="5.336" rx="1" transform="translate(37.942 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_59" data-name="Rectangle 59" width="5.336" height="5.336" rx="1" transform="translate(44.265 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_60" data-name="Rectangle 60" width="5.336" height="5.336" rx="1" transform="translate(50.589 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_61" data-name="Rectangle 61" width="5.336" height="5.336" rx="1" transform="translate(56.912 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_62" data-name="Rectangle 62" width="5.336" height="5.336" rx="1" transform="translate(63.236 0)" fill="#4a4a4a"/>
+          </g>
+          <path id="Path_55" data-name="Path 55" d="M1.094,0H8A1.093,1.093,0,0,1,9.091,1.093v3.15A1.093,1.093,0,0,1,8,5.336H1.093A1.093,1.093,0,0,1,0,4.243V1.094A1.093,1.093,0,0,1,1.093,0Z" transform="translate(80.428 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_7" data-name="Group 7" transform="translate(1.531 29.627)">
+          <rect id="Rectangle_63" data-name="Rectangle 63" width="5.336" height="5.336" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_64" data-name="Rectangle 64" width="5.336" height="5.336" rx="1" transform="translate(6.324 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_65" data-name="Rectangle 65" width="5.336" height="5.336" rx="1" transform="translate(12.647 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_66" data-name="Rectangle 66" width="5.336" height="5.336" rx="1" transform="translate(18.971 0)" fill="#4a4a4a"/>
+          <path id="Path_56" data-name="Path 56" d="M1.093,0H31.515a1.093,1.093,0,0,1,1.093,1.093V4.244a1.093,1.093,0,0,1-1.093,1.093H1.093A1.093,1.093,0,0,1,0,4.244V1.093A1.093,1.093,0,0,1,1.093,0ZM34.687,0h3.942a1.093,1.093,0,0,1,1.093,1.093V4.244a1.093,1.093,0,0,1-1.093,1.093H34.687a1.093,1.093,0,0,1-1.093-1.093V1.093A1.093,1.093,0,0,1,34.687,0Z" transform="translate(25.294 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_67" data-name="Rectangle 67" width="5.336" height="5.336" rx="1" transform="translate(66.003 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_68" data-name="Rectangle 68" width="5.336" height="5.336" rx="1" transform="translate(72.327 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_69" data-name="Rectangle 69" width="5.336" height="5.336" rx="1" transform="translate(84.183 0)" fill="#4a4a4a"/>
+          <path id="Path_57" data-name="Path 57" d="M5.336,0V1.18A1.093,1.093,0,0,1,4.243,2.273H1.093A1.093,1.093,0,0,1,0,1.18V0Z" transform="translate(83.59 2.273) rotate(180)" fill="#4a4a4a"/>
+          <path id="Path_58" data-name="Path 58" d="M5.336,0V1.18A1.093,1.093,0,0,1,4.243,2.273H1.093A1.093,1.093,0,0,1,0,1.18V0Z" transform="translate(78.255 3.063)" fill="#4a4a4a"/>
+        </g>
+        <rect id="Rectangle_70" data-name="Rectangle 70" width="88.927" height="2.371" rx="1.085" transform="translate(1.925 1.17)" fill="#4a4a4a"/>
+        <rect id="Rectangle_71" data-name="Rectangle 71" width="4.986" height="1.581" rx="0.723" transform="translate(4.1 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_72" data-name="Rectangle 72" width="4.986" height="1.581" rx="0.723" transform="translate(10.923 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_73" data-name="Rectangle 73" width="4.986" height="1.581" rx="0.723" transform="translate(16.173 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_74" data-name="Rectangle 74" width="4.986" height="1.581" rx="0.723" transform="translate(21.421 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_75" data-name="Rectangle 75" width="4.986" height="1.581" rx="0.723" transform="translate(26.671 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_76" data-name="Rectangle 76" width="4.986" height="1.581" rx="0.723" transform="translate(33.232 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_77" data-name="Rectangle 77" width="4.986" height="1.581" rx="0.723" transform="translate(38.48 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_78" data-name="Rectangle 78" width="4.986" height="1.581" rx="0.723" transform="translate(43.73 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_79" data-name="Rectangle 79" width="4.986" height="1.581" rx="0.723" transform="translate(48.978 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_80" data-name="Rectangle 80" width="4.986" height="1.581" rx="0.723" transform="translate(55.54 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_81" data-name="Rectangle 81" width="4.986" height="1.581" rx="0.723" transform="translate(60.788 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_82" data-name="Rectangle 82" width="4.986" height="1.581" rx="0.723" transform="translate(66.038 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_83" data-name="Rectangle 83" width="4.986" height="1.581" rx="0.723" transform="translate(72.599 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_84" data-name="Rectangle 84" width="4.986" height="1.581" rx="0.723" transform="translate(77.847 1.566)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_85" data-name="Rectangle 85" width="4.986" height="1.581" rx="0.723" transform="translate(83.097 1.566)" fill="#d8d8d8" opacity="0.136"/>
+      </g>
+      <path id="Path_59" data-name="Path 59" d="M146.71,159.855a5.439,5.439,0,0,0-.7.07c-.042-.164-.081-.329-.127-.493a5.457,5.457,0,1,0-5.4-9.372q-.181-.185-.366-.367a5.454,5.454,0,1,0-9.384-5.4c-.162-.046-.325-.084-.486-.126a5.467,5.467,0,1,0-10.788,0c-.162.042-.325.08-.486.126a5.457,5.457,0,1,0-9.384,5.4,21.843,21.843,0,1,0,36.421,21.02,5.452,5.452,0,1,0,.7-10.858" transform="translate(6.275 -6.025)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_60" data-name="Path 60" d="M83,124.855h43.71V103H83Z" transform="translate(4.42 -9.271)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_61" data-name="Path 61" d="M134.855,116.765a2.732,2.732,0,1,0,0-5.464,2.811,2.811,0,0,0-.349.035c-.022-.082-.04-.164-.063-.246a2.733,2.733,0,0,0-1.052-5.253,2.7,2.7,0,0,0-1.648.566q-.09-.093-.184-.184a2.7,2.7,0,0,0,.553-1.633,2.732,2.732,0,0,0-5.245-1.07,10.928,10.928,0,1,0,0,21.031,2.732,2.732,0,0,0,5.245-1.07,2.7,2.7,0,0,0-.553-1.633q.093-.09.184-.184a2.7,2.7,0,0,0,1.648.566,2.732,2.732,0,0,0,1.052-5.253c.023-.081.042-.164.063-.246a2.811,2.811,0,0,0,.349.035" transform="translate(7.202 -9.377)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_62" data-name="Path 62" d="M143.232,42.33a2.967,2.967,0,0,1-.535-.055,2.754,2.754,0,0,1-.514-.153,2.838,2.838,0,0,1-.471-.251,4.139,4.139,0,0,1-.415-.339,3.2,3.2,0,0,1-.338-.415A2.7,2.7,0,0,1,140.5,39.6a2.968,2.968,0,0,1,.055-.535,3.152,3.152,0,0,1,.152-.514,2.874,2.874,0,0,1,.252-.47,2.633,2.633,0,0,1,.753-.754,2.837,2.837,0,0,1,.471-.251,2.753,2.753,0,0,1,.514-.153,2.527,2.527,0,0,1,1.071,0,2.654,2.654,0,0,1,.983.4,4.139,4.139,0,0,1,.415.339,4.019,4.019,0,0,1,.339.415,2.786,2.786,0,0,1,.251.47,2.864,2.864,0,0,1,.208,1.049,2.77,2.77,0,0,1-.8,1.934,4.139,4.139,0,0,1-.415.339,2.722,2.722,0,0,1-1.519.459m21.855-1.366a2.789,2.789,0,0,1-1.935-.8,4.162,4.162,0,0,1-.338-.415,2.7,2.7,0,0,1-.459-1.519,2.789,2.789,0,0,1,.8-1.934,4.139,4.139,0,0,1,.415-.339,2.838,2.838,0,0,1,.471-.251,2.752,2.752,0,0,1,.514-.153,2.527,2.527,0,0,1,1.071,0,2.654,2.654,0,0,1,.983.4,4.139,4.139,0,0,1,.415.339,2.79,2.79,0,0,1,.8,1.934,3.069,3.069,0,0,1-.055.535,2.779,2.779,0,0,1-.153.514,3.885,3.885,0,0,1-.251.47,4.02,4.02,0,0,1-.339.415,4.138,4.138,0,0,1-.415.339,2.722,2.722,0,0,1-1.519.459" transform="translate(9.753 -15.532)" fill-rule="evenodd"/>
+    </g>
+  </g>
+</svg>

website/static/img/undraw_docusaurus_react.svg

@@ -0,0 +1,169 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1041.277" height="554.141" viewBox="0 0 1041.277 554.141">
+  <g id="Group_24" data-name="Group 24" transform="translate(-440 -263)">
+    <g id="Group_23" data-name="Group 23" transform="translate(439.989 262.965)">
+      <path id="Path_299" data-name="Path 299" d="M1040.82,611.12q-1.74,3.75-3.47,7.4-2.7,5.67-5.33,11.12c-.78,1.61-1.56,3.19-2.32,4.77-8.6,17.57-16.63,33.11-23.45,45.89A73.21,73.21,0,0,1,942.44,719l-151.65,1.65h-1.6l-13,.14-11.12.12-34.1.37h-1.38l-17.36.19h-.53l-107,1.16-95.51,1-11.11.12-69,.75H429l-44.75.48h-.48l-141.5,1.53-42.33.46a87.991,87.991,0,0,1-10.79-.54h0c-1.22-.14-2.44-.3-3.65-.49a87.38,87.38,0,0,1-51.29-27.54C116,678.37,102.75,655,93.85,629.64q-1.93-5.49-3.6-11.12C59.44,514.37,97,380,164.6,290.08q4.25-5.64,8.64-11l.07-.08c20.79-25.52,44.1-46.84,68.93-62,44-26.91,92.75-34.49,140.7-11.9,40.57,19.12,78.45,28.11,115.17,30.55,3.71.24,7.42.42,11.11.53,84.23,2.65,163.17-27.7,255.87-47.29,3.69-.78,7.39-1.55,11.12-2.28,66.13-13.16,139.49-20.1,226.73-5.51a189.089,189.089,0,0,1,26.76,6.4q5.77,1.86,11.12,4c41.64,16.94,64.35,48.24,74,87.46q1.37,5.46,2.37,11.11C1134.3,384.41,1084.19,518.23,1040.82,611.12Z" transform="translate(-79.34 -172.91)" fill="#f2f2f2"/>
+      <path id="Path_300" data-name="Path 300" d="M576.36,618.52a95.21,95.21,0,0,1-1.87,11.12h93.7V618.52Zm-78.25,62.81,11.11-.09V653.77c-3.81-.17-7.52-.34-11.11-.52ZM265.19,618.52v11.12h198.5V618.52ZM1114.87,279h-74V191.51q-5.35-2.17-11.12-4V279H776.21V186.58c-3.73.73-7.43,1.5-11.12,2.28V279H509.22V236.15c-3.69-.11-7.4-.29-11.11-.53V279H242.24V217c-24.83,15.16-48.14,36.48-68.93,62h-.07v.08q-4.4,5.4-8.64,11h8.64V618.52h-83q1.66,5.63,3.6,11.12h79.39v93.62a87,87,0,0,0,12.2,2.79c1.21.19,2.43.35,3.65.49h0a87.991,87.991,0,0,0,10.79.54l42.33-.46v-97H498.11v94.21l11.11-.12V629.64H765.09V721l11.12-.12V629.64H1029.7v4.77c.76-1.58,1.54-3.16,2.32-4.77q2.63-5.45,5.33-11.12,1.73-3.64,3.47-7.4v-321h76.42Q1116.23,284.43,1114.87,279ZM242.24,618.52V290.08H498.11V618.52Zm267,0V290.08H765.09V618.52Zm520.48,0H776.21V290.08H1029.7Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_301" data-name="Path 301" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l46.65-28,93.6-.78,2-.01.66-.01,2-.03,44.94-.37,2.01-.01.64-.01,2-.01L315,509.3l.38-.01,35.55-.3h.29l277.4-2.34,6.79-.05h.68l5.18-.05,37.65-.31,2-.03,1.85-.02h.96l11.71-.09,2.32-.03,3.11-.02,9.75-.09,15.47-.13,2-.02,3.48-.02h.65l74.71-.64Z" fill="#65617d"/>
+      <path id="Path_302" data-name="Path 302" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l46.65-28,93.6-.78,2-.01.66-.01,2-.03,44.94-.37,2.01-.01.64-.01,2-.01L315,509.3l.38-.01,35.55-.3h.29l277.4-2.34,6.79-.05h.68l5.18-.05,37.65-.31,2-.03,1.85-.02h.96l11.71-.09,2.32-.03,3.11-.02,9.75-.09,15.47-.13,2-.02,3.48-.02h.65l74.71-.64Z" opacity="0.2"/>
+      <path id="Path_303" data-name="Path 303" d="M375.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <path id="Path_304" data-name="Path 304" d="M375.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_305" data-name="Path 305" d="M377.44,656.57v24.49a6.13,6.13,0,0,1-3.5,5.54,6,6,0,0,1-2.5.6l-34.9.74a6,6,0,0,1-2.7-.57,6.12,6.12,0,0,1-3.57-5.57V656.57Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <rect id="Rectangle_137" data-name="Rectangle 137" width="47.17" height="31.5" transform="translate(680.92 483.65)" fill="#3f3d56"/>
+      <rect id="Rectangle_138" data-name="Rectangle 138" width="47.17" height="31.5" transform="translate(680.92 483.65)" opacity="0.1"/>
+      <rect id="Rectangle_139" data-name="Rectangle 139" width="47.17" height="31.5" transform="translate(678.92 483.65)" fill="#3f3d56"/>
+      <path id="Path_306" data-name="Path 306" d="M298.09,483.65v4.97l-47.17,1.26v-6.23Z" opacity="0.1"/>
+      <path id="Path_307" data-name="Path 307" d="M460.69,485.27v168.2a4,4,0,0,1-3.85,3.95l-191.65,5.1h-.05a4,4,0,0,1-3.95-3.95V485.27a4,4,0,0,1,3.95-3.95h191.6a4,4,0,0,1,3.95,3.95Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_308" data-name="Path 308" d="M265.19,481.32v181.2h-.05a4,4,0,0,1-3.95-3.95V485.27a4,4,0,0,1,3.95-3.95Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_309" data-name="Path 309" d="M194.59,319.15h177.5V467.4l-177.5,4Z" fill="#39374d"/>
+      <path id="Path_310" data-name="Path 310" d="M726.09,483.65v6.41l-47.17-1.26v-5.15Z" opacity="0.1"/>
+      <path id="Path_311" data-name="Path 311" d="M867.69,485.27v173.3a4,4,0,0,1-4,3.95h0L672,657.42a4,4,0,0,1-3.85-3.95V485.27a4,4,0,0,1,3.95-3.95H863.7a4,4,0,0,1,3.99,3.95Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_312" data-name="Path 312" d="M867.69,485.27v173.3a4,4,0,0,1-4,3.95h0V481.32h0a4,4,0,0,1,4,3.95Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_313" data-name="Path 313" d="M775.59,319.15H598.09V467.4l177.5,4Z" fill="#39374d"/>
+      <path id="Path_314" data-name="Path 314" d="M663.19,485.27v168.2a4,4,0,0,1-3.85,3.95l-191.65,5.1h0a4,4,0,0,1-4-3.95V485.27a4,4,0,0,1,3.95-3.95h191.6A4,4,0,0,1,663.19,485.27Z" transform="translate(-79.34 -172.91)" fill="#65617d"/>
+      <path id="Path_315" data-name="Path 315" d="M397.09,319.15h177.5V467.4l-177.5,4Z" fill="#4267b2"/>
+      <path id="Path_316" data-name="Path 316" d="M863.09,533.65v13l-151.92,1.4-1.62.03-57.74.53-1.38.02-17.55.15h-.52l-106.98.99L349.77,551.4h-.15l-44.65.42-.48.01-198.4,1.82v-15l202.51-1.33h.48l40.99-.28h.19l283.08-1.87h.29l.17-.01h.47l4.79-.03h1.46l74.49-.5,4.4-.02.98-.01Z" opacity="0.1"/>
+      <circle id="Ellipse_111" data-name="Ellipse 111" cx="51.33" cy="51.33" r="51.33" transform="translate(435.93 246.82)" fill="#fbbebe"/>
+      <path id="Path_317" data-name="Path 317" d="M617.94,550.07s-99.5,12-90,0c3.44-4.34,4.39-17.2,4.2-31.85-.06-4.45-.22-9.06-.45-13.65-1.1-22-3.75-43.5-3.75-43.5s87-41,77-8.5c-4,13.13-2.69,31.57.35,48.88.89,5.05,1.92,10,3,14.7a344.66,344.66,0,0,0,9.65,33.92Z" transform="translate(-79.34 -172.91)" fill="#fbbebe"/>
+      <path id="Path_318" data-name="Path 318" d="M585.47,546c11.51-2.13,23.7-6,34.53-1.54,2.85,1.17,5.47,2.88,8.39,3.86s6.12,1.22,9.16,1.91c10.68,2.42,19.34,10.55,24.9,20s8.44,20.14,11.26,30.72l6.9,25.83c6,22.45,12,45.09,13.39,68.3a2437.506,2437.506,0,0,1-250.84,1.43c5.44-10.34,11-21.31,10.54-33s-7.19-23.22-4.76-34.74c1.55-7.34,6.57-13.39,9.64-20.22,8.75-19.52,1.94-45.79,17.32-60.65,6.92-6.68,17-9.21,26.63-8.89,12.28.41,24.85,4.24,37,6.11C555.09,547.48,569.79,548.88,585.47,546Z" transform="translate(-79.34 -172.91)" fill="#ff6584"/>
+      <path id="Path_319" data-name="Path 319" d="M716.37,657.17l-.1,1.43v.1l-.17,2.3-1.33,18.51-1.61,22.3-.46,6.28-1,13.44v.17l-107,1-175.59,1.9v.84h-.14v-1.12l.45-14.36.86-28.06.74-23.79.07-2.37a10.53,10.53,0,0,1,11.42-10.17c4.72.4,10.85.89,18.18,1.41l3,.22c42.33,2.94,120.56,6.74,199.5,2,1.66-.09,3.33-.19,5-.31,12.24-.77,24.47-1.76,36.58-3a10.53,10.53,0,0,1,11.6,11.23Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_320" data-name="Path 320" d="M429.08,725.44v-.84l175.62-1.91,107-1h.3v-.17l1-13.44.43-6,1.64-22.61,1.29-17.9v-.44a10.617,10.617,0,0,0-.11-2.47.3.3,0,0,0,0-.1,10.391,10.391,0,0,0-2-4.64,10.54,10.54,0,0,0-9.42-4c-12.11,1.24-24.34,2.23-36.58,3-1.67.12-3.34.22-5,.31-78.94,4.69-157.17.89-199.5-2l-3-.22c-7.33-.52-13.46-1-18.18-1.41a10.54,10.54,0,0,0-11.24,8.53,11,11,0,0,0-.18,1.64l-.68,22.16L429.54,710l-.44,14.36v1.12Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+      <path id="Path_321" data-name="Path 321" d="M716.67,664.18l-1.23,15.33-1.83,22.85-.46,5.72-1,12.81-.06.64v.17h0l-.15,1.48.11-1.48h-.29l-107,1-175.65,1.9v-.28l.49-14.36,1-28.06.64-18.65A6.36,6.36,0,0,1,434.3,658a6.25,6.25,0,0,1,3.78-.9c2.1.17,4.68.37,7.69.59,4.89.36,10.92.78,17.94,1.22,13,.82,29.31,1.7,48,2.42,52,2,122.2,2.67,188.88-3.17,3-.26,6.1-.55,9.13-.84a6.26,6.26,0,0,1,3.48.66,5.159,5.159,0,0,1,.86.54,6.14,6.14,0,0,1,2,2.46,3.564,3.564,0,0,1,.25.61A6.279,6.279,0,0,1,716.67,664.18Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_322" data-name="Path 322" d="M377.44,677.87v3.19a6.13,6.13,0,0,1-3.5,5.54l-40.1.77a6.12,6.12,0,0,1-3.57-5.57v-3Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_323" data-name="Path 323" d="M298.59,515.57l-52.25,1V507.9l52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_324" data-name="Path 324" d="M298.59,515.57l-52.25,1V507.9l52.25-1Z" opacity="0.1"/>
+      <path id="Path_325" data-name="Path 325" d="M300.59,515.57l-52.25,1V507.9l52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_326" data-name="Path 326" d="M758.56,679.87v3.19a6.13,6.13,0,0,0,3.5,5.54l40.1.77a6.12,6.12,0,0,0,3.57-5.57v-3Z" transform="translate(-79.34 -172.91)" opacity="0.1"/>
+      <path id="Path_327" data-name="Path 327" d="M678.72,517.57l52.25,1V509.9l-52.25-1Z" opacity="0.1"/>
+      <path id="Path_328" data-name="Path 328" d="M676.72,517.57l52.25,1V509.9l-52.25-1Z" fill="#3f3d56"/>
+      <path id="Path_329" data-name="Path 329" d="M534.13,486.79c.08,7-3.16,13.6-5.91,20.07a163.491,163.491,0,0,0-12.66,74.71c.73,11,2.58,22,.73,32.9s-8.43,21.77-19,24.9c17.53,10.45,41.26,9.35,57.76-2.66,8.79-6.4,15.34-15.33,21.75-24.11a97.86,97.86,0,0,1-13.31,44.75A103.43,103.43,0,0,0,637,616.53c4.31-5.81,8.06-12.19,9.72-19.23,3.09-13-1.22-26.51-4.51-39.5a266.055,266.055,0,0,1-6.17-33c-.43-3.56-.78-7.22.1-10.7,1-4.07,3.67-7.51,5.64-11.22,5.6-10.54,5.73-23.3,2.86-34.88s-8.49-22.26-14.06-32.81c-4.46-8.46-9.3-17.31-17.46-22.28-5.1-3.1-11-4.39-16.88-5.64l-25.37-5.43c-5.55-1.19-11.26-2.38-16.87-1.51-9.47,1.48-16.14,8.32-22,15.34-4.59,5.46-15.81,15.71-16.6,22.86-.72,6.59,5.1,17.63,6.09,24.58,1.3,9,2.22,6,7.3,11.52C532,478.05,534.07,482,534.13,486.79Z" transform="translate(-79.34 -172.91)" fill="#3f3d56"/>
+    </g>
+    <g id="docusaurus_keytar" transform="translate(670.271 615.768)">
+      <path id="Path_40" data-name="Path 40" d="M99,52h43.635V69.662H99Z" transform="translate(-49.132 -33.936)" fill="#fff" fill-rule="evenodd"/>
+      <path id="Path_41" data-name="Path 41" d="M13.389,158.195A10.377,10.377,0,0,1,4.4,153a10.377,10.377,0,0,0,8.988,15.584H23.779V158.195Z" transform="translate(-3 -82.47)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_42" data-name="Path 42" d="M66.967,38.083l36.373-2.273V30.615A10.389,10.389,0,0,0,92.95,20.226H46.2l-1.3-2.249a1.5,1.5,0,0,0-2.6,0L41,20.226l-1.3-2.249a1.5,1.5,0,0,0-2.6,0l-1.3,2.249-1.3-2.249a1.5,1.5,0,0,0-2.6,0l-1.3,2.249-.034,0-2.152-2.151a1.5,1.5,0,0,0-2.508.672L25.21,21.4l-2.7-.723a1.5,1.5,0,0,0-1.836,1.837l.722,2.7-2.65.71a1.5,1.5,0,0,0-.673,2.509l2.152,2.152c0,.011,0,.022,0,.033l-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6L20.226,41l-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3-2.249,1.3a1.5,1.5,0,0,0,0,2.6l2.249,1.3A10.389,10.389,0,0,0,30.615,103.34H92.95A10.389,10.389,0,0,0,103.34,92.95V51.393L66.967,49.12a5.53,5.53,0,0,1,0-11.038" transform="translate(-9.836 -17.226)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_43" data-name="Path 43" d="M143,163.779h15.584V143H143Z" transform="translate(-70.275 -77.665)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_44" data-name="Path 44" d="M173.779,148.389a2.582,2.582,0,0,0-.332.033c-.02-.078-.038-.156-.06-.234a2.594,2.594,0,1,0-2.567-4.455q-.086-.088-.174-.175a2.593,2.593,0,1,0-4.461-2.569c-.077-.022-.154-.04-.231-.06a2.6,2.6,0,1,0-5.128,0c-.077.02-.154.038-.231.06a2.594,2.594,0,1,0-4.461,2.569,10.384,10.384,0,1,0,17.314,9.992,2.592,2.592,0,1,0,.332-5.161" transform="translate(-75.08 -75.262)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_45" data-name="Path 45" d="M153,113.389h15.584V103H153Z" transform="translate(-75.08 -58.444)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_46" data-name="Path 46" d="M183.389,108.944a1.3,1.3,0,1,0,0-2.6,1.336,1.336,0,0,0-.166.017c-.01-.039-.019-.078-.03-.117a1.3,1.3,0,0,0-.5-2.5,1.285,1.285,0,0,0-.783.269q-.043-.044-.087-.087a1.285,1.285,0,0,0,.263-.776,1.3,1.3,0,0,0-2.493-.509,5.195,5.195,0,1,0,0,10,1.3,1.3,0,0,0,2.493-.509,1.285,1.285,0,0,0-.263-.776q.044-.043.087-.087a1.285,1.285,0,0,0,.783.269,1.3,1.3,0,0,0,.5-2.5c.011-.038.02-.078.03-.117a1.337,1.337,0,0,0,.166.017" transform="translate(-84.691 -57.894)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_47" data-name="Path 47" d="M52.188,48.292a1.3,1.3,0,0,1-1.3-1.3,3.9,3.9,0,0,0-7.792,0,1.3,1.3,0,1,1-2.6,0,6.493,6.493,0,0,1,12.987,0,1.3,1.3,0,0,1-1.3,1.3" transform="translate(-21.02 -28.41)" fill-rule="evenodd"/>
+      <path id="Path_48" data-name="Path 48" d="M103,139.752h31.168a10.389,10.389,0,0,0,10.389-10.389V93H113.389A10.389,10.389,0,0,0,103,103.389Z" transform="translate(-51.054 -53.638)" fill="#ffff50" fill-rule="evenodd"/>
+      <path id="Path_49" data-name="Path 49" d="M141.1,94.017H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0-25.877H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.293H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m0,10.389H115.106a.519.519,0,1,1,0-1.039H141.1a.519.519,0,0,1,0,1.039m7.782-47.993c-.006,0-.011,0-.018,0-1.605.055-2.365,1.66-3.035,3.077-.7,1.48-1.24,2.443-2.126,2.414-.981-.035-1.542-1.144-2.137-2.317-.683-1.347-1.462-2.876-3.1-2.819-1.582.054-2.344,1.451-3.017,2.684-.715,1.313-1.2,2.112-2.141,2.075-1-.036-1.533-.938-2.149-1.981-.686-1.162-1.479-2.467-3.084-2.423-1.555.053-2.319,1.239-2.994,2.286-.713,1.106-1.213,1.781-2.164,1.741-1.025-.036-1.554-.784-2.167-1.65-.688-.973-1.463-2.074-3.062-2.021a3.815,3.815,0,0,0-2.959,1.879c-.64.812-1.14,1.456-2.2,1.415a.52.52,0,0,0-.037,1.039,3.588,3.588,0,0,0,3.05-1.811c.611-.777,1.139-1.448,2.178-1.483,1-.043,1.47.579,2.179,1.582.674.953,1.438,2.033,2.977,2.089,1.612.054,2.387-1.151,3.074-2.217.614-.953,1.144-1.775,2.156-1.81.931-.035,1.438.7,2.153,1.912.674,1.141,1.437,2.434,3.006,2.491,1.623.056,2.407-1.361,3.09-2.616.592-1.085,1.15-2.109,2.14-2.143.931-.022,1.417.829,2.135,2.249.671,1.326,1.432,2.828,3.026,2.886l.088,0c1.592,0,2.347-1.6,3.015-3.01.592-1.252,1.152-2.431,2.113-2.479Z" transform="translate(-55.378 -38.552)" fill-rule="evenodd"/>
+      <path id="Path_50" data-name="Path 50" d="M83,163.779h20.779V143H83Z" transform="translate(-41.443 -77.665)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <g id="Group_8" data-name="Group 8" transform="matrix(0.966, -0.259, 0.259, 0.966, 51.971, 43.3)">
+        <rect id="Rectangle_3" data-name="Rectangle 3" width="43.906" height="17.333" rx="2" transform="translate(0 0)" fill="#d8d8d8"/>
+        <g id="Group_2" data-name="Group 2" transform="translate(0.728 10.948)">
+          <rect id="Rectangle_4" data-name="Rectangle 4" width="2.537" height="2.537" rx="1" transform="translate(7.985 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_5" data-name="Rectangle 5" width="2.537" height="2.537" rx="1" transform="translate(10.991 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_6" data-name="Rectangle 6" width="2.537" height="2.537" rx="1" transform="translate(13.997 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_7" data-name="Rectangle 7" width="2.537" height="2.537" rx="1" transform="translate(17.003 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_8" data-name="Rectangle 8" width="2.537" height="2.537" rx="1" transform="translate(20.009 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_9" data-name="Rectangle 9" width="2.537" height="2.537" rx="1" transform="translate(23.015 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_10" data-name="Rectangle 10" width="2.537" height="2.537" rx="1" transform="translate(26.021 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_11" data-name="Rectangle 11" width="2.537" height="2.537" rx="1" transform="translate(29.028 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_12" data-name="Rectangle 12" width="2.537" height="2.537" rx="1" transform="translate(32.034 0)" fill="#4a4a4a"/>
+          <path id="Path_51" data-name="Path 51" d="M.519,0H6.9A.519.519,0,0,1,7.421.52v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0ZM35.653,0h6.383a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H35.652a.519.519,0,0,1-.519-.519V.519A.519.519,0,0,1,35.652,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(0.728 4.878)">
+          <path id="Path_52" data-name="Path 52" d="M.519,0H2.956a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_13" data-name="Rectangle 13" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_14" data-name="Rectangle 14" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_15" data-name="Rectangle 15" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_16" data-name="Rectangle 16" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_17" data-name="Rectangle 17" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_18" data-name="Rectangle 18" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_20" data-name="Rectangle 20" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_21" data-name="Rectangle 21" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_22" data-name="Rectangle 22" width="2.537" height="2.537" rx="1" transform="translate(31 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_23" data-name="Rectangle 23" width="2.537" height="2.537" rx="1" transform="translate(34.006 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_24" data-name="Rectangle 24" width="2.537" height="2.537" rx="1" transform="translate(37.012 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_25" data-name="Rectangle 25" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_4" data-name="Group 4" transform="translate(43.283 4.538) rotate(180)">
+          <path id="Path_53" data-name="Path 53" d="M.519,0H2.956a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.519A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_26" data-name="Rectangle 26" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_27" data-name="Rectangle 27" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_28" data-name="Rectangle 28" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_29" data-name="Rectangle 29" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_30" data-name="Rectangle 30" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_31" data-name="Rectangle 31" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_32" data-name="Rectangle 32" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_33" data-name="Rectangle 33" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_34" data-name="Rectangle 34" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_35" data-name="Rectangle 35" width="2.537" height="2.537" rx="1" transform="translate(31.001 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_36" data-name="Rectangle 36" width="2.537" height="2.537" rx="1" transform="translate(34.007 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_37" data-name="Rectangle 37" width="2.537" height="2.537" rx="1" transform="translate(37.013 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_38" data-name="Rectangle 38" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_39" data-name="Rectangle 39" width="2.537" height="2.537" rx="1" transform="translate(3.945 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_40" data-name="Rectangle 40" width="2.537" height="2.537" rx="1" transform="translate(6.951 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_41" data-name="Rectangle 41" width="2.537" height="2.537" rx="1" transform="translate(9.958 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_42" data-name="Rectangle 42" width="2.537" height="2.537" rx="1" transform="translate(12.964 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_43" data-name="Rectangle 43" width="2.537" height="2.537" rx="1" transform="translate(15.97 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_44" data-name="Rectangle 44" width="2.537" height="2.537" rx="1" transform="translate(18.976 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_45" data-name="Rectangle 45" width="2.537" height="2.537" rx="1" transform="translate(21.982 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_46" data-name="Rectangle 46" width="2.537" height="2.537" rx="1" transform="translate(24.988 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_47" data-name="Rectangle 47" width="2.537" height="2.537" rx="1" transform="translate(27.994 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_48" data-name="Rectangle 48" width="2.537" height="2.537" rx="1" transform="translate(31.001 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_49" data-name="Rectangle 49" width="2.537" height="2.537" rx="1" transform="translate(34.007 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_50" data-name="Rectangle 50" width="2.537" height="2.537" rx="1" transform="translate(37.013 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_51" data-name="Rectangle 51" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+        </g>
+        <g id="Group_6" data-name="Group 6" transform="translate(0.728 7.883)">
+          <path id="Path_54" data-name="Path 54" d="M.519,0h3.47a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.52A.519.519,0,0,1,.519,0Z" transform="translate(0 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <g id="Group_5" data-name="Group 5" transform="translate(5.073 0)">
+            <rect id="Rectangle_52" data-name="Rectangle 52" width="2.537" height="2.537" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_53" data-name="Rectangle 53" width="2.537" height="2.537" rx="1" transform="translate(3.006 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_54" data-name="Rectangle 54" width="2.537" height="2.537" rx="1" transform="translate(6.012 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_55" data-name="Rectangle 55" width="2.537" height="2.537" rx="1" transform="translate(9.018 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_56" data-name="Rectangle 56" width="2.537" height="2.537" rx="1" transform="translate(12.025 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_57" data-name="Rectangle 57" width="2.537" height="2.537" rx="1" transform="translate(15.031 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_58" data-name="Rectangle 58" width="2.537" height="2.537" rx="1" transform="translate(18.037 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_59" data-name="Rectangle 59" width="2.537" height="2.537" rx="1" transform="translate(21.042 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_60" data-name="Rectangle 60" width="2.537" height="2.537" rx="1" transform="translate(24.049 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_61" data-name="Rectangle 61" width="2.537" height="2.537" rx="1" transform="translate(27.055 0)" fill="#4a4a4a"/>
+            <rect id="Rectangle_62" data-name="Rectangle 62" width="2.537" height="2.537" rx="1" transform="translate(30.061 0)" fill="#4a4a4a"/>
+          </g>
+          <path id="Path_55" data-name="Path 55" d="M.52,0H3.8a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.017V.52A.519.519,0,0,1,.519,0Z" transform="translate(38.234 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+        </g>
+        <g id="Group_7" data-name="Group 7" transform="translate(0.728 14.084)">
+          <rect id="Rectangle_63" data-name="Rectangle 63" width="2.537" height="2.537" rx="1" transform="translate(0 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_64" data-name="Rectangle 64" width="2.537" height="2.537" rx="1" transform="translate(3.006 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_65" data-name="Rectangle 65" width="2.537" height="2.537" rx="1" transform="translate(6.012 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_66" data-name="Rectangle 66" width="2.537" height="2.537" rx="1" transform="translate(9.018 0)" fill="#4a4a4a"/>
+          <path id="Path_56" data-name="Path 56" d="M.519,0H14.981A.519.519,0,0,1,15.5.519v1.5a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,2.018V.519A.519.519,0,0,1,.519,0Zm15.97,0h1.874a.519.519,0,0,1,.519.519v1.5a.519.519,0,0,1-.519.519H16.489a.519.519,0,0,1-.519-.519V.519A.519.519,0,0,1,16.489,0Z" transform="translate(12.024 0)" fill="#4a4a4a" fill-rule="evenodd"/>
+          <rect id="Rectangle_67" data-name="Rectangle 67" width="2.537" height="2.537" rx="1" transform="translate(31.376 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_68" data-name="Rectangle 68" width="2.537" height="2.537" rx="1" transform="translate(34.382 0)" fill="#4a4a4a"/>
+          <rect id="Rectangle_69" data-name="Rectangle 69" width="2.537" height="2.537" rx="1" transform="translate(40.018 0)" fill="#4a4a4a"/>
+          <path id="Path_57" data-name="Path 57" d="M2.537,0V.561a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,.561V0Z" transform="translate(39.736 1.08) rotate(180)" fill="#4a4a4a"/>
+          <path id="Path_58" data-name="Path 58" d="M2.537,0V.561a.519.519,0,0,1-.519.519H.519A.519.519,0,0,1,0,.561V0Z" transform="translate(37.2 1.456)" fill="#4a4a4a"/>
+        </g>
+        <rect id="Rectangle_70" data-name="Rectangle 70" width="42.273" height="1.127" rx="0.564" transform="translate(0.915 0.556)" fill="#4a4a4a"/>
+        <rect id="Rectangle_71" data-name="Rectangle 71" width="2.37" height="0.752" rx="0.376" transform="translate(1.949 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_72" data-name="Rectangle 72" width="2.37" height="0.752" rx="0.376" transform="translate(5.193 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_73" data-name="Rectangle 73" width="2.37" height="0.752" rx="0.376" transform="translate(7.688 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_74" data-name="Rectangle 74" width="2.37" height="0.752" rx="0.376" transform="translate(10.183 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_75" data-name="Rectangle 75" width="2.37" height="0.752" rx="0.376" transform="translate(12.679 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_76" data-name="Rectangle 76" width="2.37" height="0.752" rx="0.376" transform="translate(15.797 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_77" data-name="Rectangle 77" width="2.37" height="0.752" rx="0.376" transform="translate(18.292 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_78" data-name="Rectangle 78" width="2.37" height="0.752" rx="0.376" transform="translate(20.788 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_79" data-name="Rectangle 79" width="2.37" height="0.752" rx="0.376" transform="translate(23.283 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_80" data-name="Rectangle 80" width="2.37" height="0.752" rx="0.376" transform="translate(26.402 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_81" data-name="Rectangle 81" width="2.37" height="0.752" rx="0.376" transform="translate(28.897 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_82" data-name="Rectangle 82" width="2.37" height="0.752" rx="0.376" transform="translate(31.393 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_83" data-name="Rectangle 83" width="2.37" height="0.752" rx="0.376" transform="translate(34.512 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_84" data-name="Rectangle 84" width="2.37" height="0.752" rx="0.376" transform="translate(37.007 0.744)" fill="#d8d8d8" opacity="0.136"/>
+        <rect id="Rectangle_85" data-name="Rectangle 85" width="2.37" height="0.752" rx="0.376" transform="translate(39.502 0.744)" fill="#d8d8d8" opacity="0.136"/>
+      </g>
+      <path id="Path_59" data-name="Path 59" d="M123.779,148.389a2.583,2.583,0,0,0-.332.033c-.02-.078-.038-.156-.06-.234a2.594,2.594,0,1,0-2.567-4.455q-.086-.088-.174-.175a2.593,2.593,0,1,0-4.461-2.569c-.077-.022-.154-.04-.231-.06a2.6,2.6,0,1,0-5.128,0c-.077.02-.154.038-.231.06a2.594,2.594,0,1,0-4.461,2.569,10.384,10.384,0,1,0,17.314,9.992,2.592,2.592,0,1,0,.332-5.161" transform="translate(-51.054 -75.262)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_60" data-name="Path 60" d="M83,113.389h20.779V103H83Z" transform="translate(-41.443 -58.444)" fill="#3ecc5f" fill-rule="evenodd"/>
+      <path id="Path_61" data-name="Path 61" d="M123.389,108.944a1.3,1.3,0,1,0,0-2.6,1.338,1.338,0,0,0-.166.017c-.01-.039-.019-.078-.03-.117a1.3,1.3,0,0,0-.5-2.5,1.285,1.285,0,0,0-.783.269q-.043-.044-.087-.087a1.285,1.285,0,0,0,.263-.776,1.3,1.3,0,0,0-2.493-.509,5.195,5.195,0,1,0,0,10,1.3,1.3,0,0,0,2.493-.509,1.285,1.285,0,0,0-.263-.776q.044-.043.087-.087a1.285,1.285,0,0,0,.783.269,1.3,1.3,0,0,0,.5-2.5c.011-.038.02-.078.03-.117a1.335,1.335,0,0,0,.166.017" transform="translate(-55.859 -57.894)" fill="#44d860" fill-rule="evenodd"/>
+      <path id="Path_62" data-name="Path 62" d="M141.8,38.745a1.41,1.41,0,0,1-.255-.026,1.309,1.309,0,0,1-.244-.073,1.349,1.349,0,0,1-.224-.119,1.967,1.967,0,0,1-.2-.161,1.52,1.52,0,0,1-.161-.2,1.282,1.282,0,0,1-.218-.722,1.41,1.41,0,0,1,.026-.255,1.5,1.5,0,0,1,.072-.244,1.364,1.364,0,0,1,.12-.223,1.252,1.252,0,0,1,.358-.358,1.349,1.349,0,0,1,.224-.119,1.309,1.309,0,0,1,.244-.073,1.2,1.2,0,0,1,.509,0,1.262,1.262,0,0,1,.468.192,1.968,1.968,0,0,1,.2.161,1.908,1.908,0,0,1,.161.2,1.322,1.322,0,0,1,.12.223,1.361,1.361,0,0,1,.1.5,1.317,1.317,0,0,1-.379.919,1.968,1.968,0,0,1-.2.161,1.346,1.346,0,0,1-.223.119,1.332,1.332,0,0,1-.5.1m10.389-.649a1.326,1.326,0,0,1-.92-.379,1.979,1.979,0,0,1-.161-.2,1.282,1.282,0,0,1-.218-.722,1.326,1.326,0,0,1,.379-.919,1.967,1.967,0,0,1,.2-.161,1.351,1.351,0,0,1,.224-.119,1.308,1.308,0,0,1,.244-.073,1.2,1.2,0,0,1,.509,0,1.262,1.262,0,0,1,.468.192,1.967,1.967,0,0,1,.2.161,1.326,1.326,0,0,1,.379.919,1.461,1.461,0,0,1-.026.255,1.323,1.323,0,0,1-.073.244,1.847,1.847,0,0,1-.119.223,1.911,1.911,0,0,1-.161.2,1.967,1.967,0,0,1-.2.161,1.294,1.294,0,0,1-.722.218" transform="translate(-69.074 -26.006)" fill-rule="evenodd"/>
+    </g>
+    <g id="React-icon" transform="translate(906.3 541.56)">
+      <path id="Path_330" data-name="Path 330" d="M263.668,117.179c0-5.827-7.3-11.35-18.487-14.775,2.582-11.4,1.434-20.477-3.622-23.382a7.861,7.861,0,0,0-4.016-1v4a4.152,4.152,0,0,1,2.044.466c2.439,1.4,3.5,6.724,2.672,13.574-.2,1.685-.52,3.461-.914,5.272a86.9,86.9,0,0,0-11.386-1.954,87.469,87.469,0,0,0-7.459-8.965c5.845-5.433,11.332-8.41,15.062-8.41V78h0c-4.931,0-11.386,3.514-17.913,9.611-6.527-6.061-12.982-9.539-17.913-9.539v4c3.712,0,9.216,2.959,15.062,8.356a84.687,84.687,0,0,0-7.405,8.947,83.732,83.732,0,0,0-11.4,1.972c-.412-1.793-.717-3.532-.932-5.2-.843-6.85.2-12.175,2.618-13.592a3.991,3.991,0,0,1,2.062-.466v-4h0a8,8,0,0,0-4.052,1c-5.039,2.9-6.168,11.96-3.568,23.328-11.153,3.443-18.415,8.947-18.415,14.757,0,5.828,7.3,11.35,18.487,14.775-2.582,11.4-1.434,20.477,3.622,23.382a7.882,7.882,0,0,0,4.034,1c4.931,0,11.386-3.514,17.913-9.611,6.527,6.061,12.982,9.539,17.913,9.539a8,8,0,0,0,4.052-1c5.039-2.9,6.168-11.96,3.568-23.328C256.406,128.511,263.668,122.988,263.668,117.179Zm-23.346-11.96c-.663,2.313-1.488,4.7-2.421,7.083-.735-1.434-1.506-2.869-2.349-4.3-.825-1.434-1.7-2.833-2.582-4.2C235.517,104.179,237.974,104.645,240.323,105.219Zm-8.212,19.1c-1.4,2.421-2.833,4.716-4.321,6.85-2.672.233-5.379.359-8.1.359-2.708,0-5.415-.126-8.069-.341q-2.232-3.2-4.339-6.814-2.044-3.523-3.73-7.136c1.112-2.4,2.367-4.805,3.712-7.154,1.4-2.421,2.833-4.716,4.321-6.85,2.672-.233,5.379-.359,8.1-.359,2.708,0,5.415.126,8.069.341q2.232,3.2,4.339,6.814,2.044,3.523,3.73,7.136C234.692,119.564,233.455,121.966,232.11,124.315Zm5.792-2.331c.968,2.4,1.793,4.805,2.474,7.136-2.349.574-4.823,1.058-7.387,1.434.879-1.381,1.757-2.8,2.582-4.25C236.4,124.871,237.167,123.419,237.9,121.984ZM219.72,141.116a73.921,73.921,0,0,1-4.985-5.738c1.614.072,3.263.126,4.931.126,1.685,0,3.353-.036,4.985-.126A69.993,69.993,0,0,1,219.72,141.116ZM206.38,130.555c-2.546-.377-5-.843-7.352-1.417.663-2.313,1.488-4.7,2.421-7.083.735,1.434,1.506,2.869,2.349,4.3S205.5,129.192,206.38,130.555ZM219.63,93.241a73.924,73.924,0,0,1,4.985,5.738c-1.614-.072-3.263-.126-4.931-.126-1.686,0-3.353.036-4.985.126A69.993,69.993,0,0,1,219.63,93.241ZM206.362,103.8c-.879,1.381-1.757,2.8-2.582,4.25-.825,1.434-1.6,2.869-2.331,4.3-.968-2.4-1.793-4.805-2.474-7.136C201.323,104.663,203.8,104.179,206.362,103.8Zm-16.227,22.449c-6.348-2.708-10.454-6.258-10.454-9.073s4.106-6.383,10.454-9.073c1.542-.663,3.228-1.255,4.967-1.811a86.122,86.122,0,0,0,4.034,10.92,84.9,84.9,0,0,0-3.981,10.866C193.38,127.525,191.694,126.915,190.134,126.252Zm9.647,25.623c-2.439-1.4-3.5-6.724-2.672-13.574.2-1.686.52-3.461.914-5.272a86.9,86.9,0,0,0,11.386,1.954,87.465,87.465,0,0,0,7.459,8.965c-5.845,5.433-11.332,8.41-15.062,8.41A4.279,4.279,0,0,1,199.781,151.875Zm42.532-13.663c.843,6.85-.2,12.175-2.618,13.592a3.99,3.99,0,0,1-2.062.466c-3.712,0-9.216-2.959-15.062-8.356a84.689,84.689,0,0,0,7.405-8.947,83.731,83.731,0,0,0,11.4-1.972A50.194,50.194,0,0,1,242.313,138.212Zm6.9-11.96c-1.542.663-3.228,1.255-4.967,1.811a86.12,86.12,0,0,0-4.034-10.92,84.9,84.9,0,0,0,3.981-10.866c1.775.556,3.461,1.165,5.039,1.829,6.348,2.708,10.454,6.258,10.454,9.073C259.67,119.994,255.564,123.562,249.216,126.252Z" fill="#61dafb"/>
+      <path id="Path_331" data-name="Path 331" d="M320.8,78.4Z" transform="translate(-119.082 -0.328)" fill="#61dafb"/>
+      <circle id="Ellipse_112" data-name="Ellipse 112" cx="8.194" cy="8.194" r="8.194" transform="translate(211.472 108.984)" fill="#61dafb"/>
+      <path id="Path_332" data-name="Path 332" d="M520.5,78.1Z" transform="translate(-282.975 -0.082)" fill="#61dafb"/>
+    </g>
+  </g>
+</svg>

website/static/img/undraw_windows.svg

@@ -0,0 +1,11 @@
+<svg id="e8345542-4160-463b-841e-d6381701a249" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1014.9" height="616.5" viewBox="0 0 1014.92 616.5"><defs><linearGradient id="b96c1e95-21f7-460f-8fe8-281b03b6a731" x1="223" y1="366.33" x2="223" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="grey" stop-opacity="0.25"/><stop offset="0.5" stop-color="grey" stop-opacity="0.12"/><stop offset="1" stop-color="grey" stop-opacity="0.1"/></linearGradient><linearGradient id="fdf2261c-aea2-449f-acb5-ed46fbfe76ac" x1="315" y1="481.74" x2="315" y2="115.42" gradientTransform="matrix(-1, 0, 0, 1, 1106.92, -115.42)" xlink:href="#b96c1e95-21f7-460f-8fe8-281b03b6a731"/><linearGradient id="bdb7606e-5185-43e5-b133-41bac9927d37" x1="508" y1="616.5" x2="508" y2="159.83" xlink:href="#b96c1e95-21f7-460f-8fe8-281b03b6a731"/></defs><title>windows</title><g opacity="0.5"><rect width="446" height="366.3" fill="url(#b96c1e95-21f7-460f-8fe8-281b03b6a731)"/></g><rect x="5.2" y="6.9" width="434.7" height="353.3" fill="#f2f2f2"/><rect x="5.2" y="6.9" width="434.7" height="78.8" fill="#0097a7"/><rect x="8.5" y="8.6" width="434.7" height="78.8" opacity="0.1"/><rect x="39.8" y="114.3" width="365.5" height="45.9" fill="#e0e0e0"/><rect x="39.8" y="194.8" width="266.7" height="15.6" fill="#e0e0e0"/><rect x="39.8" y="221.7" width="173.2" height="15.6" fill="#e0e0e0"/><rect x="39.8" y="248.6" width="228.6" height="15.6" fill="#e0e0e0"/><rect x="39.8" y="275.4" width="266.7" height="15.6" fill="#e0e0e0"/><rect x="39.8" y="302.2" width="89.2" height="15.6" fill="#e0e0e0"/><g opacity="0.5"><rect x="568.9" width="446" height="366.3" fill="url(#fdf2261c-aea2-449f-acb5-ed46fbfe76ac)"/></g><rect x="665.7" y="118.6" width="434.7" height="353.3" transform="matrix(-1,0,0,-1,1676.7,482.6)" fill="#f2f2f2"/><rect x="665.7" y="148.6" width="436" height="52.6" transform="matrix(-1,0,0,-1,1676.7,208.1)" fill="#0097a7"/><rect x="665.7" y="151.1" width="434.7" height="50.1" transform="matrix(-1,0,0,-1,1676.7,208.1)" opacity="0.1"/><rect x="701.6" y="229.7" width="365.5" height="45.9" transform="translate(1676.7,389.9) rotate(-180)" fill="#e0e0e0"/><rect x="800.4" y="310.3" width="266.7" height="15.6" transform="translate(1775.4,520.7) rotate(-180)" fill="#e0e0e0"/><rect x="893.9" y="337.1" width="173.2" height="15.6" transform="translate(1869,574.4) rotate(-180)" fill="#e0e0e0"/><rect x="838.5" y="364" width="228.6" height="15.6" transform="translate(1813.5,628.1) rotate(-180)" fill="#e0e0e0"/><rect x="800.4" y="390.8" width="266.7" height="15.6" transform="matrix(-1,0,0,-1,1775.4,681.8)" fill="#e0e0e0"/><rect x="977.9" y="417.7" width="89.2" height="15.6" transform="translate(1953,735.5) rotate(-180)" fill="#e0e0e0"/><g opacity="0.5"><rect x="230" y="159.8" width="556" height="456.7" fill="url(#bdb7606e-5185-43e5-b133-41bac9927d37)"/></g><rect x="236.5" y="168.5" width="542" height="440.5" fill="#ffffff"/><rect x="235.2" y="163.5" width="543.2" height="70.7" fill="#0097a7"/><rect x="279.7" y="302.3" width="455.6" height="57.2" fill="#f5f5f5"/><rect x="279.7" y="402.7" width="332.5" height="19.4" fill="#e0e0e0"/><rect x="279.7" y="436.2" width="215.9" height="19.4" fill="#e0e0e0"/><rect x="279.7" y="469.7" width="285" height="19.4" fill="#e0e0e0"/><rect x="279.7" y="503.1" width="332.5" height="19.4" fill="#e0e0e0"/><rect x="279.7" y="536.6" width="111.2" height="19.4" fill="#e0e0e0"/><rect x="303.4" y="321.8" width="129.6" height="17.3" fill="#69f0ae"/>
+    <ellipse cx="40.8" cy="44.2" fill="rgb(190, 57, 57)" rx="15.8" ry="15.8"/>
+    <ellipse cx="82.5" cy="44.2" fill="rgb(215, 188, 17)" rx="15.8" ry="15.8"/>
+    <linearGradient id="dwojrhum"/>
+    <ellipse cx="125.8" cy="44.2" fill="rgb(88, 186, 43)" rx="15.8" ry="15.8"/>
+    <rect fill="rgba(255, 255, 255, 0.48)" stroke="rgba(0, 0, 0, 0.21)" height="23.8" width="22.9" x="702.9" y="188.3"/>
+    <text font-size="29.5" textLength="140" fill="rgb(255, 255, 255)" stroke="rgba(0, 0, 0, 0.21)" x="740.6" y="209.8">
+        X
+    </text>
+    <rect fill="rgba(255, 255, 255, 0.83)" height="5" stroke="rgba(0, 0, 0, 0.21)" width="25" x="661.3" y="197.5"/>
+</svg>