Nothing — Landing Page

Адаптивний односторінковий лендинг для бренду техніки Nothing, зверстаний за макетом із Figma. Сторінка містить шапку з бургер-меню, секції рекомендованих товарів, каталог за категоріями, блок «About us» і форму зворотного зв'язку з контактною інформацією.

Реалізовано:

• адаптив під мобільні, планшети та десктоп (responsive grid);
• бургер-меню з блокуванням скролу сторінки під ним;
• плавні анімації (hover на зображеннях, навігації, кнопках) з єдиною швидкістю;
• робочі посилання tel:, mailto: та адреса на Google Maps;
• форма з валідацією полів, яка не перезавантажує сторінку при відправці.

🛠 Технології

• HTML5 — семантична розмітка
• SCSS (Sass) — стилі, змінні, міксини, вкладеність
• БЕМ — методологія іменування класів
• CSS Grid / Flexbox — розкладка та адаптив
• Vite — збірка та dev-сервер
• Stylelint + LintHTML — лінтери коду

🔗 Посилання

• 🌐 Прев'ю (DEMO): https://reddev111.github.io/layout_landing-page/
• 🎨 Макет (Figma): Nothing design

🚀 Запуск проєкту локально

1. Клонувати репозиторій:

   git clone https://github.com/reddev111/layout_landing-page.git
   cd layout_landing-page

2. Встановити залежності:

   npm install

3. Запустити dev-сервер:

   npm start

   Проєкт відкриється в браузері за локальною адресою (зазвичай http://localhost:3000).

Додаткові команди

• npm run build — зібрати проєкт у продакшн-версію
• npm run lint — перевірити код лінтерами (SCSS + HTML)
• npm run deploy — задеплоїти на GitHub Pages