营销活动仪表盘

🍺 Legacy Ale Works-2025年十月庆典活动仪表板

一个漂亮、响应迅速的React应用程序，用于显示Legacy Ale Works 2025年十月庆典的营销活动。

✨ 特性

• 美丽的啤酒厂主题设计 秋天/十月节日的颜色
• 活动卡 显示所有基本信息：
  • 活动名称和状态（颜色编码）
  • 带格式的预算
  • 开始和结束日期
  • 带有颜色编码的平台
  • 特色啤酒
  • 投资回报率百分比
  • 详细说明
• 智能过滤 按状态和平台
• 预算摘要仪表板 显示：
  • 总预算
  • 主动预算
  • 计划预算
  • 每个活动的平均预算
• 完全移动响应 设计
• 平滑动画 和过渡
• 现代用户界面 使用顺风CSS

📸 截图

完整仪表板视图

完整的活动仪表板，显示所有5个营销活动，包括预算摘要、过滤器和活动卡。

活动活动筛选器

智能过滤功能正在发挥作用-仅显示活动活动，并实时重新计算预算。

移动响应式设计

完全响应式设计，在具有堆叠布局和触摸友好交互的移动设备上运行良好。

🚀 快速开始

先决条件

• Node.js（v18或更高版本）
• npm或纱线

安装

1. 安装依赖项：

npm install

2. 运行开发服务器：

npm run dev

3. 打开浏览器并导航到 http://localhost:5173

为生产而建

npm run build

生产就绪文件将在 dist 文件夹。

预览生产版本

npm run preview

📁 项目结构

legacy-ale-works-campaigns/
├── public/              # Static assets
├── src/
│   ├── components/      # React components
│   │   ├── CampaignCard.jsx
│   │   ├── FilterBar.jsx
│   │   └── BudgetSummary.jsx
│   ├── data/           # Campaign data
│   │   └── campaigns.js
│   ├── App.jsx         # Main app component
│   ├── main.jsx        # Entry point
│   └── index.css       # Global styles
├── index.html          # HTML template
├── package.json        # Dependencies
├── tailwind.config.js  # Tailwind configuration
├── vite.config.js      # Vite configuration
└── README.md          # This file

🎨 配色方案

该应用程序使用自定义的秋季/啤酒厂主题调色板：

• 秋天的颜色 （橙色/琥珀色）：用于标题和重音
• 啤酒厂颜色 （暖棕色）：用于背景和互补元素
• 深色 （深棕色）：适合脚部和深色口音

🔧 使用的技术

• 反应18 -UI框架
• 维特 -构建工具和开发服务器
• 顺风CSS -实用程序优先的CSS框架
• 游乐场展示与互动 -谷歌字体排版

📊 活动数据

该应用程序目前显示5个营销活动：

1. 品尝十月节闪电战——1200美元
2. 脸书秋收特惠-950美元
3. Radio River City Stout-800美元
4. Instagram IPA周-500美元
5. 电子邮件杜瓦尔日——300美元

总预算： $3,750

🎯 过滤器

• 状态筛选器： 全部、活动、计划、已完成、已取消
• 平台筛选器： 所有，instagram，Facebook，让我们试试，电子邮件，本地电台。

📱 响应式设计

该应用程序完全响应，并在以下方面无缝工作：

• 📱 移动设备
• 📱 平板电脑
• 💻 桌面
• 🖥️ 大屏幕

🌟 未来的增强功能

这是一个演示版本。未来的潜在功能：

• MongoDB动态数据集成
• 实时活动更新
• 分析和报告
• 活动编辑功能
• 用户认证
• 导出功能

📝 许可证

该项目仅用于演示目的。

由以下材料制成🍺 和❤️ Legacy Ale Works