Waqar Ul Wahab
ALL PROJECTS/SECURITY PORTAL

Overview

Security Portal is the digital front door for 1 Cerberus Security & Patrol, a BSIS-licensed (PPO 121682) private-security company operating statewide across California from a San Francisco Bay Area headquarters. It serves prospective clients — banks, hospitals, hotels, retailers, construction sites, campuses, ports and event organisers — who need to understand the firm's fourteen service lines, verify its credentials, and request protection quickly. It is a Next.js frontend with a single server-validated lead endpoint: a marketing site engineered like a product, built by AmalAxis for the client brand.

Problem

A security firm lives or dies on trust and response time, so the site had to do two jobs at once: project the credibility of a licensed, 24/7 statewide operator, and convert an anxious visitor into a qualified lead in as few steps as possible. That meant a large, SEO-critical marketing surface — dozens of service and industry pages that search engines and structured-data crawlers can fully understand — combined with an accessible, resilient lead-capture path that never loses a submission and never trips over a bot. Every page needed to render fast, look identical in tone across two dozen routes, and remain maintainable by multiple engineers building sections in parallel without visual drift.

System Design

How It Works

01/04
01

Lead capture and quote request

An inline, accessible lead form captures quote requests and hands them to a server-validated API route with bot filtering and graceful fallbacks.

  1. 1Visitor lands on any page; the CTA band shows the lead form inline, no click needed to start.
  2. 2The client LeadForm validates on blur and submit, wiring errors via aria-invalid/aria-describedby and focusing the first invalid field.
  3. 3A hidden honeypot field is checked; if filled, the form silently reports success and sends nothing.
  4. 4Valid input is POSTed as JSON to /api/contact.
  5. 5The Route Handler re-validates server-side, drops honeypot hits, and returns a JSON result.
  6. 6On success the form swaps to a confirmation state with a 24/7 tel: fallback; on error it shows a retry message.
02

Service and industry discovery

Fourteen service lines are navigable from a data-driven mega-menu and rendered as dedicated pages from the typed content layer.

  1. 1The desktop MegaMenu and mobile nav sheet render all fourteen services from the typed SERVICES data.
  2. 2Selecting a service opens its dedicated route, e.g. /armed-security/.
  3. 3ServiceDetailPage renders that service's SERVICE_DETAILS record — overview, benefits and graded hero image.
  4. 4RelatedServices cross-links neighbouring offerings and a CTA routes back to the quote flow.
03

Structured data and SEO rendering

Pages render as Server Components with rich metadata and schema.org JSON-LD generated directly from the content layer.

  1. 1Pages render as React Server Components using design tokens, shipping minimal client JS.
  2. 2The root layout sets rich metadata (OpenGraph, Twitter, robots, canonical) and injects the JSON-LD graph.
  3. 3next/image serves WebP and trailing-slash routing serves folder paths at their exact URLs.
  4. 4Crawlers read LocalBusiness/SecurityService and FAQPage schemas built from the content layer.
04

California locations map

Six California offices are presented on live Google Maps with direct local contact actions.

  1. 1LocationsSection reads the six-office LOCATIONS dataset.
  2. 2@vis.gl/react-google-maps renders each office with a domain-restricted Maps key.
  3. 3Each location exposes tel: and quote CTAs for direct, local contact.

Key Features

  • Fourteen dedicated service pages and nine industry sectors driven from one typed catalogue
  • Accessible, honeypot-protected lead form with both client and server-side validation and tel: fallback
  • CSS-first Tailwind v4 design-token system keeping ~26 routes visually consistent
  • ~20-component server-first UI kit documented by a FOUNDATION-API.md integration contract
  • schema.org JSON-LD (LocalBusiness/SecurityService + FAQPage) generated from real content data
  • Live Google Maps embeds for six California offices via @vis.gl/react-google-maps
  • Structured blog with dynamic [slug] routes, reading-progress bar and article table of contents
  • Reduced-motion-safe animation, skip link, focus rings and >=44px targets as an accessibility baseline

Outcomes

  • A cohesive ~26-route marketing and lead-capture portal rendered largely as Server Components for fast, low-JS pages.
  • A token-driven design system and documented UI contract enabling parallel section development without visual drift.
  • Machine-readable credibility via full JSON-LD business, service-catalogue, licence and FAQ schemas built from real content.
  • A resilient, WCAG-minded lead pipeline with server-side validation and bot filtering, ready to wire into the backend CRM.

More work