Перейти до змісту

Portal Landing Page — Імплементація

Що це

Лендінг-сторінка проекту ESWF на домені eswf.dev. Одна статична сторінка з темною темою, заголовком, трьома картками-посиланнями на під-сайти та афоризмом. Дизайн за референсом docs/Simples/пример.png.

Технологічний стек

Бібліотека Версія Для чого
next ^15.1.0 React-фреймворк з SSR/SSG, App Router, static export для деплою
react ^19.0.0 UI-бібліотека для побудови компонентів
react-dom ^19.0.0 Рендеринг React-компонентів в DOM
tailwindcss ^3.4.17 Utility-first CSS фреймворк для стилізації без написання CSS
postcss ^8.4.49 Процесор CSS, потрібен для роботи Tailwind
autoprefixer ^10.4.20 PostCSS плагін, додає вендорні префікси (-webkit-, -moz-) автоматично
typescript ^5.7.0 Статична типізація для JavaScript — захист від помилок
@types/node ^22.0.0 TypeScript типи для Node.js API
@types/react ^19.0.0 TypeScript типи для React
@types/react-dom ^19.0.0 TypeScript типи для ReactDOM
eslint ^9.0.0 Лінтер — перевірка якості коду
eslint-config-next ^15.1.0 Конфігурація ESLint від Next.js (правила для React, accessibility)

Послідовність команд

1. Створення структури директорій

mkdir -p frontend/portal frontend/erp frontend/news frontend/shop frontend/shared backend mobile
Створює основну структуру монорепозиторію: - frontend/portal — лендінг (eswf.dev) - frontend/erp — DOP додаток (erp.eswf.dev) - frontend/news — блог (news.eswf.dev) - frontend/shop — магазин модулів (shop.eswf.dev) - frontend/shared — спільні пакети - backend — Django REST API - mobile — React Native додаток

2. Створення конфігураційних файлів

Замість npx create-next-app (вимагає інтерактивного вводу) — файли створені вручну:

package.json — маніфест проекту: - Описує залежності (dependencies / devDependencies) - Визначає npm скрипти: dev, build, start, lint

tsconfig.json — конфігурація TypeScript: - target: "ES2017" — компіляція під сучасний JS - moduleResolution: "bundler" — для Next.js bundler - paths: { "@/*": ["./*"] } — аліас @/ для імпортів від кореня проекту - plugins: [{ name: "next" }] — підтримка Next.js в IDE

next.config.ts — конфігурація Next.js: - output: "export" — генерація статичного HTML (без Node.js сервера на продакшені)

tailwind.config.ts — конфігурація Tailwind CSS: - content — вказує де шукати CSS-класи (app/, components/) - theme.extend.fontFamily — додає Inter як основний шрифт

postcss.config.mjs — конфігурація PostCSS: - Підключає плагіни tailwindcss та autoprefixer

3. Інсталяція залежностей

cd frontend/portal
npm install
Встановлює всі пакети з package.json в node_modules/ (349 пакетів).

4. Збірка та перевірка

npx next build
Результат: static export, 2 сторінки (/ та /_not-found), First Load JS ~102 KB.

Структура файлів

frontend/portal/
├── app/
│   ├── layout.tsx          # Root layout — <html>, <body>, metadata, dark theme
│   ├── page.tsx            # Головна сторінка — композиція Hero + Cards + Quote
│   └── globals.css         # Tailwind директиви + Google Fonts (Inter)
├── components/
│   ├── Hero.tsx            # Заголовок "ESWF.DEV" + слоган
│   ├── CardLinks.tsx       # 3 картки-посилання на під-сайти
│   └── Quote.tsx           # Афоризм внизу сторінки
├── public/
│   └── bg-hero.jpg         # (потрібно додати) Фонове зображення
├── package.json
├── tsconfig.json
├── next.config.ts
├── tailwind.config.ts
└── postcss.config.mjs

Опис компонентів

app/layout.tsx

Root layout для всього сайту. Визначає: - <html lang="uk"> — українська мова - <body className="bg-black text-white"> — темний фон, білий текст - metadata — SEO: title, description для пошукових систем

app/page.tsx

Головна сторінка. Використовує: - Фонове зображення (bg-hero.jpg) з темним overlay (bg-black/70) - Flexbox-центрування контенту по вертикалі та горизонталі - Композиція: Hero → CardLinks → Quote

components/Hero.tsx

  • Заголовок "ESWF.DEV" — text-7xl font-extrabold (великий жирний текст)
  • Крапка виділена кольором (text-blue-400)
  • Підзаголовок-слоган сірим кольором

components/CardLinks.tsx

  • Масив з 3 карток: News & Insights, Solution Catalog, DOP Demo Lab
  • Grid layout: 1 колонка на мобільному, 3 на десктопі
  • Hover-ефект: зміна фону та кольору заголовка
  • backdrop-blur-sm — ефект розмиття фону за карткою

components/Quote.tsx

  • Афоризм курсивом: «Правильний продукт, у правильному місці, у правильний час»
  • Сірий колір (text-gray-500)

Команди для роботи

# Запустити dev-сервер (http://localhost:3000)
cd frontend/portal
npm run dev

# Збірка для продакшену (static HTML → out/)
npm run build

# Перевірка лінтером
npm run lint

Що потрібно додати

  1. Фонове зображення — public/bg-hero.jpg (колаж: дорога/логістика + код/розробка)
  2. Favicon — іконка для вкладки браузера
  3. OG-теги — для прев'ю при шарінгу в соцмережах