# Mainstay Bulletproof — Website Wireframe & Design Notes

Low-fidelity layout for the new flagship site, annotated with the design direction at each section. Structure is described in text/ASCII; the brand blue is called out only where the direction places it. Read alongside the **Website Content Structure** and **Design Direction (v2)** documents.

**Client** Mainstay Bulletproof · **Prepared by** Growthverse · **Scope** Homepage + key inner pages · **Status** For review

---

## Design system — quick reference

**Palette**

| Role | Hex | Use |
|---|---|---|
| Black | `#000000` | Base ground |
| Near-black | `#0E0E10` | Raised surfaces |
| Graphite | `#1A1A1C` | Cards / panels |
| Brand blue | `#0B77C0` | Accent — used rarely |
| White | `#FFFFFF` | Primary text |

**Typography** — **DM Sans**, single typeface. ExtraLight / Light for display, Regular for body, SemiBold / Bold for emphasis, tracked uppercase for data labels.

**Visual element** — the repeated **shield line**, drawn from the logo: section dividers, faint background textures, card hover reveals, the map frame, footer watermark.

**Accent rule** — blue `#0B77C0` is precious. It marks the **primary CTA**, key data points, and active states only. If it appears more than two or three times on a screen, it stops signalling importance.

**Primary action** — **Book a Consultation** (with *Call for Immediate Enquiries* / WhatsApp alongside).

**Reading the sketches** — `[ … ]` = button · `▭ IMAGE` = image / media · `●` = interactive hotspot · `▾` = scroll / dropdown · plain text lines = copy / placeholder.

---

# Homepage

*13 sections · dark, cinematic, restrained.*

---

### 0 · Global header — sticky

```
┌──────────────────────────────────────────────────────────────┐
│ ⬡ MAINSTAY BULLETPROOF   About Services Vehicles Protection   │
│                          Who We Protect Insights Contact      │
│                                          [ Book a Consultation ]│
└──────────────────────────────────────────────────────────────┘
```

**Contents:** white shield lockup (top-left), primary nav, persistent CTA, click-to-call / WhatsApp.

**Design notes**
- White shield lockup top-left (preferred on dark), per brand placement rules.
- Nav in DM Sans Regular; the **only blue element** is the persistent CTA.
- Click-to-call / WhatsApp sits beside the CTA — important for this market.
- Condenses to the shield **icon** on scroll.

---

### 1 · Hero — immersive, full-bleed *(100vh)*

```
┌──────────────────────────────────────────────────────────────┐
│ ▭ FULL-BLEED ARMORED VEHICLE  (dark scrim · shield-line bg)   │
│                                                              │
│  ARMORED · B6                                                │
│  Armor Your Vehicle in Nigeria —                             │
│  B6-Level Protection, Built In-Country.                      │
│  International-standard B6 armoring, completed in Nigeria…    │
│  [ Book a Consultation ]  [ Call for Immediate Enquiries ]   │
│  ▾ scroll                       Land Cruiser LC300 · VR/B6   │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** eyebrow, H1 (approved copy), sub, primary + secondary CTA, scroll cue, vehicle chip.

**Design notes**
- **Immersive full-bleed** vehicle; headline overlaid bottom-left over a dark scrim for legibility.
- Headline in **DM Sans ExtraLight**, large — elegance through air, not weight.
- Blue reserved for the **primary CTA** only.
- Faint **shield-line texture** in the background.
- Motion: the **armor-reveal** begins as the visitor scrolls.

---

### 2 · Trust & credentials strip *(thin band)*

```
┌──────────────────────────────────────────────────────────────┐
│ 10+ YEARS · CEN · NIJ · VPAM · STANAG   Trusted across   ▭▭▭ │
│                                        corporate/gov/security │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** years of operation, certification standards, trust line, partner/affiliation logos.

**Design notes**
- Quiet band directly under the hero; **tracked uppercase** DM Sans for the standards.
- One figure (**10+ years**) picked out in blue.
- Partner / affiliation logos greyed to a single tone so they unify.

---

### 3 · In-country advantage (Brand Promise)

```
┌──────────────────────────────────────────────────────────────┐
│ THE ADVANTAGE                                                │
│ Skip the import delays. Get fully certified B6-level          │
│ protection, right here in-country.                            │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐           │
│ │ Cost          │ │ Accelerated  │ │ After-sale   │           │
│ │ efficiency    │ │ turnaround   │ │ maintenance  │           │
│ │ ▬▬▬▬          │ │ 6–12 WEEKS   │ │ ▬▬▬▬         │           │
│ └──────────────┘ └──────────────┘ └──────────────┘           │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** headline + three promise blocks (cost efficiency / accelerated turnaround / after-sale maintenance).

**Design notes**
- The site's single most important argument — given room to breathe.
- The key figure **6–12 weeks** is the one blue data point.
- Generous whitespace signals confidence.

---

### 4 · Services — horizontal cards *(five · scroll →)*

```
┌──────────────────────────────────────────────────────────────┐
│ WHAT WE DO                                                   │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐                            │
│ │▭img│ │▭img│ │▭img│ │▭img│ │▭img│                            │
│ │01  │ │02  │ │03  │ │04  │ │05  │                            │
│ │▬▬  │ │▬▬  │ │▬▬  │ │▬▬  │ │▬▬  │                            │
│ └────┘ └────┘ └────┘ └────┘ └────┘                            │
│ Production & Armoring · Sale · Rental · Maintenance · Driver  │
│ Training                                                      │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** five image cards — Vehicle Production & Armoring, Armored Vehicle Sale, Rental, Servicing & Maintenance, Driver Training.

