Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/dashboard-1import { 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://i.pravatar.cc/150?u=a042581f4e29026024d" },
{ id: "2", name: "Jackson Lee", avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d" },
{ id: "3", name: "Isabella Nguyen", avatarUrl: "https://i.pravatar.cc/150?u=a04258114e29026302d" },
{ id: "4", name: "William Kim", avatarUrl: "https://i.pravatar.cc/150?u=a04258114e29026702d" },
],
};
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;