Успішний результат = успішно пройденій Speed Test сайту і повна відповідність макету.
Доступ до макету в Figma, Google Drive з усіма фото і іконками (їх бажано робити через код іконки, але як вийде), zip файл з існуючим кодом (який треба або допрацювати, або переробити - як Вам легше) - усе я надам в особистих повідомленнях.
Не лякайтесь, тут доволі багато описано, але в цілому основа ціль - зробити як в макеті, фізика вже реалізована, просто треба зробити багато ПРАВОК в коді. Якщо десь будуть проблеми з текстом - я сама зможу виправити в коді, бо я вчуся на програміста, мені це просто не подобається і я не знаю React js. Головне, щоб макет був адаптивним. Звертайте увагу на відступи, використовується 3 шрифти (Lexend Exa, Lexend Mega, Lexend Zetta). Тому, будь ласка, просто клікайте в макеті, дивіться відступи, по бокам усюди 80 пікселей від екранів (кожен блок поділений на екрани), все централізовано по цим екранам. Усі неонові елементи - це просто дубль одного елементу з різним Layer Blur (50, 25, 15, 10, 5 (майже усюди), в деяких відрізняється градієнт по кольорам. Я залишу Вам дуже крутий відгук і ви зможете використовувати мою роботу в портфоліо.
Додатковий опис:
1. Анімація розділу Tools: Я б хотіла, щоб іконки в розділі Tools були анімовані як «скляні кульки». Вони мають реалістично падати вниз під дією гравітації, накопичуватися там і злегка перекочуватися з боку в бік при взаємодії або зіткненні. Прибрати рамку, яка є в існуючому коді. В ідеалі було б зробити їх більш скляними, але можна залишити і як в макеті. (сама фізика вже реалізована)
2. Перегляд Case Studies (PDF Modal): При натисканні на кнопку «Full Project» має відкриватися модальне вікно з переглядом моєї PDF-презентації. (!!!!!але це вже реалізовано)
3. Додаткові сертифікати: У розділі з сертифікатами при натисканні на кнопку має з’являтися модальне вікно.
Стилістика: ефект матового скла (glassmorphism) з градієнтом.
Контент: там мають бути ще 2 сертифікати, які не ввійшли в основну сітку, з можливістю легко додавати нові через код у майбутньому. (коли клікаеш на сертифікат він відкривается (як презентації))
4. Функція «View Explanation» у Tools: При натисканні на «View Explanation» круглі іконки інструментів мають трансформуватися (або замінюватися) на картки з назвою та коротким описом. Опис повинен бути під кожну іконку, тому в цьому випливаючому вікні можна гортати вниз.
5. Валідація та логіка лід-форми:
Помилка: Якщо обов’язкові поля не заповнені, форма не повинна відправлятися. Потрібно додати візуальний ефект (свічення/glow) навколо незаповнених полів. (це вже реалізовано!!!)
Успіх: Після успішного відправлення має з’являтися PopUp з текстом: «Request sent. Let’s see how we can scale your results soon!». (я можу зробити це або одразу, або як дійдете до цього пункту, взагалі логіка проста - форма ззаду стає пустою і затімнюється - а PopUp вискакує посередині форми і виглядає так само як вікно з сертифікатами)
Поле телефону: Поруч із вводом номера (там де +00) додати невеликий квадратик із заокругленими кутами для вибору коду країни в АЛФАВІТНОМУ порядку (Dropdown).
