A fast, responsive electrician landing site with parallax sections, a 4‑item nav, a contact form, and full Obra CMS integration for live content + design editing.

• index.html — main site (production)
• assets/css/styles.css
• assets/js/main.js — event delegation, smooth scroll
• assets/js/obra-runtime.js — fetches content from Obra API, applies to DOM
• assets/js/design-component.js — OOP design system (see below)
• assets/obra/content.json — local fallback content + design schema
• assets/Img/ — hero, parallax, and logo images
• main.py — Flask server (contact form, Obra lead forwarding)

Open index.html in your browser, or serve with any static server:

python3 -m http.server 8080

1. Create a new Static Site on Render.
2. Connect your repo.
3. Build Command: (leave blank)
4. Publish Directory: / (root)
5. Headers (optional):
   • Cache-Control for assets/*: public, max-age=31536000, immutable
6. Hit Create Static Site.

obra-runtime.js fetches GET https://api.obra.cloud/v1/content/watson on every page load.
If the API is unreachable it falls back to assets/obra/content.json.

Fields applied via [data-obra="<dot.path>"] attributes in index.html:

The site runs a lightweight OOP design layer that the Obra client console drives via its Design tab.
obra-runtime.js calls applyDesign(data) after applyContent(data).

"hero": {
  "design": {
    "backgroundImage": "assets/Img/hero-electric.jpg",
    "headlineColor":   "#eaf1ff",
    "headlineFontSize": "3.5rem",
    "subheadColor":    "#a4acb9",
    "subheadFontSize": "1.15rem"
  },
  "buttons": [
    { "id": "btn_primary",   "label": "Request a Quote", "href": "#contact",  "variant": "primary",   "size": "lg", "animation": "glow" },
    { "id": "btn_secondary", "label": "See Services",    "href": "#services", "variant": "secondary", "size": "lg", "animation": "none" }
  ]
}

1. Extend DesignComponent in design-component.js
2. Register it in DesignComponentRegistry
3. Add data-obra-design="<type>" to the section element in index.html

The OOP design component on this site is the renderer half.
The editor half must be built in the obra-client-console repo.

Use the following prompt when working in that repo:

Context: Watson Electrician's site (watsonelectriciancom repo) now has an OOP design component system (assets/js/design-component.js). The hero section reads design settings from content.json via GET /v1/content/watson and saves them via PUT /v1/content/{slug}. All design properties live under hero.design.* and hero.buttons[] in the content object (see schema below). The Design tab in the Obra console currently shows no design fields for the hero section.

Task: Build a Hero Design tab UI in the Obra client console so editors can visually configure all hero design settings and save them back to the API.

Hero design schema to expose in the UI:

"hero": {
  "design": {
    "backgroundImage":  "<string — relative path or https:// URL>",
    "headlineColor":    "<CSS color string, e.g. #eaf1ff>",
    "headlineFontSize": "<CSS font-size string, e.g. 3.5rem — optional>",
    "subheadColor":     "<CSS color string>",
    "subheadFontSize":  "<CSS font-size string — optional>"
  },
  "buttons": [
    {
      "id":        "<alphanumeric/hyphens only>",
      "label":     "<button text>",
      "href":      "<# | / | https:// only>",
      "variant":   "primary | secondary",
      "size":      "lg | (omit for default)",
      "animation": "glow | none"
    }
  ]
}

Acceptance criteria:

1. The Hero section's Design tab renders form controls for every field above:
   • backgroundImage — text/URL input
   • headlineColor / subheadColor — color picker (+ hex text input)
   • headlineFontSize / subheadFontSize — text input (optional, leave blank to use CSS default)
   • buttons[] — a list editor: add / remove / reorder buttons, editing id, label, href, variant (select), size (select), animation (select)
2. Saving calls PUT /v1/content/{client_slug} with the full updated content object (merge — do not overwrite other sections).
3. A live preview panel (iframe or side-by-side) re-renders the hero using the same HeroDesignComponent logic so editors see changes before saving.
4. Use src/lib/obraContent.js for all API calls — fix the saveClientContent method if it currently uses POST instead of PUT (see existing issue).
5. Form state is initialised from the current content fetched by GET /v1/content/{client_slug}.
6. All color inputs must validate as valid CSS colors before saving.
7. All href inputs must validate as #…, /…, or https?://… before saving.
8. Do not break existing Content tab fields (banner.text, hero.headline, hero.subhead, services.*, trust.*).

Files likely to change:

• src/components/sections/HeroDesign.jsx (create if not present)
• src/lib/obraContent.js — fix saveClientContent to use PUT
• src/pages/ClientSection.jsx (or equivalent) — wire in the new Design tab
• Any shared ColorPicker, ButtonListEditor components (create or reuse)

No new external dependencies unless a color-picker component is already in the project. Do not change the Watson site (watsonelectriciancom) repo.

• Parallax uses background-attachment: fixed; on mobile it falls back to non-fixed for performance.
• Colors are adjustable in :root CSS variables.
• The lab/ directory contains experimental sandbox pages (not deployed).