init

.circleci/config.yml

@@ -0,0 +1,70 @@
+version: 2.1
+
+defaults: &defaults
+  docker:
+    - image: circleci/node:10
+
+jobs:
+  test:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - run: npm install
+      - run:
+          name: Run tests
+          command: npm test
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+      - run: npm build
+      - persist_to_workspace:
+          root: .
+          paths:
+            - README.md
+            - CHANGELOG.md
+            - LICENSE
+            - package.json
+            - package-lock.json
+            - .npmignore
+            - dist
+  deploy:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: .
+      - run:
+          name: List Workspace
+          command: ls
+      - run:
+          name: Authenticate with registry
+          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+      - run:
+          name: Publish package
+          command: npm publish
+
+workflows:
+  version: 2
+  test-deploy:
+    jobs:
+      - test:
+          filters:
+            tags:
+              only: /^v.*/
+      - hold:
+          type: approval
+          requires:
+            - test
+          filters:
+            branches:
+              only: master
+      - deploy:
+          requires:
+            - hold
+          filters:
+            branches:
+              only: master

.dockerignore

@@ -0,0 +1,2 @@
+*/node_modules
+*.log

.editorconfig

@@ -0,0 +1,10 @@
+# stop .editorconfig files search on current file.
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+
+node_modules
+
+lib/core/metadata.js
+lib/core/MetadataBlog.js
+
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+website/i18n/*
+
+dist/
+coverage

.npmignore

@@ -0,0 +1,6 @@
+.DS_Store
+website
+docs
+.circleci
+test
+coverage

.nvmrc

@@ -0,0 +1 @@
+v10.16.3

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+	"semi": true,
+	"trailingComma": "all",
+	"singleQuote": true,
+	"printWidth": 90
+}

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:lts
+
+WORKDIR /app/website
+
+EXPOSE 3000 35729
+COPY ./docs /app/docs
+COPY ./website /app/website
+RUN yarn install
+
+CMD ["yarn", "start"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Trendyol Open Source
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# Carousel
+
+<img src="docs/carousel.png" height="300px">

__tests__/__fixtures__/nodes.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const carouselItemNodes = (len: number) => {
+	return new Array(len).fill(0).map((_, i) => {
+		return <div style={{ height: 600 }}>{i + 1}</div>;
+	});
+};

__tests__/arrow.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { Arrow } from '../src/components/arrow';
+
+describe('<Arrow />', () => {
+	afterEach(cleanup);
+
+	it('should call onClick prop when click event occurs', async () => {
+		const onClick = jest.fn();
+		const { getByRole } = render(<Arrow onClick={onClick} />);
+
+		fireEvent.click(getByRole('button'));
+		expect(onClick).toHaveBeenCalled();
+	});
+});

__tests__/carousel.spec.tsx

@@ -0,0 +1,256 @@
+import React, { MouseEvent } from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { Carousel } from '../src/components/carousel';
+import { defaultProps } from '../src/components/carousel/defaultProps';
+import { carouselItemNodes } from './__fixtures__/nodes';
+import * as helpers from '../src/helpers';
+
+describe('<Carousel />', () => {
+	let mockGetPageX: jest.SpyInstance<
+		number,
+		[React.TouchEvent<Element> | React.MouseEvent<Element, globalThis.MouseEvent>]
+	>;
+
+	afterEach(() => {
+		mockGetPageX.mockRestore();
+		jest.clearAllTimers();
+		jest.resetAllMocks();
+		cleanup();
+	});
+
+	beforeEach(() => {
+		Element.prototype.getBoundingClientRect = jest.fn(() => {
+			return {
+				width: 900,
+				height: 600,
+				top: 0,
+				left: 0,
+				bottom: 0,
+				right: 0,
+				x: 0,
+				y: 0,
+				toJSON: jest.fn(),
+			};
+		});
+		jest.useFakeTimers();
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+	});
+
+	it('should render right layout', async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(6)} />,
+		);
+		const carousel = getByTestId('carousel');
+
+		expect(carousel.firstChild);
+		expect(carousel.firstChild!.firstChild).toBeTruthy();
+		expect(carousel.firstChild!.firstChild!.firstChild).toBeTruthy();
+		expect(carousel.firstChild!.firstChild!.firstChild).toBeTruthy();
+	});
+
+	it('should transform when pressing arrow keys', async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={true} />,
+		);
+		const carousel = getByTestId('carousel');
+
+		fireEvent.click(carousel);
+		fireEvent.keyDown(carousel, { keyCode: 39 });
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it("shouldn't listen keyboard event if useArrowKeys option false", async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={false} />,
+		);
+		const carousel = getByTestId('carousel');
+
+		fireEvent.click(carousel);
+		fireEvent.keyDown(carousel, { keyCode: 39 });
+
+		expect(setTimeout).toHaveBeenCalledTimes(0);
+	});
+
+	it("shouldn't slide to left if carousel not infinite and shows first item", async () => {
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={false}
+				useArrowKeys={true}
+				children={carouselItemNodes(4)}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+
+		fireEvent.click(carousel);
+		fireEvent.keyDown(carousel, { keyCode: 37 });
+
+		expect(setTimeout).toHaveBeenCalledTimes(0);
+	});
+
+	it("shouldn't do anything if press a key that different from arrow keys", async () => {
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={false}
+				useArrowKeys={true}
+				children={carouselItemNodes(4)}
+			/>,
+		);
+		const carousel = getByTestId('carousel');
+
+		fireEvent.click(carousel);
+		fireEvent.keyDown(carousel, { keyCode: 317 });
+
+		expect(setTimeout).toHaveBeenCalledTimes(0);
+	});
+
+	it('should slide to left when click left button', async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it('should slide to right when click right button', async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelectorAll('button')[1];
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it('should slide back when swiping is done', async () => {
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				swiping={true}
+				children={carouselItemNodes(12)}
+			/>,
+		);
+		const trackList = getByTestId('trackList');
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 390);
+
+		fireEvent.mouseMove(trackList, { pageX: 390 });
+		fireEvent.mouseUp(trackList, { pageX: 390 });
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it('should slide back when swiping is done and drag size less than item size', async () => {
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				swiping={true}
+				show={5}
+				children={carouselItemNodes(10)}
+			/>,
+		);
+		const trackList = getByTestId('trackList');
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 190);
+
+		fireEvent.mouseMove(trackList, { pageX: 190 });
+		fireEvent.mouseUp(trackList, { pageX: 190 });
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it("shouldn't rotate items if carousel is not infinite", async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(10)} />,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+
+	it('should rotate items if carousel is infinite', async () => {
+		const { getByTestId } = render(
+			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(10)} />,
+		);
+		const carousel = getByTestId('carousel');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+		jest.runAllTimers();
+
+		expect(setTimeout).toHaveBeenCalledTimes(1);
+		expect(setTimeout).toHaveBeenLastCalledWith(
+			expect.any(Function),
+			defaultProps.transition * 1000,
+		);
+	});
+});

__tests__/helpers.spec.tsx

@@ -0,0 +1,70 @@
+import React, { MouseEvent, TouchEvent } from 'react';
+import * as helpers from '../src/helpers';
+import { carouselItemNodes } from './__fixtures__/nodes';
+import { SlideDirection } from '../src/types/carousel';
+
+describe('helpers', () => {
+	it('should return to head of circular items list', async () => {
+		const items = carouselItemNodes(2);
+		const circular = new helpers.Circular(items, 0);
+		circular.next();
+		circular.next();
+
+		expect(circular.current()).toEqual(items[0]);
+	});
+
+	it('should add items to right and left of the array', async () => {
+		const items = carouselItemNodes(2);
+		const showingItems = carouselItemNodes(2);
+		const result = helpers.rotateItems(
+			items,
+			showingItems,
+			0,
+			1,
+			1,
+			SlideDirection.Right,
+		);
+
+		expect(result.length).toEqual(4);
+	});
+
+	it('should get indicator of the items array', async () => {
+		const result = helpers.getCurrent(0, 2, 4, SlideDirection.Right);
+
+		expect(result).toEqual(2);
+	});
+
+	it('should get indicator of the items array in circular manner', async () => {
+		const result = helpers.getCurrent(0, 5, 4, SlideDirection.Right);
+
+		expect(result).toEqual(1);
+	});
+
+	it('should return 0 if event is not mouseEvent or touchEvent', async () => {
+		const mouseEvent = { nativeEvent: { pageX: 10 } };
+		const result = helpers.getPageX(mouseEvent as React.MouseEvent);
+
+		expect(result).toEqual(0);
+	});
+
+	it('should return pageX if event is mouseEvent', async () => {
+		const nativeEvent = new MouseEvent('mousedown');
+		const pageX = 10;
+		Object.defineProperty(nativeEvent, 'pageX', { value: pageX });
+		const event = { nativeEvent };
+		const result = helpers.getPageX(event as MouseEvent);
+
+		expect(result).toEqual(pageX);
+	});
+
+	it('should return pageX if event is touchEvent', async () => {
+		const nativeEvent = new TouchEvent('mousedown');
+		const pageX = 10;
+		const changedTouches = [{ pageX }];
+		Object.defineProperty(nativeEvent, 'changedTouches', { value: changedTouches });
+		const event = { nativeEvent };
+		const result = helpers.getPageX(event as TouchEvent);
+
+		expect(result).toEqual(pageX);
+	});
+});

__tests__/index.spec.ts

@@ -0,0 +1,7 @@
+import { Carousel } from '../src';
+
+describe('index.ts', () => {
+	it('should export Carousel component', async () => {
+		expect(Carousel).toBeTruthy();
+	});
+});

__tests__/item.spec.tsx

@@ -0,0 +1,165 @@
+import React, { MouseEvent } from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import { ItemProvider, ItemProviderProps } from '../src/components/item';
+import { defaultProps } from '../src/components/carousel/defaultProps';
+import * as helpers from '../src/helpers';
+import { carouselItemNodes } from './__fixtures__/nodes';
+
+describe('<ItemProvider />', () => {
+	const defaultItemProviderProps: ItemProviderProps = {
+		...defaultProps,
+		items: carouselItemNodes(6),
+		widthCallBack: jest.fn(),
+		dragCallback: jest.fn(),
+		slideCallback: jest.fn(),
+		transition: 0,
+		transform: 0,
+	};
+	let mockGetPageX: jest.SpyInstance<
+		number,
+		[React.TouchEvent<Element> | React.MouseEvent<Element, globalThis.MouseEvent>]
+	>;
+
+	afterEach(() => {
+		mockGetPageX.mockRestore();
+		jest.resetAllMocks();
+		cleanup();
+	});
+
+	beforeEach(() => {
+		Element.prototype.getBoundingClientRect = jest.fn(() => {
+			return {
+				width: 900,
+				height: 600,
+				top: 0,
+				left: 0,
+				bottom: 0,
+				right: 0,
+				x: 0,
+				y: 0,
+				toJSON: jest.fn(),
+			};
+		});
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+	});
+
+	it('should call dragCallback when user swipes less than item width', async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} show={3} swiping={true} />,
+		);
+		const trackList = getByTestId('trackList');
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 390);
+		fireEvent.mouseMove(trackList, { pageX: 390 });
+
+		fireEvent.mouseUp(trackList, { pageX: 390 });
+
+		expect(defaultItemProviderProps.dragCallback).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call slideCallback when user swipes bigger than item width', async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} show={3} swiping={true} />,
+		);
+		const trackList = getByTestId('trackList');
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 290);
+		fireEvent.mouseMove(trackList, { pageX: 290 });
+
+		fireEvent.mouseUp(trackList, { pageX: 290 });
+
+		expect(defaultItemProviderProps.slideCallback).toHaveBeenCalledTimes(1);
+	});
+
+	it('should slide to left if drag value bigger than zero', async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} show={3} swiping={true} />,
+		);
+		const trackList = getByTestId('trackList');
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 910);
+		fireEvent.mouseMove(trackList, { pageX: 910 });
+
+		fireEvent.mouseUp(trackList, { pageX: 910 });
+
+		expect(defaultItemProviderProps.slideCallback).toHaveBeenCalledTimes(1);
+	});
+
+	it("should't call neither drag or slide callbacks when not swiping", async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} show={3} swiping={true} />,
+		);
+		const trackList = getByTestId('trackList');
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 290);
+		fireEvent.mouseMove(trackList, { pageX: 290 });
+
+		expect(defaultItemProviderProps.slideCallback).toHaveBeenCalledTimes(0);
+		expect(defaultItemProviderProps.dragCallback).toHaveBeenCalledTimes(0);
+	});
+
+	it("should't call neither drag or slide callbacks when mouse leave and not swiping", async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} show={3} swiping={true} />,
+		);
+		const trackList = getByTestId('trackList');
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 290);
+		fireEvent.mouseUp(trackList, { pageX: 290 });
+
+		expect(defaultItemProviderProps.slideCallback).toHaveBeenCalledTimes(0);
+		expect(defaultItemProviderProps.dragCallback).toHaveBeenCalledTimes(0);
+	});
+
+	it("should't listen mouse or touch event when swipiwing option false", async () => {
+		const { getByTestId } = render(
+			<ItemProvider {...defaultItemProviderProps} swiping={false} />,
+		);
+		const trackList = getByTestId('trackList');
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 600);
+		fireEvent.mouseDown(trackList, { pageX: 600 });
+
+		mockGetPageX = jest
+			.spyOn(helpers, 'getPageX')
+			.mockImplementation((_: MouseEvent) => 390);
+		fireEvent.mouseMove(trackList, { pageX: 390 });
+
+		fireEvent.mouseUp(trackList, { pageX: 390 });
+
+		expect(defaultItemProviderProps.dragCallback).toHaveBeenCalledTimes(0);
+		expect(defaultItemProviderProps.slideCallback).toHaveBeenCalledTimes(0);
+	});
+
+	it("shouldn't call useWindowWidthCahnge hook when responsive option false", async () => {
+		render(<ItemProvider {...defaultItemProviderProps} responsive={true} />);
+
+		Object.defineProperty(window, 'innerWidth', { value: 5 });
+		fireEvent(window, new Event('resize'));
+	});
+});

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3'
+
+services:
+  docusaurus:
+    build: .
+    ports:
+      - 3000:3000
+      - 35729:35729
+    volumes:
+      - ./docs:/app/docs
+      - ./website/blog:/app/website/blog
+      - ./website/core:/app/website/core
+      - ./website/i18n:/app/website/i18n
+      - ./website/pages:/app/website/pages
+      - ./website/static:/app/website/static
+      - ./website/sidebars.json:/app/website/sidebars.json
+      - ./website/siteConfig.js:/app/website/siteConfig.js
+    working_dir: /app/website

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+	coverageDirectory: 'coverage',
+	collectCoverage: true,
+	collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+	coverageThreshold: {
+		global: {
+			branches: 100,
+			functions: 100,
+			lines: 100,
+			statements: 100,
+		},
+	},
+	testPathIgnorePatterns: ['<rootDir>/__tests__/__fixtures__/'],
+	transform: {
+		'^.+\\.tsx?$': 'ts-jest',
+		'^.+\\.css$': 'jest-transform-css',
+	},
+	setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+	testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+	moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package.json

@@ -0,0 +1,84 @@
+{
+	"name": "@trendyol/react-carousel",
+	"version": "1.0.0",
+	"description": "Lightweight carousel component for react",
+	"main": "dist/cjs/index.js",
+	"module": "dist/es/index.js",
+	"jsnext:main": "dist/es/index.js",
+	"types": "dist/types/index.d.ts",
+	"homepage": "https://trendyol.github.io/react-carousel",
+	"repository": "github:Trendyol/carousel",
+	"bugs": "https://github.com/Trendyol/react-carousel/issues",
+	"scripts": {
+		"build": "rollup -c --environment BUILD:production",
+		"dev": "rollup -c -w --environment BUILD:development",
+		"publish": "npm publish",
+		"fmt": "prettier --write 'src/**/*.{ts,tsx,css}' *.{js,json,md} && npm run lint:fix",
+		"lint": "tslint -t verbose -c tslint.json 'src/**/*.{ts,tsx}'",
+		"lint:fix": "tslint -t verbose -c tslint.json --fix 'src/**/*.{ts,tsx}'",
+		"lint:staged": "pretty-quick --staged && lint-staged",
+		"test": "jest",
+		"security": "npm audit"
+	},
+	"lint-staged": {
+		"*.{ts,tsx}": "npm run fmt"
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "npm lint:staged",
+			"pre-push": "npm test"
+		}
+	},
+	"keywords": [
+		"carousel",
+		"react",
+		"slider"
+	],
+	"authors": [
+		"Hasan Genc <hasan.genc@trendyol.com> (https://github.com/hasangenc0)"
+	],
+	"license": "MIT",
+	"peerDependencies": {
+		"react": "^16.13.1"
+	},
+	"devDependencies": {
+		"@rollup/plugin-replace": "^2.3.1",
+		"@testing-library/jest-dom": "^5.3.0",
+		"@testing-library/react": "^10.0.2",
+		"@types/jest": "^25.2.1",
+		"@types/react": "^16.9.26",
+		"autoprefixer": "^9.7.5",
+		"eslint": "^6.8.0",
+		"husky": "^4.2.3",
+		"jest": "^25.2.7",
+		"jest-transform-css": "^2.0.0",
+		"lint-staged": "^10.0.9",
+		"prettier": "^2.0.2",
+		"pretty-quick": "^2.0.1",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"rollup": "^2.3.3",
+		"rollup-plugin-peer-deps-external": "^2.2.2",
+		"rollup-plugin-postcss-modules": "^2.0.1",
+		"rollup-plugin-terser": "^5.3.0",
+		"rollup-plugin-typescript2": "^0.27.0",
+		"ts-jest": "^25.3.1",
+		"tslint": "^6.1.0",
+		"tslint-plugin-prettier": "^2.3.0",
+		"tslint-react-hooks": "^2.2.2",
+		"typescript": "^3.8.3"
+	},
+	"sideEffects": false,
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}

