Hero 45

Heroes 146

About

A hero section with 3 features underneath

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

Code

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

Usage.tsx

import { HandHelping, Users, Zap } from "lucide-react";

import { Hero45 } from "@/components/blocks/shadcnblocks-com-hero45"

const demoData = {
  badge: "shadcnblocks.com",
  heading: "Blocks built with Shadcn & Tailwind",
  imageSrc: "https://cdn.21st.dev/assets/mirror/9f/9fb9487617e0903ab5bb8012f11530f61a39e4f1f19f169a87a367887fdaeecb.svg",
  imageAlt: "placeholder",
  features: [
    {
      icon: <HandHelping className="h-auto w-5" />,
      title: "Flexible Support",
      description:
        "Benefit from around-the-clock assistance to keep your business running smoothly.",
    },
    {
      icon: <Users className="h-auto w-5" />,
      title: "Collaborative Tools",
      description:
        "Enhance teamwork with tools designed to simplify project management and communication.",
    },
    {
      icon: <Zap className="h-auto w-5" />,
      title: "Lightning Fast Speed",
      description:
        "Experience the fastest load times with our high performance servers.",
    },
  ],
};

function Hero45Demo() {
  return <Hero45 {...demoData} />;
}

export { Hero45Demo };