Dashboard

Cards 617

About

Marketing Dashboard Description: An animated dashboard card to display marketing activities and team statistics. It features a main header, two distinct stat cards, and a call-to-action banner. The component uses framer-motion for smooth, engaging animations on load and hover.

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

Code

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

Usage.tsx

import { MarketingDashboard } from "@/components/ui/dashboard-1"; // Adjust the import path

const MarketingDashboardDemo = () => {
  // Sample data to pass into the component
  const sampleTeamActivities = {
    totalHours: 16.5,
    stats: [
      { label: "Productive", value: 45, color: "bg-green-400" },
      { label: "Middle", value: 25, color: "bg-lime-300" },
      { label: "Break", value: 15, color: "bg-yellow-300" },
      { label: "Idle", value: 15, color: "bg-slate-800 dark:bg-slate-700" },
    ],
  };

  const sampleTeam = {
    memberCount: 235,
    members: [
      { id: "1", name: "Olivia Martin", avatarUrl: "https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg" },
      { id: "2", name: "Jackson Lee", avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg" },
      { id: "3", name: "Isabella Nguyen", avatarUrl: "https://cdn.21st.dev/assets/mirror/34/346464a2e3f1a5ef41c81c73d08727d0c784e9445031fa30849ee60fc48dd425.jpg" },
      { id: "4", name: "William Kim", avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg" },
    ],
  };

  const sampleCta = {
    text: "Manage your activities and team members",
    buttonText: "See All",
    onButtonClick: () => alert("'See All' button clicked!"),
  };

  return (
    <div className="flex items-center justify-center min-h-screen p-4 bg-background">
      <MarketingDashboard
        teamActivities={sampleTeamActivities}
        team={sampleTeam}
        cta={sampleCta}
        onFilterClick={() => alert("Filter clicked!")}
      />
    </div>
  );
};

export default MarketingDashboardDemo;