AITA Lending - Лендинг

Сучасний адаптивний лендинг для AITA Lending з унікальним дизайном на основі градієнтних блобів та чорного фону.

📋 Опис проєкту

AITA Lending - це лендинг для екосистеми AITA World, яка об'єднує розробників, інвесторів, EPC компанії, інсталяторів, постачальників обладнання та енергетичні активи в одну інтелектуальну платформу для прискорення зеленої енергетичної транзиції.

✨ Особливості

• ✅ Адаптивний дизайн - повна підтримка mobile, tablet та desktop
• ✅ Мобільне меню - з анімацією та плавними переходами
• ✅ Градієнтні блоби - унікальний візуальний ефект з радіальними градієнтами
• ✅ Плавна прокрутка - по якорям з урахуванням висоти хедера
• ✅ Форма партнерства - з валідацією та обробкою подій
• ✅ Відповідає дизайн-системі - строго дотримується ТЗ
• ✅ Не потребує збірки - чистий HTML/CSS/JS, готовий до використання

🚀 Швидкий старт

Відкриття лендингу

Просто відкрийте файл index.html у будь-якому браузері. Не потрібні додаткові інструменти або сервери.

Варіанти відкриття:

1. Подвійний клік на файлі index.html у файловому менеджері
2. Перетягнути файл index.html у вікно браузера
3. ПКМ → Відкрити з → вибрати браузер
4. Через редактор - багато редакторів (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

📱 Секції лендингу

1. Hero секція - головний екран з логотипом та CTA
2. About Us - інформація про кліматичну кризу та місію
3. AITA World - опис екосистеми
4. Platforms - опис платформ (Platform, Assets, Invest, Exchange)
5. How AITA Works - процес роботи в 6 кроків
6. Traction - статистика та досягнення
7. Roles - ролі в екосистемі
8. Values - ключові цінності
9. Contact Form - форма партнерства

🔧 Функціональність

Мобільне меню

• Анімоване відкриття/закриття
• Автоматичне закриття при кліку на посилання
• Закриття при кліку поза меню
• Адаптація при зміні розміру вікна

Плавна прокрутка

• Автоматичне врахування висоти хедера
• Плавна анімація переходу до секцій

Форма партнерства

• Валідація обов'язкових полів
• Обробка події submit
• Очищення форми після відправки

🌐 Браузерна підтримка

• ✅ Chrome (останні версії)
• ✅ Firefox (останні версії)
• ✅ Safari (останні версії)
• ✅ Edge (останні версії)

📝 Ліцензія

© 2024 AITA. Всі права захищені.

👥 Контакти

Для питань та пропозицій використовуйте форму на лендингу або звертайтеся безпосередньо до команди AITA.

🔄 Версія

Версія: 2.0
Останнє оновлення: 2024

---

Примітка: Цей проєкт не потребує збірки або компіляції. Всі файли готові до використання. Просто відкрийте index.html у браузері!