🏡 AzylKampinos UI Design System

Premium nature-retreat design reference library. All components follow the calm, family-friendly, pet-friendly brand direction.

Documentation Structure

App Shell (Signed-in) - Complete layout: Navbar + Sidebar + Content + Footer (for authenticated users)
Content Container (App) - Main content panel for signed-in pages with glassy styling and user welcome header

Form Inputs (Controllers) - Input, select, textarea, checkbox, radio, toggle elements
Form Field (Wrapper) - Label + control wrapper pattern with required indicator, hints, error states
Form Layout (Collections) - Patterns for arranging multiple fields: vertical layout, grids, sections, rows
Form Cards - Standard and glassy public form containers (regular pages and hero overlays)

Dashboard Tile - Launcher tiles for dashboard navigation with icon, title, and description
Action Tile (Compact) - Compact horizontal tiles for CRUD entry points (Add New, Show All actions)
Actions Navigation Grid - Responsive grid layout for CRUD Action Tiles (max 5 tiles per page)
Confirm Modal - Dialog for confirming destructive or important actions (delete, cancel, publish)
Image Preview Modal - Large image viewer with URL copy functionality for gallery and property images
Entity Header - Glassy header component for entity detail pages with thumbnail, title, status, and stats
Table Switch Buttons - Tab-like switch buttons for changing table/card content views in app pages
Cards - Offer cards, info cards, variants
Reviews - Review blocks, testimonials

Navbar - Sticky navigation header with mobile menu, dropdowns, and hide-on-scroll
Breadcrumb - Navigation trail for hierarchical pages with current-item state
Sidebar (App) - Collapsible vertical navigation for signed-in pages with mobile drawer
Footer (Public) - Full marketing footer for guest pages with brand, links, social media

Welcome Section (Hero) - Full-height hero with badge, headline, CTA buttons, and availability card
User Sign-in Section (Hero) - Full-height hero with sign-in form, GDPR consent, and glassy card
CTA: Ready for Your Nature Escape - Call-to-action section with background image and action buttons
Experience Cards - Feature/benefit cards highlighting amenities and experiences
Reviews Section - Full testimonials section (badge + heading + 3-card grid)
Why Choose Us Section - Full features section (badge + heading + intro + 4-card grid)
Book Your Experience - Offers carousel section (badge + heading + carousel with arrows + dots)
Contact Us - Contact section with details and standard form card

Read docs/ai.design-system.md for context and patterns
Review the relevant component pages for your task
Copy code snippets from the preview blocks
Adjust colors/spacing using Tailwind utility classes (colors defined in tailwind.config.js)
Reuse CSS from /assets/css/ui-system.css for documentation-only styles
Apply core JS from /assets/js/core.js (dark mode, clipboard)

Calm, warm, inviting aesthetic inspired by forest escapes and outdoor lifestyle

Inclusive, accessible, welcoming design that works for all ages and abilities

Every component uses the same color palette, typography, spacing, and tone

No build step required; CDN-based + minimal custom CSS