**Design notes**
- **Five** service lines (Driver Training added from the prepared copy).
- Image card per item; **shield-line edge** + blue arrow reveal on hover.
- Each links to its own page using the shared service template.

---

### 5 · The approach — how a vehicle is armored *(signature)*

```
┌──────────────────────────────────────────────────────────────┐
│ THE PROOF                                                    │
│ Protection isn't added to the vehicle. It's engineered into   │
│ every surface of it.                                          │
│ ┌──────────────────────────────────────────┐ ┌────────────┐  │
│ │ ▭ ARMORED VEHICLE — INTERACTIVE           │ │ DOOR PANEL │  │
│ │      ●         ●                          │ │ ▬▬▬▬       │  │
│ │             ●                             │ │ [VPAM VR7] │  │
│ └──────────────────────────────────────────┘ └────────────┘  │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** headline, vehicle image with clickable component hotspots, detail card.

**Design notes**
- The **signature interaction**: hotspots on the vehicle open into detail on click.
- Scroll-driven **armor-reveal** separates the protective layers.
- A soft **blue-tinted light** tracks the cursor across the metal.
- Respects reduced-motion; never gates the CTA.

---

### 6 · Featured vehicles *(3-up)*

```
┌──────────────────────────────────────────────────────────────┐
│ THE FLEET                                                    │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐                  │
│ │[B6] ▭      │ │[B6] ▭      │ │[B6] ▭      │                  │
│ │ VEHICLE    │ │ VEHICLE    │ │ VEHICLE    │                  │
│ │ ▬▬ name    │ │ ▬▬ name    │ │ ▬▬ name    │                  │
│ │ top · seats│ │ top · seats│ │ top · seats│                  │
│ └────────────┘ └────────────┘ └────────────┘                  │
│ Land Cruiser LC300/LC200 · Lexus LX600/LX570 · Hilux ·        │
│ Camry · F150 · Coaster Bus · CIT Van                          │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** three real platforms with B6 badge, name, key specs; each opens a detail page.

**Design notes**
- **Real platforms** Mainstay armors, with a B6 badge.
- Premium dark photography; subtle scale on hover.

---

### 7 · The Mainstay Advantage — standards *(creative)*

```
┌──────────────────────────────────────────────────────────────┐
│ TRUST. STANDARDS. PROVEN CAPABILITY.        ╭───────╮         │
│ Every vehicle is rated. Every rating        │  B6   │ ◜ gauge │
│ is verifiable.                              │ level │         │
│ ▬▬▬▬▬▬▬                                     ╰───────╯         │
│ [VPAM] [NIJ] [CEN] [STANAG]      [01][02][03][04][05] layers  │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** statement + certification marks; radial B4–B6 gauge; five-layer armor stack.

**Design notes**
- Standards made **visual**: a radial B4–B6 gauge + a five-layer armor stack.
- Blue marks the **protection level** — the one figure that matters here.
- Links through to the full Protection & Process page.

---

### 8 · Who we protect / use cases *(accordion)*

```
┌──────────────────────────────────────────────────────────────┐
│ WHO WE PROTECT                                               │
│ ── Corporate ───────────────────────────────── — close      │
│    ▬▬▬▬▬▬   [ Speak to our team → ]              ▭ img        │
│ ── Government & Public Sector ─────────────────── + expand   │
│ ── Private Clients ───────────────────────────── + expand   │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** three expandable audiences; open panel shows a tailored line, CTA, and subtle imagery.

**Design notes**
- Expandable audiences; lets prospects **self-identify** without breaching confidentiality.
- Each opens to a tailored line + its own CTA.
- Pairs with the Use Cases scenarios (law enforcement, executive mobility, humanitarian, border, banks/CIT).

---

### 9 · Core values *(4-up)*

```
┌──────────────────────────────────────────────────────────────┐
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│ │ Safety   │ │ Global   │ │ Client-  │ │ Operat.  │           │
│ │ as a     │ │ Calibre, │ │ Centric  │ │ Agility  │           │
│ │ Standard │ │ Local…   │ │ Solutions│ │          │           │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** Safety as a Standard · Global Calibre, Local Expertise · Client-Centric Solutions · Operational Agility.

**Design notes**
- Four quiet columns; hierarchy from DM Sans **weight contrast**, no accent needed.

---

### 10 · Operating footprint *(dotted map)*

```
┌──────────────────────────────────────────────────────────────┐
│ NATIONAL REACH                                               │
│ Lagos · Abuja · Asaba                                        │
│ ┌──────────────────────────────────────────┐                 │
│ │ ▭ DOTTED MAP OF NIGERIA / REGION          │                 │
│ │     ●          ●            ●             │                 │
│ └──────────────────────────────────────────┘                 │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** dotted map with location nodes; each location's role on tap.