rollup.config.js

@@ -0,0 +1,40 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss-modules';
+import pkg from './package.json';
+import typescript from 'rollup-plugin-typescript2';
+import autoprefixer from 'autoprefixer';
+import { terser } from 'rollup-plugin-terser';
+import replace from '@rollup/plugin-replace';
+
+const isProduction = process.env.BUILD === 'production';
+
+export default {
+	input: 'src/index.ts',
+	output: [
+		{
+			file: pkg.main,
+			format: 'cjs',
+			sourcemap: !isProduction,
+		},
+		{
+			file: pkg.module,
+			format: 'es',
+			sourcemap: !isProduction,
+		},
+	],
+	plugins: [
+		peerDepsExternal(),
+		postcss({
+			extract: false,
+			modules: true,
+			plugins: [autoprefixer()],
+			writeDefinitions: true,
+		}),
+		typescript({ useTsconfigDeclarationDir: true }),
+		isProduction && replace({ 'data-testid': '' }),
+		isProduction && terser(),
+	],
+	external: {
+		react: 'react',
+	},
+};

src/components/arrow/index.tsx

@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+import styles from '../../styles/styles.module.css';
+
+export const Arrow: FunctionComponent<ArrowProps> = (props: ArrowProps) => (
+	<button className={styles.carouselArrow} onClick={props.onClick}></button>
+);
+export interface ArrowProps {
+	onClick: (...args: any) => any;
+}

