Shared UI & Navigation Components

Relevant source files

The following files were used as context for generating this wiki page:

• implementation_plan.md
• task.md
• sunrise-angular/src/app/shared/components/header/header.component.html
• sunrise-angular/src/app/shared/components/footer/footer.component.html
• sunrise-angular/src/app/shared/components/requirement-estimator/requirement-estimator.component.ts
• sunrise-angular/src/app/core/services/seo.service.ts

Shared UI and navigation components provide a consistent visual language and functional framework across the Sunrise Communication application. These components manage global site structure, lead generation interfaces, and search engine optimization (SEO) metadata to support the project's B2B and B2C objectives.

The architecture relies on Angular v22 standalone components and signals for reactive state management. Primary shared elements include the global header and footer, the requirement estimator for lead generation, and SEO services that inject structured data into the document head.

Navigation Architecture

The navigation system consists of a multi-instance header and a comprehensive footer that provide access to core business areas, including products, services, and technical guides.

Header Component

The header implements three distinct navigation instances: a main desktop menu, a sticky header for scrolled views, and a mobile-specific menu. It contains links for Home, About, Products, Services, and Contact Us.
Sources: implementation_plan.md:387-393, header.component.html

Footer Component

The footer provides secondary navigation, quick links to service categories, and localized service area landing pages. It also features a "Google 5.0 Star" social proof badge and contact information derived from global site data.
Sources: footer.component.html:62-106, footer.component.html:125-133

The diagram shows the high-level layout of the application where navigation components wrap the main routed content.

Lead Generation & Interactive Components

Shared interactive components are designed to convert visitor interest into technical inquiries, primarily through WhatsApp integration.

Requirement Estimator

The RequirementEstimatorComponent allows users to select their premise type (e.g., Housing Society, Office, Warehouse) and specify their security needs. It uses Angular signals to compute technical recommendations for hardware and storage.
Sources: requirement-estimator.component.ts:16-35

Key Features:

• Architecture Recommendations: Automatically suggests NVR channels and HDD capacity based on camera counts and retention days.
• Dynamic BOQ Generation: Creates a formatted Bill of Quantities (BOQ) text for sharing.
• WhatsApp Quote Generator: Pre-fills a WhatsApp message with the calculated technical requirements.
• Clipboard Integration: Allows users to copy the BOQ to the clipboard for society committee groups.
  Sources: requirement-estimator.component.ts:37-105, task.md:46-52

Quick Action Bar

A floating quick action bar is deployed for mobile screens (max-width: 991px). It provides immediate access to 24/7 calling, WhatsApp quotes, and the Google Review badge.
Sources: task.md:53-57

Component	Target Device	Primary CTA	Purpose
Requirement Estimator	All	WhatsApp Quote	Converts hardware needs into leads
Floating Action Bar	Mobile (<991px)	Call / WhatsApp	High-intent mobile conversion
Product Card	All	Detail View	Showcases hardware specifications

SEO and Discovery Layer

The SeoService acts as a shared utility to manage metadata and structured data injection across all pages. It supports Agentic Search Optimization (ASO) and AI Discovery.

Schema Graph Injection

The service injects a unified JSON-LD @graph into the document head. This graph contains multiple schema nodes tailored to the specific content being viewed.
Sources: seo.service.ts:546-562, task.md:21-27

The class relationship diagram illustrates how the SeoService centralizes the creation of various Schema.org entities.

Technical Metadata Management

The system utilizes dedicated constants for SEO and service data to ensure machine-readable accuracy.

• LocalBusiness Node: Contains geographic coordinates (19.1868° N, 72.9757° E), operating hours, and aggregate ratings.
• AEO/GEO Optimization: Injects FAQPage and HowTo schemas to support voice search and AI answer boxes.
• Canonical Management: Automatically manages <link rel="canonical"> tags to prevent duplicate content issues.
  Sources: seo.service.ts:449-514, seo.service.ts:530-544, task.md:28-35

Component State Management

Components utilize Angular Signals for reactive updates. This approach is standardized across shared UI elements to ensure high performance and SSR (Server-Side Rendering) compatibility.

// Example of Signal-based logic in RequirementEstimatorComponent
recommendedNvr = computed(() => {
  const cams = this.cameraCount();
  if (cams <= 4) return '4-Channel 4K Network Video Recorder (NVR)';
  if (cams <= 8) return '8-Channel 4K H.265+ NVR';
  // ... further logic
});

Sources: requirement-estimator.component.ts:37-44

Implementation Standards

• Decorators: The @Service decorator is preferred for new singletons (Angular v22).
• Inputs/Outputs: Components use the input() and output() functions rather than legacy decorators.
• Control Flow: Native Angular control flow (@if, @for) is used in all shared templates.
  Sources: best-practices.md:10-48, implementation_plan.md:129-132

Shared UI and Navigation components establish the functional baseline of the Sunrise Communication platform, combining professional B2B presentation with high-intent lead conversion tools and robust AI-discovery metadata.