How i can achieve article design like wisepick.org

Hi there,

1. The last updated requires a snippet to always output the updated date:

https://docs.generatepress.com/article/generate_post_date_output/#only-show-updated-date

and a filter to use the updated date in the header element:

https://docs.generatepress.com/article/show-the-updated-post-date/#show-the-“updated”-post-date-in-header-element

Now you can add Last Updated: {{post_date}} to your header element.

2. The 'custom meta' bar would first require some custom fields.
Then we would need to write a Custom Short Code to output that data inside the Header Element. Do you have any Custom fields ?

I dont have now, I have plugin names as advanced custom fields. I would appreciate if you guide me in depth detail of point 2.

It would require Custom development but this should get you started.
This ACF article provides the shortcode method for displaying a field name:

https://www.advancedcustomfields.com/resources/shortcode/

Then in your Header Element you could add some custom HTML to create the container and the labels - this would be for 4 fields:

<div class="custom-field-container">
    <div class="custom-field-inner grid-container">
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 1st Field Label</span>[acf field="your-field-1"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 2nd Field Label</span>[acf field="your-field-2"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 3rd Field Label</span>[acf field="your-field-3"]
            </div>
        </div>
        <div class="field-container">
            <div class="field-inner">
                <span class="field-label">Your 4th Field Label</span>[acf field="your-field-4"]
            </div>
        </div>
    </div>
</div>

Then some CSS to style & position them within a responsive row:

.page-hero {
    position: relative;
}

.custom-field-container {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.custom-field-inner {
    display: flex;
    flex-wrap: wrap;
}

.field-container {
    flex: 1 0 25%;
}

.field-inner {
    padding: 10px;
}

@media (max-width: 768px) {
    .field-container {
        flex: 1 0 50%;
    }
}

In the header element settings you would need to add enough bottom padding ( desktop and mobile ) to create a safe space or this custom meta container to sit.

Thats great, I will give it a try.
Is it necessary to use ACF or it can be done without that plugin using only GP?

Its possible without ACF.
But it will mean using the built in Custom Fields.

https://wordpress.org/support/article/custom-fields

And then you would have to create your own shortcodes.
This article here provides the code for that.

https://www.isitwp.com/get-custom-field-value-with-shortcode/