Initial commit — Умный Байт landing
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
node_modules
|
||||
*/node_modules
|
||||
dist
|
||||
*/dist
|
||||
build
|
||||
*/build
|
||||
.git
|
||||
.gitignore
|
||||
.env
|
||||
*.env
|
||||
.DS_Store
|
||||
.vscode
|
||||
.idea
|
||||
README.md
|
||||
docker-compose.yml
|
||||
@@ -0,0 +1,15 @@
|
||||
# PostgreSQL
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_USER=umbyte
|
||||
DB_PASSWORD=umbyte_dev_password
|
||||
DB_NAME=umbyte
|
||||
|
||||
# Backend
|
||||
NODE_ENV=development
|
||||
PORT=3000
|
||||
JWT_SECRET=change-me-in-production-please-use-long-random-string
|
||||
ADMIN_INITIAL_PASSWORD=admin
|
||||
|
||||
# Frontend (build-time)
|
||||
VITE_API_URL=http://localhost:3000
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
node_modules/
|
||||
*/node_modules/
|
||||
dist/
|
||||
build/
|
||||
*/dist/
|
||||
*/build/
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
*.env
|
||||
*.log
|
||||
npm-debug.log*
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
.DS_Store
|
||||
coverage/
|
||||
.cache/
|
||||
tmp/
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
# =====================================================
|
||||
# Stage 1: build frontend
|
||||
# =====================================================
|
||||
FROM node:20-alpine AS frontend-build
|
||||
|
||||
WORKDIR /app/frontend
|
||||
COPY frontend/package.json frontend/package-lock.json* ./
|
||||
RUN npm install
|
||||
|
||||
COPY frontend/ ./
|
||||
RUN npm run build
|
||||
|
||||
# =====================================================
|
||||
# Stage 2: build backend
|
||||
# =====================================================
|
||||
FROM node:20-alpine AS backend-build
|
||||
|
||||
WORKDIR /app/backend
|
||||
COPY backend/package.json backend/package-lock.json* ./
|
||||
RUN npm install
|
||||
|
||||
COPY backend/ ./
|
||||
RUN npm run build
|
||||
|
||||
# =====================================================
|
||||
# Stage 3: production image
|
||||
# =====================================================
|
||||
FROM node:20-alpine AS runtime
|
||||
|
||||
RUN apk add --no-cache nginx supervisor curl
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Backend production deps
|
||||
COPY backend/package.json backend/package-lock.json* ./backend/
|
||||
RUN cd backend && npm install --omit=dev
|
||||
|
||||
# Built backend
|
||||
COPY --from=backend-build /app/backend/dist ./backend/dist
|
||||
|
||||
# DB migrations
|
||||
COPY db ./db
|
||||
|
||||
# Frontend static
|
||||
COPY --from=frontend-build /app/frontend/dist /var/www/umbyte
|
||||
|
||||
# Nginx config
|
||||
COPY nginx.conf /etc/nginx/http.d/default.conf
|
||||
|
||||
# Supervisor config
|
||||
COPY supervisord.conf /etc/supervisord.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=20s \
|
||||
CMD curl -f http://localhost/api/health || exit 1
|
||||
|
||||
CMD ["supervisord", "-c", "/etc/supervisord.conf"]
|
||||
@@ -0,0 +1,32 @@
|
||||
# Умный Байт — лендинг компании
|
||||
|
||||
Сайт компании ООО «Умный Байт» (umbyte.ru) с админ-панелью для управления контентом.
|
||||
|
||||
## Стек
|
||||
|
||||
- **Frontend**: Vite + React + TypeScript + Tailwind CSS
|
||||
- **Backend**: Node.js + Express + TypeScript
|
||||
- **БД**: PostgreSQL 16
|
||||
- **Auth**: JWT
|
||||
- **Deploy**: Docker + Coolify на fortress.zeroday.su
|
||||
|
||||
## Структура
|
||||
|
||||
```
|
||||
umbyte-landing/
|
||||
├── frontend/ # Публичный лендинг + админка
|
||||
├── backend/ # REST API
|
||||
├── db/ # SQL миграции
|
||||
├── Dockerfile # production билд (multi-stage)
|
||||
└── docker-compose.yml # для локальной разработки
|
||||
```
|
||||
|
||||
## Production deploy
|
||||
|
||||
Push в `main` → Coolify автоматически собирает Dockerfile и деплоит.
|
||||
|
||||
Переменные окружения (в Coolify):
|
||||
- `DB_HOST=postgres-<UUID>` — полное имя контейнера БД
|
||||
- `DB_USER`, `DB_PASSWORD`, `DB_NAME`
|
||||
- `JWT_SECRET` — случайная строка
|
||||
- `ADMIN_INITIAL_PASSWORD` — пароль первого админа при инициализации
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "umbyte-backend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "tsx watch src/index.ts",
|
||||
"build": "tsc",
|
||||
"start": "node dist/index.js",
|
||||
"migrate": "tsx src/db/migrate.ts",
|
||||
"create-admin": "tsx src/scripts/create-admin.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"bcrypt": "^5.1.1",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.4.5",
|
||||
"express": "^4.21.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"pg": "^8.13.1",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
"@types/cookie-parser": "^1.4.7",
|
||||
"@types/cors": "^2.8.17",
|
||||
"@types/express": "^5.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.7",
|
||||
"@types/node": "^22.9.0",
|
||||
"@types/pg": "^8.11.10",
|
||||
"tsx": "^4.19.2",
|
||||
"typescript": "^5.6.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import jwt from 'jsonwebtoken';
|
||||
import bcrypt from 'bcrypt';
|
||||
import type { Request, Response, NextFunction } from 'express';
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'change-me-please';
|
||||
const COOKIE_NAME = 'umbyte_session';
|
||||
const TOKEN_TTL_SEC = 60 * 60 * 24 * 7;
|
||||
|
||||
export interface AdminPayload {
|
||||
id: number;
|
||||
login: string;
|
||||
}
|
||||
|
||||
declare global {
|
||||
namespace Express {
|
||||
interface Request {
|
||||
admin?: AdminPayload;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function signToken(payload: AdminPayload): string {
|
||||
return jwt.sign(payload, JWT_SECRET, { expiresIn: TOKEN_TTL_SEC });
|
||||
}
|
||||
|
||||
export function setAuthCookie(res: Response, token: string): void {
|
||||
res.cookie(COOKIE_NAME, token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
maxAge: TOKEN_TTL_SEC * 1000,
|
||||
path: '/',
|
||||
});
|
||||
}
|
||||
|
||||
export function clearAuthCookie(res: Response): void {
|
||||
res.clearCookie(COOKIE_NAME, { path: '/' });
|
||||
}
|
||||
|
||||
export function requireAdmin(
|
||||
req: Request,
|
||||
res: Response,
|
||||
next: NextFunction
|
||||
): void {
|
||||
const token = req.cookies?.[COOKIE_NAME];
|
||||
if (!token) {
|
||||
res.status(401).json({ error: 'unauthorized' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = jwt.verify(token, JWT_SECRET) as AdminPayload;
|
||||
req.admin = payload;
|
||||
next();
|
||||
} catch {
|
||||
res.status(401).json({ error: 'unauthorized' });
|
||||
}
|
||||
}
|
||||
|
||||
export async function hashPassword(plain: string): Promise<string> {
|
||||
return bcrypt.hash(plain, 12);
|
||||
}
|
||||
|
||||
export async function verifyPassword(
|
||||
plain: string,
|
||||
hash: string
|
||||
): Promise<boolean> {
|
||||
return bcrypt.compare(plain, hash);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { pool } from './pool.js';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
const MIGRATIONS_DIR = path.resolve(__dirname, '../../../db');
|
||||
|
||||
export async function runMigrations(): Promise<void> {
|
||||
console.log('[migrate] Запуск миграций из', MIGRATIONS_DIR);
|
||||
|
||||
if (!fs.existsSync(MIGRATIONS_DIR)) {
|
||||
console.warn('[migrate] Папка миграций не найдена, пропускаю');
|
||||
return;
|
||||
}
|
||||
|
||||
const files = fs
|
||||
.readdirSync(MIGRATIONS_DIR)
|
||||
.filter((f) => f.endsWith('.sql'))
|
||||
.sort();
|
||||
|
||||
for (const file of files) {
|
||||
const fullPath = path.join(MIGRATIONS_DIR, file);
|
||||
const sql = fs.readFileSync(fullPath, 'utf-8');
|
||||
console.log(`[migrate] → ${file}`);
|
||||
try {
|
||||
await pool.query(sql);
|
||||
} catch (err) {
|
||||
console.error(`[migrate] Ошибка в ${file}:`, err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[migrate] Все миграции применены');
|
||||
}
|
||||
|
||||
if (import.meta.url === `file://${process.argv[1]}`) {
|
||||
runMigrations()
|
||||
.then(() => process.exit(0))
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import pg from 'pg';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const { Pool } = pg;
|
||||
|
||||
export const pool = new Pool({
|
||||
host: process.env.DB_HOST || 'localhost',
|
||||
port: parseInt(process.env.DB_PORT || '5432', 10),
|
||||
user: process.env.DB_USER || 'umbyte',
|
||||
password: process.env.DB_PASSWORD || 'umbyte_dev_password',
|
||||
database: process.env.DB_NAME || 'umbyte',
|
||||
max: 10,
|
||||
idleTimeoutMillis: 30000,
|
||||
connectionTimeoutMillis: 5000,
|
||||
});
|
||||
|
||||
pool.on('error', (err) => {
|
||||
console.error('Unexpected PostgreSQL error', err);
|
||||
});
|
||||
|
||||
export async function query<T = unknown>(
|
||||
text: string,
|
||||
params?: unknown[]
|
||||
): Promise<T[]> {
|
||||
const result = await pool.query(text, params);
|
||||
return result.rows as T[];
|
||||
}
|
||||
|
||||
export async function queryOne<T = unknown>(
|
||||
text: string,
|
||||
params?: unknown[]
|
||||
): Promise<T | null> {
|
||||
const rows = await query<T>(text, params);
|
||||
return rows[0] ?? null;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
import cookieParser from 'cookie-parser';
|
||||
import dotenv from 'dotenv';
|
||||
import { publicRouter } from './routes/public.js';
|
||||
import { adminRouter } from './routes/admin.js';
|
||||
import { runMigrations } from './db/migrate.js';
|
||||
import { initFirstAdmin } from './scripts/init-admin.js';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
const PORT = parseInt(process.env.PORT || '3000', 10);
|
||||
|
||||
app.use(express.json({ limit: '1mb' }));
|
||||
app.use(cookieParser());
|
||||
|
||||
app.use(
|
||||
cors({
|
||||
origin:
|
||||
process.env.NODE_ENV === 'production'
|
||||
? false
|
||||
: ['http://localhost:5173', 'http://127.0.0.1:5173'],
|
||||
credentials: true,
|
||||
})
|
||||
);
|
||||
|
||||
app.get('/api/health', (_req, res) => {
|
||||
res.json({ ok: true, service: 'umbyte-backend' });
|
||||
});
|
||||
|
||||
app.use('/api', publicRouter);
|
||||
app.use('/api/admin', adminRouter);
|
||||
|
||||
app.use((err: Error, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
|
||||
console.error('[error]', err);
|
||||
res.status(500).json({ error: 'internal_error' });
|
||||
});
|
||||
|
||||
async function start() {
|
||||
try {
|
||||
await runMigrations();
|
||||
await initFirstAdmin();
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`[umbyte-backend] listening on :${PORT}`);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[startup] fatal error:', err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
start();
|
||||
@@ -0,0 +1,233 @@
|
||||
import { Router } from 'express';
|
||||
import { z } from 'zod';
|
||||
import { query, queryOne } from '../db/pool.js';
|
||||
import {
|
||||
signToken,
|
||||
setAuthCookie,
|
||||
clearAuthCookie,
|
||||
requireAdmin,
|
||||
verifyPassword,
|
||||
} from '../auth/jwt.js';
|
||||
|
||||
export const adminRouter = Router();
|
||||
|
||||
const loginSchema = z.object({
|
||||
login: z.string().min(1).max(64),
|
||||
password: z.string().min(1).max(256),
|
||||
});
|
||||
|
||||
adminRouter.post('/login', async (req, res) => {
|
||||
const parsed = loginSchema.safeParse(req.body);
|
||||
if (!parsed.success) {
|
||||
res.status(400).json({ error: 'invalid_payload' });
|
||||
return;
|
||||
}
|
||||
|
||||
const { login, password } = parsed.data;
|
||||
|
||||
try {
|
||||
const user = await queryOne<{
|
||||
id: number;
|
||||
login: string;
|
||||
password_hash: string;
|
||||
}>(
|
||||
`SELECT id, login, password_hash FROM admin_users WHERE login = $1`,
|
||||
[login]
|
||||
);
|
||||
|
||||
if (!user) {
|
||||
res.status(401).json({ error: 'invalid_credentials' });
|
||||
return;
|
||||
}
|
||||
|
||||
const ok = await verifyPassword(password, user.password_hash);
|
||||
if (!ok) {
|
||||
res.status(401).json({ error: 'invalid_credentials' });
|
||||
return;
|
||||
}
|
||||
|
||||
await query(
|
||||
`UPDATE admin_users SET last_login = now() WHERE id = $1`,
|
||||
[user.id]
|
||||
);
|
||||
|
||||
const token = signToken({ id: user.id, login: user.login });
|
||||
setAuthCookie(res, token);
|
||||
res.json({ ok: true, login: user.login });
|
||||
} catch (err) {
|
||||
console.error('[POST /admin/login]', err);
|
||||
res.status(500).json({ error: 'internal_error' });
|
||||
}
|
||||
});
|
||||
|
||||
adminRouter.post('/logout', (_req, res) => {
|
||||
clearAuthCookie(res);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
|
||||
adminRouter.get('/me', requireAdmin, (req, res) => {
|
||||
res.json({ admin: req.admin });
|
||||
});
|
||||
|
||||
const productSchema = z.object({
|
||||
slug: z.string().min(1).max(64),
|
||||
title: z.string().min(1).max(128),
|
||||
subtitle: z.string().max(256).nullable().optional(),
|
||||
description: z.string().min(1),
|
||||
status: z.enum(['production', 'development', 'planned']),
|
||||
audience: z.enum(['B2B', 'B2C', 'global']).nullable().optional(),
|
||||
icon_key: z.string().max(64).nullable().optional(),
|
||||
tags: z.array(z.string()),
|
||||
is_published: z.boolean().optional(),
|
||||
sort_order: z.number().int().optional(),
|
||||
});
|
||||
|
||||
adminRouter.get('/products', requireAdmin, async (_req, res) => {
|
||||
const products = await query(
|
||||
`SELECT * FROM products ORDER BY sort_order ASC`
|
||||
);
|
||||
res.json({ products });
|
||||
});
|
||||
|
||||
adminRouter.post('/products', requireAdmin, async (req, res) => {
|
||||
const parsed = productSchema.safeParse(req.body);
|
||||
if (!parsed.success) {
|
||||
res.status(400).json({ error: 'invalid_payload' });
|
||||
return;
|
||||
}
|
||||
const p = parsed.data;
|
||||
const created = await queryOne(
|
||||
`INSERT INTO products (slug, title, subtitle, description, status,
|
||||
audience, icon_key, tags, is_published, sort_order)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10)
|
||||
RETURNING *`,
|
||||
[
|
||||
p.slug, p.title, p.subtitle ?? null, p.description, p.status,
|
||||
p.audience ?? null, p.icon_key ?? null, JSON.stringify(p.tags),
|
||||
p.is_published ?? true, p.sort_order ?? 0,
|
||||
]
|
||||
);
|
||||
res.status(201).json({ product: created });
|
||||
});
|
||||
|
||||
adminRouter.put('/products/:id', requireAdmin, async (req, res) => {
|
||||
const id = parseInt(req.params.id, 10);
|
||||
if (Number.isNaN(id)) {
|
||||
res.status(400).json({ error: 'invalid_id' });
|
||||
return;
|
||||
}
|
||||
const parsed = productSchema.partial().safeParse(req.body);
|
||||
if (!parsed.success) {
|
||||
res.status(400).json({ error: 'invalid_payload' });
|
||||
return;
|
||||
}
|
||||
const p = parsed.data;
|
||||
const updated = await queryOne(
|
||||
`UPDATE products SET
|
||||
slug = COALESCE($2, slug),
|
||||
title = COALESCE($3, title),
|
||||
subtitle = COALESCE($4, subtitle),
|
||||
description = COALESCE($5, description),
|
||||
status = COALESCE($6, status),
|
||||
audience = COALESCE($7, audience),
|
||||
icon_key = COALESCE($8, icon_key),
|
||||
tags = COALESCE($9, tags),
|
||||
is_published = COALESCE($10, is_published),
|
||||
sort_order = COALESCE($11, sort_order),
|
||||
updated_at = now()
|
||||
WHERE id = $1
|
||||
RETURNING *`,
|
||||
[
|
||||
id, p.slug, p.title, p.subtitle, p.description, p.status,
|
||||
p.audience, p.icon_key,
|
||||
p.tags ? JSON.stringify(p.tags) : null,
|
||||
p.is_published, p.sort_order,
|
||||
]
|
||||
);
|
||||
if (!updated) {
|
||||
res.status(404).json({ error: 'not_found' });
|
||||
return;
|
||||
}
|
||||
res.json({ product: updated });
|
||||
});
|
||||
|
||||
adminRouter.delete('/products/:id', requireAdmin, async (req, res) => {
|
||||
const id = parseInt(req.params.id, 10);
|
||||
await query(`DELETE FROM products WHERE id = $1`, [id]);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
|
||||
adminRouter.get('/sections', requireAdmin, async (_req, res) => {
|
||||
const sections = await query(
|
||||
`SELECT * FROM sections ORDER BY sort_order ASC`
|
||||
);
|
||||
res.json({ sections });
|
||||
});
|
||||
|
||||
adminRouter.put('/sections/:key', requireAdmin, async (req, res) => {
|
||||
const { key } = req.params;
|
||||
const { content_json, title, is_active } = req.body;
|
||||
const updated = await queryOne(
|
||||
`UPDATE sections SET
|
||||
content_json = COALESCE($2, content_json),
|
||||
title = COALESCE($3, title),
|
||||
is_active = COALESCE($4, is_active),
|
||||
updated_at = now()
|
||||
WHERE key = $1
|
||||
RETURNING *`,
|
||||
[key, content_json ?? null, title ?? null, is_active ?? null]
|
||||
);
|
||||
if (!updated) {
|
||||
res.status(404).json({ error: 'not_found' });
|
||||
return;
|
||||
}
|
||||
res.json({ section: updated });
|
||||
});
|
||||
|
||||
adminRouter.get('/approach', requireAdmin, async (_req, res) => {
|
||||
const items = await query(
|
||||
`SELECT * FROM approach_items ORDER BY sort_order ASC`
|
||||
);
|
||||
res.json({ items });
|
||||
});
|
||||
|
||||
adminRouter.put('/approach/:id', requireAdmin, async (req, res) => {
|
||||
const id = parseInt(req.params.id, 10);
|
||||
const { title, description, icon_key, sort_order, is_active } = req.body;
|
||||
const updated = await queryOne(
|
||||
`UPDATE approach_items SET
|
||||
title = COALESCE($2, title),
|
||||
description = COALESCE($3, description),
|
||||
icon_key = COALESCE($4, icon_key),
|
||||
sort_order = COALESCE($5, sort_order),
|
||||
is_active = COALESCE($6, is_active)
|
||||
WHERE id = $1
|
||||
RETURNING *`,
|
||||
[id, title, description, icon_key, sort_order, is_active]
|
||||
);
|
||||
res.json({ item: updated });
|
||||
});
|
||||
|
||||
adminRouter.get('/settings', requireAdmin, async (_req, res) => {
|
||||
const rows = await query<{ key: string; value: string }>(
|
||||
`SELECT key, value FROM settings`
|
||||
);
|
||||
const settings: Record<string, string> = {};
|
||||
for (const r of rows) settings[r.key] = r.value;
|
||||
res.json({ settings });
|
||||
});
|
||||
|
||||
adminRouter.put('/settings/:key', requireAdmin, async (req, res) => {
|
||||
const { key } = req.params;
|
||||
const { value } = req.body;
|
||||
if (typeof value !== 'string') {
|
||||
res.status(400).json({ error: 'invalid_payload' });
|
||||
return;
|
||||
}
|
||||
await query(
|
||||
`INSERT INTO settings (key, value) VALUES ($1, $2)
|
||||
ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value, updated_at = now()`,
|
||||
[key, value]
|
||||
);
|
||||
res.json({ ok: true });
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Router } from 'express';
|
||||
import { query } from '../db/pool.js';
|
||||
|
||||
export const publicRouter = Router();
|
||||
|
||||
publicRouter.get('/content', async (_req, res) => {
|
||||
try {
|
||||
const [sections, products, approach, settings] = await Promise.all([
|
||||
query<{ key: string; title: string; content_json: unknown; sort_order: number }>(
|
||||
`SELECT key, title, content_json, sort_order
|
||||
FROM sections
|
||||
WHERE is_active = true
|
||||
ORDER BY sort_order ASC`
|
||||
),
|
||||
query<unknown>(
|
||||
`SELECT id, slug, title, subtitle, description,
|
||||
status, audience, icon_key, tags, sort_order
|
||||
FROM products
|
||||
WHERE is_published = true
|
||||
ORDER BY sort_order ASC`
|
||||
),
|
||||
query<unknown>(
|
||||
`SELECT id, title, description, icon_key, sort_order
|
||||
FROM approach_items
|
||||
WHERE is_active = true
|
||||
ORDER BY sort_order ASC`
|
||||
),
|
||||
query<{ key: string; value: string }>(
|
||||
`SELECT key, value FROM settings`
|
||||
),
|
||||
]);
|
||||
|
||||
const sectionsMap: Record<string, unknown> = {};
|
||||
for (const s of sections) {
|
||||
sectionsMap[s.key] = s.content_json;
|
||||
}
|
||||
|
||||
const settingsMap: Record<string, string> = {};
|
||||
for (const s of settings) {
|
||||
settingsMap[s.key] = s.value;
|
||||
}
|
||||
|
||||
res.json({
|
||||
sections: sectionsMap,
|
||||
products,
|
||||
approach,
|
||||
settings: settingsMap,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[GET /content]', err);
|
||||
res.status(500).json({ error: 'internal_error' });
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import { queryOne, query } from '../db/pool.js';
|
||||
import { hashPassword } from '../auth/jwt.js';
|
||||
|
||||
export async function initFirstAdmin(): Promise<void> {
|
||||
const existing = await queryOne<{ count: string }>(
|
||||
`SELECT COUNT(*)::text AS count FROM admin_users`
|
||||
);
|
||||
|
||||
const count = parseInt(existing?.count || '0', 10);
|
||||
if (count > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const password = process.env.ADMIN_INITIAL_PASSWORD || 'admin';
|
||||
const hash = await hashPassword(password);
|
||||
|
||||
await query(
|
||||
`INSERT INTO admin_users (login, password_hash) VALUES ($1, $2)`,
|
||||
['admin', hash]
|
||||
);
|
||||
|
||||
console.log('[init-admin] Создан первый админ: admin');
|
||||
if (password === 'admin') {
|
||||
console.warn(
|
||||
'[init-admin] ВНИМАНИЕ: используется дефолтный пароль "admin". Смените его сразу!'
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2022"],
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"allowImportingTsExtensions": false,
|
||||
"verbatimModuleSyntax": false
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
-- =====================================================
|
||||
-- 001_initial.sql — начальная схема БД для лендинга
|
||||
-- =====================================================
|
||||
|
||||
CREATE TABLE IF NOT EXISTS admin_users (
|
||||
id SERIAL PRIMARY KEY,
|
||||
login VARCHAR(64) UNIQUE NOT NULL,
|
||||
password_hash TEXT NOT NULL,
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
|
||||
last_login TIMESTAMPTZ
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS sections (
|
||||
id SERIAL PRIMARY KEY,
|
||||
key VARCHAR(64) UNIQUE NOT NULL,
|
||||
title TEXT NOT NULL,
|
||||
content_json JSONB NOT NULL DEFAULT '{}'::jsonb,
|
||||
is_active BOOLEAN NOT NULL DEFAULT true,
|
||||
sort_order INTEGER NOT NULL DEFAULT 0,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS products (
|
||||
id SERIAL PRIMARY KEY,
|
||||
slug VARCHAR(64) UNIQUE NOT NULL,
|
||||
title VARCHAR(128) NOT NULL,
|
||||
subtitle VARCHAR(256),
|
||||
description TEXT NOT NULL,
|
||||
status VARCHAR(32) NOT NULL DEFAULT 'production',
|
||||
audience VARCHAR(32),
|
||||
icon_key VARCHAR(64),
|
||||
tags JSONB NOT NULL DEFAULT '[]'::jsonb,
|
||||
is_published BOOLEAN NOT NULL DEFAULT true,
|
||||
sort_order INTEGER NOT NULL DEFAULT 0,
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS approach_items (
|
||||
id SERIAL PRIMARY KEY,
|
||||
title VARCHAR(128) NOT NULL,
|
||||
description TEXT NOT NULL,
|
||||
icon_key VARCHAR(64),
|
||||
sort_order INTEGER NOT NULL DEFAULT 0,
|
||||
is_active BOOLEAN NOT NULL DEFAULT true
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS settings (
|
||||
key VARCHAR(64) PRIMARY KEY,
|
||||
value TEXT NOT NULL,
|
||||
updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_products_published_sorted
|
||||
ON products(is_published, sort_order) WHERE is_published = true;
|
||||
CREATE INDEX IF NOT EXISTS idx_sections_active_sorted
|
||||
ON sections(is_active, sort_order) WHERE is_active = true;
|
||||
CREATE INDEX IF NOT EXISTS idx_approach_active_sorted
|
||||
ON approach_items(is_active, sort_order) WHERE is_active = true;
|
||||
@@ -0,0 +1,70 @@
|
||||
-- =====================================================
|
||||
-- 002_seed.sql — начальный контент лендинга
|
||||
-- =====================================================
|
||||
|
||||
INSERT INTO sections (key, title, content_json, sort_order) VALUES
|
||||
('hero', 'Hero', '{
|
||||
"badge": "Принимаем проекты на 2026 год",
|
||||
"title_line_1": "Технологии,",
|
||||
"title_line_2": "которые решают",
|
||||
"title_accent": "реальные задачи",
|
||||
"description": "Разрабатываем цифровые продукты с AI для сельского хозяйства, частных домовладельцев, бизнеса и предпринимателей. От идеи до production.",
|
||||
"cta_primary": "Посмотреть продукты",
|
||||
"cta_secondary": "Обсудить проект",
|
||||
"stats": [
|
||||
{"value": "2", "label": "ФЛАГМАНСКИХ ПРОДУКТА"},
|
||||
{"value": "AI", "label": "В КАЖДОМ ПРОДУКТЕ"},
|
||||
{"value": "B2B", "label": "И B2C НАПРАВЛЕНИЯ"},
|
||||
{"value": "24/7", "label": "AI-АССИСТЕНТ"}
|
||||
]
|
||||
}'::jsonb, 1),
|
||||
('products_intro', 'Заголовок секции продуктов', '{
|
||||
"eyebrow": "НАШИ ПРОДУКТЫ",
|
||||
"title_line_1": "Решения, которые",
|
||||
"title_line_2": "уже работают",
|
||||
"description": "Каждый продукт — это ответ на реальный запрос рынка, проверенный нами в боевых условиях."
|
||||
}'::jsonb, 2),
|
||||
('approach_intro', 'Заголовок секции подхода', '{
|
||||
"eyebrow": "НАШ ПОДХОД",
|
||||
"title_line_1": "Не делаем «как у всех».",
|
||||
"title_line_2": "Делаем как надо."
|
||||
}'::jsonb, 3),
|
||||
('cta', 'CTA блок', '{
|
||||
"title": "Есть проект или идея?",
|
||||
"description": "Расскажите о задаче — обсудим как её решить и сколько это займёт.",
|
||||
"cta_primary": "Написать в Telegram",
|
||||
"cta_secondary": "hi@umbyte.ru"
|
||||
}'::jsonb, 4)
|
||||
ON CONFLICT (key) DO NOTHING;
|
||||
|
||||
INSERT INTO products (slug, title, subtitle, description, status, audience, icon_key, tags, sort_order) VALUES
|
||||
('agroto', 'АгроТО', 'CMMS для агропромышленности',
|
||||
'Учёт оборудования, регламентов ТО и истории обслуживания на агропредприятии. AI-ассистент «Тоша» помогает агроинженерам и автоматизирует заявки на закупку.',
|
||||
'production', 'B2B', 'agroto',
|
||||
'["Web SPA", "PostgreSQL", "AI Tools"]'::jsonb, 1),
|
||||
('smart-home', 'Умный Дом', 'ТО оборудования для частных лиц',
|
||||
'Мобильное приложение: сфотографировал наклейку — AI распознал модель, нашёл регламент и настроил напоминания. Котёл, фильтры, скважина, септик — всё в одном месте.',
|
||||
'development', 'B2C', 'smart-home',
|
||||
'["iOS", "Android", "AI Vision", "PWA"]'::jsonb, 2)
|
||||
ON CONFLICT (slug) DO NOTHING;
|
||||
|
||||
INSERT INTO approach_items (title, description, icon_key, sort_order) VALUES
|
||||
('От идеи до production',
|
||||
'Берём проект целиком: исследование, дизайн, разработка, инфраструктура, поддержка.',
|
||||
'clock', 1),
|
||||
('AI везде где нужно',
|
||||
'Не AI ради AI. Используем там, где он реально упрощает жизнь пользователю.',
|
||||
'sparkle', 2),
|
||||
('Реальный сектор',
|
||||
'Знаем как устроены сельское хозяйство, производство, частный быт — и решаем настоящие боли.',
|
||||
'grid', 3)
|
||||
ON CONFLICT DO NOTHING;
|
||||
|
||||
INSERT INTO settings (key, value) VALUES
|
||||
('contact_email', 'hi@umbyte.ru'),
|
||||
('contact_telegram', 'https://t.me/umbyte_bot'),
|
||||
('company_name_short', 'Умный Байт'),
|
||||
('company_name_full', 'ООО «Умный Байт»'),
|
||||
('domain', 'umbyte.ru'),
|
||||
('region', 'Россия')
|
||||
ON CONFLICT (key) DO NOTHING;
|
||||
@@ -0,0 +1,21 @@
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16-alpine
|
||||
container_name: umbyte-postgres
|
||||
environment:
|
||||
POSTGRES_USER: umbyte
|
||||
POSTGRES_PASSWORD: umbyte_dev_password
|
||||
POSTGRES_DB: umbyte
|
||||
ports:
|
||||
- '5432:5432'
|
||||
volumes:
|
||||
- umbyte_pg_data:/var/lib/postgresql/data
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test: ['CMD-SHELL', 'pg_isready -U umbyte']
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
volumes:
|
||||
umbyte_pg_data:
|
||||
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Умный Байт — технологии, которые решают реальные задачи</title>
|
||||
<meta name="description" content="Разрабатываем цифровые продукты с AI для сельского хозяйства, частных домовладельцев, бизнеса. От идеи до production." />
|
||||
<meta property="og:title" content="Умный Байт" />
|
||||
<meta property="og:description" content="Технологии, которые решают реальные задачи" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://umbyte.ru" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "umbyte-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg width="64" height="64" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="6" y="6" width="60" height="60" rx="14" fill="#312E81"/>
|
||||
<circle cx="22" cy="22" r="3.5" fill="white"/>
|
||||
<circle cx="36" cy="22" r="3.5" fill="white" opacity="0.4"/>
|
||||
<circle cx="50" cy="22" r="3.5" fill="white"/>
|
||||
<circle cx="22" cy="36" r="3.5" fill="white" opacity="0.4"/>
|
||||
<circle cx="36" cy="36" r="5" fill="#22D3EE"/>
|
||||
<circle cx="50" cy="36" r="3.5" fill="white"/>
|
||||
<circle cx="22" cy="50" r="3.5" fill="white"/>
|
||||
<circle cx="36" cy="50" r="3.5" fill="white" opacity="0.4"/>
|
||||
<circle cx="50" cy="50" r="3.5" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 662 B |
@@ -0,0 +1,80 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Routes, Route, Link, NavLink, useNavigate } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import { Logo } from '../components/Icons';
|
||||
import { ProductsAdmin } from './ProductsAdmin';
|
||||
import { SectionsAdmin } from './SectionsAdmin';
|
||||
import { SettingsAdmin } from './SettingsAdmin';
|
||||
|
||||
export function AdminLayout() {
|
||||
const navigate = useNavigate();
|
||||
const [authChecked, setAuthChecked] = useState(false);
|
||||
const [admin, setAdmin] = useState<{ login: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.me()
|
||||
.then(({ admin }) => setAdmin(admin))
|
||||
.catch(() => navigate('/admin/login'))
|
||||
.finally(() => setAuthChecked(true));
|
||||
}, [navigate]);
|
||||
|
||||
if (!authChecked) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center text-slate-400">загрузка…</div>
|
||||
);
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await api.logout();
|
||||
navigate('/admin/login');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<header className="bg-white border-b border-slate-200">
|
||||
<div className="container-x py-3 flex justify-between items-center">
|
||||
<Link to="/admin" className="flex items-center gap-2.5">
|
||||
<Logo size={28} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-brand-900">Умный Байт</div>
|
||||
<div className="text-[10px] text-slate-500">Админ-панель</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-slate-500">{admin?.login}</span>
|
||||
<button onClick={handleLogout} className="text-slate-600 hover:text-rose-600 transition-colors">Выйти</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="container-x py-6">
|
||||
<nav className="flex gap-1 mb-6 bg-white border border-slate-200 rounded-xl p-1 w-fit">
|
||||
{[
|
||||
{ to: '/admin/products', label: 'Продукты' },
|
||||
{ to: '/admin/sections', label: 'Секции' },
|
||||
{ to: '/admin/settings', label: 'Настройки' },
|
||||
].map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${
|
||||
isActive ? 'bg-brand-800 text-white' : 'text-slate-600 hover:bg-slate-50'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<Routes>
|
||||
<Route index element={<ProductsAdmin />} />
|
||||
<Route path="products" element={<ProductsAdmin />} />
|
||||
<Route path="sections" element={<SectionsAdmin />} />
|
||||
<Route path="settings" element={<SettingsAdmin />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { useState, type FormEvent } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import { Logo } from '../components/Icons';
|
||||
|
||||
export function AdminLogin() {
|
||||
const navigate = useNavigate();
|
||||
const [login, setLogin] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.login(login, password);
|
||||
navigate('/admin');
|
||||
} catch (err: any) {
|
||||
setError(err.message === 'invalid_credentials' ? 'Неверный логин или пароль' : 'Ошибка входа');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex items-center justify-center px-4">
|
||||
<div className="w-full max-w-sm bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
||||
<div className="flex flex-col items-center gap-3 mb-6">
|
||||
<Logo size={48} />
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-medium text-brand-900">Умный Байт</div>
|
||||
<div className="text-xs text-slate-500">Админ-панель</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div onKeyDown={(e) => e.key === 'Enter' && handleSubmit(e as any)}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-xs font-medium text-slate-600 mb-1.5">Логин</label>
|
||||
<input
|
||||
type="text"
|
||||
value={login}
|
||||
onChange={(e) => setLogin(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-brand-500"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label className="block text-xs font-medium text-slate-600 mb-1.5">Пароль</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 text-xs text-rose-600 bg-rose-50 px-3 py-2 rounded-lg">{error}</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading || !login || !password}
|
||||
className="w-full bg-brand-800 hover:bg-brand-700 disabled:opacity-50 text-white font-medium py-2.5 rounded-lg text-sm transition-colors"
|
||||
>
|
||||
{loading ? 'Вход…' : 'Войти'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api, type Product } from '../api/client';
|
||||
|
||||
export function ProductsAdmin() {
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
const [editing, setEditing] = useState<Product | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
async function load() {
|
||||
const { products } = await api.listProducts();
|
||||
setProducts(products);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
async function handleSave() {
|
||||
if (!editing) return;
|
||||
await api.updateProduct(editing.id, editing);
|
||||
setEditing(null);
|
||||
await load();
|
||||
}
|
||||
|
||||
if (loading) return <div className="text-slate-400">загрузка…</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-medium text-brand-900">Продукты</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase text-slate-500">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3">Название</th>
|
||||
<th className="text-left px-4 py-3">Статус</th>
|
||||
<th className="text-left px-4 py-3">Аудитория</th>
|
||||
<th className="text-left px-4 py-3">Порядок</th>
|
||||
<th className="text-right px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{products.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td className="px-4 py-3 font-medium text-brand-900">
|
||||
{p.title}
|
||||
<div className="text-xs text-slate-500 font-normal">{p.subtitle}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600">{p.status}</td>
|
||||
<td className="px-4 py-3 text-slate-600">{p.audience}</td>
|
||||
<td className="px-4 py-3 text-slate-600">{p.sort_order}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button onClick={() => setEditing(p)} className="text-brand-600 hover:text-brand-800 text-xs font-medium">
|
||||
Редактировать
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{editing && (
|
||||
<div className="fixed inset-0 bg-black/30 flex items-center justify-center p-4 z-50" onClick={() => setEditing(null)}>
|
||||
<div className="bg-white rounded-2xl p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-medium text-brand-900 mb-4">Редактировать продукт</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Field label="Название">
|
||||
<input type="text" value={editing.title} onChange={(e) => setEditing({ ...editing, title: e.target.value })} className="input" />
|
||||
</Field>
|
||||
<Field label="Подзаголовок">
|
||||
<input type="text" value={editing.subtitle || ''} onChange={(e) => setEditing({ ...editing, subtitle: e.target.value })} className="input" />
|
||||
</Field>
|
||||
<Field label="Описание">
|
||||
<textarea rows={4} value={editing.description} onChange={(e) => setEditing({ ...editing, description: e.target.value })} className="input" />
|
||||
</Field>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Статус">
|
||||
<select value={editing.status} onChange={(e) => setEditing({ ...editing, status: e.target.value as Product['status'] })} className="input">
|
||||
<option value="production">Production</option>
|
||||
<option value="development">Development</option>
|
||||
<option value="planned">Planned</option>
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Аудитория">
|
||||
<select value={editing.audience || ''} onChange={(e) => setEditing({ ...editing, audience: e.target.value as Product['audience'] })} className="input">
|
||||
<option value="">—</option>
|
||||
<option value="B2B">B2B</option>
|
||||
<option value="B2C">B2C</option>
|
||||
<option value="global">Global</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
<Field label="Теги (через запятую)">
|
||||
<input type="text" value={editing.tags.join(', ')} onChange={(e) => setEditing({ ...editing, tags: e.target.value.split(',').map((t) => t.trim()).filter(Boolean) })} className="input" />
|
||||
</Field>
|
||||
<Field label="Порядок сортировки">
|
||||
<input type="number" value={editing.sort_order} onChange={(e) => setEditing({ ...editing, sort_order: parseInt(e.target.value, 10) || 0 })} className="input" />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 justify-end mt-5">
|
||||
<button onClick={() => setEditing(null)} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 rounded-lg">Отмена</button>
|
||||
<button onClick={handleSave} className="btn-primary text-sm py-2">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
.input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgb(226 232 240); border-radius: 0.5rem; font-size: 0.875rem; outline: none; }
|
||||
.input:focus { border-color: rgb(99 102 241); }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-600 mb-1">{label}</label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
|
||||
interface Section {
|
||||
id: number;
|
||||
key: string;
|
||||
title: string;
|
||||
content_json: unknown;
|
||||
is_active: boolean;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
export function SectionsAdmin() {
|
||||
const [sections, setSections] = useState<Section[]>([]);
|
||||
const [editingKey, setEditingKey] = useState<string | null>(null);
|
||||
const [editingJson, setEditingJson] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
async function load() {
|
||||
const data = (await api.listSections()) as { sections: Section[] };
|
||||
setSections(data.sections);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
function startEdit(s: Section) {
|
||||
setEditingKey(s.key);
|
||||
setEditingJson(JSON.stringify(s.content_json, null, 2));
|
||||
setError(null);
|
||||
}
|
||||
|
||||
async function handleSave(key: string) {
|
||||
try {
|
||||
const content_json = JSON.parse(editingJson);
|
||||
await api.updateSection(key, { content_json });
|
||||
setEditingKey(null);
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Невалидный JSON');
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="text-slate-400">загрузка…</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-lg font-medium text-brand-900 mb-4">Секции лендинга</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
{sections.map((s) => (
|
||||
<div key={s.key} className="bg-white border border-slate-200 rounded-xl overflow-hidden">
|
||||
<div className="px-4 py-3 flex justify-between items-center border-b border-slate-100">
|
||||
<div>
|
||||
<div className="font-medium text-brand-900">{s.title}</div>
|
||||
<div className="text-xs text-slate-500 font-mono">{s.key}</div>
|
||||
</div>
|
||||
<button onClick={() => editingKey === s.key ? setEditingKey(null) : startEdit(s)} className="text-xs font-medium text-brand-600 hover:text-brand-800">
|
||||
{editingKey === s.key ? 'Закрыть' : 'Редактировать'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{editingKey === s.key && (
|
||||
<div className="p-4 bg-slate-50">
|
||||
<textarea
|
||||
value={editingJson}
|
||||
onChange={(e) => setEditingJson(e.target.value)}
|
||||
rows={14}
|
||||
className="w-full font-mono text-xs bg-white border border-slate-200 rounded-lg p-3 outline-none focus:border-brand-500"
|
||||
/>
|
||||
{error && (
|
||||
<div className="text-xs text-rose-600 mt-2">Ошибка: {error}</div>
|
||||
)}
|
||||
<div className="flex justify-end gap-2 mt-3">
|
||||
<button onClick={() => setEditingKey(null)} className="px-3 py-1.5 text-xs text-slate-600 hover:bg-white rounded-lg">Отмена</button>
|
||||
<button onClick={() => handleSave(s.key)} className="btn-primary text-xs py-1.5 px-3">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
|
||||
export function SettingsAdmin() {
|
||||
const [settings, setSettings] = useState<Record<string, string>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [savingKey, setSavingKey] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
const { settings } = await api.listSettings();
|
||||
setSettings(settings);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
async function handleSave(key: string) {
|
||||
setSavingKey(key);
|
||||
await api.updateSetting(key, settings[key]);
|
||||
setSavingKey(null);
|
||||
}
|
||||
|
||||
const labels: Record<string, string> = {
|
||||
contact_email: 'Email',
|
||||
contact_telegram: 'Telegram',
|
||||
company_name_short: 'Короткое название',
|
||||
company_name_full: 'Полное название',
|
||||
domain: 'Домен',
|
||||
region: 'Регион',
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-slate-400">загрузка…</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-lg font-medium text-brand-900 mb-4">Настройки</h2>
|
||||
|
||||
<div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
|
||||
{Object.entries(settings).map(([key, value]) => (
|
||||
<div key={key} className="p-4 flex flex-wrap gap-3 items-end">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<label className="block text-xs font-medium text-slate-600 mb-1">
|
||||
{labels[key] || key}
|
||||
<span className="text-slate-400 font-mono ml-2 text-[10px]">{key}</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setSettings({ ...settings, [key]: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<button onClick={() => handleSave(key)} disabled={savingKey === key} className="btn-primary text-xs py-2 px-4">
|
||||
{savingKey === key ? '…' : 'Сохранить'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '';
|
||||
|
||||
export interface Product {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
subtitle: string | null;
|
||||
description: string;
|
||||
status: 'production' | 'development' | 'planned';
|
||||
audience: 'B2B' | 'B2C' | 'global' | null;
|
||||
icon_key: string | null;
|
||||
tags: string[];
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
export interface ApproachItem {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
icon_key: string | null;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
export interface LandingContent {
|
||||
sections: Record<string, Record<string, unknown>>;
|
||||
products: Product[];
|
||||
approach: ApproachItem[];
|
||||
settings: Record<string, string>;
|
||||
}
|
||||
|
||||
async function request<T>(
|
||||
path: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<T> {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers || {}),
|
||||
},
|
||||
...options,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error(err.error || `request_failed_${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
getContent: () => request<LandingContent>('/api/content'),
|
||||
|
||||
login: (login: string, password: string) =>
|
||||
request<{ ok: true; login: string }>('/api/admin/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ login, password }),
|
||||
}),
|
||||
logout: () =>
|
||||
request<{ ok: true }>('/api/admin/logout', { method: 'POST' }),
|
||||
me: () => request<{ admin: { id: number; login: string } }>('/api/admin/me'),
|
||||
|
||||
listProducts: () =>
|
||||
request<{ products: Product[] }>('/api/admin/products'),
|
||||
updateProduct: (id: number, data: Partial<Product>) =>
|
||||
request<{ product: Product }>(`/api/admin/products/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
createProduct: (data: Omit<Product, 'id'>) =>
|
||||
request<{ product: Product }>('/api/admin/products', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
deleteProduct: (id: number) =>
|
||||
request<{ ok: true }>(`/api/admin/products/${id}`, {
|
||||
method: 'DELETE',
|
||||
}),
|
||||
|
||||
listSections: () => request<{ sections: unknown[] }>('/api/admin/sections'),
|
||||
updateSection: (key: string, data: { content_json?: unknown; title?: string }) =>
|
||||
request<{ section: unknown }>(`/api/admin/sections/${key}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
listApproach: () => request<{ items: ApproachItem[] }>('/api/admin/approach'),
|
||||
updateApproach: (id: number, data: Partial<ApproachItem>) =>
|
||||
request<{ item: ApproachItem }>(`/api/admin/approach/${id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
|
||||
listSettings: () =>
|
||||
request<{ settings: Record<string, string> }>('/api/admin/settings'),
|
||||
updateSetting: (key: string, value: string) =>
|
||||
request<{ ok: true }>(`/api/admin/settings/${key}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ value }),
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,99 @@
|
||||
import type { FC, SVGProps } from 'react';
|
||||
|
||||
export const Logo: FC<{ size?: number; accent?: string }> = ({
|
||||
size = 32,
|
||||
accent = '#22D3EE',
|
||||
}) => (
|
||||
<svg width={size} height={size} viewBox="0 0 72 72">
|
||||
<rect x="6" y="6" width="60" height="60" rx="14" fill="#312E81" />
|
||||
<circle cx="22" cy="22" r="3.5" fill="white" />
|
||||
<circle cx="36" cy="22" r="3.5" fill="white" opacity="0.4" />
|
||||
<circle cx="50" cy="22" r="3.5" fill="white" />
|
||||
<circle cx="22" cy="36" r="3.5" fill="white" opacity="0.4" />
|
||||
<circle cx="36" cy="36" r="5" fill={accent} />
|
||||
<circle cx="50" cy="36" r="3.5" fill="white" />
|
||||
<circle cx="22" cy="50" r="3.5" fill="white" />
|
||||
<circle cx="36" cy="50" r="3.5" fill="white" opacity="0.4" />
|
||||
<circle cx="50" cy="50" r="3.5" fill="white" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ArrowRightIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} {...props}>
|
||||
<path d="M5 12h14M13 5l7 7-7 7" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ProductIcon: FC<{ name: string; size?: number }> = ({
|
||||
name,
|
||||
size = 24,
|
||||
}) => {
|
||||
const common = {
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: 2,
|
||||
};
|
||||
switch (name) {
|
||||
case 'agroto':
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||||
<path d="M2 17l10 5 10-5" />
|
||||
<path d="M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
);
|
||||
case 'smart-home':
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M3 12l9-9 9 9v9a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<svg {...common}>
|
||||
<rect x="3" y="3" width="18" height="18" rx="3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const ApproachIcon: FC<{ name: string; size?: number }> = ({
|
||||
name,
|
||||
size = 18,
|
||||
}) => {
|
||||
const common = {
|
||||
width: size,
|
||||
height: size,
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
stroke: 'currentColor',
|
||||
strokeWidth: 2.5,
|
||||
};
|
||||
switch (name) {
|
||||
case 'clock':
|
||||
return (
|
||||
<svg {...common}>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 7v5l3 3" />
|
||||
</svg>
|
||||
);
|
||||
case 'sparkle':
|
||||
return (
|
||||
<svg {...common}>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
|
||||
</svg>
|
||||
);
|
||||
case 'grid':
|
||||
return (
|
||||
<svg {...common}>
|
||||
<path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
|
||||
</svg>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { Landing } from './pages/Landing';
|
||||
import { AdminLogin } from './admin/AdminLogin';
|
||||
import { AdminLayout } from './admin/AdminLayout';
|
||||
import './styles/index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Landing />} />
|
||||
<Route path="/admin/login" element={<AdminLogin />} />
|
||||
<Route path="/admin/*" element={<AdminLayout />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,197 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api, type LandingContent } from '../api/client';
|
||||
import { Logo, ArrowRightIcon, ProductIcon, ApproachIcon } from '../components/Icons';
|
||||
|
||||
const STATUS_LABELS: Record<string, { text: string; cls: string }> = {
|
||||
production: { text: 'В PRODUCTION', cls: 'bg-emerald-100 text-emerald-700' },
|
||||
development: { text: 'В РАЗРАБОТКЕ', cls: 'bg-amber-100 text-amber-700' },
|
||||
planned: { text: 'ПЛАНИРУЕТСЯ', cls: 'bg-slate-100 text-slate-600' },
|
||||
};
|
||||
|
||||
export function Landing() {
|
||||
const [content, setContent] = useState<LandingContent | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.getContent()
|
||||
.then(setContent)
|
||||
.catch((e) => setError(String(e.message || e)));
|
||||
}, []);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-8 text-slate-600">
|
||||
Не удалось загрузить контент: {error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!content) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center text-slate-400">
|
||||
загрузка…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hero = content.sections.hero as Record<string, any>;
|
||||
const productsIntro = content.sections.products_intro as Record<string, any>;
|
||||
const approachIntro = content.sections.approach_intro as Record<string, any>;
|
||||
const cta = content.sections.cta as Record<string, any>;
|
||||
const settings = content.settings;
|
||||
|
||||
return (
|
||||
<div className="bg-white text-slate-900">
|
||||
<nav className="bg-white border-b border-slate-200">
|
||||
<div className="container-x py-4 flex justify-between items-center">
|
||||
<a href="/" className="flex items-center gap-2.5">
|
||||
<Logo size={32} />
|
||||
<span className="text-base font-medium text-brand-900 tracking-tight">Умный Байт</span>
|
||||
</a>
|
||||
<div className="hidden md:flex items-center gap-6 text-sm text-slate-600">
|
||||
<a href="#products" className="hover:text-brand-900 transition-colors">Продукты</a>
|
||||
<a href="#approach" className="hover:text-brand-900 transition-colors">Подход</a>
|
||||
<a href="#contact" className="hover:text-brand-900 transition-colors">Контакты</a>
|
||||
<a href="#contact" className="btn-primary text-sm py-2 px-4">Обсудить проект</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section className="bg-slate-50 py-20 relative overflow-hidden">
|
||||
<div className="container-x relative z-10">
|
||||
{hero?.badge && (
|
||||
<div className="inline-flex items-center gap-2 bg-brand-50 px-3 py-1.5 rounded-full mb-5">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||||
<span className="text-xs text-brand-800 font-medium">{hero.badge}</span>
|
||||
</div>
|
||||
)}
|
||||
<h1 className="text-5xl md:text-6xl font-medium text-brand-900 tracking-tight leading-[1.05] mb-5 max-w-3xl">
|
||||
{hero?.title_line_1}<br />
|
||||
{hero?.title_line_2}{' '}
|
||||
<span className="text-brand-500">{hero?.title_accent}</span>
|
||||
</h1>
|
||||
<p className="text-base text-slate-600 leading-relaxed mb-8 max-w-xl">{hero?.description}</p>
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<a href="#products" className="btn-primary">
|
||||
{hero?.cta_primary || 'Посмотреть продукты'}
|
||||
<ArrowRightIcon width={14} height={14} />
|
||||
</a>
|
||||
<a href="#contact" className="btn-secondary">
|
||||
{hero?.cta_secondary || 'Обсудить проект'}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{Array.isArray(hero?.stats) && hero.stats.length > 0 && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-14 pt-7 border-t border-slate-200">
|
||||
{hero.stats.map((stat: any, idx: number) => (
|
||||
<div key={idx}>
|
||||
<div className="text-3xl font-medium text-brand-800 tracking-tight">{stat.value}</div>
|
||||
<div className="text-xs text-slate-500 tracking-wider mt-1">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="products" className="py-20 bg-white">
|
||||
<div className="container-x">
|
||||
<div className="mb-10">
|
||||
<div className="text-xs text-brand-500 font-medium tracking-widest mb-2">{productsIntro?.eyebrow}</div>
|
||||
<h2 className="text-4xl font-medium text-brand-900 tracking-tight leading-tight mb-2">
|
||||
{productsIntro?.title_line_1}<br />{productsIntro?.title_line_2}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-600 max-w-xl">{productsIntro?.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{content.products.map((p) => {
|
||||
const statusBadge = STATUS_LABELS[p.status] || STATUS_LABELS.planned;
|
||||
return (
|
||||
<div key={p.id} className="bg-gradient-to-br from-slate-50 to-brand-50 border border-slate-200 rounded-3xl p-8 grid md:grid-cols-2 gap-7 items-center">
|
||||
<div>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<span className={`text-xs px-2.5 py-1 rounded font-medium ${statusBadge.cls}`}>{statusBadge.text}</span>
|
||||
{p.audience && (
|
||||
<span className="text-xs bg-white border border-slate-200 px-2.5 py-1 rounded text-slate-600 font-medium">{p.audience}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-12 h-12 bg-brand-800 rounded-xl flex items-center justify-center text-white">
|
||||
<ProductIcon name={p.icon_key || ''} size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-medium text-brand-900 tracking-tight">{p.title}</div>
|
||||
{p.subtitle && (
|
||||
<div className="text-xs text-brand-500 font-medium">{p.subtitle}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 leading-relaxed mb-4">{p.description}</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{p.tags.map((tag) => (
|
||||
<span key={tag} className="text-xs bg-white border border-slate-200 px-2 py-1 rounded text-slate-600">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="approach" className="py-20 bg-brand-900 text-white">
|
||||
<div className="container-x">
|
||||
<div className="mb-10">
|
||||
<div className="text-xs text-accent font-medium tracking-widest mb-2">{approachIntro?.eyebrow}</div>
|
||||
<h2 className="text-4xl font-medium tracking-tight leading-tight">
|
||||
{approachIntro?.title_line_1}<br />{approachIntro?.title_line_2}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-3">
|
||||
{content.approach.map((item) => (
|
||||
<div key={item.id} className="bg-brand-500/10 border border-brand-500/30 rounded-2xl p-6">
|
||||
<div className="w-9 h-9 bg-accent rounded-lg flex items-center justify-center text-brand-900 mb-4">
|
||||
<ApproachIcon name={item.icon_key || ''} />
|
||||
</div>
|
||||
<div className="font-medium mb-2">{item.title}</div>
|
||||
<div className="text-sm text-brand-200 leading-relaxed">{item.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="py-16 bg-white text-center">
|
||||
<div className="container-x">
|
||||
<h2 className="text-3xl font-medium text-brand-900 tracking-tight mb-3">{cta?.title}</h2>
|
||||
<p className="text-sm text-slate-600 max-w-md mx-auto mb-6">{cta?.description}</p>
|
||||
<div className="inline-flex gap-2 items-center flex-wrap justify-center">
|
||||
{settings.contact_telegram && (
|
||||
<a href={settings.contact_telegram} target="_blank" rel="noopener noreferrer" className="btn-primary">
|
||||
{cta?.cta_primary || 'Написать в Telegram'}
|
||||
</a>
|
||||
)}
|
||||
{settings.contact_email && (
|
||||
<a href={`mailto:${settings.contact_email}`} className="btn-secondary">
|
||||
{settings.contact_email}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="bg-slate-50 py-7 border-t border-slate-200">
|
||||
<div className="container-x flex flex-wrap gap-3 justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo size={20} />
|
||||
<span className="text-xs text-slate-600">© {new Date().getFullYear()} {settings.company_name_full || 'ООО «Умный Байт»'}</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">{settings.domain || 'umbyte.ru'} · {settings.region || 'Россия'}</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-slate-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.container-x {
|
||||
@apply mx-auto px-6 md:px-8 lg:px-12 max-w-6xl;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center gap-2 bg-brand-800 hover:bg-brand-700
|
||||
text-white font-medium px-6 py-3 rounded-xl transition-colors;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center gap-2 bg-white border border-slate-200
|
||||
hover:border-slate-300 text-brand-900 font-medium px-6 py-3 rounded-xl
|
||||
transition-colors;
|
||||
}
|
||||
}
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
DEFAULT: '#312E81',
|
||||
50: '#EEF2FF',
|
||||
100: '#E0E7FF',
|
||||
200: '#C7D2FE',
|
||||
300: '#A5B4FC',
|
||||
400: '#818CF8',
|
||||
500: '#6366F1',
|
||||
600: '#4F46E5',
|
||||
700: '#4338CA',
|
||||
800: '#312E81',
|
||||
900: '#1E1B4B',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#22D3EE',
|
||||
light: '#67E8F9',
|
||||
dark: '#0891B2',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": false,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
},
|
||||
});
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
server {
|
||||
listen 80 default_server;
|
||||
server_name _;
|
||||
|
||||
root /var/www/umbyte;
|
||||
index index.html;
|
||||
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript
|
||||
text/xml application/xml text/javascript image/svg+xml;
|
||||
gzip_min_length 1024;
|
||||
gzip_comp_level 5;
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_read_timeout 60s;
|
||||
}
|
||||
|
||||
location /assets/ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
}
|
||||
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
[supervisord]
|
||||
nodaemon=true
|
||||
user=root
|
||||
logfile=/dev/null
|
||||
logfile_maxbytes=0
|
||||
|
||||
[program:nginx]
|
||||
command=nginx -g 'daemon off;'
|
||||
autostart=true
|
||||
autorestart=true
|
||||
stdout_logfile=/dev/stdout
|
||||
stdout_logfile_maxbytes=0
|
||||
stderr_logfile=/dev/stderr
|
||||
stderr_logfile_maxbytes=0
|
||||
|
||||
[program:backend]
|
||||
command=node /app/backend/dist/index.js
|
||||
directory=/app/backend
|
||||
autostart=true
|
||||
autorestart=true
|
||||
environment=NODE_ENV="production"
|
||||
stdout_logfile=/dev/stdout
|
||||
stdout_logfile_maxbytes=0
|
||||
stderr_logfile=/dev/stderr
|
||||
stderr_logfile_maxbytes=0
|
||||
Reference in New Issue
Block a user