Northlight Electric

Build a polished, standalone one-page lead-generation website for the residential electrical company below. Follow every rule literally.

### STACK

Single self-contained build: React + TypeScript + Vite + Tailwind CSS + Framer Motion + Lucide React icons. Responsive, mobile-first, semantic HTML (`header`, `nav`, `main`, `section`, `footer`). Perfect English (en-US); little text per screen; no lorem ipsum.

### BUSINESS — DEMONSTRATION

- Name: Northlight Electric
- Category: Residential electrical — panel upgrades, EV chargers, lighting, troubleshooting
- City: San Rafael, California — serving Marin County
- Purpose: service and project requests; safety and permitted work as the trust angle

FICTIONAL DEMONSTRATION BUSINESS — replace name, city, and details with the real company before any public use.

### PLACEHOLDER MAP — READ FIRST

- Contact: [PHONE], [EMAIL], [ADDRESS — shop], [HOURS]
- Credentials: [LICENSE] — in California this is the C-10 license slot; render ONLY as supplied, [CERTIFICATIONS]
- Pricing: [SERVICE CALL FEE] — a supplied diagnostic/service-call fee; render ONLY as supplied
- Proof: [PROJECTS] (each with [PROJECT PHOTO] and [PROJECT NEIGHBORHOOD]), [TESTIMONIALS], [RATING]
- Coverage: [SERVICE AREA], [EMERGENCY AVAILABILITY] — a supplied availability line for urgent electrical issues; render ONLY as supplied

CRITICAL RULES: never state prices, fees, "starting at" figures, response-time promises, years in business, job counts, a license number, certifications, rebate amounts, or ratings on your own — each renders ONLY from its placeholder. Never state specific rebate, tax-credit, or utility-program amounts or eligibility — programs are mentioned only in general terms ("programs change often; we'll point you to the current ones"). Never give DIY electrical instructions beyond universal safety steps (switch off the breaker, call the utility for a downed line). Testimonials render ONLY verbatim from [TESTIMONIALS]. Omit unfilled fields entirely. Never render bracket text.

### DESIGN SYSTEM — TECHNICAL WARMTH

- Colors: warm off-white canvas `#F7F6F3`, deep graphite ink `#1E2126`, volt amber accent `#D9A404` (rules, active states, the load-meter fill, hover — used sparingly, like current in a wire), cool steel secondary `#5A6672`, pale warm tint bands `#EDEAE2`; card borders `rgba(30,33,38,0.12)`
- Fonts (Google Fonts): `Space Grotesk` (500, 600, 700) for display headings — technical, precise, quietly modern; `Inter` (400, 500, 600) for body and UI
- Signature elements: 1px hairlines with a short amber segment (a "live section" of the rule) reused under headings and in the footer; a load-meter motif (inline SVG horizontal gauge with tick marks and an amber fill) in the logo area, the Power Needs result, and step markers; squared corners (`rounded-lg` cards, `rounded-md` buttons); small monospaced-feeling labels via `Inter` uppercase eyebrows (`tracking: 0.18em`, 11–12px, steel or amber-dark — amber text only where contrast passes, otherwise ink/60)
- Buttons: squared (`rounded-md`), ink fill with canvas text; the primary request action carries the amber live-segment underline; secondary buttons transparent with a 1px ink border
- Logo: wordmark "Northlight Electric" in Space Grotesk with a minimal inline-SVG mark — a circle with a single vertical filament line in amber; reuse it as favicon

### 1. HERO + SAFETY STRIP

A thin graphite strip sits above everything, a permanent safety line, verbatim: "Smell burning or see sparks? Switch off the breaker if it's safe to do so, and call us — or 911 if anyone is in danger." (Universal safety copy, not an availability promise.) If [EMERGENCY AVAILABILITY] is filled, it may appear verbatim at the right end of the strip on desktop; if unfilled, the strip carries the safety line alone.

Full-viewport hero with a bespoke cinematic background video, highest-quality model available, at least 1080p, regenerated if flawed: an electrician's hands seating a new breaker into a spotless panel, labeled circuits in neat rows, warm task light — order and competence; no sparks, no drama, no faces close-up. `autoPlay muted loop playsInline`, poster frame, soft graphite gradient overlay (`#1E2126` at 45% up top, clearing downward).

