Адаптивна версія статичних сторінок

Потрібно створити атмосферний промо-сайт, який не просто розповість історію, а передасть ідею чесності, справедливості та боротьби зі злодійством. Це має бути сайт, що викликає емоції, занурює в історію та залишає після себе сильне враження. В основі сюжету — легенда про Тимофія, героя, який не зміг пройти повз несправедливість. Коли Кабілджон викрав багато голди, Тимофій вирушив навздогін. Після довгого переслідування він наздогнав злодія, повернув викрадене та роздав голду бідним, довівши, що справедливість завжди сильніша за жадібність. Ця історія має бути подана красиво, емоційно та сучасно, ніби невелика цифрова легенда. Очікую не звичайний шаблонний лендинг, а якісний сайт із продуманим дизайном, плавними анімаціями, атмосферними переходами та візуальними ефектами, які підсилюватимуть сюжет. Важливо, щоб кожен блок мав свою роль, а весь сайт сприймався як єдина історія — від першого екрана до фінального заклику підтримувати чесну гру. Пріоритет — унікальний дизайн, адаптивність для всіх пристроїв, чистий код, висока швидкість роботи та увага до деталей. Якщо у вас є досвід створення ефектних промо-сайтів або інтерактивних історій — обов'язково покажіть приклади у відгуку. Розглядаю виконавців, які вміють не просто створити сайт, а перетворити ідею на атмосферний цифровий проєкт, що запам'ятовується.

Опис завдання: Мені потрібен готовий, вже написаний шаблон (Boilerplate / Headless CMS) онлайн-магазину на Next.js стеку + Node.js з панеллю адміністратора. Вам не потрібно писати код з нуля, вигадувати складну архітектуру або створювати унікальний дизайн.Завдання — взяти готове рішення, розгорнути його, змінити кілька фоновых зображень, підлаштувати структуру під свої характеристики і завантажити сайт на хостинг.Яким має бути результат (структура цільової сторінки зверху донизу): Головний екран: Ваша готова конструкція. Ми просто замінимо фонове зображення. Вам потрібна кнопка «Подзвонити» (дзвінок здійснюється одразу на мобільному телефоні, а форма «Ім'я/Телефон» — на ПК). Опис сервісів: простий блок, що складається рівно з трьох абзаців тексту. Product Showcase: сітка продуктових карток з вашого шаблону. Єдине умова — на продуктах повинні бути етикетки «New» та «Used» (і швидкий фільтр). Кнопка «Купити» відкриває просту форму замовлення (ім'я, телефон, обраний продукт). Онлайн-оплати немає. Огляди відео: блок, де відео (посилання з YouTube) йдуть строго в один рядок. Важно, щоб завантаження було ліньким, щоб відео не сповільнювало роботу сайту. Нижній колонизатор: Контакти та посилання на месенджери.Вимоги до панелі адміністратора (Node.js): Ми використовуємо стандартну панель адміністратора з вашого шаблону. Він повинен вміти додавати товари (Назва, Ціна, Фото, Опис, Нові/Вживані етикетки) і вставляти посилання на відео для блоку відгуків.Усі запити з сайту (дзвінки та покупки) повинні направлятися на бот Telegram (скрипт сповіщень повинен бути підключений).

Завдання-верстка сайту. Є готовий розроблений макет, зверстаний на конструкторі, який треба переверстати у WP. Це невеликий (на 4-5 сторінок) двомовний інформаційний сайт з можливістю підключення WooCommerce. Сайт має бути оптимізованим для SEO.

Створити та зверстати адаптивний майстер-шаблон для email-розсилок у Stripo (для експорту в SendPulse).⚙️ Що потрібно зробити:Розробити візуальну концепцію та дизайн блоків (хедер, банери, картки товарів, футер).Зверстати адаптивний HTML-шаблон уStripoз можливістю подальшого експорту вSendPulse.Протестувати відображення у Gmail, Apple Mail, Outlook та Dark Mode. Вимоги:Впевнений рівень Figma та практичний досвід верстки у Stripo.Розуміння технічних обмежень email-маркетингу.Портфоліо з реалізованими е-mail розсилками (e-commerce/fashion).

