Food Hero

Heroes 2

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Food Hero to your project and fits it to your theme.

Code

How Food Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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://cdn.21st.dev/assets/mirror/78/78182c51f594a9309dd7e36824651de03dbde9150221a019d313087ef2c9edef.png"
        // 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;