[@yearn/web-lib Feature] New Component - Banner

[Majorfi]

Why

We currently have one AlertBanner component used to display notice message.
This banner is primary used for alerts, so we need one distinct component for the marketing (mostly) banner.

What

Figma source: https://www.figma.com/file/E6mbKP5TkCkSKtAh8q0RA0/Evan's-drafts?node-id=1288%3A7687
Create a Banner component with 4 variants:

• default (title, texts)
• image (filled image, no text)
• split (Title, texts on left, image on right
• background (title, texts, cover image as background)

All the variants should share a same base wrapper with:

• A rounded border with the primary color and a background set to the secondary color: border-primary border-2 border-solid rounded-lg bg-secondary relative min-height-[320px]
• An optional canClose prop (Can the banner be closed? Default is set to true. If false, the banner will always render and the cross will be hidden.) with an optional onClose action (Action to perform onClose. By default, this is handled by the component itself -> see the useLocalStorage usage here). The cross used should be absolutly positioned on the top right corner with 24px around.
• One or more pages, with a page indicator on the bottom right if there is more than one page (hidden otherwise). The page indicator should be absolutly positioned on the bottom right corner with 24px around.
• This schema should be used to define the content of each page:

type bannerChildren = {
    variant: 'default' | 'image' | 'split' | 'background',
    title?: string, //title displayed on the top of the banner. Not used with image.
    content?: string, //actual text displayed. Not used with image.
    image?: string, //source of the image to use 
    primaryButton?: ReactElement, //optional, button to display as primary action. Not used with image.
    secondaryButton?: ReactElement, //optional, button to display as secondary action. Not used with image.
    //Other stuff
    onClick?: function, //optional, action on click to the image variant
    className?: string, //optional, class to merge to the variant wrapper
}[]

Notes

• One banner can have children with different variants
• Avoid putting a padding in the base wrapper as the image on the 3td variant (half) has no padding top, bottom & right
• The space between buttons should be 16px (space-x-4). You can have 0, 1 or 2 buttons here.
• The buttons should be provided as props with all the desired interactions (aka ready to use by the component
• The height should scale nicely with the content. With a bigger image (cf: 2nd variant), the banner should take more space than just a few lines of text. Ideally this should be done with a nice transition, but this may be updated later.
• If the variant is image, an optional onClick event should be provided
• Image on variant 3 should be set to objectFit: cover & objectPosition: center
• Banner min-height should be 320px