I will try to address some of your confusion.
To use GRAV you don't have to use Gantry 5. To use Gantry 5 you don't have to use GRAV. Gantry 5 is a framework that can be used on multiple Content Management Systems (CMSs), as such it's functionality is largely platform (CMS) agnostic in the way it does things. GRAV is a flat file CMS that is capable of producing rich functionality websites in it's own right. Gantry 5 works on GRAV, Wordpress and Joomla CMSs.
So, given the above, you are correct that there is some functional overlap in what GRAV and Gantry 5 do and how they do it.
If you choose to use Gantry 5 then I would recommend that you use that as the prime vehicle for developing your site - there is no need (for example) to use GRAV modular pages as you can do the same thing in Gantry 5 admin and the layout.
Gantry 5 utilizes "particles" which are basically chunks of functionality the render parts of the total website page. You can use particles provided in Gantry 5 template (and there are a lot of them now). Or, you can choose to develop your own particles too using TWIG and YAML languages. Developing particles is not that hard once you learn the languages but I really think you should become familiar with the Gantry 5 framework before you embark on this and study how RT templates and particles were developed and how to use them well.
Don't work about the names of sections - they are just a "label" given to uniquely identify them on the layout - the section names are now shown anywhere on the rendered website page - they are just "holes" into which you and your content (in the form of particles). You can control the width of a section (it's layout in it's settings). You can add backgrounds to any section too, sometimes there is a settings for this in the outline "styles" and sometimes you have to use CSS to do it - but either way it's quite straightforward. Sections can also have multiple "rows" within them so it's often unnecessary to add more sections at all to those already provided in your chosen template. Also, then are multiple layout "presets" provided that have differing arrangements of sections too (acceible via "LOAD" button on the outline layout.
You mock-up to me just looks like four sections to me with one particle in each with the section setting set to "fullwidth (flushed content)". There is nothing there that cannot be done fairly simply even with the most basic of Gantry 5 templates.
I encourage you to set up a local copy of the "helium" Gantry 5 using the rocketlauncher package. There you will get a working demo and will be able to see how everything has been done and be able to experimentally edit the content therein.
Also, refer to the Gantry 5 documentation which is very extensive and the template documentation too (for RT templates).
I hope that helps.
The following users have thanked you: Marius Pretorius
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.