- Top nav: transparent over the hero; wordmark left; center links (hidden on mobile): Services, Power Needs, EV Chargers, Our Work; right: an ink "Call" button using [PHONE] only if filled, otherwise a "Request Service" link to the form
- Eyebrow: "RESIDENTIAL ELECTRICIAN — SAN RAFAEL · MARIN COUNTY"
- Heading (Space Grotesk, canvas, two lines): "Power, done" / "safely — and to code."
- Subtitle (one sentence): "Panel upgrades, EV chargers, lighting, and troubleshooting for Marin homes — permitted, inspected, and explained in plain language."
- Two CTAs: ink pill with amber underline "Request Service" → the form; ghost pill "Check Your Power Needs" → Section 2
- Small line under the hero content, rendered ONLY if [LICENSE] is filled: "Licensed in California — C-10 [LICENSE]" (the C-10 prefix renders ONLY together with a filled [LICENSE]). Never write a license line yourself.

### 2. POWER NEEDS CHECK — the signature interactive component

Heading: eyebrow "POWER NEEDS", title "Is your panel keeping up?" Intro line (one sentence): "Modern homes ask a lot of panels wired for another era. Tick what's true of yours."

**Component spec:**
- A checklist of six toggleable items (large tappable rows with checkboxes, `aria-pressed` states, tap targets at least 44px): "An EV charger is planned — or already stressing the garage circuit", "Breakers trip when appliances run together", "The panel is a fuse box, or a brand your inspector flagged", "A kitchen or bath remodel is coming", "A hot tub, sauna, or workshop is on the list", "Lights flicker when the AC or dryer starts"
- A **load meter** beside/below the list: an SVG gauge whose amber fill grows with each ticked item (0–6 segments) — a visual metaphor, explicitly not a measurement.
- When at least one item is ticked, ONE result card appears under the meter, chosen by count (1–2 → tier A; 3–4 → tier B; 5–6 → tier C), with an ink button "Request a Panel Evaluation" scrolling to the form with project type preselected to "Panel evaluation". Result copy, verbatim per tier:
  - **Tier A:** "A short list — and a good time to look. A panel evaluation measures your actual load and tells you whether you're set, or one appliance away from nuisance trips."
  - **Tier B:** "Your panel is sending memos. An evaluation sorts what a new circuit can solve from what calls for a panel upgrade — with both priced in writing before you decide."
  - **Tier C:** "That's a panel working past its design. An evaluation comes first for safety, then a written plan — permits and inspection included, sequenced so your home is never left dark overnight."
- One honest line under the component, verbatim: "This is a checklist, not a load calculation — the real numbers come from measuring your panel in person."

### 3. SERVICES

Heading: eyebrow "SERVICES", title "What we wire, fix, and certify". Six cards on canvas with a tint top wash, Lucide icon in steel with amber hover, title, ONE line each — no prices anywhere:

- **Panel Upgrades** (LayoutGrid) — "Fuse boxes and undersized panels replaced, permitted, and inspected."
- **EV Charger Installation** (PlugZap) — "Home charging sized to your panel and your driving — not a one-size guess."
- **Troubleshooting & Repair** (Search) — "Dead outlets, tripping breakers, and mystery flickers traced to the cause."
- **Lighting & Ceiling Fans** (Lightbulb) — "Recessed, pendant, and landscape lighting installed clean and switched sensibly."
- **New Circuits & Outlets** (Plug) — "Dedicated circuits for kitchens, workshops, offices, and everything that hums."
- **Whole-Home Safety Check** (ShieldCheck) — "Panel, grounding, GFCI/AFCI protection, and smoke/CO placement reviewed room by room."

### 4. EV CHARGERS — the modern angle, given its own band

