AITA Lending - Лендинг
Сучасний адаптивний лендинг для AITA Lending з унікальним дизайном на основі градієнтних блобів та чорного фону.
📋 Опис проєкту
AITA Lending - це лендинг для екосистеми AITA World, яка об'єднує розробників, інвесторів, EPC компанії, інсталяторів, постачальників обладнання та енергетичні активи в одну інтелектуальну платформу для прискорення зеленої енергетичної транзиції.
✨ Особливості
- ✅ Адаптивний дизайн - повна підтримка mobile, tablet та desktop
- ✅ Мобільне меню - з анімацією та плавними переходами
- ✅ Градієнтні блоби - унікальний візуальний ефект з радіальними градієнтами
- ✅ Плавна прокрутка - по якорям з урахуванням висоти хедера
- ✅ Форма партнерства - з валідацією та обробкою подій
- ✅ Відповідає дизайн-системі - строго дотримується ТЗ
- ✅ Не потребує збірки - чистий HTML/CSS/JS, готовий до використання
🚀 Швидкий старт
Відкриття лендингу
Просто відкрийте файл index.html у будь-якому браузері. Не потрібні додаткові інструменти або сервери.
Варіанти відкриття:
- Подвійний клік на файлі
index.html у файловому менеджері
- Перетягнути файл
index.html у вікно браузера
- ПКМ → Відкрити з → вибрати браузер
- Через редактор - багато редакторів (VS Code, Cursor) мають вбудований переглядач
Локальний сервер (рекомендовано для розробки)
Для кращого досвіду розробки можна використати локальний сервер:
Python
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
Node.js (http-server)
npx http-server -p 8000
PHP
php -S localhost:8000
Потім відкрийте http://localhost:8000 у браузері.
📁 Структура проєкту
AITA_Lending_V02/
├── index.html # Головна HTML сторінка
├── styles.css # Всі стилі та CSS змінні
├── script.js # JavaScript для інтерактивності
├── DESIGN_SYSTEM.md # ТЗ та дизайн-система (детальна документація)
├── README.md # Ця документація
├── .gitignore # Git ignore файл
├── .eslintrc.json # ESLint конфігурація
├── img/ # Зображення
│ ├── aitalogotextwhite.png
│ ├── aitalogowhite.png
│ └── bird.png
├── app/ # (порожня папка)
└── components/ # (порожня папка)
🎨 Дизайн-система
Всі деталі дизайн-системи описані в файлі DESIGN_SYSTEM.md.
Основні принципи:
- Шрифт: Golos Text (основний), Inter (курсив)
- Фон: чорний (#000000) з градієнтними блобами
- Кольори продуктів:
- Зелений (Platform):
#39b54a
- Синій (Assets):
#0086cc
- Голубий:
#00a8ca
- Червоний (Invest):
#d62828
- Жовтий (Solar):
#edc006
- Фіолетовий (Exchange):
#8524d8
- Кнопки: білі, заокруглення 10px
- Блоки: біла обводка 2-3px
Типографіка:
- H1: 24pt
- H2: 18pt
- H3: 14pt
- Основний текст: 12pt
- Підписи: 10pt
- Line-height: 1.3 (текст), 1.1 (заголовки)
🛠 Технології
- HTML5 - семантична розмітка
- CSS3 - з CSS змінними, градієнтами, blur ефектами
- Vanilla JavaScript - без залежностей
- Google Fonts - Golos Text та Inter
📱 Секції лендингу
- Hero секція - головний екран з логотипом та CTA
- About Us - інформація про кліматичну кризу та місію
- AITA World - опис екосистеми
- Platforms - опис платформ (Platform, Assets, Invest, Exchange)
- How AITA Works - процес роботи в 6 кроків
- Traction - статистика та досягнення
- Roles - ролі в екосистемі
- Values - ключові цінності
- Contact Form - форма партнерства
🔧 Функціональність
Мобільне меню
- Анімоване відкриття/закриття
- Автоматичне закриття при кліку на посилання
- Закриття при кліку поза меню
- Адаптація при зміні розміру вікна
Плавна прокрутка
- Автоматичне врахування висоти хедера
- Плавна анімація переходу до секцій
Форма партнерства
- Валідація обов'язкових полів
- Обробка події submit
- Очищення форми після відправки
🌐 Браузерна підтримка
- ✅ Chrome (останні версії)
- ✅ Firefox (останні версії)
- ✅ Safari (останні версії)
- ✅ Edge (останні версії)
📝 Ліцензія
© 2024 AITA. Всі права захищені.
👥 Контакти
Для питань та пропозицій використовуйте форму на лендингу або звертайтеся безпосередньо до команди AITA.
🔄 Версія
Версія: 2.0
Останнє оновлення: 2024
Примітка: Цей проєкт не потребує збірки або компіляції. Всі файли готові до використання. Просто відкрийте index.html у браузері!
