Завдання:
Створити сучасний лендінг у стилі стімпанк для продажу товарів/атрибутики: адаптивність під усі пристрої, SEO-оптимізація, каталог з варіаціями товарів, кошик і оформлення замовлення в Telegram з автозаповненням.
Що зроблено (по факту реалізації в цьому проєкті):
Повна верстка HTML/CSS/JS без сторонніх бібліотек (vanilla JS).
Стімпанк-стилізація: палітра латуні/патики, текстури/тіні, декоративні елементи.
HERO-блок з анімованими шестернями (SVG):
Зубці (геометрія зубів, центральна вісь), опційні градієнти та обертання в CSS.
Каталог з демо-найменуваннями: картки з картинкою, ціною, бейджем, селекторами опцій (колір/розмір/матеріал) і лічильником кількості.
Кошик (drawer): додавання/видалення товарів, зміна кількості, підсумок; стан зберігається у localStorage; лічильник у шапці.
Оформлення в Telegram: кнопка формує структурований текст замовлення (позиції, варіації, кількість, сума) і відкриває чат t.me/ із попередньо заповненим повідомленням.
SEO та семантика:
мета-теги (title, description, Open Graph, Twitter Card);
JSON-LD для WebSite/Organization;
мікророзмітка Product/Offer у картках;
коректні заголовки/навігація; canonical.
Продуктивність і UX:
responsive grid (mobile-first), lazy-loading зображень;
ARIA-атрибути, клас visually-hidden;
форматування валюти Intl.NumberFormat('uk-UA', 'UAH');
липка шапка, плавні ховери, тіні, компактний JS.
Технології: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Результат для бізнесу:
Легкий і швидкий лендінг зі зручним каталожним UX та мінімальним тертям при замовленні: клієнт формує кошик і одним натиском відправляє замовлення в Telegram. Дизайн підкреслює тематику стімпанк, а SEO-основа готова до індексації.
*Ця робота доступна до покупки, а також можливе індивідуальне замовлення під ваші потреби та з вашим стилем.
Створити сучасний лендінг у стилі стімпанк для продажу товарів/атрибутики: адаптивність під усі пристрої, SEO-оптимізація, каталог з варіаціями товарів, кошик і оформлення замовлення в Telegram з автозаповненням.
Що зроблено (по факту реалізації в цьому проєкті):
Повна верстка HTML/CSS/JS без сторонніх бібліотек (vanilla JS).
Стімпанк-стилізація: палітра латуні/патики, текстури/тіні, декоративні елементи.
HERO-блок з анімованими шестернями (SVG):
Зубці (геометрія зубів, центральна вісь), опційні градієнти та обертання в CSS.
Каталог з демо-найменуваннями: картки з картинкою, ціною, бейджем, селекторами опцій (колір/розмір/матеріал) і лічильником кількості.
Кошик (drawer): додавання/видалення товарів, зміна кількості, підсумок; стан зберігається у localStorage; лічильник у шапці.
Оформлення в Telegram: кнопка формує структурований текст замовлення (позиції, варіації, кількість, сума) і відкриває чат t.me/ із попередньо заповненим повідомленням.
SEO та семантика:
мета-теги (title, description, Open Graph, Twitter Card);
JSON-LD для WebSite/Organization;
мікророзмітка Product/Offer у картках;
коректні заголовки/навігація; canonical.
Продуктивність і UX:
responsive grid (mobile-first), lazy-loading зображень;
ARIA-атрибути, клас visually-hidden;
форматування валюти Intl.NumberFormat('uk-UA', 'UAH');
липка шапка, плавні ховери, тіні, компактний JS.
Технології: HTML5, CSS3 (Flex/Grid), JavaScript (ES6), SVG, Schema.org (JSON-LD), Open Graph.
Результат для бізнесу:
Легкий і швидкий лендінг зі зручним каталожним UX та мінімальним тертям при замовленні: клієнт формує кошик і одним натиском відправляє замовлення в Telegram. Дизайн підкреслює тематику стімпанк, а SEO-основа готова до індексації.
*Ця робота доступна до покупки, а також можливе індивідуальне замовлення під ваші потреби та з вашим стилем.