Components
Food Hero Banner A full-screen, responsive hero banner component designed for food delivery or restaurant websites. It features a prominent background image, clear calls-to-action, and smooth entry animations powered by Framer Motion. The component is theme-aware and built to be easily customized through props.
Loading preview...
import { FoodHeroBanner } from "@/components/ui/food-hero";
const FoodHeroBannerDemo = () => {
return (
<div className="w-full p-4 md:p-8">
<FoodHeroBanner
// Provide a link to your background image
backgroundImageSrc="https://bistro.blinkit.com/_next/static/media/desk-header.7cae7ea7.png?q=80&w=2070&auto=format&fit=crop"
// Provide a link to your logo
logoSrc="https://bistro.blinkit.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbistro-light.2ea2672d.png&w=384&q=75" // Replace with your actual logo URL
title={
<>
FOOD IN <br /> MINUTES
</>
}
description="Enjoy delicious snacks, meals, and drinks delivered in minutes, prepared in a hygienic environment nearby."
primaryAction={{
text: "Get the App",
onClick: () => alert("Primary action clicked!"),
}}
/>
</div>
);
};
export default FoodHeroBannerDemo;