271 lines
11 KiB
TypeScript
Executable File
271 lines
11 KiB
TypeScript
Executable File
"use client"
|
|
|
|
import { SiteHeader } from "@/components/site-header"
|
|
import { SiteFooter } from "@/components/site-footer"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
import { ArrowRight, CheckCircle2, Shield, Zap, Hammer, GraduationCap, Layers, ChevronRight } from "lucide-react"
|
|
import { useState, useEffect } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export default function ServicesPage() {
|
|
const [activeSection, setActiveSection] = useState("foundations")
|
|
|
|
const services = [
|
|
{
|
|
id: "foundations",
|
|
title: "Footers & Foundations",
|
|
icon: Layers,
|
|
description:
|
|
"Start your build off right with a solid foundation. An ICF basement provides a comfortable and energy-efficient environment - even on cold Colorado winter nights.",
|
|
details: [
|
|
"Superior insulation values (R-22+)",
|
|
"Waterproofing and drainage solutions",
|
|
"Precision leveling and layout",
|
|
"Reinforced concrete core strength",
|
|
],
|
|
image: "/icf-foundation-construction.jpg",
|
|
},
|
|
{
|
|
id: "heating",
|
|
title: "Radiant Heating Systems",
|
|
icon: Zap,
|
|
description:
|
|
"Say goodbye to cold floors and fluctuating heat. Radiant heating systems provide consistent heat from the floor up keeping your energy bills down. Paired with a concrete structural floor, you can have the best of both worlds.",
|
|
details: [
|
|
"Even heat distribution",
|
|
"Reduced energy costs (up to 30%)",
|
|
"Silent operation",
|
|
"Allergen-free heating method",
|
|
],
|
|
image: "/radiant-floor-heating-installation.jpg",
|
|
},
|
|
{
|
|
id: "walls",
|
|
title: "ICF Above-Grade Walls",
|
|
icon: Shield,
|
|
description:
|
|
"ICFs aren't only for foundations. Poured walls will significantly raise the R value of your structure as compared to a traditional build. It also provides a high level of protection from fires and the ever-present Colorado winds.",
|
|
details: [
|
|
"Sound dampening (STC 50+)",
|
|
"Fire resistance (up to 4 hours)",
|
|
"Wind resistance (up to 250mph)",
|
|
"Mold and pest resistance",
|
|
],
|
|
image: "/icf-above-grade-walls-construction.jpg",
|
|
},
|
|
{
|
|
id: "training",
|
|
title: "Training and Consulting",
|
|
icon: GraduationCap,
|
|
description:
|
|
"Want to install your own ICFs but need a little guidance for the first project? With over 20 years experience building with ICFs, the installers at High Performance Structures can provide you with a number of options to suit your needs.",
|
|
details: [
|
|
"On-site installation training",
|
|
"Project planning and estimation",
|
|
"Tool and equipment guidance",
|
|
"Quality assurance checks",
|
|
],
|
|
image: "/construction-training-consultation.jpg",
|
|
},
|
|
{
|
|
id: "flooring",
|
|
title: "Structural Flooring",
|
|
icon: Hammer,
|
|
description:
|
|
"With the use of LiteDeck, we can easily install structural concrete flooring and decking for added strength and protection. Don't like the look of concrete floors? Not a problem as the floors can be stamped, stained or covered with your choice of flooring.",
|
|
details: [
|
|
"Long spans without columns",
|
|
"Integrated soundproofing",
|
|
"High load-bearing capacity",
|
|
"Compatible with radiant heating",
|
|
],
|
|
image: "/concrete-structural-flooring.jpg",
|
|
},
|
|
{
|
|
id: "shelters",
|
|
title: "Safe Rooms & Shelters",
|
|
icon: Shield,
|
|
description:
|
|
"Whether it's to protect your family or your valuables in case of a fire, tornado or other natural disaster, ICFs provide superior protection.",
|
|
details: [
|
|
"FEMA-grade protection",
|
|
"Integrated into home design",
|
|
"Ballistic protection",
|
|
"Emergency supply storage",
|
|
],
|
|
image: "/safe-room-shelter-construction.jpg",
|
|
},
|
|
]
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const sections = services.map((s) => document.getElementById(s.id))
|
|
const scrollPosition = window.scrollY + 200 // Offset for header
|
|
|
|
for (const section of sections) {
|
|
if (
|
|
section &&
|
|
section.offsetTop <= scrollPosition &&
|
|
section.offsetTop + section.offsetHeight > scrollPosition
|
|
) {
|
|
setActiveSection(section.id)
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, []) // Removed services from dependencies
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id)
|
|
if (element) {
|
|
const offset = 120 // Increased offset to account for header height + spacing
|
|
const bodyRect = document.body.getBoundingClientRect().top
|
|
const elementRect = element.getBoundingClientRect().top
|
|
const elementPosition = elementRect - bodyRect
|
|
const offsetPosition = elementPosition - offset
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: "smooth",
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
<SiteHeader />
|
|
|
|
<main className="flex-1">
|
|
{/* Hero Section */}
|
|
<section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden bg-deep-navy">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/icf-above-grade-walls-construction.jpg"
|
|
alt="HPS Services"
|
|
className="w-full h-full object-cover opacity-30"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-deep-navy via-deep-navy/80 to-transparent" />
|
|
</div>
|
|
|
|
<div className="relative z-10 container mx-auto px-4 text-center">
|
|
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
|
Our <span className="text-accent">Services</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-300 max-w-3xl mx-auto font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
|
|
Comprehensive concrete and construction solutions tailored to your project's needs.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="container mx-auto px-4 py-16">
|
|
<div className="flex flex-col lg:flex-row gap-12">
|
|
{/* Sticky Sidebar Navigation */}
|
|
<aside className="hidden lg:block w-1/4 relative">
|
|
<div className="sticky top-32 space-y-2">
|
|
<h3 className="text-lg font-bold text-deep-navy mb-4 px-4">Service Menu</h3>
|
|
<nav className="space-y-1">
|
|
{services.map((service) => (
|
|
<button
|
|
key={service.id}
|
|
onClick={() => scrollToSection(service.id)}
|
|
className={cn(
|
|
"w-full text-left px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200 flex items-center justify-between group",
|
|
activeSection === service.id
|
|
? "bg-deep-navy text-white shadow-md"
|
|
: "text-gray-600 hover:bg-gray-100 hover:text-deep-navy",
|
|
)}
|
|
>
|
|
{service.title}
|
|
{activeSection === service.id && <ChevronRight className="h-4 w-4 text-accent" />}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
<div className="mt-8 p-6 bg-gray-50 rounded-xl border border-gray-200">
|
|
<h4 className="font-bold text-deep-navy mb-2">Need a Quote?</h4>
|
|
<p className="text-sm text-gray-600 mb-4">Contact us today to discuss your project requirements.</p>
|
|
<Link href="/contact">
|
|
<Button className="w-full bg-accent hover:bg-accent/90 text-deep-navy font-bold">Contact Us</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<div className="lg:w-3/4 space-y-24">
|
|
{services.map((service, index) => (
|
|
<section key={service.id} id={service.id} className="scroll-mt-32 group">
|
|
<div className="grid grid-cols-1 gap-8">
|
|
<div className="relative overflow-hidden rounded-2xl shadow-xl aspect-video">
|
|
<div className="absolute inset-0 bg-deep-navy/10 group-hover:bg-transparent transition-colors duration-500" />
|
|
<img
|
|
src={service.image || "/placeholder.svg"}
|
|
alt={service.title}
|
|
className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-3 bg-accent/10 rounded-xl">
|
|
<service.icon className="h-8 w-8 text-deep-navy" />
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-deep-navy">{service.title}</h2>
|
|
</div>
|
|
|
|
<p className="text-lg text-gray-600 leading-relaxed">{service.description}</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
|
|
{service.details.map((detail, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-3 bg-gray-50 p-3 rounded-lg border border-gray-100"
|
|
>
|
|
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0" />
|
|
<span className="text-gray-700 font-medium">{detail}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<Link href="/contact">
|
|
<Button
|
|
variant="outline"
|
|
className="border-deep-navy text-deep-navy hover:bg-deep-navy hover:text-white font-bold bg-transparent"
|
|
>
|
|
Request {service.title} <ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{index !== services.length - 1 && <div className="h-px bg-gray-200 mt-24" />}
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom CTA */}
|
|
<section className="py-20 bg-deep-navy text-white">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Project?</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
Our team of experts is ready to help you build with confidence and precision.
|
|
</p>
|
|
<Link href="/contact">
|
|
<Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8 h-14">
|
|
Get a Free Quote
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
</div>
|
|
)
|
|
}
|