Page main component

[blazbla274]

Create a presentation component for the main section of each subpage

Description: We are looking to enhance the user experience of our website by adding a presentation component that will be displayed in the main section of each subpage. The component should always take up 100% of the width and height of the browser window. It should be divided into 2 segments. The first segment should be a column with the parto of the name of the section in the background, a text (nr1) and place for custom react jsx code. The second segment should contain a carousel of images. Additionally, at the bottom there should be a dividing line with two short sentences. At the bottom right, there should be a button indicating the ability to scroll the page content.

The component should be visually consistent with the overall design of the website and be fully responsive to ensure it looks great on all devices.

Deliverables:

Code for the presentation component

Example of component usage:

The developer can define how much stages StagesManager will display, and the each element (of images, mainTitles and sentences prop) have defined stages where it appears.

<MainStagesManager
  stages={4}
  images={[{
    stages: [1],
    src: 'http...'
  }, {
    stages: [2],
    src: 'http3...'
  }]}
  mainTitles={[{
    stages: [1, 2],
    title: "Title 1",
    slot: (
      <div>
          <icon ... />
          ...
      </div>
     )
  }]}
  sentences={[{
    stages: [1, 2],
    top: "Top sentence",
    bottom: "Bottomsentence",
  }]}
/>

Example mockup:

[blazbla274]

Optionally you can create MainStagesManager props validator, cuz there is possibility to contradictorily define stages between specific props items.