Templates Requirements

This requirement documents will explain the different sections one-by-one in details. 

1. Header Menu

Header menu is shown on the screenshot above. Notice there is an icon (arrow pointing down) beside the menu item. There is also a hover effect on the menu item. 

The menu effects will be like : https://test889.jaramdo.de/ when user scroll up

Please note there is a thin line  border below the menu item. 

In Ark Site, we have 2 buttons that we can configured, for the buttons, we can just follow this shape on https://www.cash-lv.de/

The 2 buttons configuration can be found here : https://kws.jaramdo.de/admin/page-editor/112416 (This is reference info only)

1.1 Contact Bar information 

This contact bar design is different than our current templates. 

• Able to upload a background image for the Contact bar
• The tel-no, email, and address on the left
• Social Media Button displayed on the right (instead of at the footer) 

2. Primary & Secondary Color 

The Primary Color is the turquoise color ( # )
Secondary Color is magenta color ( # )

You may refer to the CI Manual PDF for the color code. Screenshot shared below

Please pick the right color code to apply according to mock up

3. Slider  

Section Template name : Regionalwerke | Slider 

This slider comes with a standard Quote design. We should allow text configuration for the Quote.

This is an example of a slider configuration, URL : https://test889.jaramdo.de/admin/page-editor/137445

4. Three-column image

Section template name: Regionalwerke | 3-column image "Experience"

Standard 3 column images with icons ( Asset will be provided) and text which can be configured later on. Text styling kindly follow as close as above.

5. News Sections 

Section template name : Regionalwerke | News Previews and Links 

5.1 News preview

Logic of the News Preview : 
It will always display the 2 latest news. The category will always show the 1st category assigned to the news article. 

When hover, the color of the link will change.

5.2 Quick Links 

For these links, these are standard buttons, however, the text can be changed by user. The "arrow" is an icon instead of font. 

These are quick links button where we will have preset color and text, which they can edit later. When hover, the button will change its color to below : 

Note: above button should be added to Button templates under Regionalwerke Templates

6. Header Image 

Section Template Name : Regionalwerke | Header Image with Headline

All image and text are preset and is editable. 

7. News Article Page

Section Template Name : Regionalwerke | News Article

• The small line above headline: News Teaser text ( If the text characters are too manu, it will be cut off with "..."
• The headline is the news headline
• The magenta label is the news category
• The image should take from "Website Previewed Image" under News Creation.

Page Overview : 

• Above is the /news/:id page, thus it should come with Published Date and Back Button.
  • Note: Every /news/:id page in our Ark Template comes with Published date and Back Button. May refer to our staging : https://kws.jaramdo.de/admin/page-editor/134864?language=en
• As for the 3 news below, it should be automatically taken from /news page -- display the 3 latest news here.
• For the image beside the news content, please take it from "Website Detailed Image" under News Creation

8. News Highlight Section

Section Template Name : Regionalwerke | News Highlight 3 column

The logic for this section is : 

Admin is allowed to configure which category news to display here -- it should display the latest news of selected categories. Should allow multiple selections. 

An example of what we've done before: 

9. News Overview Page

This is our :/news page ( part of System page) 

You may refer to our existing /news page on staging : https://kws.jaramdo.de/en/news

We like to apply the following UI to our news page. 

Logic of the :/news page is : Latest news always displayed as first news on the top left. Each page will have 3 rows x 3 columns of news, and there will be a pagination selection below the news. 

10. Icons and Text

Section Template Name : Regionalwerke | Icons & Text 6 Column

• These are icons and Editable text. We only need to do single row, if admin likes to duplicate, they can do so via the Container. 
• The color above are preset.
• Additional configuration : add a checkbox for Admin to decide if Hovered color is required. If checked, then Admin can configure the hovered color for each individual tile.

11. Colored Table 

Requirement to be updated 

12. Footer 

• The footer comes with a background.
• Default text color is white, when hover & click, it will change to yellow
• Copyright text to move to the Center position.