Сделать адаптив под мобильную версию

Потрібно реалізувати невеликий проєкт для продажу цифрових та фізичних продуктів. Що необхідно зробити: Розробити простий сучасний лендінг для продажу 3 продуктів: PDF-версія; фізичний комплект; платна Telegram-підписка. Підключити оплату через WayForPay. Інтегрувати замовлення з KeyCRM: передача даних про покупців; створення замовлень у KeyCRM; можливість подальшої автоматизації. Розробити Telegram-бота для керування підписками: автоматична видача доступу після оплати; перевірка активності підписки; продовження підписки; автоматичне видалення доступу після завершення оплати; адміністрування користувачів через просту панель або команди бота. Буде плюсом: досвід роботи з WayForPay; досвід інтеграції з KeyCRM; досвід створення Telegram-ботів та платних підписок. Прошу одразу вказувати: точну вартість; терміни реалізації; приклади схожих проєктів.

1. Загальні відомості про проєкт Замовник: сімейний парк розваг у Німеччині (повна назва та домен розкриваються виконавцю після старту проєкту) Тип проєкту: повний редизайн та перебудова сайту з нуля Поточний сайт: WordPress/Elementor, застарілий, потребує повної заміни Цільова аудиторія: сім'ї з дітьми від 2 до 12 років, регіон Німеччини з кількома великими містами поблизу (15 до 20 хвилин на машині) Мова сайту: основна німецька (DE), додатково англійська (EN), окрема мовна версія CMS: на розсуд розробника, WordPress з кастомною темою, Webflow або headless CMS. Elementor не використовувати. Домен: існуючий, переноситься без заміни Термін здачі: за погодженням з замовником 2. Цілі та ключові KPI Новий сайт має виконувати три стратегічні функції: Передавати атмосферу парку як іммерсивної пригоди, не список послуг, а занурення в тематичний світ. Максимізувати конверсію: відвідувач сайту має здійснити бронювання менш ніж за 3 кліки з будь-якої сторінки. Забезпечити бездоганний мобільний UX, понад 60% трафіку очікується з мобільних пристроїв. KPI #1: час до першого кліка "Забронювати" не більше 10 секунд з моменту завантаження головної сторінки KPI #2: Page Speed Score (Google PageSpeed Insights) не менше 85 на мобільних, не менше 90 на десктопі KPI #3: показник відмов (Bounce Rate) менше 45% KPI #4: коректне відображення в усіх сучасних браузерах (Chrome, Firefox, Safari, Edge) та на iOS/Android 3. Склад робіт 3.1 Сторінки та розділи Мінімальний набір сторінок: Головна: Hero секція, анонс живого шоу по вихідних, топ 5 атракціонів, відгуки Google, CTA блок Каталог атракцій з фільтром за віком (0 до 3 / 3 до 6 / 6 до 12 років), картки з фото та відео Пакети дня народження, опис плюс конфігуратора Поточні акції та сезонні події, кожна зі своєю візуальною карткою Ціни, таблиця плюс віджет онлайн бронювання (інтеграція з зовнішньою системою бронювання) Ресторан, меню та атмосфера Фотогалерея плюс вбудований Instagram фід Про парк, правила, FAQ (без дублювання правил) Контакти, карта Google Maps, контактна форма, години роботи, клікабельні телефон та email Зеркало всіх сторінок англійською мовою 3.2 Що необхідно видалити з поточного сайту Усі тексти про обмеження COVID 19 (2021 до 2022), включаючи футер FAQ з питаннями про вартість розробки веб-сайтів (сторонній контент) Застарілий copyright рік, замінити на актуальний Нерабочі Elementor popup кнопки Застарілі повідомлення про відкриття після обмежень Дублювання правил парку в розділі FAQ 4. Функціональні вимоги P1 = критично для запуску, P2 = бажано в v1.0, P3 = можливі доопрацювання пізніше 4.1 Hero секція (головна сторінка) P1, Fullscreen Video Hero: autoplay відео без звуку (muted, loop), 100vw на 100vh. При кліку включення звуку. Поверх відео короткий слоган і кнопка CTA. P1, текстовий шар над відео: H1 заголовок, підзаголовок плюс кнопки "Забронювати" та "Дізнатися більше". Шрифт читається на будь-якому фоні. P1, Sticky Navigation: навігаційна панель фіксується вгорі при скроллі, фон змінюється з прозорого на темний при прокрутці. P1, Sticky CTA Button: кнопка "Забронювати" завжди видима, на десктопі в хедері, на мобільному фіксована смуга внизу екрану. P2, Scroll анімації: елементи з'являються з CSS анімацією (fade in плюс slide up) при прокрутці. Бібліотека Intersection Observer або AOS.js. Без важких 3D бібліотек. 4.2 Атракції P1, картки атракцій: фото/відео, назва, короткий опис, значок вікового обмеження, кнопка "Детальніше" P1, фільтр за віком: клієнтський фільтр без перезавантаження сторінки, реалізація CSS класи плюс vanilla JS або Vue/React компонент P1, детальна сторінка атракції: власний URL, велике фото/відео, повний опис, обмеження за зростом/віком, кнопка бронювання P2, коротке відео: 15 до 30 секунд ролик для кожної атракції, autoplay при наведенні на десктопі або tap на мобільному 4.3 Система бронювання P1, інтеграція з зовнішньою системою бронювання: віджет вбудований inline (iframe або JS embed) на сторінки цін та дня народження, без відкриття в новій вкладці P1, multi step booking flow: покроковий майстер, тип візиту, дата/час, кількість гостей, підтвердження, обов'язковий progress bar P1, пояснення тайм слотів: інфо блок поруч з вибором часу P2, live доступність слотів: API запит до системи бронювання, відображення зайнятих/вільних слотів в реальному часі 4.4 Конфігурація дня народження P1, multi step конфігурація: вік іменинника, кількість дітей, вибір пакета, додаткові опції, вибір дати, форма запиту або пряме бронювання P1, динамічний розрахунок ціни: оновлюється в реальному часі при зміні параметрів, без перезавантаження P2, підсумкове резюме: зведена картка вибору на фінальному кроці з кнопками "Запросити" та "Забронювати напряму" 4.5 Довіра та соціальне підтвердження P1, віджет Google Reviews: мінімум 5 відгуків, середній рейтинг, зірки, розміщення на головній сторінці над CTA блоком бронювання P1, Instagram фід: вбудована стрічка останніх 9 до 12 постів через офіційний API або віджет, посилання на акаунт P2, лічильник відвідувачів: анімований лічильник 4.6 Додаткові функціональні блоки P1, live статус "зараз відкрито/закрито": автоматична позначка на основі годин роботи P1, клікабельні контакти: телефон та email як активні посилання, обов'язково в хедері та на сторінці контактів P2, інтерактивна карта парку: SVG або image map з клікабельними зонами атракцій P2, трекер завантаженості: візуальний індикатор очікуваної завантаженості парку P2, зворотний відлік до події: віджет countdown до найближчої сезонної події P3, окремий розділ вечірніх заходів: сторінка або секція з власним візуальним стилем і кнопкою бронювання 5. Нефункціональні вимоги 5.1 Продуктивність LCP не більше 2,5 сек на мобільному (3G fast) CLS менше 0,1 FID/INP менше 100 мс Google PageSpeed Score не менше 85 mobile, не менше 90 desktop Зображення: формат WebP плюс fallback JPEG, lazy loading, srcset Відео: стрімінг через CDN або YouTube/Vimeo embed, не зберігати важкі MP4 на хостингу 5.2 SEO Schema.org: LocalBusiness плюс OpeningHoursSpecification плюс Event Meta теги: унікальні title (не більше 60 символів) та description (не більше 155 символів) на кожній сторінці Hreflang для мовного перемикача Canonical URL на кожній сторінці Sitemap.xml автоматично генерований Налаштований robots.txt 5.3 Доступність WCAG 2.1, рівень AA як мінімальний стандарт Alt атрибути обов'язкові для всіх зображень Контраст текст/фон не менше 4,5 до 1 Повна навігація з клавіатури ARIA атрибути на всіх інтерактивних елементах 5.4 Безпека HTTPS обов'язковий, редирект з HTTP DSGVO/GDPR: cookie банер (Consent Management), актуальна політика конфіденційності CSRF захист, honeypot або reCAPTCHA v3 на всіх формах Усі залежності актуальних версій, без відомих вразливостей 5.5 CMS та редагованість Тексти, ціни, години роботи, фотографії редаговані через CMS без залучення розробника Створення/архівування акцій та подій через інтерфейс CMS Оновлення Instagram фіду автоматичне через API Відеоінструкція (10 до 15 хвилин) по роботі з CMS, обов'язковий deliverable 6. Дизайн система 6.1 Колірна палітра: основний глибокий зелений, вторинний середній лісовий зелений, акцентний червоний для CTA, світло зелений для фонових карток, бежевий для текстурних акцентів, темний для основного тексту, білий 6.2 Типографіка: виразний display шрифт для заголовків (в дусі пригоди), читабельний нейтральний sans serif для основного тексту, мінімальний розмір 16px body, 14px caption, line height 1,5 до 1,7 6.3 Зображення та медіа: тільки реальні фотографії, стокові фото не використовувати, формат WebP, мінімум 1920px для hero, 800px для карток, відео hero не довше 30 до 60 секунд в loop версії, всі зображення з правом публікації 6.4 Анімації: hover ефекти плавні (scale 1.03 на картках), scroll анімації fade in плюс translateY, тільки transform і opacity для GPU прискорення 7. Очікувані результати Дизайн макети в Figma: десктоп плюс мобільний вигляд усіх сторінок (десктоп 1440px, мобільний 375px) Адаптивна верстка: брейкпоінти 375 / 768 / 1024 / 1440px, mobile first підхід Готовий сайт на staging домені для приймання, після затвердження деплой на бойовий домен Налаштування CMS: всі редаговані зони налаштовані, тестово заповнені Відеоінструкція (10 до 15 хвилин) по управлінню контентом Базова настройка SEO: meta теги, Schema, Sitemap, підключення Google Search Console Установка Google Analytics 4 плюс Google Tag Manager, налаштування подій (click CTA, form submit, page_view) Крос браузерне та крос девайсне тестування, звіт PageSpeed Insights до здачі Передача вихідного коду (Git репозиторій) замовнику після фінальної оплати 8. Критерії приймання Усі P1 вимоги реалізовані та протестовані PageSpeed Score не менше 85 mobile, підтверджено скріншотом Коректне відображення на iPhone (Safari), Android (Chrome), iPad, MacBook, Windows (Chrome, Edge, Firefox) Форма бронювання успішно відправляє запит і присилає підтвердження Google Reviews завантажуються коректно Instagram фід оновлюється автоматично Усі посилання працюють, немає 404 помилок Cookie банер відповідає DSGVO, GDPR Контент в CMS редагується без залучення розробника

