HotelSync
b277e3e38d
- Add AvailabilityPage with price grid (categories × dates), drag-select, channel prices, EditPanel, PeriodModal, and rate periods tab - Add ModulesContext with localStorage persistence and dynamic sidebar items - Add ModulesPage with WiFi Auth, Payments, TV Welcome, Smart Locks, OLAP Reports, Website Builder, Booking Widget modules - Add ReportsPage (OLAP analytics with KPI cards, charts, tables) - Add WebsitePage and BookingWidgetPage placeholders - Remove hotel slug from URL routing; hotel context from JWT - Add Доступность nav item in Sidebar under Управление - Fix LoginPage redirects and HotelSync branding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
66 lines
3.4 KiB
TypeScript
66 lines
3.4 KiB
TypeScript
import { Globe, Layout, Paintbrush, Eye, Smartphone, Lock } from 'lucide-react'
|
||
|
||
export function WebsitePage() {
|
||
return (
|
||
<div className="p-6 max-w-4xl mx-auto space-y-6">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-xl bg-rose-500 flex items-center justify-center shrink-0">
|
||
<Globe size={20} className="text-white" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Конструктор сайта</h1>
|
||
<p className="text-sm text-slate-500 dark:text-slate-400">Создайте сайт отеля без разработчика</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Placeholder preview */}
|
||
<div className="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
|
||
<div className="bg-slate-100 dark:bg-slate-700 px-4 py-3 flex items-center gap-3 border-b border-slate-200 dark:border-slate-600">
|
||
<div className="flex gap-1.5">
|
||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||
<div className="w-3 h-3 rounded-full bg-amber-400" />
|
||
<div className="w-3 h-3 rounded-full bg-emerald-400" />
|
||
</div>
|
||
<div className="flex-1 bg-white dark:bg-slate-600 rounded-md px-3 py-1 text-xs text-slate-400">
|
||
grand-palace.hotelsync.ru
|
||
</div>
|
||
</div>
|
||
<div className="p-8 text-center space-y-4">
|
||
<div className="w-16 h-16 rounded-2xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center mx-auto">
|
||
<Paintbrush size={28} className="text-rose-500" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||
Редактор сайта
|
||
</h3>
|
||
<p className="text-sm text-slate-500 dark:text-slate-400 max-w-sm mx-auto">
|
||
Визуальный редактор откроется здесь. Выберите шаблон, настройте цвета, загрузите фото номеров и опубликуйте сайт за 30 минут.
|
||
</p>
|
||
<div className="flex items-center justify-center gap-3 flex-wrap">
|
||
<button className="btn-primary flex items-center gap-2">
|
||
<Layout size={15} /> Выбрать шаблон
|
||
</button>
|
||
<button className="btn-secondary flex items-center gap-2">
|
||
<Eye size={15} /> Предпросмотр
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features list */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
{[
|
||
{ icon: Paintbrush, title: 'Drag & Drop', desc: 'Редактор без кода' },
|
||
{ icon: Smartphone, title: 'Адаптивный', desc: 'Mobile-first дизайн' },
|
||
{ icon: Lock, title: 'SSL & домен', desc: 'Бесплатный сертификат' },
|
||
].map(f => (
|
||
<div key={f.title} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4 text-center">
|
||
<f.icon size={22} className="text-rose-500 mx-auto mb-2" />
|
||
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{f.title}</p>
|
||
<p className="text-xs text-slate-400 mt-0.5">{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|