Опис завдання Потрібен досвідчений frontend-розробник або верстальник для поетапного оновлення великого чинного сайту. Сайт працює багато років, містить значну кількість сторінок, різні типи контенту, форми, таблиці та інтерактивні блоки. Використовується власна серверна система, наявні legacy HTML/CSS. Повна заміна технологій або системи керування сайтом не планується. На першому етапі необхідно розробити новий адаптивний загальний шаблон сайту. Після успішного завершення першого етапу планується послідовне оновлення внутрішніх сторінок. Назва сайту, URL, дизайн-макети та поточні вихідні файли будуть надані обмеженій кількості кандидатів після попереднього відбору за портфоліо та досвідом.Що входить до першого етапу Необхідно реалізувати загальну візуальну оболонку: шапку для desktop- і mobile-версій; основну та мобільну навігацію; службові елементи шапки; загальний контейнер і сітку сторінки; навігаційний ланцюжок («хлібні крихти»); базові елементи інтерфейсу: кнопки, посилання, поля введення; загальні стилі типографіки з можливістю їх поетапного підключення; футер; адаптивну поведінку шаблону; сумісність нової оболонки зі сторінками, які тимчасово залишатимуться у старому дизайні. Унікальні внутрішні блоки окремих сторінок на першому етапі повністю переробляти не потрібно.Особливості проєкту Великий чинний сайт із багатьма типами сторінок. Наявний legacy CSS і місцями застаріла HTML-розмітка. Новий дизайн упроваджуватиметься поступово. Одночасна повна заміна всіх сторінок неможлива. Виконавець не отримує доступу до сервера, CMS і робочого проєкту. Замовник самостійно інтегрує підготовлену верстку. Виконавцю будуть надані поточні CSS-файли, макети, графічні матеріали, HTML-фрагменти та приклади сторінок у межах, необхідних для виконання роботи. Передбачається декілька ітерацій після тестової інтеграції в реальний проєкт.Технічний підхід Передбачається підключення нового CSS поверх наявних стилів із подальшою поступовою міграцією та видаленням застарілих правил. Дозволяється: створювати нові CSS/SCSS-файли; пропонувати зміни HTML загальних частин шаблону; виправляти наявні CSS-правила, які заважають реалізації; пропонувати покращення структури DOM; створювати нові повторно використовувані компоненти. Зміни наявного CSS необхідно передавати окремо у вигляді: patch/diff-файлу; окремого файлу сумісності; або документованого переліку змінених правил і селекторів. Необхідно уникати: неконтрольованого використання !important; глибоко вкладених і крихких CSS-селекторів; прив’язки стилів до тексту або порядкового номера елемента; дублювання всієї розмітки окремо для desktop- і mobile-версій; підключення важких фреймворків без попереднього погодження; глобальних правил, які можуть порушити відображення ще не оновлених сторінок.Вимоги до якості Проєкт розрахований на подальший багаторічний розвиток. Потрібне не разове «підганяння під скриншот», а чиста, професійна та зручна для підтримки верстка. Очікується: зрозуміла компонентна структура; повторно використовувані CSS-класи; CSS custom properties для кольорів, розмірів, відступів та інших дизайн-токенів; розумна специфічність селекторів; семантична HTML5-розмітка; коректна ієрархія заголовків; відсутність зайвих DOM-обгорток; відсутність дублювання контенту, що індексується; коректне використання header, nav, main, section, footer; використання кнопок і посилань відповідно до їхнього призначення; доступність інтерфейсу з клавіатури; стани hover, focus, active і disabled; відсутність горизонтального прокручування сторінки; коректна робота з динамічним контентом різної довжини; зрозумілий і професійно організований код.SEO та продуктивність Оновлення шаблону не повинно погіршувати технічні SEO-показники сайту. Необхідно: зберегти семантику основного контенту; не створювати окремі дублікати DOM для мобільної та desktop-версій без обґрунтованої потреби; не приховувати важливий для індексації контент за допомогою JavaScript; не порушувати ієрархію заголовків; не видаляти наявні SEO-, аналітичні та структурні атрибути з наданих HTML-фрагментів; мінімізувати додатковий JavaScript; не використовувати важкі бібліотеки без погодження; передбачити розміри зображень і відсутність помітних зсувів макета під час завантаження; не допускати помітного погіршення показників Lighthouse і Core Web Vitals після інтеграції. Виконавець має розуміти, що якісний CSS сам собою не виправляє структуру DOM. Якщо для професійного результату необхідно змінити розмітку, потрібно підготувати та передати замовнику відповідні HTML-фрагменти.Адаптивність Перевірка верстки має виконуватися щонайменше на таких ширинах: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Між контрольними розмірами інтерфейс також повинен залишатися коректним і функціональним. Горизонтальне прокручування всієї сторінки не допускається. Винятки для окремих компонентів, наприклад великих таблиць, необхідно попередньо погодити.Результат першого етапу Виконавець передає: Новий CSS або SCSS разом із готовим зібраним CSS. Автономну демонстраційну HTML-сторінку. HTML-фрагменти шапки, меню та футера, якщо розмітка змінювалася. Окремий patch/diff змін legacy CSS. Нові SVG, зображення, іконки та шрифти. Інструкцію з підключення та інтеграції. Опис структури CSS і компонентів. Перелік нових і змінених класів та селекторів. Скриншоти результату на контрольних розмірах. Перелік відомих обмежень і розбіжностей із макетами. Рекомендації щодо подальшої міграції внутрішніх сторінок.Ітерації До вартості першого етапу мають входити: Узгодження загальної структури та desktop-версії. Адаптивне доопрацювання tablet- і mobile-версій. Виправлення виявлених замовником проблем після першої тестової інтеграції. Додаткові роботи поза межами погодженого першого етапу оцінюються окремо.Що потрібно вказати у заявці Просимо зазначити: досвід роботи з великими чинними сайтами та legacy CSS; приклади складної адаптивної верстки; приклади коду або посилання на репозиторії, якщо вони доступні; підхід до організації архітектури CSS; досвід поступової міграції дизайну без повної зупинки сайту;