src/components/carousel/defaultProps.ts

@@ -0,0 +1,15 @@
+import { CarouselProps } from '.';
+
+export const defaultProps: Required<CarouselProps> = {
+	children: [],
+	show: 1,
+	slide: 1,
+	transition: 0.5,
+	swiping: false,
+	swipeOn: 1,
+	responsive: false,
+	infinite: true,
+	className: '',
+	useArrowKeys: false,
+	a11y: {},
+};

src/components/carousel/index.tsx

@@ -0,0 +1,152 @@
+import React, { useState, FunctionComponent, KeyboardEvent } from 'react';
+import { Arrow } from '../arrow';
+import { ItemProvider } from '../item';
+import {
+	rotateItems,
+	getTransformAmount,
+	getCurrent,
+	initItems,
+	getShowArrow,
+	cleanItems,
+} from '../../helpers';
+import { SlideDirection, Item, ArrowKeys } from '../../types/carousel';
+import { defaultProps } from './defaultProps';
+import styles from '../../styles/styles.module.css';
+
+export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselProps) => {
+	const props: Required<CarouselProps> = { ...defaultProps, ...userProps };
+	const [items, setItems] = useState(
+		initItems(props.children, props.slide, props.infinite),
+	);
+	const [width, setWidth] = useState(0);
+	const [animation, setAnimation] = useState({
+		transform: 0,
+		transition: 0,
+		isSliding: false,
+	});
+	const [current, setCurrent] = useState(0);
+	const [showArrow, setShowArrow] = useState(
+		getShowArrow(props.children.length, props.show, props.infinite, current),
+	);
+
+	const slide = (direction: SlideDirection, slide: number): void => {
+		if (
+			animation.isSliding ||
+			(direction === SlideDirection.Right && !showArrow.right) ||
+			(direction === SlideDirection.Left && !showArrow.left)
+		) {
+			return;
+		}
+
+		const next = getCurrent(current, slide, props.children.length, direction);
+		const rotated = props.infinite
+			? rotateItems(props.children, items, next, props.show, slide, direction)
+			: items;
+		if (props.infinite && direction === SlideDirection.Right) {
+			setItems(rotated);
+		}
+		setAnimation({
+			transform: animation.transform + getTransformAmount(width, slide, direction),
+			transition: props.transition,
+			isSliding: true,
+		});
+		setCurrent(next);
+		setShowArrow(getShowArrow(props.children.length, props.show, props.infinite, next));
+		setTimeout(() => {
+			if (props.infinite) {
+				setItems(cleanItems(rotated, slide, direction));
+			}
+			setAnimation({
+				transform: props.infinite
+					? getTransformAmount(width, slide, SlideDirection.Right)
+					: animation.transform + getTransformAmount(width, slide, direction),
+				transition: 0,
+				isSliding: false,
+			});
+		}, props.transition * 1_0_0_0);
+	};
+
+	const widthCallBack = (calculatedWidth: number, slide: number) => {
+		setWidth(calculatedWidth);
+		setAnimation({
+			transform: props.infinite
+				? getTransformAmount(calculatedWidth, slide, SlideDirection.Right)
+				: 0,
+			transition: 0,
+			isSliding: false,
+		});
+	};
+
+	const dragCallback = (translateX: number) => {
+		setAnimation({
+			transform: translateX,
+			transition: props.transition,
+			isSliding: false,
+		});
+		setTimeout(
+			() => setAnimation({ ...animation, transition: 0 }),
+			props.transition * 1_0_0_0,
+		);
+	};
+
+	const slideCallback = (direction: SlideDirection) => {
+		slide(direction, props.slide);
+	};
+
+	const handleOnKeyDown = (e: KeyboardEvent) => {
+		if (e.keyCode === ArrowKeys.Left) {
+			slide(SlideDirection.Left, props.slide);
+		} else if (e.keyCode === ArrowKeys.Right) {
+			slide(SlideDirection.Right, props.slide);
+		}
+	};
+
+	return (
+		<div
+			{...props.a11y}
+			data-testid="carousel"
+			tabIndex={0}
+			{...(props.useArrowKeys ? { onKeyDown: handleOnKeyDown } : {})}
+			className={`${styles.carouselBase} ${props.className}`}
+		>
+			{showArrow.left && (
+				<Arrow onClick={() => slide(SlideDirection.Left, props.slide)} />
+			)}
+			<ItemProvider
+				{...props}
+				transition={animation.transition}
+				items={items}
+				transform={animation.transform}
+				slideCallback={slideCallback}
+				dragCallback={dragCallback}
+				widthCallBack={widthCallBack}
+			/>
+			{showArrow.right && (
+				<Arrow onClick={() => slide(SlideDirection.Right, props.slide)} />
+			)}
+		</div>
+	);
+};
+
+export interface CarouselProps {
+	children: Item[];
+	show: number;
+	slide: number;
+	transition?: number;
+	swiping?: boolean;
+	swipeOn?: number;
+	responsive?: boolean;
+	infinite?: boolean;
+	className?: string;
+	useArrowKeys?: boolean;
+	a11y?: { [key: string]: string };
+}
+
+export interface CarouselState {
+	items: Item[];
+	width: number;
+	transform: number;
+	transition: number;
+	isSliding: boolean;
+	current: number;
+}

