Styled Banner - Copy this React, Mui Component to your project

Design a modern, responsive web interface using Material Design principles. The top **navbar** should have a logo on the left, and on the right, include a **feedback button**, a **bell icon** for notifications, an **information ("i") icon**, and a **user avatar** with ( dropdown). Below the navbar, create a large, **rounded banner** with left and right margins, featuring a **beautiful scenery image** as the background. On the left side of the banner, overlay the text "**Hi! 👋 James Doe**" with a smaller line below saying "**Lorem ipsum dolor sit amen, something important to say here**". Behind this text, apply a subtle **transparent black overlay** to enhance readability against the image. Below the text, add a prominent **rounded button** labeled "**Add Check in**", with a color of **#7b5aff**. After the banner, add a heading titled "**Added Check ins**", followed by multiple **cards** arranged vertically. Each card should have an image at the top with a **"Check in" overlay** on the top right corner of the image. Below the image, display the **date**, and within the card, include a **rounded user avatar** along with the label "**Owner: Habib Ahmad**". The cards should have a slightly elevated **shadow effect** to make them stand out, and the overall design should maintain clean, smooth spacing, and responsiveness across all screen sizes.