# Universal Insurance Brokers — Custom Website

A bespoke, modern website built for Universal Insurance Brokers, designed to be deployed to **www.universalinsurancebroker.ai** (or any host you choose). Built with HTML, CSS, and vanilla JavaScript — no frameworks, no build step, no dependencies. Just open the files and they work.

---

## What's inside

```
uib-site/
├── index.html              ← Homepage
├── quote.html              ← Custom multi-step quote form (auto, home, commercial, health)
├── services.html           ← Coverage detail page
├── dealer-ventures.html    ← B2B dealership partnership page
├── about.html              ← Company story
├── contact.html            ← Contact form + dual office details
├── css/
│   ├── styles.css          ← Main stylesheet (shared by all pages)
│   ├── quote.css           ← Quote form styles
│   └── inner.css           ← Inner-page styles (services, dealer, about, contact)
├── js/
│   ├── main.js             ← Cursor, scroll reveals, sticky header, mobile menu
│   └── quote.js            ← Multi-step form logic, validation, mailto submission
└── images/
    ├── logo.png            ← Your transparent logo
    ├── carrier-*.png       ← Clean text-based carrier logos (Progressive, GEICO, etc.)
    └── photo-*.jpg         ← Hero/section photos
```

## Design highlights

- **Custom orbit animation** on homepage — your logo's "C" swoosh becomes a living animated centerpiece with services orbiting around it
- **Editorial typography** — Fraunces (display) + Inter (body) + JetBrains Mono (mono accents)
- **Custom cursor** with magnetic hover effects on interactive elements
- **Multi-step custom quote form** with conditional fields per coverage type, modeled after your existing home-owner intake form
- **Parallax dealer-ventures showcase** with cinematic full-bleed photography
- **Editorial line sections** on services page with rotating orbital rings around each icon
- **Brand-aligned palette** extracted directly from your logo (navy, royal blue, cream/paper)

## Carrier logos — important

The carrier logos in `images/carrier-*.png` are **clean text wordmarks** that I created to keep things IP-safe. Original Progressive and GEICO logos include their mascot characters (Flo and the Gecko), which are protected trademarks. As an appointed agent, you can legitimately display the carrier wordmarks but NOT the mascots, so I've used clean text-based versions.

If you have official "Authorized Agent" logo packs from any of these carriers, you can drop them into the `images/` folder with the same filenames and they'll appear on the site automatically.

## Quote form submissions

The quote form and contact form use **`mailto:`** to send submissions to your address (`universalinsurancebroker@gmail.com`). When a visitor submits, their mail app opens with a pre-filled email containing all their info.

**This works out of the box** but has a small UX drawback: the user has to click "Send" in their mail app. If you want submissions to land directly in your inbox without that step, you can later upgrade to a service like:
- **Formspree** (free tier, just change the form `action` to your Formspree endpoint)
- **Web3Forms** (free, no signup needed)
- **Netlify Forms** (free if you deploy to Netlify)

Tell me when you're ready and I'll wire it up.

## How to deploy (Phase 2–4)

### Step 1: Register the domain `universalinsurancebroker.ai`

I recommend **Porkbun** (~$60/yr for `.ai`) or **Namecheap**. Avoid GoDaddy as discussed.

1. Go to https://porkbun.com
2. Search for `universalinsurancebroker.ai`
3. Buy it. (.ai domains renew yearly.)

### Step 2: Deploy to Cloudflare Pages (free hosting + free SSL + free CDN)

1. Sign up at https://pages.cloudflare.com (free, no credit card needed)
2. Click **"Create a project"** → **"Upload assets"**
3. Drag-and-drop this entire `uib-site` folder (or the `uib-site.zip` archive)
4. Name your project `uib-site` (or anything you want)
5. Click **"Deploy"** — it'll be live within 60 seconds on a `*.pages.dev` URL

### Step 3: Connect your domain

In Cloudflare Pages → your project → **Custom domains** → Add `www.universalinsurancebroker.ai`. Cloudflare will give you DNS records to add at Porkbun. Add them. Done.

### Step 4: Test it

- Visit https://www.universalinsurancebroker.ai
- Submit a test quote (it should open your mail app)
- Check all the navigation links work

---

## Local testing

To preview the site locally before deploying:

```bash
cd uib-site
python3 -m http.server 8000
# Then open http://localhost:8000 in your browser
```

Or simply double-click `index.html` to open it in your browser.

---

## Brand & content

- **Phone:** (239) 204-2208
- **Email:** universalinsurancebroker@gmail.com
- **Offices:** 3200 N Federal Hwy Suite 224, Boca Raton, FL 33431 · 111 Lee Blvd, Lehigh Acres, FL 33936
- **Hours:** Mon–Sat 9:30 AM – 7:00 PM EST
- **Social:** Facebook, Instagram, Twitter/X (all linked in footer)

All content is editable directly in the `.html` files — open them in any text editor (VS Code, Notepad++, even TextEdit) and search for the text you want to change.

---

Built with ☕ and care. Deploy when ready.