Templates

Ready-to-use page layouts for common Valley Solar web properties. Copy a template folder, update the content, and deploy.

Browse all templates in the live gallery →

Product & Service Pages

Page — Commercial Solar

Full-featured product page for commercial solar installations. Includes hero section, features, benefits, pricing tiers, and CTA.

Use when: Promoting commercial solar services or selling B2B solar packages.

Open live template →

Page — Time-of-Use Battery

Product page for battery storage systems. Features hero, benefits grid, storage strategy explainer, and comparison table.

Use when: Marketing residential battery storage or energy independence products.

Open live template →

Page — Backup Generators

Landing page for generator backup services. Includes hero, value proposition, feature callouts, and service CTA band.

Use when: Highlighting backup power solutions or emergency preparedness services.

Open live template →

Trust & Brand Pages

Page — Why Valley Solar

Brand story and value proposition page. Includes hero with navigation, trust stats, 7-step process section, testimonials, and CTAs.

Use when: Building your homepage or a comprehensive brand overview page.

Open live template →

Page — Our Process

Trust-building page with glass hero, 7-step installation process, customer reviews band, and final CTA.

Use when: Explaining your methodology or showing your process to prospective customers.

Open live template →

Support & Help Pages

Page — Solar & Storage Support

Support hub for solar and battery customers. Features expandable FAQ, troubleshooting guides, and contact CTA.

Use when: Providing customer support resources and technical documentation.

Open live template →

Page — Commercial Support

Support page tailored for commercial clients. Includes maintenance plans, service options, and B2B contact form.

Use when: Supporting commercial solar customers with specialized services.

Open live template →

Support — Remove & Reinstall

Specialized support guide for system removal and reinstallation procedures. Includes step-by-step instructions and safety guidelines.

Use when: Documenting complex installation procedures or maintenance workflows.

Open live template →

How to Use Templates

  1. Copy the template folder: templates/[template-slug]/
  2. Navigate to index.html in your chosen template
  3. Update the page title, content, and images
  4. Customize colors and fonts using CSS custom properties (tokens)
  5. Deploy or publish the page

Customization

Templates use the design system's tokens and components. You can:

Do not: hardcode colors, fonts, or spacing. Always use tokens to maintain consistency.