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.
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;