Component 0 - Copy this React, Tailwind Component to your project

// Главная страница (Home) function HomeScreen() { return ( <div className="flex flex col min h screen bg gray 50"> <header className="bg indigo 600 text white p 4"> <h1 className="text 2xl font bold">AVB Corporation Event List</h1> </header> <main className="flex 1 p 4"> <section className="mb 8"> <h2 className="text xl font semibold mb 2">Добро пожаловать в AVB Corporation</h2> <p className="text gray 700 mb 4"> AVB — инновационная компания, создающая цифровые решения будущего. Мы объединяем передовые технологии, экспертизу и креативность, чтобы превращать сложные задачи в простые и эффективные продукты. </p> <button className="bg indigo 600 text white px 4 py 2 rounded lg"> Explore Events </button> </section> <section> <h3 className="text lg font semibold mb 3">Ближайшие встречи</h3> <div className="space y 3"> {[1, 2, 3].map((item) => ( <div key={item} className="border rounded lg p 3 bg white shadow sm"> <h4 className="font medium">Название мероприятия {item}</h4> <p className="text sm text gray 600">Дата: 2023 06 {10 + item}</p> <p className="text sm text gray 600">Спикер: Иван Иванов</p> </div> ))} </div> </section> </main> <nav className="bg white border t flex justify around p 3"> <button className="text indigo 600">Home</button> <button className="text gray 500">Events</button> <button className="text gray 500">Schedule</button> <button className="text gray 500">Profile</button> </nav> </div> ); } // Страница мероприятий (Our Events) function EventsScreen() { return ( <div className="flex flex col min h screen bg gray 50"> <header className="bg indigo 600 text white p 4"> <h1 className="text 2xl font bold">Our Events</h1> </header> <div className="p 4 bg white sticky top 0 z 10 shadow sm"> <div className="flex space x 2 overflow x auto pb 2"> {['Все', 'IT', 'Бизнес', 'Мотивация'].map((cat) => ( <button key={cat} className="px 3 py 1 bg gray 200 rounded full whitespace nowrap"> {cat} </button> ))} </div> <div className="flex space x 2 mt 2 overflow x auto"> {['Новые', 'Старые', 'Популярные', 'Онлайн'].map((filter) => ( <button key={filter} className="px 3 py 1 bg gray 100 rounded full text sm whitespace nowrap"> {filter} </button> ))} </div> </div> <main className="flex 1 p 4 grid grid cols 2 gap 4"> {[1, 2, 3, 4, 5, 6].map((item) => ( <div key={item} className="bg white rounded lg overflow hidden shadow"> <div className="bg gray 300 h 32"></div> <div className="p 2"> <h3 className="font medium text sm">Название видео {item}</h3> <p className="text xs text gray 600">Спикер {item}</p> <div className="flex items center mt 1"> <span className="text yellow 400">★</span> <span className="text xs ml 1">{(Math.random() * 5).toFixed(1)}</span> </div> </div> </div> ))} </main> <nav className="bg white border t flex justify around p 3"> <button className="text gray 500">Home</button> <button className="text indigo 600">Events</button> <button className="text gray 500">Schedule</button> <button className="text gray 500">Profile</button> </nav> </div> ); } // Расписание (Schedule) function ScheduleScreen() { return ( <div className="flex flex col min h screen bg gray 50"> <header className="bg indigo 600 text white p 4"> <h1 className="text 2xl font bold">Schedule</h1> </header> <main className="flex 1 p 4"> <div className="bg white rounded lg shadow p 4 mb 4"> <h2 className="font semibold mb 2">Календарь</h2> <div className="grid grid cols 7 gap 1"> {['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map((day) => ( <div key={day} className="text center text sm font medium">{day}</div> ))} {Array.from({length: 31}, (_, i) => ( <div key={i+1} className={`text center p 1 rounded full ${i+1 === 15 ? 'bg indigo 100 text indigo 600' : ''}`}> {i+1} </div> ))} </div> </div> <h2 className="font semibold mb 2">Ближайшие встречи</h2> <div className="space y 3"> {[1, 2, 3].map((item) => ( <div key={item} className="bg white rounded lg shadow p 3"> <div className="flex justify between"> <div> <h3 className="font medium">Тема встречи {item}</h3> <p className="text sm text gray 600">Спикер: Петр Петров</p> </div> <div className="text right"> <p className="text sm font medium">15 июня</p> <p className="text sm text gray 600">14:00 15:30</p> </div> </div> <button className="mt 2 w full bg indigo 600 text white py 1 rounded lg text sm"> Set Reminder </button> </div> ))} </div> </main> <nav className="bg white border t flex justify around p 3"> <button className="text gray 500">Home</button> <button className="text gray 500">Events</button> <button className="text indigo 600">Schedule</button> <button className="text gray 500">Profile</button> </nav> </div> ); } // Предложить тему (Propose Theme) function ProposeScreen() { return ( <div className="flex flex col min h screen bg gray 50"> <header className="bg indigo 600 text white p 4"> <h1 className="text 2xl font bold">Propose Theme</h1> </header> <main className="flex 1 p 4"> <div className="bg white rounded lg shadow p 4"> <div className="mb 4"> <label className="block text sm font medium mb 1">Тема выступления</label> <input type="text" className="w full p 2 border rounded" placeholder="Введите тему" /> </div> <div className="mb 4"> <label className="block text sm font medium mb 1">Предложить спикера</label> <input type="text" className="w full p 2 border rounded mb 2" placeholder="Имя спикера" /> <input type="text" className="w full p 2 border rounded" placeholder="Ссылка на соцсети" /> </div> <div className="mb 4"> <label className="block text sm font medium mb 1">Описание идеи</label> <textarea className="w full p 2 border rounded" rows={4} placeholder="Почему это будет полезно аудитории?"></textarea> </div> <button className="w full bg indigo 600 text white py 2 rounded lg"> Submit </button> </div> </main> <nav className="bg white border t flex justify around p 3"> <button className="text gray 500">Home</button> <button className="text gray 500">Events</button> <button className="text gray 500">Schedule</button> <button className="text gray 500">Profile</button> </nav> </div> ); } // Профиль (Profile) function ProfileScreen() { return ( <div className="flex flex col min h screen bg gray 50"> <header className="bg indigo 600 text white p 4"> <h1 className="text 2xl font bold">Profile</h1> </header> <main className="flex 1 p 4"> <div className="bg white rounded lg shadow p 4 mb 4"> <div className="flex items center mb 4"> <div className="w 16 h 16 bg gray 300 rounded full mr 3"></div> <div> <h2 className="font semibold">Иван Иванов</h2> <p className="text sm text gray 600">user@example.com</p> </div> </div> <div className="space y 3"> <div> <p className="text sm text gray 600">Просмотрено видео:</p> <p className="font medium">24</p> </div> <div> <p className="text sm text gray 600">Участие в онлайн встречах:</p> <p className="font medium">8</p> </div> <div> <p className="text sm text gray 600">Рейтинг активности:</p> <div className="flex"> {'★★★★☆'.split('').map((star, i) => ( <span key={i} className="text yellow 400">{star}</span> ))} </div> </div> </div> </div> <h2 className="font semibold mb 2">История просмотров</h2> <div className="space y 2"> {[1, 2, 3].map((item) => ( <div key={item} className="bg white rounded lg shadow p 3 flex"> <div className="bg gray 300 w 16 h 12 rounded mr 3"></div> <div> <h3 className="font medium text sm">Название видео {item}</h3> <p className="text xs text gray 600">15 июня 2023</p> </div> </div> ))} </div> </main> <nav className="bg white border t flex justify around p 3"> <button className="text gray 500">Home</button> <button className="text gray 500">Events</button> <button className="text gray 500">Schedule</button> <button className="text indigo 600">Profile</button> </nav> </div> ); }