src/components/item/index.tsx

@@ -0,0 +1,133 @@
+import React, {
+	FunctionComponent,
+	useCallback,
+	useState,
+	MouseEvent,
+	TouchEvent,
+} from 'react';
+import { Item, SlideDirection } from '../../types/carousel';
+import { getPageX } from '../../helpers';
+import { useWindowWidthChange } from '../../hooks';
+import styles from '../../styles/styles.module.css';
+
+export const ItemProviderBase: FunctionComponent<ItemProviderProps> = (
+	props: ItemProviderProps,
+) => {
+	const [width, setWidth] = useState(200);
+	const ref = useCallback(
+		(node) => {
+			if (node !== null) {
+				const calculated = node.getBoundingClientRect().width / props.show;
+				setWidth(calculated);
+				props.widthCallBack(calculated, props.slide);
+			}
+		},
+		[width],
+	);
+
+	// tslint:disable-next-line: no-unused-expression
+	props.responsive &&
+		useWindowWidthChange((change: number) => {
+			setWidth(width - change);
+		});
+	const [drag, setDrag] = useState({
+		initial: props.transform,
+		start: 0,
+		isDown: false,
+		drag: 0,
+		finished: true,
+		pointers: true,
+	});
+	const handleDragStart = (e: MouseEvent | TouchEvent) => {
+		e.persist();
+		setDrag({
+			...drag,
+			isDown: true,
+			start: getPageX(e),
+			initial: props.transform,
+			finished: false,
+		});
+	};
+	const handleDragFinish = (e: MouseEvent | TouchEvent) => {
+		e.persist();
+		if (drag.finished) {
+			return;
+		}
+		if (Math.abs(drag.drag) < width * props.swipeOn) {
+			props.dragCallback(props.transform);
+			return setDrag({
+				initial: props.transform,
+				start: 0,
+				isDown: false,
+				drag: 0,
+				finished: true,
+				pointers: true,
+			});
+		}
+
+		props.slideCallback(drag.drag > 0 ? SlideDirection.Right : SlideDirection.Left);
+		setDrag({ ...drag, drag: 0, isDown: false, finished: true, pointers: true });
+		return;
+	};
+	const handleDragMove = (e: MouseEvent | TouchEvent) => {
+		e.persist();
+		if (!drag.isDown) {
+			return;
+		}
+		const pos = getPageX(e);
+		setDrag({ ...drag, drag: drag.start - pos, pointers: false });
+	};
+	const swipeProps = props.swiping
+		? {
+				onTouchCancel: handleDragFinish,
+				onTouchEnd: handleDragFinish,
+				onTouchMove: handleDragMove,
+				onTouchStart: handleDragStart,
+				onMouseDown: handleDragStart,
+				onMouseLeave: handleDragFinish,
+				onMouseUp: handleDragFinish,
+				onMouseMove: handleDragMove,
+		  }
+		: {};
+
+	return (
+		<div ref={ref} className={styles.itemProvider}>
+			<div
+				data-testid="trackList"
+				{...swipeProps}
+				className={styles.itemTracker}
+				style={{
+					transform: `translateX(${props.transform - drag.drag}px)`,
+					transition: `transform ${props.transition}s ease 0s`,
+					width: width * props.items.length,
+				}}
+			>
+				{props.items.map((item, i) => (
+					<div
+						key={i}
+						style={{ width, pointerEvents: drag.pointers ? 'all' : 'none' }}
+						className={styles.itemContainer}
+					>
+						{item}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export const ItemProvider = React.memo(ItemProviderBase);
+export interface ItemProviderProps {
+	items: Item[];
+	show: number;
+	slide: number;
+	widthCallBack: (width: number, slide: number) => void;
+	dragCallback: (transform: number) => void;
+	slideCallback: (direction: SlideDirection) => void;
+	transition: number;
+	transform: number;
+	swiping: boolean;
+	swipeOn: number;
+	responsive: boolean;
+	infinite: boolean;
+}

src/helpers/index.ts

@@ -0,0 +1,135 @@
+import { MouseEvent, TouchEvent } from 'react';
+import { SlideDirection, Item } from '../types/carousel';
+
+export class Circular<T> {
+	constructor(private arr: T[], private currentIndex: number) {}
+
+	next(): T {
+		const i = this.currentIndex;
+		const arr = this.arr;
+		this.currentIndex = i < arr.length - 1 ? i + 1 : 0;
+		return this.current();
+	}
+
+	prev(): T {
+		const i = this.currentIndex;
+		const arr = this.arr;
+		this.currentIndex = i > 0 ? i - 1 : arr.length - 1;
+		return this.current();
+	}
+
+	current(): T {
+		return this.arr[this.currentIndex];
+	}
+}
+
+export const rotateItems = (
+	items: any[],
+	showingItems: any[],
+	start: number,
+	show: number,
+	slide: number,
+	direction: SlideDirection,
+): any[] => {
+	const circular = new Circular(items, start);
+	const newItems: any[] = Array.from(showingItems);
+
+	switch (+direction) {
+		case SlideDirection.Left:
+			for (let i = slide; i >= 0; i--) {
+				if (slide - i < 0 || !newItems[i - slide]) {
+					newItems.unshift(circular.current());
+				}
+				circular.prev();
+			}
+			break;
+		case SlideDirection.Right:
+			for (let i = 0; i < show + slide; i++) {
+				if (!newItems[2 * slide + i]) {
+					newItems.push(circular.current());
+				}
+				circular.next();
+			}
+			break;
+	}
+
+	return newItems;
+};
+
+export const getTransformAmount = (
+	width: number,
+	slideCount: number,
+	direction: SlideDirection,
+): number => {
+	return direction * width * slideCount;
+};
+
+export const getCurrent = (
+	current: number,
+	slide: number,
+	length: number,
+	direction: SlideDirection,
+) => {
+	const slideTo = current - direction * slide;
+	if (slideTo < 0) {
+		return length + slideTo;
+	} else if (length <= slideTo) {
+		return slideTo - length;
+	}
+
+	return slideTo;
+};
+
+export const getShowArrow = (
+	items: number,
+	show: number,
+	infinite: boolean,
+	current: number,
+): { left: boolean; right: boolean } => {
+	const isItemsMore = items > show;
+	if (infinite) {
+		return {
+			left: isItemsMore,
+			right: isItemsMore,
+		};
+	}
+
+	return {
+		left: isItemsMore && current !== 0,
+		right: isItemsMore && current + show < items,
+	};
+};
+
+export const cleanItems = (
+	showingItems: any[],
+	slide: number,
+	direction: SlideDirection,
+): any[] => {
+	if (direction === SlideDirection.Left) {
+		return showingItems.slice(0, -1 * slide);
+	}
+	return showingItems.slice(slide);
+};
+
+export const initItems = (items: Item[], slide: number, infinite: boolean): Item[] => {
+	if (!infinite) {
+		return items;
+	}
+
+	const newArray = Array.from(items);
+	const circular = new Circular(items, 0);
+	for (let i = 0; i < slide; i++) {
+		newArray.unshift(circular.prev());
+	}
+
+	return newArray;
+};
+
+export function getPageX(e: TouchEvent | MouseEvent): number {
+	if (e.nativeEvent instanceof MouseEvent) {
+		return e.nativeEvent.pageX;
+	} else if (e.nativeEvent instanceof TouchEvent) {
+		return e.nativeEvent.changedTouches[0].pageX;
+	}
+	return 0;
+}

src/hooks/index.ts

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useState } from 'react';
+
+export const useWindowWidthChange = (callBack: (changed: number) => any) => {
+	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+	useLayoutEffect(() => {
+		const update = () => {
+			const changed = windowWidth - window.innerWidth;
+			setWindowWidth(window.innerWidth);
+			callBack(changed);
+		};
+		window.addEventListener('resize', update);
+		return () => window.removeEventListener('resize', update);
+	}, []);
+	return;
+};

src/index.ts

@@ -0,0 +1,3 @@
+import { Carousel } from './components/carousel';
+
+export { Carousel };

src/styles/styles.module.css

@@ -0,0 +1,26 @@
+.carousel-base {
+	width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	outline: none;
+}
+
+.item-provider {
+	overflow: hidden;
+	width: 100%;
+	cursor: pointer;
+}
+
+.item-container img {
+	user-select: none;
+	-webkit-user-drag: none;
+}
+
+.item-tracker {
+	height: 100%;
+	display: flex;
+}
+
+.carousel-arrow {
+	z-index: 1;
+}

src/styles/styles.module.css.d.ts

@@ -0,0 +1,19 @@
+export const carouselBase: string;
+export const itemProvider: string;
+export const itemContainer: string;
+export const itemTracker: string;
+export const carouselArrow: string;
+interface Namespace {
+	carouselBase: string;
+	'carousel-base': string;
+	itemProvider: string;
+	'item-provider': string;
+	itemContainer: string;
+	'item-container': string;
+	itemTracker: string;
+	'item-tracker': string;
+	carouselArrow: string;
+	'carousel-arrow': string;
+}
+declare const stylesModule: Namespace;
+export default stylesModule;

src/types/carousel.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+export enum SlideDirection {
+	Right = -1,
+	Left = 1,
+}
+
+export const enum ArrowKeys {
+	Right = 39,
+	Left = 37,
+}
+
+export type Item = ReactElement;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"outDir": "./dist",
+		"module": "esnext",
+		"target": "es6",
+		"lib": ["es6", "dom", "es2016", "es2017"],
+		"sourceMap": true,
+		"allowJs": false,
+		"jsx": "react",
+		"declaration": true,
+		"declarationDir": "./dist/types",
+		"moduleResolution": "node",
+		"forceConsistentCasingInFileNames": true,
+		"noImplicitReturns": true,
+		"noImplicitThis": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"suppressImplicitAnyIndexErrors": true,
+		"allowSyntheticDefaultImports": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"esModuleInterop": true
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
+}

tslint.json

@@ -0,0 +1,24 @@
+{
+	"defaultSeverity": "error",
+	"extends": ["tslint:recommended", "tslint-react-hooks"],
+	"jsRules": {
+		"trailing-comma": false
+	},
+	"rules": {
+		"interface-name": [true, "never-prefix"],
+		"no-console": false,
+		"no-shadowed-variable": false,
+		"arrow-parens": false,
+		"trailing-comma": false,
+		"member-access": [true, "no-public"],
+		"callable-types": false,
+		"no-empty-interface": false,
+		"only-arrow-functions": false,
+		"variable-name": [true, "allow-leading-underscore", "allow-pascal-case"],
+		"object-literal-sort-keys": false
+	},
+	"rulesDirectory": [],
+	"linterOptions": {
+		"exclude": ["./**/node_modules/**"]
+	}
+}

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](https://v2.docusaurus.io/), 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=true 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-28-hola.md

@@ -0,0 +1,11 @@
+---
+id: hola
+title: Hola
+author: Gao Wei
+author_title: Docusaurus Core Team
+author_url: https://github.com/wgao19
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

website/blog/2019-05-29-hello-world.md

@@ -0,0 +1,17 @@
+---
+id: hello-world
+title: Hello
+author: Endilie Yacop Sucipto
+author_title: Maintainer of Docusaurus
+author_url: https://github.com/endiliey
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+tags: [hello, docusaurus]
+---
+
+Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
+
+<!--truncate-->
+
+This is a test post.
+
+A whole bunch of other information.

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

@@ -0,0 +1,13 @@
+---
+id: welcome
+title: Welcome
+author: Yangshun Tay
+author_title: Front End Engineer @ Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+tags: [facebook, hello, docusaurus]
+---
+
+Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
+
+Delete the whole directory if you don't want the blog features. As simple as that!

website/docs/carousel.md

@@ -0,0 +1,26 @@
+---
+id: carousel
+title: Carousel
+---
+
+Creates carousel component.
+
+```jsx
+<Carousel />
+```
+
+### Props
+
+| Name         |  type   | required | default |                                                                       descripiton |
+| ------------ | :-----: | -------: | ------: | --------------------------------------------------------------------------------: |
+| children     | Node[]  |     true |      [] |                                      Child items that will be wrapped by carousel |
+| show         | number  |    false |       1 |                                              number of items to show at per slide |
+| slide        | number  |    false |       1 |                                                 number of how many items to slide |
+| infinite     | boolean |    false |    true |                                                                scrolling infinity |
+| transition   | number  |    false |     0.5 |                                    same as css transition property's second value |
+| swiping      | boolean |    false |   false |                                   enable swiping/dragging with mouse/touch events |
+| swipeOn      | number  |    false |       1 |                 percantage of item width that slides when user drag count exceeds |
+| responsive   | boolean |    false |   false | enables the feature that adjusts items width according to screen size dynamically |
+| className    | string  |    false |      "" |                                                same as react's className property |
+| useArrowKeys | boolean |    false |   false |                                             enables sliding when press arrow keys |
+| a11y         |  Array  |    false |      {} |                                                          accessibility attributes |

website/docs/infinityCarousel.md

@@ -0,0 +1,33 @@
+---
+id: infinity
+title: Infinite Carousel
+---
+
+Carousel is infinite at default
+
+import {Carousel} from '@trendyol/react-carousel';
+export const Highlight = ({children, color}) => ( <span style={{
+  backgroundColor: color,
+  borderRadius: '2px',
+  color: '#fff',
+  padding: '90px 0',
+  display: 'block',
+  height: '200px',
+  margin: '16px 16px 16px 0',
+}}> {children} </span> );
+
+<Carousel className={'exampleCarousel1'} show={3.5} slide={2} transition={0.5}>
+<Highlight color="#f27a1a">We love Trendyol orange</Highlight>
+<a target="_blank" href="https://github.com/trendyol/"><Highlight color="#d53f8c">This is our github</Highlight></a>
+<Highlight color="#16be48">We love Trendyol green</Highlight>
+<a target="_blank" href="https://trendyol.com/"><Highlight color="#3f51b5">This is our website</Highlight></a>
+</Carousel>
+
+```jsx
+<Carousel show={3.5} slide={2} transition={0.5}>
+	<Highlight color="#f27a1a">We love Trendyol orange</Highlight>
+	<Highlight color="#d53f8c">This is our github</Highlight>
+	<Highlight color="#16be48">We love Trendyol green</Highlight>
+	<Highlight color="#3f51b5">This is our website</Highlight>
+</Carousel>
+```

website/docs/installation.md

@@ -0,0 +1,21 @@
+---
+id: installation
+title: Installation Guide
+sidebar_label: Installation Guide
+---
+
+Carousel requires React 16.8 or greater.
+
+## Installation
+
+```
+npm i react react-dom @trendyol/react-carousel --save
+```
+
+---
+
+## Importing
+
+```jsx
+import { Carousel } from '@trendyol/react-carousel';
+```

website/docs/swipableCarousel.md

@@ -0,0 +1,40 @@
+---
+id: swipible
+title: Swipible Carousel
+---
+
+Carousel is infinite at default
+
+import {Carousel} from '@trendyol/react-carousel';
+export const Highlight = ({children, color}) => ( <span style={{
+  backgroundColor: color,
+  borderRadius: '2px',
+  color: '#fff',
+  padding: '90px 0',
+  display: 'block',
+  height: '200px',
+  margin: '16px 16px 16px 0',
+}}> {children} </span> );
+
+<Carousel className={'exampleCarousel1'} show={3.5} slide={3} swiping={true}>
+<Highlight color="#2d66c3">We love Web 🌐</Highlight>
+<Highlight color="#f44336">We love Developers 👩🏻‍</Highlight>
+<a target="_blank" href="https://github.com/trendyol/"><Highlight color="#d53f8c">This is our github</Highlight></a>
+<a target="_blank" href="https://trendyol.com/"><Highlight color="#f27a1a">This is our website</Highlight></a>
+<Highlight color="#16be48">We love Trendyol green</Highlight>
+<Highlight color="#f27a1a">We love Trendyol orange</Highlight>
+</Carousel>
+
+```jsx
+<Carousel show={3.5} slide={3} swiping={true}>
+	<Highlight color="#2d66c3">We love Web 🌐</Highlight>
+	<Highlight color="#f44336">We love Developers 👩🏻‍</Highlight>
+	<a target="_blank" href="https://github.com/trendyol/">
+		<Highlight color="#d53f8c">This is our github</Highlight>
+	</a>
+	<a target="_blank" href="https://trendyol.com/">
+		<Highlight color="#f27a1a">This is our website</Highlight>
+	</a>
+	...
+</Carousel>
+```

website/docs/usage.md

@@ -0,0 +1,23 @@
+---
+id: usage
+title: Usage
+---
+
+Simple carousel that show one item per slide.
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Carousel } from '@trendyol/react-carousel';
+import { Item } from './yourItem';
+
+ReactDOM.render(
+	<Carousel>
+		<Item />
+		<Item />
+		<Item />
+		<Item />
+	</Carousel>,
+	document.getElementById('root'),
+);
+```

website/docusaurus.config.js

@@ -0,0 +1,90 @@
+module.exports = {
+	title: 'Carousel',
+	tagline: 'Lightweight carousel component for React',
+	url: 'https://trendyol.github.io/react-carousel',
+	baseUrl: '/',
+	favicon: 'img/icon.png',
+	organizationName: 'Trendyol',
+	projectName: 'carousel',
+	themeConfig: {
+		navbar: {
+			title: 'React Carousel',
+			logo: {
+				alt: 'Carousel',
+				src: 'img/icon.png',
+			},
+			links: [
+				{
+					to: 'docs/installation',
+					activeBasePath: 'docs',
+					label: 'Docs',
+					position: 'left',
+				},
+				{
+					href: 'https://github.com/trendyol/react-carousel',
+					label: 'GitHub',
+					position: 'right',
+				},
+			],
+		},
+		footer: {
+			style: 'dark',
+			links: [
+				{
+					title: 'Docs',
+					items: [
+						{
+							label: 'Installation',
+							to: 'docs/installation',
+						},
+						{
+							label: 'Usage',
+							to: 'docs/usage  ',
+						},
+					],
+				},
+				{
+					title: 'Communtiy',
+					items: [
+						{
+							label: 'GitHub',
+							href: 'https://github.com/trendyol/',
+						},
+						{
+							label: 'Meetup',
+							href: 'https://www.meetup.com/trendyol/',
+						},
+					],
+				},
+				{
+					title: 'Social',
+					items: [
+						{
+							label: 'Medium',
+							href: 'https://medium.com/trendyol-tech',
+						},
+						{
+							label: 'Youtube',
+							href: 'https://www.youtube.com/channel/UCUBiayLMggBAsiYvGLzQJ5w/',
+						},
+					],
+				},
+			],
+			copyright: `Copyright © ${new Date().getFullYear()} Trendyol Open Source`,
+		},
+	},
+	presets: [
+		[
+			'@docusaurus/preset-classic',
+			{
+				docs: {
+					sidebarPath: require.resolve('./sidebars.js'),
+					editUrl: 'https://github.com/trendyol/react-carousel/edit/master/website/',
+				},
+				theme: {
+					customCss: require.resolve('./src/css/custom.css'),
+				},
+			},
+		],
+	],
+};

website/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "website",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy"
+	},
+	"dependencies": {
+		"@docusaurus/core": "^2.0.0-alpha.48",
+		"@docusaurus/preset-classic": "^2.0.0-alpha.48",
+		"classnames": "^2.2.6",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1"
+	},
+	"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,7 @@
+module.exports = {
+	someSidebar: {
+		Docusaurus: ['installation', 'usage'],
+		API: ['carousel'],
+		Examples: ['infinity', 'swipible'],
+	},
+};

website/src/css/custom.css

@@ -0,0 +1,50 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * 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: #25c2a0;
+	--ifm-color-primary-dark: rgb(33, 175, 144);
+	--ifm-color-primary-darker: rgb(31, 165, 136);
+	--ifm-color-primary-darkest: rgb(26, 136, 112);
+	--ifm-color-primary-light: rgb(70, 203, 174);
+	--ifm-color-primary-lighter: rgb(102, 212, 189);
+	--ifm-color-primary-lightest: rgb(146, 224, 208);
+	--ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+	background-color: rgb(72, 77, 91);
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
+}
+
+.exampleCarousel1 button:first-child {
+	background: url('https://cdn.dsmcdn.com/web/production/slick-arrow.svg') no-repeat
+		center;
+	transform: rotateZ(180deg);
+	outline: none;
+	border: none;
+	cursor: pointer;
+	position: relative;
+	left: -16px;
+}
+
+.exampleCarousel1 button:last-child {
+	background: url('https://cdn.dsmcdn.com/web/production/slick-arrow.svg') no-repeat
+		center;
+	outline: none;
+	border: none;
+	cursor: pointer;
+	position: relative;
+	right: -16px;
+}
+
+.exampleCarousel1 div:first-child {
+	text-align: center;
+}

website/src/pages/index.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Carousel } from '@trendyol/react-carousel';
+import styles from './styles.module.css';
+import { Redirect } from '@docusaurus/router';
+
+const features = [
+	{
+		title: <>Easy to Use</>,
+		imageUrl: 'img/undraw_docusaurus_mountain.svg',
+		description: (
+			<>
+				Docusaurus was designed from the ground up to be easily installed and used to get
+				your website up and running quickly.
+			</>
+		),
+	},
+	{
+		title: <>Focus on What Matters</>,
+		imageUrl: 'img/undraw_docusaurus_tree.svg',
+		description: (
+			<>
+				Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and
+				move your docs into the <code>docs</code> directory.
+			</>
+		),
+	},
+	{
+		title: <>Powered by React</>,
+		imageUrl: 'img/undraw_docusaurus_react.svg',
+		description: (
+			<>
+				Extend or customize your website layout by reusing React. Docusaurus can be
+				extended while reusing the same header and footer.
+			</>
+		),
+	},
+];
+const features2 = (num) => {
+	let i = 0;
+	return new Array(num).fill(0).map(() => {
+		i++;
+		return {
+			description: <>{i}</>,
+		};
+	});
+};
+
+function Feature({ imageUrl, title, description }) {
+	const imgUrl = useBaseUrl(imageUrl);
+	return (
+		<div className={classnames('col col--4', styles.feature)}>
+			{imgUrl && (
+				<div className="text--center">
+					<img className={styles.featureImage} src={imgUrl} alt={title} />
+				</div>
+			)}
+			<h3>{title}</h3>
+			<p>{description}</p>
+		</div>
+	);
+}
+
+function Home() {
+	return <Redirect to="/docs/installation" />;
+	const context = useDocusaurusContext();
+	const { siteConfig = {} } = context;
+	return (
+		<Layout
+			title={`Hello from ${siteConfig.title}`}
+			description="Description will go into a meta tag in <head />"
+		>
+			<header className={classnames('hero hero--primary', styles.heroBanner)}>
+				<div className="container">
+					<h1 className="hero__title">{siteConfig.title}</h1>
+					<p className="hero__subtitle">{siteConfig.tagline}</p>
+					<div className={styles.buttons}>
+						<Link
+							className={classnames(
+								'button button--outline button--secondary button--lg',
+								styles.getStarted,
+							)}
+							to={useBaseUrl('docs/doc1')}
+						>
+							Get Started
+						</Link>
+					</div>
+				</div>
+			</header>
+			<main>
+				<section className={styles.features}>
+					<div className="container">
+						<div className="row">
+							<Carousel show={5} slide={5} transition={0.5}>
+								{features2(15).map((props, idx) => (
+									<div key={idx} style={{ marginRight: '20px' }}>
+										{props.description}
+									</div>
+								))}
+							</Carousel>
+						</div>
+					</div>
+				</section>
+				{features && features.length && (
+					<section className={styles.features}>
+						<div className="container">
+							<div className="row">
+								<Carousel show={2} slide={1} transition={0.5}>
+									{features.map((props, idx) => (
+										<Feature key={idx} {...props} />
+									))}
+								</Carousel>
+							</div>
+						</div>
+					</section>
+				)}
+			</main>
+		</Layout>
+	);
+}
+
+export default Home;

website/src/pages/styles.module.css

@@ -0,0 +1,36 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * 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/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>