Kanban Board Hero

npx shadcn add "https://ui.beste.co/r/hero76?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/hero76?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Hero76, hero76Demo } from "@/components/beste/block/hero76";

export default function Page() {
  return <Hero76 {...hero76Demo} />;
}

import { Circle, Clock, CheckCircle2 } from "lucide-react";
import { Hero76 } from "@/components/beste/block/hero76";

export default function Page() {
  return (
    <Hero76
      badge={{ label: "Project Management", variant: "outline" }}
      heading="Organize work, your way"
      description="Kanban boards and timelines that adapt to how your team already works."
      buttons={[{ label: "Start Free", href: "/signup" }]}
      columns={[
        {
          title: "To Do",
          icon: Circle,
          color: "text-muted-foreground",
          tasks: [{ title: "Design system updates", priority: "high", dueDate: "Jan 15" }],
        },
        {
          title: "In Progress",
          icon: Clock,
          color: "text-blue-500",
          tasks: [{ title: "Auth flow", priority: "high", tags: ["Backend"] }],
        },
        {
          title: "Done",
          icon: CheckCircle2,
          color: "text-emerald-500",
          tasks: [{ title: "Homepage redesign" }],
        },
      ]}
      floatingStats={{ icon: CheckCircle2, label: "Completed this week", value: "12 tasks" }}
      displayPosition="left"
    />
  );
}

type HeroButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "secondary" | "ghost" | "link";
};

type TaskAssignee = { name: string; avatar?: string };

type TaskItem = {
  title: string;
  priority?: "low" | "medium" | "high";
  dueDate?: string;
  assignees?: TaskAssignee[];
  tags?: string[];
};

type ColumnItem = {
  title: string;
  icon: LucideIcon;
  color?: string;
  tasks: TaskItem[];
};

type FloatingStats = {
  icon: LucideIcon;
  label: string;
  value: string;
};