Initial commit — Умный Байт landing
This commit is contained in:
@@ -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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user