Full-width tint band. Eyebrow: "EV CHARGERS". Heading: "Charge at home. Wake up full." Two short paragraphs maximum: how an installation works (we measure the panel's spare capacity, recommend a charger placement and amperage that fits it, pull the permit, install, and schedule the inspection) and the honest note that charger and circuit costs depend on the panel and the run length — quoted in writing after the evaluation. One line, verbatim: "Rebate and incentive programs change often — at your evaluation we'll point you to the ones currently open to Marin homeowners." (Never state amounts.) CTA: "Request an EV Evaluation" → the form, project type preselected to "EV charger".

### 5. HOW IT WORKS

Heading: "From first call to final inspection". Four steps, horizontal stepper (desktop) / vertical timeline (mobile), each marker a small load-meter glyph whose amber fill increases step by step (25% → 50% → 75% → 100%):

- **01 — You reach out** — "Call or send the form. Photos of your panel help us arrive prepared."
- **02 — Evaluation & written quote** — "We measure, open the panel, and quote the work in writing before anything starts." If [SERVICE CALL FEE] is filled, render it verbatim as a small line under this step; otherwise omit.
- **03 — Permit & install** — "We pull the permit, do the work to code, and keep the power-off window as short as the job allows."
- **04 — Inspection & walkthrough** — "The city inspector signs off; we label every circuit and walk you through what changed."

### 6. WHY HOMEOWNERS CALL US

Heading: "Electricians who leave a labeled panel". Four trust points with Lucide icons — process promises only, no superlatives, no counts:

- **Permitted & inspected** (BadgeCheck) — "Work that involves your panel is permitted and inspected — paperwork you keep."
- **Written quotes before work** (FileText) — "The scope and price agreed in writing before a wire is touched."
- **Every circuit labeled** (Tags) — "You inherit a panel you can actually read, not a mystery box."
- **Clean, careful visits** (ShieldCheck) — "Drop cloths, vacuumed floors, and shoes that respect your home."

A credentials line renders ONLY from filled placeholders, exactly as supplied: [LICENSE], [CERTIFICATIONS], [RATING]. Omit each silently if unfilled.

### 7. OUR WORK — ONLY FROM [PROJECTS]

Heading: eyebrow "OUR WORK", title "Panels and projects, lately". Render ONLY from [PROJECTS]: each card shows [PROJECT PHOTO] and a caption of [PROJECT NEIGHBORHOOD] plus the work performed only if supplied with the project. If [PROJECTS] is unfilled, omit this section entirely — never stock-photo a fake job.

### 8. SERVICE AREA & TESTIMONIALS

**Service Area** — heading "Where we work": render ONLY from [SERVICE AREA] as chips on tint; if unfilled, one neutral line only: "Serving homeowners across Marin County."
**Testimonials** — heading "What neighbors say": render ONLY verbatim quotes from [TESTIMONIALS], attributed exactly as supplied (first name and neighborhood/city only); a [RATING] badge appears only if [RATING] is filled. If unfilled, omit the testimonials block entirely.

### 9. REQUEST SERVICE

Heading: "Request service". Two columns on desktop, stacked on mobile. Left: the form — name, phone, email, project type (select: Panel evaluation, Panel upgrade, EV charger, Troubleshooting, Lighting, New circuit, Safety check, Not sure yet — preselected when arrived from Sections 2 or 4), city, message with the prompt "What's happening — or what are you planning?" Front-end demo only: on submit, validate required fields and show a thank-you state — "Thanks — your request is in. We reply during business hours." Right: contact card on tint with [PHONE] as a tap-to-call `tel:` link, [EMAIL] as `mailto:`, [HOURS], and [ADDRESS — shop] opening Google Maps directions — each line omitted if unfilled.

### 10. FINAL CTA BAND

Full-width graphite `#1E2126` band opened by a hairline with its amber live segment. Heading (Space Grotesk, canvas): "Your home's power should never be the thing you worry about." One line: "Start with an evaluation — measured, explained, and quoted in writing." Button (canvas fill, ink text): "Request Service" → the form.

### 11. FOOTER

Canvas footer: wordmark, nav links, contact items only if filled, "Northlight Electric — San Rafael, California", a license line rendered ONLY from [LICENSE]: "California C-10 License [LICENSE]", and a copyright line. No fake social links or affiliations.

### MOTION

Framer Motion, easing `cubic-bezier(0.22, 1, 0.36, 1)` throughout. Hero poster fallback: slow Ken Burns (1.0 → 1.06 over 20s, alternate). Staggered fade-up for hero eyebrow, heading lines, subtitle, CTAs. Power Needs meter segments fill with a 0.3s ease as items are ticked; result card fades/slides in. Step markers' meter fill grows as the section scrolls into view. Reveal-on-scroll for headings and cards. Under `prefers-reduced-motion`: no Ken Burns, no fade-up, meter shown at final state — the checklist and form stay fully functional.

### RESPONSIVE

Services grid: 3 columns desktop → 2 tablet → 1 mobile. Power Needs rows full-width on mobile, tap targets at least 44px, meter moves below the list. Steps stack vertically on mobile. Sticky mobile bottom bar with two buttons: "Call" (only if [PHONE] is filled) and "Request Service" → the form.

### SEO & VERIFICATION

- Title: "Northlight Electric — Electrician in San Rafael & Marin County, CA"
- Meta description: "Northlight Electric upgrades panels, installs EV chargers, and troubleshoots home electrical across Marin County — permitted, inspected, and quoted in writing."
- OG image: the hero poster frame.
- Verify before returning: zero placeholder text visible; zero invented prices, fees, rebate amounts, license numbers, certifications, or ratings; the Power Needs meter and tiers map correctly and preselect the form; the EV band states no amounts; the form shows its thank-you state; every link, `tel:`, `mailto:`, and anchor works; the video plays and loops on mobile and desktop. Deploy to a memorable business-based URL; return it with a three-line design summary.