Потрібно розробити сучасний інтернет-магазин електро-, бензо- та акумуляторного інструменту з окремою B2B-платформою для партнерів, дилерів і дропшиперів. На цьому етапі хочу отримати попередню оцінку вартості, термінів розробки та рекомендації щодо технологій. (бо в мене сайт на платформі Horoshop)Основний сайт Потрібно передбачити: каталог товарів із категоріями, брендами, фільтрами та пошуком; сторінки товарів із характеристиками, фото, описами, цінами та наявністю; кошик і оформлення замовлення; особистий кабінет покупця; адаптивну версію для телефону, планшета та комп’ютера; SEO-налаштування; можливість самостійно додавати й редагувати товари, категорії, сторінки та банери; інтеграції з платіжними системами, службами доставки, CRM або обліковою системою; імпорт та автоматичне оновлення товарів, цін і залишків.B2B-платформа Після авторизації партнер повинен мати доступ до окремого кабінету, де зможе: бачити індивідуальні або гуртові ціни; переглядати актуальні залишки товарів; створювати та відстежувати замовлення; переглядати історію замовлень; бачити статуси замовлень; переглядати свій баланс, заборгованість, оплати та взаєморозрахунки; завантажувати рахунки, накладні та інші документи; подавати запити на повернення, гарантію або сервіс; отримувати повідомлення про новинки, акції та зміни цін. Бажано передбачити різні типи партнерів із різними цінами, знижками, кредитними лімітами та умовами роботи.Адміністративна частина Адміністратор повинен мати можливість: керувати товарами, цінами та залишками; створювати партнерів і призначати їм окремі умови; встановлювати персональні знижки та ліміти; переглядати всі замовлення, оплати й заборгованості; формувати документи; переглядати статистику продажів; керувати заявками на сервіс, повернення та гарантію; надсилати повідомлення окремим партнерам або всім користувачам B2B-платформи; розподіляти права доступу між працівниками.Важливі вимоги Система має бути швидкою, безпечною, зручною для користувачів і придатною для подальшого розширення. Важливо, щоб більшість інформації можна було змінювати через адмінпанель без втручання програміста. У відповіді прошу вказати: орієнтовну вартість розробки; приблизні терміни; рекомендовану технологію або CMS; що входить у вартість; які інтеграції можна реалізувати; чи надаєте ви подальшу технічну підтримку; приклади схожих інтернет-магазинів або B2B-систем, які ви розробляли. Розглядаю як повну розробку з нуля, так і реалізацію на готовій CMS із подальшим доопрацюванням під необхідний функціонал.

