```jsx
import React, { useState, useEffect } from 'react';
import { CheckCircle, Circle, Calendar, Target, Award, Clock, Users, MapPin, FileText, TrendingUp } from 'lucide-react';
const App = () => {
const [tasks, setTasks] = useState([
{ id: 1, title: 'Определить цели мероприятия', completed: true, category: 'Планирование' },
{ id: 2, title: 'Составить бюджет', completed: true, category: 'Финансы' },
{ id: 3, title: 'Выбрать дату и время', completed: true, category: 'Логистика' },
{ id: 4, title: 'Найти и забронировать площадку', completed: false, category: 'Логистика' },
{ id: 5, title: 'Создать концепцию мероприятия', completed: false, category: 'Креатив' },
{ id: 6, title: 'Составить список спикеров/гостей', completed: false, category: 'Контент' },
{ id: 7, title: 'Разработать программу мероприятия', completed: false, category: 'Контент' },
{ id: 8, title: 'Настроить регистрацию участников', completed: false, category: 'Технологии' },
{ id: 9, title: 'Создать маркетинговую стратегию', completed: false, category: 'Маркетинг' },
{ id: 10, title: 'Подготовить промо-материалы', completed: false, category: 'Маркетинг' },
{ id: 11, title: 'Организовать техническое обеспечение', completed: false, category: 'Технологии' },
{ id: 12, title: 'Составить сценарий ведения', completed: false, category: 'Контент' }
]);
const [courseProgress, setCourseProgress] = useState(25);
const [currentModule, setCurrentModule] = useState('Организация мероприятий');
const [nextDeadline, setNextDeadline] = useState('15 декабря 2024');
const toggleTask = (id) => {
setTasks(tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
));
};
useEffect(() => {
const completedTasks = tasks.filter(task => task.completed).length;
const progress = Math.round((completedTasks / tasks.length) * 100);
setCourseProgress(progress);
}, [tasks]);
const categories = [...new Set(tasks.map(task => task.category))];
const getProgressColor = (progress) => {
if (progress >= 80) return 'bg-green-500';
if (progress >= 50) return 'bg-blue-500';
if (progress >= 30) return 'bg-yellow-500';
return 'bg-red-500';
};
return (
{/* Header */}
);
};
export default App;
```
EventPro Academy
Курс по организации мероприятий
Алексей Иванов
Ученик курса
АИ
{/* Progress Overview */}
{/* Additional Info Cards */}
{/* Main Progress Card */}
{courseProgress}%
{/* Quick Stats */}
{/* Task Checklist */}
{courseProgress}% {courseProgress === 100 ? 'Поздравляем! Вы завершили курс!' : `Осталось ${100 - courseProgress}% до завершения`}
Следующий дедлайн
{nextDeadline}
Текущий модуль
{currentModule}
Отметьте выполненные задачи для отслеживания прогресса
{/* Category Filters */}
{categories.map(category => (
))}
{/* Task List */}
{tasks.map(task => (
toggleTask(task.id)}
>
{task.completed && (
))}
{task.completed ? (
{task.title}
{task.category}
Советы эксперта
Не забывайте регулярно обновлять свой чек-лист. Это поможет вам не упустить важные детали и успешно провести мероприятие!
Полезные ресурсы
В разделе материалов курса вы найдете шаблоны документов, чек-листы и кейсы успешных мероприятий.
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
