Security Company Website Prompt — Control Room Dark Design for Bolt, v0 & Lovable

# Vantage Security — Security Company Website Prompt ## 1. Goal Statement Build a hard, credibility-first commercial security website for **Vantage Security**, defined by near-black surfaces, a cold cyan signal colour, and monospace data labels — a site that reads like a control room rather than a brochure. ## 2. Tech Stack ``` React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + shadcn/ui + lucide-react ``` ## 3. Design System — Colors ```css :root { --background: hsl(220, 18%, 7%); /* #0e1116 */ --foreground: hsl(210, 16%, 94%); /* #ecf0f3 */ --primary: hsl(186, 92%, 46%); /* #0ad4e0 signal cyan */ --primary-foreground: hsl(220, 20%, 6%); --muted-foreground: hsl(215, 10%, 55%); --border: hsl(220, 14%, 18%); --card: hsl(220, 16%, 10%); --card-elevated: hsl(220, 15%, 14%); --alert: hsl(14, 88%, 56%); /* incident red */ } ``` ## 4. Typography ```html <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" /> ``` - **H1:** Space Grotesk 700, clamp(38px, 5vw, 74px), letter-spacing -0.03em - **H2:** Space Grotesk 600, 32–46px - **H3:** Space Grotesk 500, 18–21px - **Body:** Inter 300–400, 16px, line-height 1.7 - **Data labels / eyebrows:** IBM Plex Mono 500, uppercase, letter-spacing 0.14em, 11px, cyan - **Metrics:** Space Grotesk 700, tabular-nums ## 5. Visual Effects **Effect 1 — Live monitoring ticker.** A monospace strip beneath the hero that cycles through anonymised status lines on a 3-second interval, mimicking a control room feed. ```tsx const lines = [ 'SITE 0412 · PERIMETER CLEAR · 03:42', 'SITE 0117 · PATROL LOGGED · 03:44', 'SITE 0288 · ALARM ACK 41s · 03:46', 'SITE 0503 · KEYHOLDER NOTIFIED · 03:49', ]; const [i, setI] = useState(0); useEffect(() => { const t = setInterval(() => setI(v => (v + 1) % lines.length), 3000); return () => clearInterval(t); }, []); <AnimatePresence mode="wait"> <motion.span key={i} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.3 }} className="font-mono text-sm tracking-wider text-[var(--primary)]"> {lines[i]} </motion.span> </AnimatePresence> ``` **Effect 2 — Scanline grid overlay.** A fixed pointer-events-none overlay with 1px horizontal lines at 4px intervals at 3% opacity, giving every section a faint monitor texture. ## 6. Component Breakdown 1. **Navbar** — 74px, fixed, `rgba(14,17,22,0.94)` with blur, cyan 1px bottom border after scroll. Wordmark left, links centre, 24/7 control room number in mono and `Request a Site Survey` cyan button right. 2. **Hero** — 92vh, full-bleed night image with heavy left gradient. Mono eyebrow, H1, subline, two CTAs, four accreditation badges. *Image: security operations centre at night, wall of monitors glowing, dark room, cool blue light, cinematic.* 3. **Monitoring ticker** — the live strip (Effect 1) on a card band. 4. **Services** — 2x3 grid: manned guarding, mobile patrols, alarm response, CCTV monitoring, access control, event security. Cyan left border, mono service code above each title. 5. **Response metrics** — four count-up figures on `--card`: average alarm response, sites monitored, officers SIA licensed, control room uptime. 6. **How a call-out runs** — five-step horizontal timeline with mono timestamps, from alarm trigger to written incident report. 7. **Sectors** — four blocks: construction, retail, logistics, education, each with a two-sentence description and a specific risk it addresses. 8. **Accreditations** — text badge row: SIA Approved Contractor, NSI Gold, ISO 9001, Safe Contractor, ACS Pacesetter. 9. **Case snapshot** — one anonymised incident told in four short beats with mono timestamps. 10. **Request a survey** — split: form on the left, control room contact block on the right. 11. **Footer** — darkest slate, cyan top border, four columns, SIA licence number, 24/7 number repeated. ## 7. Animations - Hero: H1 fades up 0.7s; badges stagger 0.06s - Ticker: `AnimatePresence` swap every 3s, 0.3s transition - Scanlines: static, no animation (motion here would be nauseating) - Service cards: cyan left border grows 3px → 6px on hover, 0.25s - Metrics: count-up 1600ms on `useInView` - Timeline: cyan connecting line `scaleX 0 → 1`, 0.9s; nodes pop staggered 0.1s - Case snapshot beats: fade in as the reader scrolls, `x: -16 → 0` ## 8. Responsive - **Mobile (<768px):** hamburger with a tap-to-call control room button pinned in the overlay; H1 clamps to 38px; ticker text shortens to site code and status; services 1-col; metrics 2x2; timeline vertical with a left cyan rule; survey form full-width. - **Tablet:** services 2-col, sectors 2x2, timeline stays horizontal. - **Desktop:** max width 1240px, `px-16`, `py-24`. ## 9. Full Copy **Brand:** VANTAGE SECURITY · Manchester **Navbar:** Services · Sectors · Response · Accreditations · Contact · `0161 555 0100` · [Button] Request a Site Survey **Hero** - Eyebrow: `MANCHESTER · SIA APPROVED CONTRACTOR · CONTROL ROOM STAFFED 24/7/365` - H1: `Someone is watching. Actually watching.` - Subline: `Manned guarding, mobile patrols, and alarm response across the North West, run from our own control room. No call centre, no answering service, no forty-minute wait to speak to a human at 3am.` - CTAs: `Request a Site Survey` · `Call the Control Room` - Badges: `SIA APPROVED` · `NSI GOLD` · `ISO 9001` · `ACS PACESETTER` **Ticker lines:** `SITE 0412 · PERIMETER CLEAR · 03:42` · `SITE 0117 · PATROL LOGGED · 03:44` · `SITE 0288 · ALARM ACK 41s · 03:46` · `SITE 0503 · KEYHOLDER NOTIFIED · 03:49` **Services** 1. `SVC-01` **Manned Guarding** — SIA licensed officers on site, vetted to BS 7858. Static posts, gatehouse control, and reception security with documented handovers every shift. 2. `SVC-02` **Mobile Patrols** — Randomised patrol schedules with GPS-logged checkpoints. You get a timestamped report every morning showing exactly where we were and when. 3. `SVC-03` **Alarm Response** — Keyholding and response, average acknowledgement in forty-one seconds. We attend, assess, secure, and file a written incident report before we leave. 4. `SVC-04` **CCTV Monitoring** — Live remote monitoring from our control room with audio challenge. Intruders are spoken to on site, which resolves most incidents before anyone has to attend. 5. `SVC-05` **Access Control** — Design, installation, and management of card, fob, and biometric systems, including visitor management and audit trails. 6. `SVC-06` **Event Security** — Crowd management, search teams, and stewarding for events from two hundred to twelve thousand, with a documented safety plan. **Metrics** — `41s` Average alarm acknowledgement · `340` Sites monitored · `100%` Officers SIA licensed · `99.98%` Control room uptime **Call-out timeline** 1. `T+0s` **Alarm triggers** — Signal reaches the control room directly, not via a third party. 2. `T+41s` **Operator acknowledges** — A named operator picks it up and pulls the camera feed for the zone. 3. `T+2m` **Audio challenge or dispatch** — Most incidents end here. If not, the nearest patrol is dispatched. 4. `T+18m` **Officer on site** — Average attendance across our North West coverage. Site is checked, secured, and photographed. 5. `T+90m` **Written report** — A timestamped incident report with images lands in your inbox before the morning. **Sectors** - **Construction** — Plant theft, fuel theft, and metal. We secure compounds during the highest-risk window, which is almost always between 1am and 4am on a Sunday. - **Retail** — Loss prevention, opening and closing cover, and a visible presence during trading hours that reduces incidents without making customers uneasy. - **Logistics** — Gatehouse control, vehicle checks, and load verification, with audit trails that stand up when a customer disputes a delivery. - **Education** — Out-of-hours campus patrols and lone-worker cover, delivered by officers who have been enhanced DBS checked as standard. **Case snapshot** — H2 `ONE NIGHT IN NOVEMBER` `02:14` Perimeter beam triggered at a construction compound in Salford. `02:15` Operator pulled the feed and identified three individuals near a plant store. `02:16` Audio challenge issued over the site speakers. Two left immediately. `02:31` Patrol officer on site, third individual gone, no plant taken, one damaged padlock. Written report with stills issued at 03:40. **Survey form** — Company / Contact name / Email / Phone / Site type / What are you trying to protect? → [Button] `Request a Site Survey` Note: `Surveys are free, take about an hour, and we will tell you if you need less than you think.` **Footer** — VANTAGE SECURITY · `Control room staffed 24/7/365` · `Unit 4, Trafford Point, Manchester M17 1AB` · `0161 555 0100` · SIA Approved Contractor #ACS-0084412 · © 2026 ## 10. Key Dependencies ```json { "motion": "^12.0.0", "lucide-react": "^0.460.0", "clsx": "^2.1.0", "tailwind-merge": "^2.5.0" } ```