Blancy – главная страница цифрового агентства 🚀

Одностраничный сайт для агентства Blancy, который показывает компетенции команды, портфолио и предлагает удобные способы связи с потенциальными клиентами.

✨ Основные возможности

• Живой первый экран с призывом к действию и адаптивным изображением.
• Раздел с проектами: карточки объединяют текст, графику и кнопку для перехода к подробностям.
• Блок "О компании" с ключевыми цифрами на базе повторно используемых компонентов.
• Раздел "Нам доверяют" с сеткой логотипов и кнопкой быстрого контакта.
• Две формы заявок (быстрая и расширенная) с валидацией полей и подсказками.
• Отдельная навигация для мобильных устройств и десктопов.
• Лента статей с категорией, временем чтения и датой.

🛠️ Используемые технологии

• Клиентская часть: Next.js, React, TypeScript.
• Оформление: CSS Modules, адаптивная вёрстка на медиа-запросах.
• Контроль качества: ESLint, Stylelint, Prettier, TypeScript.
• Рабочий процесс: Node.js, NPM Scripts, статический экспорт через next export.

🚀 Установка и запуск

1. Установите Node.js версии 22 и выше.

2. Склонируйте репозиторий и перейдите в папку проекта:

   git clone https://github.com/IrinaRyazanskaya/blancy-frontend.git
   cd blancy-frontend

3. Установите зависимости:

   npm install

4. Запустите локальную разработку (порт по умолчанию http://localhost:3000):

   npm run start

5. Соберите статическую версию и просмотрите её локально:

   npm run build
   npm run preview

6. Дополнительные команды для повседневной работы:

   npm run build       # сборка оптимизированной версии
   npm run storybook   # запуск Storybook на 6006 порту
   npm run format      # автоматическое форматирование кода
   npm run lint        # запуск линтеров для проверки качества кода
   npm run lint-fix    # автоматическое исправление ошибок линтинга

📁 Структура проекта

blancy-frontend/
├── pages/                     # Входные точки Next.js: главная страница и подключение общих стилей
│   ├── _app.tsx
│   └── index.tsx
├── components/                # Повторно используемые блоки: баннер, проекты, услуги, отзывы, формы
│   ├── home-banner/
│   ├── cases/
│   ├── services/
│   ├── people-says/
│   ├── people-trust/
│   └── ...(и другие)
├── hooks/
│   └── device-info.ts         # React хуки для получения информации об устройстве
├── styles/
│   ├── globals.css            # Глобальные шрифты и классы для мобильной и десктопной версий
│   └── home.module.css        # Стили главной страницы
├── public/
│   ├── fonts/                 # Кастомные шрифты
│   └── images/                # Статические изображения и иконки
├── .editorconfig              # Единые правила оформления кода
├── .gitignore                 # Игнорируемые Git-ом файлы
├── .prettierignore            # Исключения для Prettier
├── .prettierrc.json           # Конфигурация Prettier
├── .stylelintrc.json          # Конфигурация Stylelint
├── next.config.js             # Настройки Next.js
├── eslint.config.mjs          # Конфигурация ESLint
└── package.json               # NPM-скрипты и зависимости проекта

💡 Что удалось сделать

• Логичная структура сайта цифрового агентства с последовательностью блоков.
• Повторно используемые карточки и формы для ускорения разработки.
• Настроены инструменты форматирования и проверки кода, что облегчает работу в команде.
• Настроен статический экспорт Next.js, чтобы можно было разместить проект на любом статическом хостинге.

📚 Решённые задачи и сложности

• Адаптация под устройства: пользовательская функция useDeviceInfo управляет отображением мобильных и десктопных компонентов без повторения логики.
• Формы заявок: проверка телефонов и e-mail сопровождается подсказками и снижает количество некорректных обращений.
• Единый стиль: фирменная типографика и сетка логотипов поддерживают образ агентства и легко настраиваются в CSS Modules.