01
Navigation
Fixed header with desktop navigation, mobile drawer, active route indication, theme control, and forward-navigation scroll reset.
Home, Design & Construction
Solstice Grid — Solar + Home Battery Installer
Solstice Grid is a premium, frontend-only website for a fictional solar, home battery, EV integration, and electrical-upgrade installer serving San Diego County, California.
Home, design, and construction websitearchitecthome
Visit live website ↗solstice-grid.vercel.app
Project type
Home, design, and construction website
Industry
Home, Design & Construction
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Solstice Grid — Solar + Home Battery Installer experience
Solstice Grid is a premium, frontend-only website for a fictional solar, home battery, EV integration, and electrical-upgrade installer serving San Diego County, California. It is designed to help homeowners understand a considered energy-system process and request a site-specific quote without relying on fabricated trust signals or misleading performance claims.
The experience uses a Sun-Shadow Modernism design system: California architectural restraint, Solar Signal yellow, canyon-green shadows, spacious editorial typography, and a signature animated power-flow narrative that explains how sunlight moves through panels, inverter, battery, home, and grid.
The website provides a complete public-facing service system rather than a single landing page.
Experience details
Key features and interaction highlights
02
Homepage
Twelve varied editorial sections covering positioning, services, flagship battery offer, featured case study, pricing comparison, process, resources, service area, and conversion.
03
Signature motion
GSAP ScrollTrigger power-flow story depicts Sun → Panels → Inverter → Battery → Home → Grid on desktop. It becomes a clear unpinned sequence on tablet/mobile and remains legible with reduced motion.
04
Themes
Light and dark systems use centralized semantic CSS variables. Header, footer, cards, forms, detail screens, and overlays inherit from the same tokens.
05
Quote journey
Accessible client-side form validation, loading state, error message, and confirmation state. It intentionally does not send data to an external service in this static build.
06
Responsive behavior
Mobile-first recomposition for the hero, services, data band, power path, project rows, form, and footer. Styles guard against horizontal overflow.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSGSAPWouterNode.js
Project FAQ
Questions about Solstice Grid — Solar + Home Battery Installer
What is Solstice Grid — Solar + Home Battery Installer?
Solstice Grid is a premium, frontend-only website for a fictional solar, home battery, EV integration, and electrical-upgrade installer serving San Diego County, California.
Who is the Solstice Grid — Solar + Home Battery Installer website designed for?
Homeowners and project stakeholders comparing services, materials, capabilities, and outcomes.
What does the Solstice Grid — Solar + Home Battery Installer experience include?
The documented experience includes navigation, homepage, signature motion, themes. The live website shows the complete interface and interaction flow.
Can I view Solstice Grid — Solar + Home Battery Installer online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
