Mira Brow Studio

Демо-сайт студии бровей и beauty-услуг на Astro. Проект сделан как публичный референс: в нем нет реальных клиентских данных, фотографий, адресов или отзывов.

О проекте

Это небольшой лендинг с мягкой визуальной подачей, двуязычным интерфейсом и готовой структурой для мастера или небольшой студии. Его можно использовать как пример для портфолио, разборов, обучения или как стартовую точку для похожего клиентского проекта.

Внутри есть:

• первый экран с CTA и краткой информацией о студии;
• блок “О мастере”;
• прайс услуг;
• портфолио с фильтрами и lightbox-просмотром;
• сертификаты;
• отзывы;
• блок онлайн-записи;
• контакты, график и карта;
• страница политики конфиденциальности;
• переключение языков UA / RU.

Скриншот страницы

Технологии

• Astro
• React integration для клиентских интерактивных частей
• Tailwind CSS
• TypeScript

Как запустить локально

Нужен Node.js и npm.

npm install
npm run dev

После запуска сайт будет доступен по адресу:

http://localhost:4321

Если Astro выберет другой порт, он покажет актуальную ссылку в терминале.

Команды

npm run dev

Запускает локальный сервер разработки.

npm run build

Собирает production-версию сайта в папку dist.

npm run preview

Позволяет локально посмотреть уже собранную production-версию.

npm run check

Запускает Astro-проверку типов и проекта.

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

src/
  assets/          изображения и демо-плейсхолдеры
  components/      секции страницы и UI-блоки
  data/            услуги, портфолио, отзывы, сертификаты
  i18n/            словарь и логика переключения языка
  layouts/         базовый layout
  pages/           страницы сайта
  scripts/         небольшие клиентские скрипты
  styles/          глобальные стили
public/
  screenshots/     изображения для README

Где менять контент

Основные тексты лежат в src/i18n/dict.ts.
Услуги и цены: src/data/services.ts.
Отзывы: src/data/reviews.ts.
Портфолио: src/data/portfolio.ts.
Сертификаты: src/data/certificates.ts.
Контакты и ссылки: src/components/Contacts.astro, src/components/Footer.astro, src/components/Booking.astro.

Как адаптировать под реальный проект

Перед использованием для настоящего клиента стоит заменить:

• название студии и имя мастера;
• город, адрес, телефон и соцсети;
• ссылку на онлайн-запись;
• тексты в обеих языковых версиях;
• изображения портфолио и сертификаты;
• юридический текст на странице privacy;
• мета-теги в src/layouts/BaseLayout.astro;
• site в astro.config.mjs.

Примечание

Все данные в репозитории вымышленные. Изображения сделаны как нейтральные демо-плейсхолдеры, чтобы проект можно было спокойно публиковать, показывать и разбирать без привязки к реальному клиенту.