# Bright View Energy: Website Mockups

Five standalone website directions for Bright View Energy. All five share the 2026 logo, the brand palette and the eight portfolio projects. Each one has its own layout, typography, voice and target customer.

## How to view
Double-click **`index.html`** in this folder to open the gallery. Click a direction to open its homepage, then use that site's navigation to reach every page (home, projects, project detail, about, services / how it works, contact). Nothing needs installing. You need an internet connection only for the Google Fonts; without one, the pages fall back to system fonts.

## The five directions

| # | Direction | Target customer | Typography | Tone | Signature features |
|---|---|---|---|---|---|
| 01 | **Community Steward** | Today's core customers: church and nonprofit boards, affordable housing, small commercial owners, municipal utilities | Alice headlines, Montserrat body (style guide Option 1) | Warm, plain-spoken, community-focused | Centered layouts on Seashell, rounded cards, church-roofline hero illustration, "questions your board will ask" FAQ, kW pills |
| 02 | **Clean Utility** | Commercial and industrial owners, developers, utilities, municipalities | Montserrat headings, Manrope body (no Alice) | Crisp, confident, numbers-first | Visible 12-column grid, sharp corners, stat-panel hero, PPA "term sheet", filterable projects with kW bars, separate How It Works timeline page, "For developers" block |
| 03 | **Golden Hour** | Schools, universities, hospitals, corporate campuses | Fraunces display, Montserrat body (no Alice) | Aspirational, outcome-led | Dark Teal with a sunrise glow echoing the logo, full-screen hero, scroll-snap project strip, tall photo cards, fade-and-rise motion (off when reduced motion is set) |
| 04 | **Rooted in Place** | Multi-site owners: housing authorities, school districts, faith networks, retail and logistics portfolios | Alice headlines, Montserrat subheads and body (style guide Option 3) | Practical, partnership-minded ("one partner for every site") | East Coast SVG map with Massachusetts project pins sized by kW, split-screen projects page with linked map and cards, locator maps, multi-site rollout services |
| 05 | **Field Notes** | Foundations, impact investors, large nonprofits | Newsreader, Montserrat labels (no Alice) | Thoughtful, story-driven, editorial | Asymmetric magazine layout, numbered chapters, project "table of contents" with sorting, feature-article project pages, author-profile About |

## Structure
- `shared/brand.css`: every color (`--bve-*`), logo sizing and base buttons. No mockup hard-codes a color.
- `shared/content.js`: the project data, company copy, business model, How It Works steps, ownership models and leadership. All mockups read from it, so a fact corrected here updates all five.
- `shared/logos/`: the five official SVGs, unmodified.
- `shared/photos/`: project photos taken from the portfolio deck (see the caveat below).
- `project.html?id=<slug>` in each mockup is a single detail template filled from `content.js`.
- `screenshots/`: homepage and projects page for each mockup at 1440 px and 375 px, plus the gallery thumbnails.
- `HANDOFF.md` and `_handoff/`: notes and QA scripts for continuing the work in a future session.

## Sources and decisions
- Projects: the portfolio deck (8 projects, 267 kW, all in Massachusetts). The copy never implies projects outside Massachusetts, and it presents the company as growing along the East Coast and able to develop anywhere in the U.S.
- Services and How It Works: the Company Background doc (full financing, PPA at a discount to utility costs, permitting and development, O&M for 10–20 years, buyout option after year 5, storage and EV charging).
- Leadership: the brief and the Cooper Center profile. Field Notes paraphrases Anthony's public-service statement and labels it as a paraphrase.

## ⚠️ Photo caveat
Most images in the portfolio deck are **Google Maps or Street View captures**. They are stand-ins for review only. Replace them with Bright View's own project photography before anything goes public: drop new files into `shared/photos/` with the same filenames.

## Placeholders still to fill
Every placeholder is marked `[PLACEHOLDER: …]` and highlighted in amber on the page.
- **Contact (all mockups):** email, phone, office address
- **About (all mockups):** headshot; additional leadership team members, bios and photos
- **Stats:** states served (02, plus `content.js`); lifetime kWh generated; CO2 avoided; years in business (02)
- **Project detail pages:** a host quote (01, 03, 05); host contact name and title, annual savings, annual kWh produced, in-service date (05); annual production and host savings (02); project story and production figures (03)
- **Services:** savings estimate and site-specific rate (02); storage and EV charging project examples (05)
- **Rooted in Place (04):** project performance and host quote (detail pages); portfolio reporting format and cadence, and assessment timeline (services)

## Open questions for the team
1. Can we supply real project photos?
2. Contact email, phone and office address for the site?
3. Who besides Anthony should appear on About Us?
4. Which East Coast states should the site name as target markets?
5. Any lifetime energy, CO2 or savings figures, or client quotes, to use?