Solar & EV Charger Installer Website Template for Electricians

Build a complete, responsive website for an electrician who specializes in home solar, battery storage and EV charger installation. The visitors are homeowners who are curious but not yet sure what they need. The main goal of the site is to get them to book a free home assessment. The site should earn that booking by explaining things clearly and honestly, not by pressure. Use the business details below. They are fictional samples: replace them with your own before you build, or keep them to make a demo. BUSINESS DETAILS - Business name: Sunward Electric and Solar - Trade: licensed electrician specializing in residential solar, home batteries and EV chargers - Phone: (555) 012-7785 - Email: [email protected] - Service area: the Clearwater Basin: Clearwater, Ridgefield, Larkspur Hills, Fenwick and Oak Terrace - Hours: Monday to Saturday 8am to 5pm - License and certifications: [LICENSE / CERTIFICATION DETAILS] - Equipment brands, warranties, financing, reviews, installation counts: none supplied HONESTY RULES (follow these exactly) - Never invent savings figures, payback periods, energy production numbers, incentive amounts, tax credit percentages, financing terms, warranty lengths, equipment brands, reviews or installation counts. - Incentives change and vary by location. Where they would be discussed, show a clearly marked placeholder: "[Add current incentives for your state or utility, with a link to the official source]". - Where other details would normally appear, use clearly marked square-bracket placeholders styled so the owner can see they need filling in. - No stock photos and no images presented as real installations. Use illustrations and icons instead (see Visual direction). PAGES Build four pages that share one header, one footer and one stylesheet. 1. Home - Header: the business name as a text logo, links to the four pages, and a "Book a free assessment" button. The phone number appears as a smaller tap-to-call link. On phones, collapse the links into a menu and keep the booking button visible. - Hero: a headline about powering your home and car with energy you control (written naturally, no exaggerated promises), one sentence explaining that every project starts with a free assessment of your home, roof and electrical panel, and two buttons: "Book a free assessment" (primary) and "See how it works" (secondary, scrolls to the process section). - Three service cards: Rooftop solar, Home batteries, EV chargers. Each has an illustration, two sentences and a link to its section on the Solar and batteries page or the EV chargers page. - "Is solar a good fit for your home?": a short checklist of the factors that really matter (roof direction and shade, roof age and condition, your electricity use, your panel's capacity, local rules and incentives), each with one plain sentence. End with "We check all of this in the free assessment." - "How it works": four numbered steps (free home assessment, design and written quote, permits and installation, switch-on and handover). - "Questions people ask": four to five useful questions and answers shown on the page as expandable items, for example "Will solar work on a cloudy day?", "Do I need a battery?", "Can my panel handle an EV charger?". Answer honestly and generally, without numbers you can't support. - Incentives panel with the placeholder from the honesty rules. - Reviews placeholder: "[Add 2 to 3 genuine customer reviews here]". - Booking band with a "Book a free assessment" button. - Footer: business name, phone, email, hours, service area, license placeholder, links to all pages. 2. Solar and batteries - A section for rooftop solar and a section for home batteries, each with an id. For each: how it works in plain English (with a simple diagram showing sun to panels to inverter to home, plus battery and grid), what the assessment checks, and what the customer can expect during installation. - A short "Solar plus battery" section on when pairing them makes sense, written in general terms. - The incentives placeholder. 3. EV chargers - What a home (Level 2) charger is, compared with charging from a standard outlet, explained simply. - What decides the installation: panel capacity, distance from the panel to the parking spot, indoor or outdoor mounting, and whether a panel upgrade is needed. - A short "Getting ready for an EV" checklist. - A booking band. 4. Book an assessment - A friendly booking form: name, email, phone, address or town (a select with the service area towns plus "Other"), "What are you interested in?" (checkboxes: Solar, Battery, EV charger, Not sure yet), "Do you own the home?" (Yes, No), roof type (Asphalt shingle, Metal, Tile, Flat, Not sure), preferred contact time (Morning, Afternoon, Evening), and an optional notes field. Button: "Book my free assessment". - Beside the form: "What happens at the assessment" (we look at your roof, shading and electrical panel, talk through your goals, and follow up with options and a written quote). Don't promise specific timeframes. FORMS - Build complete form markup with labels, required fields and clear client-side validation messages. - Leave the form's submission address as a clearly marked placeholder: action="[FORM ENDPOINT]". If someone submits while the placeholder is still in place, don't navigate away. Show an inline message instead: "This form isn't connected yet. Please call (555) 012-7785 to book." VISUAL DIRECTION - Mood: bright, optimistic, clear and trustworthy. Daylight, not neon. - Colors: off-white #FBFBF7 background, deep forest green #0E3B2E for text and dark sections, sun yellow #F6C343 for highlights and the primary button (with forest green text), soft sky blue #D6EBF5 for panels, and charcoal #1E2522 for body text. Every text and button color pairing must meet WCAG AA contrast. - Type: Outfit (600) for headings and Manrope (400 and 500) for body text, loaded from Google Fonts. - Layout: airy sections, rounded cards (around 16px radius), soft dividers. Use one curved shape somewhere, such as an arc that suggests the sun's path, as a recurring motif. - Imagery: no photos. Use inline SVG illustrations in a friendly flat style: a house with roof panels in the hero, a battery, an EV and charger, and a simple energy-flow diagram. COPY AND TONE - Warm, clear and patient. Explain, don't sell. Assume the reader is smart but new to the topic. - Use "you" and "we". Explain technical terms (inverter, Level 2, kWh) in one line the first time they appear. - Buttons say exactly what happens: "Book a free assessment", "Book my free assessment", "Call (555) 012-7785". TECHNICAL REQUIREMENTS - Plain HTML, one CSS file and a small amount of vanilla JavaScript (menu toggle, expandable questions, form handling). No frameworks and no build step. Use the native details and summary elements for the expandable questions so the answers are in the page. - One HTML file per page. All pages share the same header and footer markup. - Semantic HTML: header, nav, main and footer landmarks, one h1 per page, and a logical h2/h3 order. - Phone numbers are tel: links. Every interactive element has a visible keyboard focus style. - Responsive from 320px wide upward. Check the layout at phone, tablet and desktop widths. - Give each page a unique title tag and meta description, for example "Solar, Battery and EV Charger Installation | Sunward Electric and Solar". - Respect prefers-reduced-motion and keep any animation subtle. - Keep it fast: no large libraries, no autoplaying media, and width and height set on any images added later.