**Design notes**
- **Discernible dotted map** (built from real geography), framed by the shield line.
- Routes / hub nodes drawn in **blue** — the accent earning its place.
- Each location's role on tap (Lagos / Abuja / Asaba).

---

### 11 · Context — with restraint *(full-bleed)*

```
┌──────────────────────────────────────────────────────────────┐
│ ▭ QUIET FULL-BLEED IMAGE (dark scrim)                        │
│        When protection becomes your responsibility,           │
│        it should be engineered, not improvised.               │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** one composed statement, centered.

**Design notes**
- A single composed statement — **quiet reassurance, never fear-selling**.
- Echoes the brand's "beyond convoys and sirens" philosophy.

---

### 12 · Closing CTA

```
┌──────────────────────────────────────────────────────────────┐
│            (faint shield-line watermark)                     │
│                   START HERE                                  │
│         Discretion starts with a conversation.                │
│              [ Book a Consultation ]                          │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** eyebrow, statement, single primary CTA.

**Design notes**
- Centered, dark, with a faint **shield-line watermark**.
- Single blue button — the page's final, unmissable action.

---

### 13 · Footer *(true black)*

```
┌──────────────────────────────────────────────────────────────┐
│ ⬡ MAINSTAY      Locations     Services      Get in touch     │
│   ▬▬▬           ▬▬ Lagos      ▬▬            ▬▬               │
│   ▬▬            ▬▬ Abuja      ▬▬            [ Book a Consult.]│
│                 ▬▬ Asaba      ▬▬                             │
│ © Mainstay Bulletproof                Terms · Privacy · Cookies│
└──────────────────────────────────────────────────────────────┘
```

**Contents:** brand block, locations, service links, contact + CTA, legal links.

**Design notes**
- True black with a shield-line watermark.
- **Lagos / Abuja / Asaba**, phone lines, email, socials, and legal links.
- Final consultation prompt repeats the primary action.

---

# Key inner pages

*Shared templates.*

---

### A · Service page — shared template *(×5 services)*

```
┌──────────────────────────────────────────────────────────────┐
│ SERVICE                                                      │
│ Vehicle Production & Armoring             ▭ IMAGE            │
│ Soft-skin → B6, completed in-country.                        │
│ [ Build Your Armored Vehicle ]                               │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐              │
│ │ Who it's│ │Protection│ │Operat.  │ │ CTA     │              │
│ │ for     │ │ scope    │ │ benefits│ │ [Action]│              │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘              │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** description, who it's for, protection scope, operational benefits, CTA.

**Design notes**
- One reusable layout for all **five** services.
- Each service keeps its **own action label** — Build Your Armored Vehicle · Secure Your Armored Vehicle · Request Rental Availability · Schedule a Maintenance Inspection · Enquire About Driver Training.

---

### B · Vehicle detail — template *(per platform)*

```
┌──────────────────────────────────────────────────────────────┐
│ ▭ VEHICLE HERO                                  [B6]         │
│ ┌──────────────────────┐ ┌──────────────────────┐            │
│ │ Why this platform    │ │ Armoring specification│            │
│ │ ▬▬▬▬▬▬               │ │ ▬▬▬▬▬▬               │            │
│ └──────────────────────┘ └──────────────────────┘            │
│ ▭ gallery   ▭ gallery   ▭ gallery                            │
│ [ Book a Consultation ]  [ Enquire about this build ]        │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** hero + B6 badge, why this platform, armoring spec, gallery, CTAs.

**Design notes**
- Cinematic hero + B6 badge; **why this platform**; armoring spec; gallery.
- Real platforms: Land Cruiser, Lexus LX, Hilux, Camry, F150, Coaster, CIT.

---

### C · Contact — Confidential Consultation *(primary conversion)*

```
┌──────────────────────────────────────────────────────────────┐
│ CONFIDENTIAL                              ▭ MAP — 3 LOCATIONS │
│ Discuss your requirements securely.                          │
│ ┌─────────────────────────┐              Lagos · Abuja · Asaba│
│ │ Email *                 │              ▬▬▬▬                 │
│ │ Phone *                 │              ▬▬▬▬                 │
│ │ Service interest ▾      │       Call · WhatsApp · email     │
│ └─────────────────────────┘                                  │
│ ☐ Privacy · ☐ Terms                                          │
│ [ Request a Confidential Consultation ]                      │
└──────────────────────────────────────────────────────────────┘
```

**Contents:** short form (email, phone, optional service dropdown, consent), success/24-hour reassurance, direct contact + map.

**Design notes**
- The **primary conversion** — short form: email, phone, optional service dropdown.
- Reassurance: confidential handling, **24-hour response**, small-print disclaimer.
- Call / WhatsApp given equal weight to the form.

---

*Reflects the v2 decisions: five services (Driver Training included), the brand blue / DM Sans / shield-line system, and the "Book a Consultation" primary CTA. Intentionally wireframe-grade — real photography and the full dark treatment come at the high-fidelity stage.*
