Styled Hero Section - Copy this React, Mui Component to your project

“Create a responsive React component, using Material UI (MUI) as the styling framework, that displays a full width background image of a scenic coastal town. Overlaid on the right side is a white card with the following elements: 1. A horizontal list of clickable text tags at the top (e.g., ‘Post Tag | Small Group Explorations | Another Post Tag | Greece’). 2. A large heading for the blog title, e.g., ‘Blog Hero Post Title.’ 3. A smaller subtitle beneath the title, e.g., ‘Blog Hero description subtitle.’ 4. An author section: small circular avatar, author’s name, publication date, and a read time indicator (e.g., ‘5 minute read’) placed in the bottom right corner of the card. The card should have a white background, slight elevation or box shadow, and ample padding. Position the card so that it overlaps the background image, aligned toward the right side of the viewport. Ensure the design is clean, modern, and resembles the example described, with the scenic image spanning the full width behind the card.” This prompt (or a similar textual instruction) will guide a code generation or design tool to produce a Hero component that closely mirrors the layout from the image: • Background: Full width, height to fit content or a set minimum (e.g., 50vh or 60vh). • Overlay Card: Positioned with position: absolute or by using MUI’s Grid and Box to layer elements, containing all text elements. • Typography: Leverage MUI’s Typography component for headings, subtitles, and metadata. • Chips or Buttons (for tags): Could use MUI’s <Chip> or <Button> variants to replicate tag styling. • Responsive: Ensure the hero scales properly on mobile, possibly stacking the card below the image or making the image a background that is center cropped. 1. Tag Links – A row of text links at the top, each styled like a clickable label (e.g., “Post Tag | Small Group Explorations | Another Post Tag | Greece”). 2. Blog Title – A bold, large heading that reads “Blog Hero Post Title.” 3. Subtitle – A smaller, lighter subtitle (e.g., “Blog Hero description subtitle”). 4. Author Section – Aligned underneath the subtitle, there is a small circular avatar of the author’s headshot, followed by “by Megan Monte” in normal text, and below that, “November 01, 2024.” 5. Read Time – On the far right edge of the card, aligned somewhat with the author’s name/date, is “5 minute read.” The card has a crisp, white background with a slight shadow or separation from the underlying scenic photo. The overall layout is a strong contrast between the vibrant, immersive photo on the left/behind, and the clean white card (with text content) on the right.