Технічне завдання на розробку офіційного вебсайту Громадська організація «Федерація сидячого волейболу України» 1. Загальна інформація Необхідно розробити сучасний, швидкий, безпечний та адаптивний офіційний вебсайт Федерації сидячого волейболу України. Сайт повинен коректно працювати на: комп’ютерах; планшетах; смартфонах (Android та iPhone). Мови сайту: Українська (основна) Англійська 2. Дизайн Стиль: сучасний; спортивний; офіційний; мінімалістичний. Основні кольори: синій; жовтий; білий. Необхідно використовувати: логотип Федерації; державну символіку України; фотографії спортсменів; фотографії ветеранів; фотографії національної збірної. 3. Головна сторінка На головній сторінці повинні бути: великий банер; логотип Федерації; новини; останні події; календар змагань; кнопка “Стати членом Федерації”; кнопка “Підтримати Федерацію”; кнопка “Зв’язатися з нами”. 4. Розділи сайту Про Федерацію історія; місія; цілі; напрямки діяльності; Статут (PDF); офіційні документи. Керівництво Окрема сторінка: Президент Віце-президент Правління Наглядова рада Контрольно-ревізійна комісія Для кожної особи: фото; посада; коротка біографія; контакти. Новини Можливість самостійно додавати: новини; фотографії; документи; відео. Календар Повинен містити: чемпіонати; Кубок України; міжнародні турніри; навчально-тренувальні збори; семінари. Змагання Окремий розділ: календар; результати; турнірні таблиці; фото; відео. Збірні України Розділ: чоловіча; жіноча; молодіжна; ветерани. Регіональні осередки Інтерактивна карта України. Для кожної області: контакти; керівник; адреса; телефон. Галерея Окремі альбоми: фото; відео; турніри; навчання; ветерани. Документи Можливість завантаження PDF: Статут; накази; протоколи; положення; рішення; заяви; бланки. Партнери Логотипи: Міністерство молоді та спорту України; Національний комітет спорту інвалідів України; міжнародні федерації; спонсори. Контакти Повинні бути: адреса; телефон; електронна пошта; карта Google Maps; форма зворотного зв’язку. 5. Особистий кабінет Після реєстрації користувач повинен мати можливість: змінювати особисті дані; оплачувати членські внески (у майбутньому); подавати заявки на участь у змаганнях; отримувати документи; переглядати історію заявок. 6. Адміністративна панель Адміністратор повинен мати можливість: додавати новини; редагувати сторінки; завантажувати документи; створювати фотогалереї; керувати користувачами; створювати календар заходів; публікувати результати турнірів. 7. Інтеграції Необхідно підключити: Facebook Instagram YouTube Telegram TikTok Також: Google Maps Google Analytics Google Search Console 8. SEO Повна SEO-оптимізація: правильні URL; META Title; META Description; Open Graph; Sitemap; Robots.txt. 9. Безпека Повинно бути: SSL-сертифікат; резервне копіювання; захист від спаму; захист адміністративної панелі; двофакторна автентифікація (за можливості). 10. Швидкість Оцінка Google PageSpeed: Desktop — не менше 95 балів. Mobile — не менше 90 балів. 11. CMS Сайт повинен бути розроблений на сучасній CMS (WordPress або іншій), щоб працівники Федерації могли самостійно: редагувати текст; додавати новини; завантажувати документи; додавати фотографії; створювати сторінки без допомоги програміста. 12. Домен та хостинг Необхідно: підключити домен; налаштувати хостинг; корпоративну електронну пошту автоматичне резервне копіювання. 13. Додатково Передбачити можливість подальшого розширення сайту: онлайн-реєстрація спортсменів; онлайн-оплата членських внесків; база спортсменів; база тренерів; база суддів; онлайн-трансляції; електронний документообіг; особистий кабінет члена Федерації; мобільний застосунок (у майбутньому). Очікуваний результат Розробник повинен створити сучасний офіційний вебсайт, який відповідатиме європейським стандартам, матиме високу швидкість роботи, адаптивний дизайн, зручну систему керування та буде готовий до подальшого розвитку Федерації сидячого волейболу України на національному та міжнародному рівнях.

Потрібно внести кілька доповнень і змін на лендінг у Framer. -- Змінити 1 слово в заголовку -- Змінити заголовок і опис 1 блоку продажу -- Вимкнути дві кнопки та зробити їх світло-сірими (щоб відобразити, що вони не клікабельні) -- Модифікувати існуючу форму, додати обов'язковий вибір з кількох варіантів перед відправкою форми та поле для імені