Живой просмотр

Страницы

Каждая страница — настоящий интерактивный предпросмотр, корзина общая для всех.

Что внутри

• 8 страниц: лендинг, вход и приложение из 6 экранов
• Шахматка, доска уборки и заселение на ресепшене
• Сортируемые таблицы с поиском, фильтрами и массовыми действиями
• 13 SVG-графиков из библиотеки
• Настройки с ролями, приглашениями и использованием тарифа
• Светлая и тёмная тема с переключателем

Установка и использование

1. Установите пакет

   bash Copy

   npm install astro-component-kit

   npm install astro-component-kit

2. Создайте по странице Astro для каждой страницы шаблона

   src/pages/index.astro

   astro Copy

   ---
   import { LandingPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <LandingPage />

   --- import { LandingPage } from 'astro-component-kit/templates/saas-hotel'; --- <LandingPage />

   src/pages/sign-in.astro

   astro Copy

   ---
   import { SignInPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <SignInPage />

   --- import { SignInPage } from 'astro-component-kit/templates/saas-hotel'; --- <SignInPage />

   src/pages/app/index.astro

   astro Copy

   ---
   import { DashboardPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <DashboardPage />

   --- import { DashboardPage } from 'astro-component-kit/templates/saas-hotel'; --- <DashboardPage />

   src/pages/app/reservations.astro

   astro Copy

   ---
   import { ReservationsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <ReservationsPage />

   --- import { ReservationsPage } from 'astro-component-kit/templates/saas-hotel'; --- <ReservationsPage />

   src/pages/app/rooms.astro

   astro Copy

   ---
   import { RoomsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <RoomsPage />

   --- import { RoomsPage } from 'astro-component-kit/templates/saas-hotel'; --- <RoomsPage />

   src/pages/app/guests.astro

   astro Copy

   ---
   import { GuestsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <GuestsPage />

   --- import { GuestsPage } from 'astro-component-kit/templates/saas-hotel'; --- <GuestsPage />

   src/pages/app/reports.astro

   astro Copy

   ---
   import { ReportsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <ReportsPage />

   --- import { ReportsPage } from 'astro-component-kit/templates/saas-hotel'; --- <ReportsPage />

   src/pages/app/settings.astro

   astro Copy

   ---
   import { SettingsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <SettingsPage />

   --- import { SettingsPage } from 'astro-component-kit/templates/saas-hotel'; --- <SettingsPage />

3. Подключите свой каталог, валюту и маршруты

   Возьмите демо-магазин за основу и замените нужное. Товары принимают реальное фото или одну из 16 встроенных иллюстраций.

   astro Copy

   ---
   // src/pages/app/index.astro — pass your own data (e.g. fetched from your API at build time)
   import { DashboardPage, lobbyData, type LobbyData } from 'astro-component-kit/templates/saas-hotel';
   
   const data: LobbyData = {
     ...lobbyData,
     workspace: { name: 'Casa Alba', plan: 'Starter', initials: 'CA' },
     user: { name: 'Marta Gil', role: 'Owner', email: 'marta@casaalba.com' },
   };
   ---
   
   <DashboardPage data={data} theme="auto" />

   --- // src/pages/app/index.astro — pass your own data (e.g. fetched from your API at build time) import { DashboardPage, lobbyData, type LobbyData } from 'astro-component-kit/templates/saas-hotel'; const data: LobbyData = { ...lobbyData, workspace: { name: 'Casa Alba', plan: 'Starter', initials: 'CA' }, user: { name: 'Marta Gil', role: 'Owner', email: 'marta@casaalba.com' }, }; --- <DashboardPage data={data} theme="auto" />

Новые e-commerce компоненты 13

Созданы для этого шаблона и доступны в библиотеке по отдельности.

Повторно используемые компоненты

Существующие компоненты, из которых собран шаблон.

• KPI Stat Tile
• Stacked Area Chart
• Gauge Chart
• Pie Chart
• Grouped Bar Chart
• Forecast Line Chart
• Heatmap Chart
• Funnel Chart
• Segmented Bar Chart
• Horizontal Bar Chart
• Metric Delta Table
• Status Timeline Feed
• Animated Input
• Modern Select
• Hero Dashboard Preview
• Logo Wall Grid
• Feature Icon Grid
• How It Works Steps
• Stats Counter Band
• Pricing Toggle Cards
• Testimonial Carousel
• FAQ Two Column
• Footer Mega Section