# Doctor B Natural — Website

A fast, responsive, single-page marketing site for **Doctor B Natural Ltd** — a UK-registered
manufacturer and wholesaler of 100% natural, laboratory-tested supplements.

> _First of all, health._

The site is intentionally **static** (plain HTML/CSS/JS) — no build step, no framework, no
dependencies. It loads fast and can be hosted anywhere.

---

## File structure

```
index.html            → the whole page (all sections + copy)
css/styles.css        → styles, brand theme, responsive rules
js/main.js            → header, mobile menu, smooth scroll, contact form
robots.txt            → search-engine crawl rules
sitemap.xml           → single-page sitemap
assets/               → logos (webp), favicons, social-share image
media/                → hero video loop, brand film, poster images
.claude/launch.json   → local preview config
aa2d8ae7…HD-1080p…mp4 → original full-resolution brand video (source; not used by the page)
```

Brand colours: **Doctor B Red `#ba0818`** + **white**, with the logo's multicolour
diamond sparkles as accents.

---

## Preview locally

Any static server works. From this folder:

```bash
python3 -m http.server 4173
# then open http://localhost:4173
```

Or simply double-click `index.html` (some browsers restrict autoplay video on `file://`,
so the local server above is recommended).

---

## Deploy

Upload the **entire folder** to any static host — no build needed:

- **Netlify / Vercel / Cloudflare Pages** — drag-and-drop the folder, or connect a repo.
- **GitHub Pages** — push the files and enable Pages.
- **Traditional hosting (cPanel / FTP)** — upload everything into the web root (`public_html`).

### One thing to update before launch

The absolute URLs in `index.html` assume the domain **`https://www.doctorbpro.com/`**
(used in the canonical tag, Open Graph image, sitemap, and structured data). If the live
domain is different (e.g. the apex `https://doctorbpro.com/`), search-and-replace
`https://www.doctorbpro.com` across `index.html`, `robots.txt` and `sitemap.xml`.

---

## Contact form

The form lives in the **Contact** section. By default it uses a **mailto fallback**: on submit,
it validates the fields and opens the visitor's email app with a pre-filled message to
`info@doctorbpro.com`. A direct `info@doctorbpro.com` link is also shown for people who prefer
to email manually. This works with zero setup.

### To receive submissions straight to an inbox (recommended for production)

Wire a free form endpoint — e.g. **[Web3Forms](https://web3forms.com)** (no account needed,
just an access key) or **[Formspree](https://formspree.io)**:

1. Get an endpoint URL / access key from the provider.
2. Open `js/main.js` and set the `ENDPOINT` constant near the top of the contact-form section:
   ```js
   var ENDPOINT = "https://api.web3forms.com/submit"; // or your Formspree URL
   ```
   (For Web3Forms, also add a hidden `access_key` field to the form in `index.html`, or include
   it in the JSON payload.)
3. That's it — submissions will POST as JSON and land in the configured inbox. The mailto
   fallback automatically stops being used once `ENDPOINT` is set.

The form already includes a hidden honeypot field to reduce spam.

---

## Media notes

- `media/hero-loop.mp4` (~3 MB, muted, autoplay loop) is the hero background — trimmed to the
  facility footage only.
- `media/brand-film.mp4` (~7 MB, with sound) is the playable film in the **Our Facility** section.
- Both are compressed from the original `…HD-1080p….mp4` (38 MB). The original is kept as a
  source file and is **not** loaded by the page — you can delete it to slim the deploy.

---

## Accessibility & performance

- Responsive from ~320 px phones up to large desktops.
- Keyboard-operable nav with a focus-trapped mobile menu; respects `prefers-reduced-motion`.
- Non-blocking fonts, preloaded hero poster, lazy-loaded below-the-fold images.
- Semantic HTML, labelled form fields, and Organization structured data for SEO.

---

## Legal / company

Doctor B Natural Ltd · Company No. **16743119**
44 Rosenthorpe Road, London, England, SE15 3EG
`info@doctorbpro.com`

The footer carries the standard supplement disclaimer ("These statements have not been
evaluated by the Food and Drug Administration…"). Keep it on the live site.
