docs(readme): fix interface screenshots display (#358)

Author: arnaudbesnier

CHANGELOG.md

@@ -4,6 +4,8 @@
 ### Changed
 - Technical - Patch CI configuration warnings.
 - Readme - Update the community badge.
+- Readme - Fix interface screenshots display.
+- Readme - Update and re-position the "How it works" section.
 
 ## RELEASE 5.1.1 - 2020-04-20
 ### Fixed

README.md

@@ -20,109 +20,112 @@ This project has been designed with scalability in mind to fit requirements from
 - And hundreds more…
 
 ## Getting Started
-
-Install Forest Admin here: [https://docs.forestadmin.com/documentation/getting-started/installation](https://docs.forestadmin.com/documentation/getting-started/installation)
+[https://docs.forestadmin.com/documentation/getting-started/installation](https://docs.forestadmin.com/documentation/getting-started/installation)
 
 ## Documentation
 [https://docs.forestadmin.com/documentation/](https://docs.forestadmin.com/documentation/)
 
+## How it works
+
+<p align="center" style="margin: 60px 0">
+  <img width="100%" src="https://www.forestadmin.com/public/img/illustrations-dev/schema-1.png" alt="Howitworks">
+</p>
+
+Forest Admin consists of two components:
+- The Admin Frontend is the user interface where you'll manage your data and configuration.
+- The Admin Backend API hosted on your servers where you can find and extend your data models and all the business logic (routes, actions, …) related to your admin panel.
+
+The Forest Admin gem (aka Forest Liana) introspects all your data model
+and dynamically generates the Admin API hosted on your servers. The Forest Admin
+interface is a web application that handles communication between the admin
+user and your application data through the Admin API.
+
 ## Features
 
 ### CRUD
 All of your CRUD operations are natively supported. The API automatically
 supports your data models' validation and allows you to easily extend or
 override any API routes' with your very own custom logic.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/crud.jpg" alt="CRUD">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-CRUD.jpg" alt="CRUD">
 
 ### Search & Filters
 Forest Admin has a built-in search allowing you to run basic queries to
 retrieve your application's data. Set advanced filters based on fields and
 relationships to handle complex search use cases.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/search.jpg" alt="Search and Filters">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Search.jpg" alt="Search and Filters">
 
 ### Sorting & Pagination
 Sorting and pagination features are natively handled by the Admin API. We're
 continuously optimizing how queries are run in order to display results faster
 and reduce the load of your servers.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/sorting.jpg" alt="Sorting and Pagination">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Sorting.jpg" alt="Sorting and Pagination">
 
 ### Custom action
 A custom action is a button which allows you to trigger an API call to execute
 a custom logic. With virtually no limitations, you can extend the way you
 manipulate data and trigger actions (e.g. refund a customer, apply a coupon,
 ban a user, etc.)
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/custom.jpg" alt="Sorting and Pagination">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Custom.jpg" alt="Sorting and Pagination">
 
 ### Export
 Sometimes you need to export your data to a good old fashioned CSV. Yes, we
 know this can come in handy sometimes :-)
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/export.jpg" alt="Export">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Export.jpg" alt="Export">
 
 ### Segments
 Get in app access to a subset of your application data by doing a basic search
 or typing an SQL query or implementing an API route.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/segments.jpg" alt="Segments">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Segments.jpg" alt="Segments">
 
 ### Dashboards
 Forest Admin is able to tap into your actual data to chart out your metrics
 using a simple UI panel, a SQL query or a custom API call.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/dashboard.jpg" alt="Dashboard">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Dashboard.jpg" alt="Dashboard">
 
 ### WYSIWYG
 The WYSIWYG interface saves you a tremendous amount of frontend development
 time using drag'n'drop as well as advanced widgets to build customizable views.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/wysiwyg.jpg" alt="WYSIWYG">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Wysiwyg.jpg" alt="WYSIWYG">
 
 ### Custom HTML/JS/CSS
 Code your own views using JS, HTML, and CSS to display your application data in
 a more appropriate way (e.g. Kanban, Map, Calendar, Gallery, etc.).
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/customhtml.jpg" alt="Custom views">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-CustomHTML.jpg" alt="Custom views">
 
 ### Team-based permissions
 Without any lines of code, manage directly from the UI who has access or can
 act on which data using a team-based permission system.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/team.jpg" alt="Team based permissions">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Teams.jpg" alt="Team based permissions">
 
 ### Third-party integrations
 Leverage data from third-party services by reconciling it with your
 application’s data and providing it directly to your Admin Panel. All your
 actions can be performed at the same place, bringing additional intelligence to
 your Admin Panel and ensuring consistency.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/integration.jpg" alt="Third-party integrations">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-3rdParty.jpg" alt="Third-party integrations">
 
 ### Notes & Comments
 Assign your teammates to specific tasks, leave a note or simply comment a
 record, thereby simplifying collaboration all across your organization.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/notes.jpg" alt="Notes and Comments">
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Notes.jpg" alt="Notes and Comments">
 
 ### Activity logs
 Monitor each action executed and follow the trail of modification on any data
 with an extensive activity log system.
 
-<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/activity.jpg" alt="Activity logs">
-
-## How it works
-
-The Forest Admin gem (aka Forest Liana) introspects all your data model
-and dynamically generates the Admin API hosted on your servers. The Forest Admin
-interface is a web application that handles communication between the admin
-user and your application data through the Admin API.
-
-<p align="center" style="margin: 60px 0">
-  <img width="100%" src="https://www.forestadmin.com/public/img/illustrations-dev/schema-1.svg" alt="Howitworks">
-</p>
+<img src="https://www.forestadmin.com/public/img/illustrations-dev/screens/ForestWebsite20-Activity.jpg" alt="Activity logs">
 
 ## How to contribute