Project Management Hero

Heroes 108

About

A comprehensive UI component for a landing page hero section. It includes responsive navigation, a headline content area, and a structured application preview section with filters and a data table. Designed to be populated dynamically with data.

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

Code

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

Usage.tsx

// This is a demo of a preview
// That's what users will see in the preview

import HeroSection, { HeroSectionComponentData } from "@/components/ui/hero-section";


const heroSectionData: HeroSectionComponentData = {
    navbar: {
        logoText: "MyApp",
        navLinks: [
            { text: "Features", href: "#features" },
            { text: "Pricing", href: "#pricing" },
            { text: "About", href: "#about" },
            { text: "Contact", href: "#contact" },
        ],
        authLinks: [
            { type: 'link', text: "Sign In", href: "#signin" },
            { type: 'button-primary', text: "Sign Up", href: "#signup" },
        ],
    },
    heroContent: {
        subheadline: "Introducing Version 2.0",
        headline: "Effortless Project Management for Modern Teams",
        description: "Streamline your workflow, boost collaboration, and get more done with our intuitive platform. From task tracking to reporting, we've got you covered.",
        secondaryCtaText: "Learn More",
        secondaryCtaLink: "#details",
        primaryCtaText: "Get Started Free",
        primaryCtaLink: "#try-for-free",
    },
    appPreview: {
        headerControls: {
            filters: [
                { label: "Assignee", icon: "user", dropdown: true },
                { label: "Status", icon: "info", dropdown: true },
                { label: "Due Date", icon: "calendar", dropdown: true },
                { label: "Project", icon: "folder", dropdown: true },
            ],
            actions: [
                { type: 'button-outline', text: "Import", icon: "upload" },
                { type: 'button-primary', text: "Add New Task", icon: "plus" },
            ],
        },
        appDataTable: {
            headers: [
                { id: "name", label: "Task Name", icon: "document" },
                { id: "assignee", label: "Assignee", icon: "user" },
                { id: "status", label: "Status", icon: "info" },
                { id: "dueDate", label: "Due Date", icon: "calendar" },
                { id: "project", label: "Project", icon: "folder" },
            ],
            data: [
                {
                    id: 1,
                    name: "Design website homepage",
                    assignee: ["Alice Johnson"],
                    status: "Completed",
                    dueDate: "2023-10-26",
                    project: "Marketing Website",
                    statusColor: "green", // Corresponds to Tailwind classes like bg-green-500
                },
                {
                    id: 2,
                    name: "Develop user authentication module",
                    assignee: ["Bob Williams", "Charlie Brown"],
                    status: "In Progress",
                    dueDate: "2023-11-15",
                    project: "Platform Backend",
                    statusColor: "blue", // Corresponds to Tailwind classes like bg-blue-500
                },
                {
                    id: 3,
                    name: "Write blog post on new features",
                    assignee: ["Alice Johnson"],
                    status: "Needs Review",
                    dueDate: "2023-11-05",
                    project: "Content Marketing",
                    statusColor: "yellow", // Corresponds to Tailwind classes like bg-yellow-500
                },
                {
                    id: 4,
                    name: "Plan Q4 product roadmap",
                    assignee: ["David Miller"],
                    status: "Pending",
                    dueDate: "2023-11-10",
                    project: "Product Strategy",
                    statusColor: "gray", // Corresponds to Tailwind classes like bg-gray-500
                },
                 {
                    id: 5,
                    name: "Setup CI/CD pipeline",
                    assignee: ["Charlie Brown"],
                    status: "In Progress",
                    dueDate: "2023-11-20",
                    project: "Platform Backend",
                    statusColor: "blue", // Corresponds to Tailwind classes like bg-blue-500
                },
            ],
        },
    },
};
const DemoOne = () => {
  return <HeroSection data={heroSectionData}/>;
};

// IMPORTANT:
// format of the export MUST be export default { DemoOneOrOtherName }
// if you don't do this, the demo will not be shown
export default { DemoOne };