Add new readme files and images (#7615)

README.md

@@ -1,58 +1,98 @@
 <div align="center">
 
-<a href="//handsontable.com" rel="nofollow"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-logo.svg?sanitize=true" alt="Handsontable" width="300"></a>
+<a href="https://handsontable.com" rel="nofollow"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-logo-blue.svg" alt="Handsontable" width="300"></a>
 
-**Handsontable** is a JavaScript/HTML5 data grid component with spreadsheet look & feel. <br>
-It provides easy data binding, data validation, filtering, sorting and CRUD operations.
+Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. <br>
+It provides data binding, data validation, filtering, sorting, and CRUD operations.
 
-Handsontable works with [Vue](//github.com/handsontable/handsontable/wrappers/vue-handsontable), [React](//github.com/handsontable/handsontable/wrappers/react-handsontable) and [Angular](//github.com/handsontable/handsontable/wrappers/angular-handsontable).
-<br><br>
-[![npm](https://img.shields.io/npm/dt/handsontable.svg)](//npmjs.com/package/handsontable)
-[![npm](https://img.shields.io/npm/dm/handsontable.svg)](//npmjs.com/package/handsontable)
+[![npm](https://img.shields.io/npm/dt/handsontable.svg)](https://npmjs.com/package/handsontable)
+[![npm](https://img.shields.io/npm/dm/handsontable.svg)](https://npmjs.com/package/handsontable)
 [![Build status](https://app.codeship.com/projects/1ec34290-ed0a-0131-911c-1a47c8fbcce0/status?branch=master)](https://app.codeship.com/projects/26649)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fhandsontable%2Fhandsontable?ref=badge_shield)
 [![Known Vulnerabilities](https://snyk.io/test/github/handsontable/handsontable/badge.svg?targetFile=package.json)](https://snyk.io/test/github/handsontable/handsontable?targetFile=package.json)
-[![](https://data.jsdelivr.com/v1/package/npm/handsontable/badge?style=rounded)](https://www.jsdelivr.com/package/npm/handsontable)
-</div>
 
-<br>
+---
+#### Get Started with Handsontable
+
+<table border="0">
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/react-icon.svg" width="14" height="14">
+      <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/react"> <strong>React</strong></a>&nbsp;
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/angular-icon.svg" width="14" height="14">
+      <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/angular"> <strong>Angular</strong></a>&nbsp;
+    </td>
+    <td>
+      <img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/vue-icon.svg" width="14" height="14">
+      <a href="https://github.com/handsontable/handsontable/tree/master/wrappers/vue"> <strong>Vue</strong></a>&nbsp;
+    </td>
+        <td>
+      <img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/icons/javascript-icon.svg" width="14" height="14">&nbsp;
+      <a href="#installation"> <strong>JavaScript</strong></a>&nbsp;
+    </td>
+  </tr>
+</table>
+
+---
+
+<a href="https://handsontable.com/examples"><img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-github-preview.png" alt="Handsontable data grid" width="805"/></a>
 
-<div align="center">
-<a href="//handsontable.com/examples?headers">
-<img src="https://raw.githubusercontent.com/handsontable/handsontable/develop/resources/handsontable-github-preview.png" align="center" alt="Handsontable Screenshot" width="861"/>
-</a>
 </div>
 
-<br>
+## Features
+
+The most popular features of Handsontable:
+
+&nbsp;&nbsp;✓&nbsp; Multiple column sorting <br>
+&nbsp;&nbsp;✓&nbsp; Non-contiguous selection <br>
+&nbsp;&nbsp;✓&nbsp; Filtering data <br>
+&nbsp;&nbsp;✓&nbsp; Export to file <br>
+&nbsp;&nbsp;✓&nbsp; Validating data <br>
+&nbsp;&nbsp;✓&nbsp; Conditional formatting <br>
+&nbsp;&nbsp;✓&nbsp; Merging cells <br>
+&nbsp;&nbsp;✓&nbsp; Freezing rows/columns <br>
+&nbsp;&nbsp;✓&nbsp; Moving rows/columns <br>
+&nbsp;&nbsp;✓&nbsp; Resizing rows/columns <br>
+&nbsp;&nbsp;✓&nbsp; Hiding rows/columns <br>
+&nbsp;&nbsp;✓&nbsp; Context menu <br>
+&nbsp;&nbsp;✓&nbsp; Comments <br>
+
+## Documentation
+
+- [Developer guides](https://handsontable.com/docs)
+- [API Reference](https://handsontable.com/docs/Core.html)
+- [Change log](https://handsontable.com/docs/tutorial-release-notes.html)
+- [Demo](https://handsontable.com/examples)
+
+<div id="installation"></div>
 
-## Installation
+## Get Started
+### Install with npm
 
-Use npm to install the latest version.
+Run the following command in your terminal
 ```
 npm install handsontable
 ```
 
-You can use Yarn, NuGet or [other methods](//handsontable.com/download) as well. You can load it directly from [jsDelivr](//www.jsdelivr.com/package/npm/handsontable).
+You can also use [Yarn](https://yarnpkg.com/package/handsontable), [NuGet](https://www.nuget.org/packages/Handsontable) or load the bundle directly from [jsDelivr](https://jsdelivr.com/package/npm/handsontable).
 
-## Usage
+### Create a placeholder
 
-Create a placeholder - an HTML element holding a place for a data grid.
+Create an HTML placeholder
 
 ```html
 <div id="example"></div>
 ```
 
-Import Handsontable and its stylesheet.
+Import Handsontable and its stylesheet
 ```js
 import Handsontable from "handsontable";
 import 'handsontable/dist/handsontable.full.css';
 ```
 
-Alternatively, you can simply embed it in your HTML file.
-```html
-<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
-```
+### Initialize the grid
 
 Now turn your placeholder into a data grid with sample data.
 ```js
@@ -71,104 +111,26 @@ const hot = new Handsontable(container, {
 });
 ```
 
-##### [See the live demo](//handsontable.com/examples)
-
-## Features
-
-A list of some of the most popular features:
-
-- Multiple column sorting
-- Non-contiguous selection
-- Filtering data
-- Export to file
-- Validating data
-- Conditional formatting
-- Merging cells
-- Custom cell types
-- Freezing rows/columns
-- Moving rows/columns
-- Resizing rows/columns
-- Hiding rows/columns
-- Context menu
-- Comments
-- Auto-fill option
-
-## Framework support
+## Support
 
-Use one of the available wrappers to use Handsontable with your favorite framework:
+We provide support for developers working with commercial version via [contact form](https://handsontable.com/contact?category=technical_support)</a> or at support@handsontable.com.
 
-- [Handsontable for Vue](//github.com/handsontable/handsontable/wrappers/vue-handsontable)
-- [Handsontable for React](//github.com/handsontable/handsontable/wrappers/react-handsontable)
-- [Handsontable for Angular](//github.com/handsontable/handsontable/wrappers/angular-handsontable)
-
-## Documentation
-
-- [Developer guides](//handsontable.com/docs)
-- [API Reference](//handsontable.com/docs/Core.html)
-- [Release notes](//handsontable.com/docs/tutorial-release-notes.html)
-- [Twitter](//twitter.com/handsontable) (News and updates)
-
-## Support and contribution
-
-We provide support for all users through [GitHub issues](//github.com/handsontable/handsontable/issues). If you have a commercial license then you can add a new ticket through the [contact form](//handsontable.com/contact?category=technical_support).
-
-If you would like to contribute to this project, make sure you first read the [guide for contributors](//github.com/handsontable/handsontable/blob/master/CONTRIBUTING.md).
-
-## Browser compatibility
-
-Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.
+If you use a non-commercial version then please ask your tagged question on [StackOverflow](https://stackoverflow.com/questions/tagged/handsontable).
 
 ## License
 
-Handsontable is dual-licensed. You can either use a free license for all your non-commercial projects or purchase a commercial license. See the table below for a comparison of these two.
-
-<table>
-  <thead align="center">
-    <tr>
-      <th width="50%">Free license</th>
-      <th width="50%">Paid license</th>
-    </tr>    
-  </thead>
-  <tbody align="center">
-    <tr>
-      <td>For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating  on development and testing servers.</td>
-      <td>For all commercial purposes</td>
-    </tr>
-    <tr>
-      <td>All features are available</td>
-      <td>All features are available</td>
-    </tr>
-    <tr>
-      <td>Community support</td>
-      <td>Dedicated support</td>
-    </tr>    
-    <tr>
-      <td><a href="//github.com/handsontable/handsontable/blob/master/LICENSE.txt">Read the license</a></td>
-      <td><a href="//handsontable.com/pricing">See plans</a></td>
-    </tr>
-  </tbody>
-</table>
+Handsontable is a commercial software with two licenses available:
 
-## License key
+- Free for non-commercial purposes such as teaching, academic research, and evaluation. [Read it here](https://github.com/handsontable/handsontable/blob/master/handsontable-non-commercial-license.pdf).
+- Commercial license with support and maintenance included. See [pricing plans](https://handsontable.com/pricing).
 
-**The license key is obligatory since [Handsontable 7.0.0](//github.com/handsontable/handsontable/releases/tag/7.0.0) (released in March 2019).**
-
-If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase `'non-commercial-and-evaluation'`, as presented below:
-
-```js
-const hot = new Handsontable(container, {
-  data: data,
-  rowHeaders: true,
-  colHeaders: true,
-  licenseKey: 'non-commercial-and-evaluation'
-});
-```
+## License key
 
-If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](//handsontable.com/pricing).
+If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at [handsontable.com](https://handsontable.com/pricing).
 
-The license key is validated in an offline mode.  No connection is made to any server. [Learn more](//handsontable.com/docs/tutorial-license-key.html) about how it works.
+If you use the free for non-commercial license of Handsontable, then pass the phrase `'non-commercial-and-evaluation'`, as described in [this documentation](https://handsontable.com/docs/tutorial-license-key.html).
 
 <br>
 <br>
 
-Created by [Handsoncode](//handsoncode.net) with ❤ and ☕ in [Tricity](//en.wikipedia.org/wiki/Tricity,_Poland).
+Proudly created and maintained by the [Handsontable Team](https://handsontable.com/team).