Создание усовершенствованной копии http://www.milliondollarhomepa ge.com/

1. Цель проекта:
Создать интерактивную карту, состоящую из ячеек (пикселей), которые можно покупать, перекупать, загружать изображения, добавлять ссылки и всплывающий текст. Проект должен быть адаптивным, с возможностью выбора нескольких ячеек и растягивания изображения на выбранный блок.

2. Функциональные требования:
2.1 Основная карта (PixelMap):
Карта состоит из 1000x1000 ячеек.

Каждая ячейка имеет уникальный ID и может быть выбрана пользователем.

Пользователь может выбрать несколько ячеек (только прямоугольных блоков).

Каждая ячейка имеет цену, которая увеличивается на 50% при каждом перекупе.

2.2 Выделение нескольких ячеек:
Пользователь может выделить несколько ячеек.

При выделении блока ячеек отображается форма для загрузки изображения, вставки ссылки и всплывающего текста.

Изображение должно растягиваться на выбранный прямоугольник ячеек.

2.3 Покупка и перекупка ячеек:
Цена ячеек растёт на 50% при каждом перекупе.

При покупке ячейки присваивается владелец.

Информация о истории покупок сохраняется в ячейке (дата, цена, покупатель).

2.4 Информация о ячейках (popup):
При наведении на ячейку показывается всплывающее окно с информацией:

Цена

Владелец

Всплывающий текст

Ссылка (если указана)

2.5 Корзина и панель управления:
Панель справа отображает выбранные ячейки, их цену и общую сумму.

Пользователь может покупать выбранные ячейки.

В панели управления есть поля для загрузки изображения, ввода ссылки и всплывающего текста.

2.6 Адаптивность интерфейса:
Проект должен быть адаптивным (поддерживать мобильные и планшетные устройства).

2.7 Дополнительные функции:
История покупок для каждой ячейки.

Проверка на прямоугольность при выделении ячеек.

В будущем возможно подключение платёжной системы для оплаты через ЮКасса или криптовалюту.

3. Технические требования:
3.1 Технологии:
Frontend: Next.js + React, TailwindCSS.

Состояния: React useState и useEffect.

Виртуализация: react-window для рендеринга сетки с оптимизацией производительности.

База данных (в будущем): Supabase или Firebase для хранения данных о ячейках, пользователях и историях покупок.

3.2 Производительность:
Использование виртуализации через react-window для увеличения производительности при отображении большого числа ячеек.

Механизм выбора и покупки ячеек должен быть быстрым и отзывчивым, без лагов.

5. Будущие улучшения:
Интеграция платёжных систем: ЮКасса, CloudPayments или криптовалютные платежи.

Авторизация пользователей: Система регистрации и авторизации для отслеживания истории покупок.

Исходники milliondollarhomepage есть на гитхабе