**Page builder:** Elementor

# SecureKey Locksmith & Security — local service business landing page

Design and build a **complete, production-quality landing page** for "SecureKey Locksmith & Security", a licensed local locksmith and home-security service. This prompt is the versatile, adapt-me template — swap the business name, services, and palette to fit any local service company. **You own the design.** If web search is available, research 2–3 genuinely well-designed local-service/trades sites first and form a point of view; then decide the layout, composition, and section design yourself. Do not fall back to a generic centered-hero + three-identical-cards template — bring editorial composition, asymmetry, scale contrast, and rhythm. **Vary your hero composition to fit this brand specifically — in particular, do not reach for the overused "one large photo with a smaller photo card overlapping its corner" hero unless it genuinely serves this design; choose an opener you would not use for a coffee shop or a law firm.** The sections below define **what the page must communicate, not how it must look.**

## Style guide (constraints, not layout)

**Palette — flat colors only, no gradients:**

| Role | Value |
|---|---|
| Surface, light | `#FBFAF8` (warm white) |
| Surface, dark bands | `#232830` (deep slate) |
| Ink / headings | `#232830` |
| Accent — use sparingly: one word, key numbers, buttons, icons | `#D97706` (warm amber) |
| Muted body text | `#6E6A63` |
| Hairlines / dividers | `#E8E5DF` |

**Typography:** Display = **Inter Tight** (fallback: Inter) — clean, confident grotesque; strong weights and tight leading on headlines, real scale contrast between levels. Body = **Inter**, 16–18px, relaxed line-height (~1.6–1.7). Small uppercase eyebrows with wide letter-spacing are on-brand.

**Feel:** clean, confident, timeless — the least themed of designs, but never bland: editorial composition, deliberate scale contrast, generous whitespace. Hairline dividers over box shadows; modest radii (6–10px). Trust is the product — let numbers, plain language, and real work photos carry it.

**Motion:** minimal and purposeful — subtle entrance reveals only; a service business should feel steady, not showy. Use only what the chosen builder provides natively; **no custom JavaScript and no hand-rolled motion CSS.**

## Design signature (make this page distinct — adapt as you see fit)
These are compositional cues, not layout mechanics. Use them to give this service business its own look rather than a generic template:
- **Hero:** a type-first opener with no photo above the fold — a trust-forward headline and the phone number as the focal element, carried by deliberate scale and a strong horizontal rule system rather than a hero image.
- **Services:** present the six services as a plain-language problem index on hairline dividers, so a customer finds their problem in seconds, rather than six identical shadowed cards.
- **Trust numerals:** set the four stats as oversized numerals on the deep-slate band so the proof reads instantly.
- **Shape language:** modest 6–10px radii and generous whitespace; let the warm-amber accent appear only on actions and a few key numbers.

## Sections — what each must communicate (design them your way)

1. **Hero** — immediate competence and reachability; the brand name, a trust-forward headline, a line about fast licensed 24/7 lockout and security service, the phone number as a primary action plus a free-quote request, and the rating proof (5.0 ★ · 3,100+ jobs).
2. **Trust stats** — the four numbers that close the deal: 18+ years experience · 3,100+ jobs completed · 24/7 emergency service · 100% satisfaction rate.
3. **Services** — all 6 services below with a short plain-language description of each; a customer should find their problem in seconds.
4. **Why SecureKey** — the company story in brief: locally owned, licensed & insured, background-checked technicians, upfront pricing, and a workmanship guarantee.
5. **Recent work** — proof of real completed jobs across homes, cars, and commercial sites.
6. **Pricing** — the 3 service plans below with prices and inclusions; Standard flagged as most popular.
7. **Testimonials** — three distinct, believable customer quotes with names; write them yourself.
8. **Request a free quote** — a working quote-request form (full name, phone, email, service needed, service address, preferred time) built with the builder's native form element, with the phone number given equal prominence as an alternative. If the builder has no form element available, use a clearly labeled call/email call-to-action instead of omitting this.
9. **Contact** — phone, email, address, office hours, 24/7 emergency line, service area, and a map if the builder supports one.
10. **Footer** — brand + tagline, quick links, contact, copyright.

## Content facts (use these verbatim)

**Services:** Emergency Lockout — home, car, or office, on-site within the hour · Lock Repair & Rekeying — worn, jammed, or post-move locks made secure · Key Cutting & Duplication — standard, high-security, and transponder car keys · Smart Lock Installation — keypad, fingerprint, and app-controlled deadbolts · Home Security Setup — cameras, sensors, and monitored alarm systems · Commercial Access Control — master-key systems, keypads, and panic hardware

**Pricing plans:** Basic — $79 — service call, single lockout or rekey, 30-day warranty · Standard — $139 (Most Popular) — full service call, rekey up to 3 locks, security walk-through, 1-year warranty · Premium — $239 — priority scheduling, whole-home lock & entry-point audit, one smart-lock install, 2-year warranty

**Stats:** 18+ years experience · 3,100+ jobs completed · 24/7 emergency service · 100% satisfaction rate · 5.0 ★ average rating

**Contact:** 1180 Industry Blvd, Suite 4, Austin, TX · Office Mon–Sat 7 AM–7 PM, emergency line 24/7 · (555) 123-4567 · service@securekeyaustin.com · Licensed & insured · Serving greater Austin · est. 2007

## Standards (non-negotiable)

### Accessibility — WCAG 2.1 AA
- Text contrast ≥ 4.5:1 (≥ 3:1 for large text) against its actual background — check text over photos and dark bands.
- Exactly one H1; headings descend logically (no skipped levels for styling reasons).
- Descriptive alt text on every image; meaningful link/button labels (never "click here").
- Comfortable touch targets on buttons and links; readable body size (≥ 16px); every form field has a visible, associated label.

### Images — real photography in every slot
- Source real photos from **Unsplash, Pexels, or Pixabay** (use the available stock-image search/sideload tools if present, otherwise direct source URLs). Never leave an image slot empty; never use placeholder URLs.
- Curate for a consistent clean, natural grade that matches the palette; pick photos of real technicians and real finished work that share one mood, not six random locksmith photos.

### Icons — one consistent SVG set
- Use inline SVG icons in a single consistent style — Lucide/Feather spec: `viewBox="0 0 24 24"`, `fill="none"`, `stroke="currentColor"`, `stroke-width="1.75"`, round caps/joins. Generate what you need (key, lock, shield-check, clock, phone, map-pin, star, badge-dollar…).
- Do not use the builder's bundled icon font/library, and no emoji as icons.

### Builder-native construction
- Build with the chosen builder's **native elements/widgets/blocks** and its native styling, spacing, and motion features. Inspect the builder's available elements and their options first if tools for that exist.
- Raw HTML/custom code embedded inside a visual builder is a **last resort** for a micro-detail that is genuinely impossible natively — never for whole sections. (If the chosen target IS plain HTML/CSS, write clean semantic HTML with modern CSS instead.)

### Completeness — a half-built page is a failure
- Build and **fully populate one section at a time**: real headline, real copy, every service described, every plan with its price and inclusions, every quote written, every image placed — then move on. Never scaffold empty containers to "fill later."
- When finished, walk the entire page and fix any empty element, placeholder text, missing image, or contrast failure. Publish as a **draft**.
