🍺 Legacy Ale Works-2025年十月庆典活动仪表板
一个漂亮、响应迅速的React应用程序，用于显示Legacy Ale Works 2025年十月庆典的营销活动。
✨ 特性
- 美丽的啤酒厂主题设计 秋天/十月节日的颜色
- 活动卡 显示所有基本信息：
- 活动名称和状态（颜色编码） - 带格式的预算 - 开始和结束日期 - 带有颜色编码的平台 - 特色啤酒 - 投资回报率百分比 - 详细说明
- 智能过滤 按状态和平台
- 预算摘要仪表板 显示：
- 总预算 - 主动预算 - 计划预算 - 每个活动的平均预算
- 完全移动响应 设计
- 平滑动画 和过渡
- 现代用户界面 使用顺风CSS
📸 截图
完整仪表板视图
完整的活动仪表板，显示所有5个营销活动，包括预算摘要、过滤器和活动卡。
活动活动筛选器
智能过滤功能正在发挥作用-仅显示活动活动，并实时重新计算预算。
移动响应式设计
完全响应式设计，在具有堆叠布局和触摸友好交互的移动设备上运行良好。
🚀 快速开始
先决条件
- Node.js（v18或更高版本）
- npm或纱线
安装
- 安装依赖项：
npm install- 运行开发服务器：
npm run dev- 打开浏览器并导航到
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个营销活动：
- 品尝十月节闪电战——1200美元
- 脸书秋收特惠-950美元
- Radio River City Stout-800美元
- Instagram IPA周-500美元
- 电子邮件杜瓦尔日——300美元
总预算： $3,750
🎯 过滤器
- 状态筛选器： 全部、活动、计划、已完成、已取消
- 平台筛选器： 所有，instagram，Facebook，让我们试试，电子邮件，本地电台。
📱 响应式设计
该应用程序完全响应，并在以下方面无缝工作：
- 📱 移动设备
- 📱 平板电脑
- 💻 桌面
- 🖥️ 大屏幕
🌟 未来的增强功能
这是一个演示版本。未来的潜在功能：
- MongoDB动态数据集成
- 实时活动更新
- 分析和报告
- 活动编辑功能
- 用户认证
- 导出功能
📝 许可证
该项目仅用于演示目的。
______________________________________________________________________
由以下材料制成🍺 和❤️ Legacy Ale Works