249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { CheckCircle, Shield, MessageSquare, Home } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const handleContactSubmit = (email: string) => {
|
|
console.log('Contact form submitted:', email);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Stemple Electric"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
button={{
|
|
text: "Call Now",
|
|
href: "tel:+13075551234"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="STEMPLE ELECTRIC"
|
|
description="Residential & light commercial electrical services across Wyoming. Clean work, clear pricing, and fast scheduling."
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+13075551234" },
|
|
{ text: "Get Free Estimate", href: "/contact" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=1",
|
|
imageAlt: "Professional electrician at electrical panel"
|
|
}
|
|
]}
|
|
autoplayDelay={3000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
title="Electrical Services"
|
|
description="Complete electrical solutions for residential and light commercial needs across Wyoming."
|
|
tag="What We Offer"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Panel Upgrades & Breaker Replacement",
|
|
description: "Modern, safe electrical system updates for your home or business.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/electrician-using-tablet-digital-panel-control-electrical-system-analysis_169016-68336.jpg?_wi=1",
|
|
imageAlt: "Electrical panel upgrade"
|
|
},
|
|
{
|
|
title: "Lighting Installation",
|
|
description: "Indoor and outdoor lighting solutions that brighten your space.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-embroidered-shirt_23-2149394271.jpg?_wi=1",
|
|
imageAlt: "Modern lighting installation"
|
|
},
|
|
{
|
|
title: "EV Charger Installation",
|
|
description: "Complete electric vehicle charging station setup and safety inspection.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-view-man-plugging-charger-into-electric-car-charging-port_1268-21379.jpg?_wi=1",
|
|
imageAlt: "EV charger installation"
|
|
},
|
|
{
|
|
title: "Troubleshooting & Repairs",
|
|
description: "Quick diagnosis and reliable repairs for electrical problems.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=1",
|
|
imageAlt: "Electrical repair work"
|
|
},
|
|
{
|
|
title: "Outlets, Switches & Ceiling Fans",
|
|
description: "Safe installation and upgrades for all outlet and switch needs.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hands-electrician-installing-electrical-outlet-new-house-assembly-electrical-network-room-installation-electrical-network_166373-2204.jpg",
|
|
imageAlt: "Electrical outlets installation"
|
|
},
|
|
{
|
|
title: "New Construction & Remodels",
|
|
description: "Full electrical wiring for new builds and renovation projects.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=2",
|
|
imageAlt: "Construction electrical work"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Why Stemple Electric"
|
|
description="We believe in honest service, professional craftsmanship, and clear communication. Every job is done right, every time."
|
|
tag="Our Approach"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
bulletPoints={[
|
|
{
|
|
title: "Straight Answers",
|
|
description: "No runaround, no upsell. We explain the problem and solution clearly.",
|
|
icon: CheckCircle
|
|
},
|
|
{
|
|
title: "Code-Compliant Work",
|
|
description: "Clean, professional craftsmanship that meets all safety and electrical codes.",
|
|
icon: Shield
|
|
},
|
|
{
|
|
title: "Text Updates & Easy Scheduling",
|
|
description: "Stay informed with real-time updates. Scheduling is simple and flexible.",
|
|
icon: MessageSquare
|
|
},
|
|
{
|
|
title: "Respectful Service",
|
|
description: "We treat your home and business with the utmost care and professionalism.",
|
|
icon: Home
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=2"
|
|
imageAlt="Professional electrician"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="service-area" data-section="service-area">
|
|
<SocialProofOne
|
|
title="Service Areas"
|
|
description="We proudly serve communities throughout Wyoming with the same high-quality service."
|
|
tag="Serving Wyoming"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Cheyenne", "Casper", "Laramie", "Gillette", "Sheridan", "Rock Springs", "Powder River", "Rawlins"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real feedback from homeowners and business owners we've served across Wyoming."
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "James Mitchell",
|
|
role: "Homeowner",
|
|
company: "Cheyenne, WY",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",
|
|
imageAlt: "James Mitchell"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Sarah Anderson",
|
|
role: "Property Manager",
|
|
company: "Casper, WY",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",
|
|
imageAlt: "Sarah Anderson"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Tom Rodriguez",
|
|
role: "Business Owner",
|
|
company: "Laramie, WY",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",
|
|
imageAlt: "Tom Rodriguez"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Linda Chen",
|
|
role: "Homeowner",
|
|
company: "Gillette, WY",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",
|
|
imageAlt: "Linda Chen"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta-band" data-section="cta-band">
|
|
<ContactSplit
|
|
tag="Ready to Get Started?"
|
|
title="Need an electrician this week?"
|
|
description="Don't let electrical issues wait. Contact Stemple Electric for fast, reliable service."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=3"
|
|
imageAlt="Professional electrician at work"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Free Estimate"
|
|
termsText="We respect your privacy. We'll only contact you about your electrical service request."
|
|
onSubmit={handleContactSubmit}
|
|
/>
|
|
</div>
|
|
|
|
<FooterLogoReveal
|
|
logoText="STEMPLE ELECTRIC"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#"
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#"
|
|
}}
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
} |