RicarDo Banner Component
The Ricardo Banner component is a responsive hero banner section designed using Tailwind CSS and Next.js, ideal for promoting featured product lines or campaigns.
This particular component highlights a Gourmet Meal Solutions campaign ("Introducing Ricardo") and adapts gracefully across devices. It includes:
- A full-width background image that adjusts based on screen size: one for mobile view and one for desktop.
- A prominent headline ("Introducing"), styled in bold white text.
- A Ricardo logo placed within a bordered container to give visual emphasis.
- A short, centered tagline: “Gourmet meal solutions made simple”.
- Layout logic ensures the text content sits to the left on larger screens and adjusts naturally for smaller screens, with the image stacking above or behind based on device width.
Introducing
Gourmet meal solutions made simple