01
Visual identity
Clay Olive Atelier direction with Newsreader/Inter typography, warm FBF8F1 paper, clay surfaces, restrained Hearth Olive emphasis, architectural chamfered panels, and the circuit-rule motif.
Home, Design & Construction
Hearthline Electrical
Hearthline Electrical is a complete static demonstration site for a premium smart-home electrical business serving clients planning lighting, EV charging, electrical safety, consumer-unit work, smart controls, kitchen coordination, home-office upgrades, and outdoor power.
Home, design, and construction websitearchitectdoorhomekitchenlighting
Visit live website ↗smart-home-electrical-v2.vercel.app
Project type
Home, design, and construction website
Industry
Home, Design & Construction
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Hearthline Electrical experience
Hearthline Electrical is a complete static demonstration site for a premium smart-home electrical business serving clients planning lighting, EV charging, electrical safety, consumer-unit work, smart controls, kitchen coordination, home-office upgrades, and outdoor power. The experience is designed around a primary conversion: preparing a short, reversible electrician or installation-quote request.
The brand is fictional. Project studies, service areas, qualifications language, contact details, and operational messaging are illustrative interface content rather than claims about a live business. The site deliberately contains no invented customer reviews, ratings, awards, testimonials, or approval claims.
Visual identity | Clay Olive Atelier direction with Newsreader/Inter typography, warm FBF8F1 paper, clay surfaces, restrained Hearth Olive emphasis, architectural chamfered panels, and the circuit-rule motif.
Experience details
Key features and interaction highlights
02
Conversion
Guided three-step booking request with validation, preserved inputs, back/reset, review, loading, success, and simulated recoverable error states.
03
Core interactions
Pointer- and keyboard-accessible before/after comparison, service selector, qualification/practice selector, EV/load estimators, project filtering, FAQ accordions, service-area selector, light/dark mode, mobile.
04
Content
Eight services, five project studies, eight FAQs, eight illustrative service areas, review transparency content, safety guidance, and detailed dynamic service/project pages.
05
Motion
Framer Motion-based media reveal, comparison interaction, selected state transitions, proof ledger shifts, accordion animation, layout-aware project filtering, and reduced-motion safeguards.
06
Architecture
A shared BookingProvider preserves the booking draft. Content and asset mappings live in client/src/lib/site-data.ts; a live CRM/scheduling adapter can replace the static submit simulation without changing the UI.
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 CSSFramer MotionWoutershadcn/uiRadix UI
Project FAQ
Questions about Hearthline Electrical
What is Hearthline Electrical?
Hearthline Electrical is a complete static demonstration site for a premium smart-home electrical business serving clients planning lighting, EV charging, electrical safety, consumer-unit work, smart controls, kitchen coordination, home-office upgrades, and outdoor power.
Who is the Hearthline Electrical website designed for?
Homeowners and project stakeholders comparing services, materials, capabilities, and outcomes.
What does the Hearthline Electrical experience include?
The documented experience includes visual identity, conversion, core interactions, content. The live website shows the complete interface and interaction flow.
Can I view Hearthline Electrical online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
