Arc Dynamics

Аналог сайта Boston Dynamics, сделанный для портфолио: продуктовый сайт робототехнической компании с каталогом платформ, страницами роботов, блоком технологий, информацией о компании и контактной формой.

Сайт

• Главная - первый экран, ключевые направления, избранные роботы и сценарии применения.
• Robots - каталог платформ с фильтрацией по типам: field, humanoid, logistics, manipulation.
• Страница робота - описание, статус, метрики, характеристики, применения и изображение платформы.
• Technologies - направления разработки: mobility control, perception stack, fleet operations, safety engineering, manipulation и field data.
• About - короткое описание команды, подхода и продуктового фокуса.
• Contact - форма для заявки и контакты.
• Темы - светлая, темная и системная тема через переключатель в шапке.
• Адаптивность - интерфейс собран под desktop и mobile.

Стек

• Next.js 16 - App Router, маршруты, layout, metadata и production-сборка.
• React 19 - компоненты, состояние и клиентская интерактивность.
• TypeScript - типы для данных, компонентов и страниц.
• Tailwind CSS 4 - стили, сетки, адаптивность и оформление тем.
• Framer Motion - анимации появления секций и переходов между страницами.
• Lucide React - иконки в навигации, карточках и элементах управления.
• next-themes - переключение светлой, темной и системной темы.
• ESLint - проверка кода.

Запуск

1. Установить зависимости:

npm install

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

npm run dev

3. Открыть в браузере:

http://localhost:3000

Сборка

Production-сборка:

npm run build

Запуск собранного проекта:

npm run start

Проверка

npm run lint

Структура

.
├── public/
│   ├── arc-logo.png
│   ├── images/
│   └── readme/
│       └── readme-page-review.png
├── src/
│   ├── app/
│   │   ├── about/
│   │   ├── contact/
│   │   ├── robots/
│   │   ├── technologies/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── template.tsx
│   ├── components/
│   ├── data/
│   │   └── site.ts
│   └── lib/
│       └── utils.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
└── tsconfig.json

Данные

• Контент роботов, технологий, кейсов и статистики хранится в src/data/site.ts.
• Изображения лежат в public/images.
• Скриншот для README лежит в public/readme/readme-page-review.png.

Доп инфа

Arc Dynamics - вымышленный бренд для портфолио-проекта. Сайт сделан как аналог сайта Boston Dynamics и не связан с официальной компанией Boston Dynamics.