# Location and Neighbourhood Guide Page Implementation Notes

This document summarizes the architecture, design choices, and implementation details of the public-facing **Location and Neighbourhood Guide Page** (`/location-neighbourhood-guide-ikeja`).

---

## 1. Architectural Design

The Neighbourhood Guide page is built with a dynamic, database-driven, and local SEO-ready approach to help executives, consultants, corporate teams, and families understand the strategic location advantage of Adeniyi Jones, Ikeja, Lagos, and move smoothly toward booking.

- **Dynamic Guide Controller (`/location-neighbourhood-guide-ikeja`)**: Renders guide content, coordinates, transits, and landmarks directly from database models. It fetches en-suite apartment packages (1-Bed to 4-Bed options) and starting prices to link the location advantages directly to conversions.
- **Asynchronous Leaflet Map Integration**: To avoid massive script loads and protect site loading speeds, Leaflet and OpenStreetMap are loaded asynchronously on-demand using Alpine.js. When a guest clicks "Load Map," Leaflet's CSS and JS are dynamically appended to the document head and coordinates plotted on the fly.
- **SEO & GEO Optimizations**: Built with crawlable local facts blocks, entity statements, and dynamic JSON-LD metadata schema templates to ensure complete readiness for generative search engines.

---

## 2. Relational Database Schema & Seeders

We implemented and utilized the following schema layouts:
- **`neighbourhood_guides`**: Holds title, slug, subtitle, description, address, coordinates, and starting price.
- **`neighbourhood_guide_sections`**: Manages granular text sections (Hero, Intro, Address, Airport Access, Shopping, Dining, Events, Security, Business, Transport).
- **`landmark_categories`**: Dynamic categories with unique Lucide/SVG icons.
- **`landmarks`**: Enriched attributes including slugs, category relations, verified status toggles, distance and travel time labels, descriptions, and sorting weights.
- **`location_landmarks`**: Many-to-many pivot mapping landmarks to specific branch locations with customized travel times.
- **`direction_links`**: Dynamic external maps navigation links (Google Maps, Apple Maps).
- **`transport_ctas`**: Concierge transit booking actions (WhatsApp, Request Airport Pickup).
- **`faqs`**: Database-driven guide FAQs mapped via category slugs.

---

## 3. High-Fidelity Design and Brand Compliance

All visual features strictly comply with the established Kevron Suite branding rules:
- **Typography & Font Caps**: Luxury Marcellus headings (strictly capped under `1.8rem` for H1 and `1.625rem` for secondary headers), with clean Inter body typography (capped at `0.875rem`).
- **Harmonious Color Palette**: Built with Royal Blue (`#2B3192`), Sky Cyan (`#1FADEA`), Midnight Navy (`#080D2B`), Champagne Gold (`#D6A84F`), and Emerald Green (`#16A34A`).
- **Interactive Pill Borders**: Standardized `50px` border-radius pill configurations on all CTA buttons with subtle bouncy hover states and progressive 3D depth shadows.
- **Card Styling**: Exact `0.1rem` border-radius configurations on all landmark cards, option panels, and accordion items with soft blue background transition deepening on hover.
- **Sticky Booking Widget**: Sleek bottom-pinned mobile sticky cta bar displaying starting rates and quick WhatsApp/Checkout access.

---

## 4. Advanced Accessibility & UX

- **Map Text Alternative**: A clear, semantic textual alternative listing exact names and coordinates is provided outside the Leaflet container to accommodate assistive screen readers.
- **Keyboard Navigation Accordions**: The FAQ accordion items are keyboard accessible (triggerable via Enter or Space) and use `aria-expanded` tags for screen reader compliance.
- **Touch Targets**: All CTA targets, buttons, and links observe a minimum mobile touch target of `44px` with proper focus indicators.

---

## 5. Automated Feature Tests

- **Automated Tests**: Set up a comprehensive feature test inside `tests/Feature/NeighbourhoodGuideTest.php`, asserting:
  - Page `/location-neighbourhood-guide-ikeja` loads successfully (200).
  - Permanent `301` redirect from `/neighbourhood` to `/location-neighbourhood-guide-ikeja`.
  - Global header navigation logo text and footer addresses are preserved.
  - Correct Marcellus H1, address details, en-suite apartments, and FAQs are successfully rendered in HTML.
- **Test Command**: Run `php artisan test --filter=NeighbourhoodGuideTest` to execute.