# 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.*