> ## Documentation Index > Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt > Use this file to discover all available pages before exploring further. # Page Section Components > Data-aware page sections available in the editor — from Dashboard and Bookings to Events, Courses and Team management. Page section components are the building blocks of each portal page. Unlike generic layout components (Container, Grid, etc.), these are **data-aware** — they fetch live data from your Nexudus location and render fully functional portal sections. They are registered in the editor via `useEditorConfiguration` and organised by category. When used in the editor, they render with **mock data** so you can preview the layout without needing a live API connection. *** ## Categories and components ### Home Page | Component | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **HomePage** | The complete home page with toggleable hero, plans, events and locations sections. Configure which sections to show, heading sizes, and custom class names per section. | | **HomePageHero** | The hero area with main text, sub-text and search box. Can be used standalone or as part of HomePage. | | **NavBar** | The portal navigation bar. Supports fixed/floating header and transparent/solid styles. | ### Dashboard | Component | Description | | ----------------------------- | ------------------------------------------------------- | | **PersonalDashboard** | Complete member dashboard container. | | **PersonalDashboardHeader** | Dashboard welcome header area. | | **DashboardHero** | Hero area for the dashboard page. | | **QuickActions** | Grid of quick-action buttons (book, pay, etc.). | | **AnnouncementsBanner** | Displays active announcements from the dashboard. | | **OnBoardingSection** | Step-by-step onboarding guide for new members. | | **StatisticsSection** | Member usage statistics display. | | **WeeklyAgendaCalendar** | Weekly calendar view of the member's upcoming bookings. | | **DashboardFeaturedArticles** | Highlighted articles on the dashboard. | | **DashboardFeaturedEvents** | Highlighted upcoming events on the dashboard. | ### Bookings | Component | Description | | ------------------------------- | ----------------------------------------------------- | | **ResourceList** | Browsable list of bookable resources. | | **ResourceCalendar** | Calendar view for browsing and booking resources. | | **BookingEdit** | Booking creation and editing form. | | **BuildingAvailabilitySection** | Real-time availability display for building/location. | | **PredictiveBookings** | AI-suggested bookings based on member usage patterns. | ### Events | Component | Description | | ---------------------- | -------------------------------------------------- | | **EventPageRouter** | Event listing with routing for event detail views. | | **FeaturedEventsList** | Curated list of featured events. | | **UpcomingEvents** | Chronological list of upcoming events. | | **EventDetailsPage** | Full event detail page. | | **EventCheckoutPage** | Event purchase checkout flow. | | **SimpleEventsGrid** | Simple grid display of events. | ### Courses | Component | Description | | ---------------------- | --------------------------------------------- | | **CoursePageRouter** | Course listing with routing for detail views. | | **FeaturedCourseList** | Curated list of featured courses. | | **CoursesList** | Complete list of available courses. | | **CourseDetailsPage** | Full course detail page. | | **CourseCheckoutPage** | Course purchase checkout flow. | ### Articles | Component | Description | | ----------------------- | ---------------------------------------------- | | **BlogPageRouter** | Article listing with routing for detail views. | | **FeaturedBlogList** | Curated list of featured articles. | | **RecentBlogPosts** | Chronological list of recent articles. | | **BlogPostDetailsPage** | Full article detail page. | ### Store | Component | Description | | ------------------------ | ------------------------------------------- | | **SimpleProductGrid** | Grid display of purchasable products. | | **SimplePlansGrid** | Grid display of available membership plans. | | **ProductCheckoutPage** | Single product checkout flow. | | **ProductsCheckoutPage** | Multi-product checkout flow. | ### My Activity | Component | Description | | ----------------------- | ----------------------------------------------- | | **MyBookingsSection** | Member's booking history and upcoming bookings. | | **MyInvoicesSection** | Member's invoices and payment history. | | **MyVisitorsSection** | Member's visitor registrations. | | **MyDeliveriesSection** | Member's parcel/delivery log. | | **MyEventsSection** | Member's event registrations. | | **MyCoursesSection** | Member's course enrolments. | | **MyPlansSection** | Member's active plans and subscriptions. | ### Team | Component | Description | | -------------------------- | -------------------------------- | | **TeamMembersSection** | Team member list and management. | | **TeamBookingsSection** | Team booking overview. | | **TeamAttendanceSection** | Team attendance tracking. | | **TeamPermissionsSection** | Team permission management. | ### Personal / Profile | Component | Description | | ------------------------------ | ------------------------------------ | | **PersonalInformationSection** | Member profile editing form. | | **BillingInformationSection** | Billing address and details. | | **BillingCardSection** | Payment method management card. | | **EInvoicingCardSection** | E-invoicing configuration card. | | **ProfessionalProfileSection** | Public professional profile editing. | | **SettingTabsSection** | Account settings tabbed interface. | | **CredentialsSection** | Password and security credentials. | | **IntegrationsSection** | Third-party integration settings. | | **VoManageSection** | Virtual office management interface. | ### Community | Component | Description | | ----------------------------- | ----------------------------- | | **CommunityBoardListSection** | Community discussion board. | | **DirectorySection** | Member directory listing. | | **PerksSection** | Available perks and benefits. | | **Newsletter** | Newsletter subscription form. | ### Support | Component | Description | | ------------------- | ------------------------------------- | | **FaqPageSection** | Frequently asked questions. | | **HelpDeskSection** | Help desk / support ticket interface. | | **ContactUsPage** | Contact form page. | | **LocationsGrid** | Grid of all business locations. | *** ## Mock data in the editor When editing a page, section components render with **mock data** instead of making live API calls. This means you see realistic placeholder content (sample events, bookings, members, etc.) that lets you design the layout without needing actual data. Most section components include a `withMockData` toggle in their properties. This defaults to `true` in the editor. When disabled, the component attempts to fetch live data — useful for testing with your actual data during local development. ## Default page layouts Every built-in page has a **default layout** — a pre-configured arrangement of section components. For example: * **Home** defaults to a HomePage component with hero, plans, events and locations. * **Personal Dashboard** defaults to DashboardHero, QuickActions, AnnouncementsBanner, WeeklyAgendaCalendar, and more. * **Articles** defaults to NavBar + BlogPageRouter + Newsletter. You can customise these layouts freely. If you want to start over, use the **Delete outline** button in the toolbar to restore the default layout.