279 lines
13 KiB
TypeScript
Executable File
279 lines
13 KiB
TypeScript
Executable File
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 } from "lucide-react"
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
<SiteHeader />
|
|
|
|
<main className="flex-1">
|
|
{/* Hero Section */}
|
|
<section className="relative h-[90vh] min-h-[600px] flex items-center justify-center overflow-hidden bg-deep-navy">
|
|
{/* Background Image with Overlay */}
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/icf-above-grade-walls-construction.jpg"
|
|
alt="ICF Construction"
|
|
className="w-full h-full object-cover opacity-40"
|
|
/>
|
|
<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-7xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
|
Building the <span className="text-accent">Future</span>
|
|
<br />
|
|
with Concrete Precision
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
|
|
Specializing in Insulating Concrete Form (ICF) installations, structural flooring, and radiant heating
|
|
systems.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300">
|
|
<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 Quote
|
|
</Button>
|
|
</Link>
|
|
<Link href="/services">
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-lg px-8 h-14 bg-transparent"
|
|
>
|
|
Our Services
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Intro Section */}
|
|
<section className="py-40 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 className="text-4xl font-bold text-deep-navy mb-6">
|
|
High Performance <span className="text-primary-blue">Structures</span>
|
|
</h2>
|
|
<div className="space-y-6 text-lg text-gray-800 leading-relaxed">
|
|
<p>
|
|
With over 250,000 wall face sq ft of ICFs installed over the course of 10 years, we are highly
|
|
capable and able to take on almost any project, from a simple cabin foundation to a multi-level
|
|
commercial structure.
|
|
</p>
|
|
<p>
|
|
We know time is a valuable commodity and we aim to complete our installations as quick as we can
|
|
while maintaining our high level of quality. Our seasoned ICF installation team allows HPS to get in
|
|
and get the job done on time and on budget.
|
|
</p>
|
|
<div className="flex items-center gap-4 pt-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-5xl font-bold text-deep-navy">20+</span>
|
|
<span className="text-sm text-gray-700 font-semibold uppercase tracking-wider">
|
|
Years Experience
|
|
</span>
|
|
</div>
|
|
<div className="w-px h-12 bg-gray-300" />
|
|
<div className="flex flex-col">
|
|
<span className="text-5xl font-bold text-deep-navy">250k+</span>
|
|
<span className="text-sm text-gray-700 font-semibold uppercase tracking-wider">
|
|
Sq Ft Installed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="absolute -inset-4 bg-cyan-accent/20 rounded-lg transform rotate-3" />
|
|
<img
|
|
src="/icf-foundation-construction.jpg"
|
|
alt="ICF Foundation"
|
|
className="relative rounded-lg shadow-2xl w-full object-cover aspect-video"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Grid */}
|
|
<section className="py-24 bg-deep-navy text-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
|
|
<div className="max-w-2xl">
|
|
<h2 className="text-sm font-bold text-cyan-accent uppercase tracking-widest mb-4">Our Expertise</h2>
|
|
<h3 className="text-4xl md:text-5xl font-bold leading-tight">
|
|
Comprehensive concrete and construction solutions.
|
|
</h3>
|
|
</div>
|
|
<Link href="/services">
|
|
<Button
|
|
variant="outline"
|
|
className="border-white/20 text-white hover:bg-white hover:text-deep-navy rounded-none px-8 bg-transparent"
|
|
>
|
|
View All Services
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-white/10">
|
|
{[
|
|
{
|
|
icon: Layers,
|
|
title: "Footers & Foundations",
|
|
description:
|
|
"Start your build off right with a solid foundation. An ICF basement provides a comfortable and energy-efficient environment.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Radiant Heating",
|
|
description:
|
|
"Say goodbye to cold floors. Radiant heating systems provide consistent, efficient heat from the floor up.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "ICF Above-Grade Walls",
|
|
description:
|
|
"Poured walls significantly raise the R-value of your structure compared to traditional builds, ensuring energy efficiency.",
|
|
},
|
|
{
|
|
icon: GraduationCap,
|
|
title: "Training & Consulting",
|
|
description:
|
|
"Want to install your own ICFs? We provide hands-on training and expert guidance for your first project.",
|
|
},
|
|
{
|
|
icon: Hammer,
|
|
title: "Structural Flooring",
|
|
description:
|
|
"Easily install structural concrete flooring and decking for added strength, soundproofing, and fire protection.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Safe Rooms & Shelters",
|
|
description:
|
|
"ICFs provide superior protection from fires, tornadoes, and other natural disasters for your peace of mind.",
|
|
},
|
|
].map((service, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative p-8 border-r border-b border-white/10 hover:bg-white/5 transition-colors duration-300 flex flex-col h-full"
|
|
>
|
|
<div className="mb-8">
|
|
<service.icon className="h-10 w-10 text-cyan-accent stroke-[1.5]" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 group-hover:text-cyan-accent transition-colors">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed mb-8 flex-grow">{service.description}</p>
|
|
<div className="flex items-center text-sm font-bold text-white group-hover:text-cyan-accent transition-colors mt-auto">
|
|
LEARN MORE <ArrowRight className="ml-2 h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Videos Section */}
|
|
<section className="py-24 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-deep-navy mb-4">See Us in Action</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Watch our team at work and learn more about the ICF construction process.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{["eQAEIYZN4Xs", "xQ51P5oZBuw", "MXCVrOM3kBk"].map((videoId, index) => (
|
|
<div key={index} className="aspect-video rounded-xl overflow-hidden shadow-lg bg-gray-100">
|
|
<iframe
|
|
width="100%"
|
|
height="100%"
|
|
src={`https://www.youtube.com/embed/${videoId}`}
|
|
title={`YouTube video player ${index + 1}`}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="border-0"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Choose Us / CTA */}
|
|
<section className="py-24 bg-deep-navy text-white relative overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute right-0 top-0 w-1/2 h-full bg-accent blur-[100px] transform translate-x-1/2" />
|
|
<div className="absolute left-0 bottom-0 w-1/2 h-full bg-primary blur-[100px] transform -translate-x-1/2" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 className="text-4xl font-bold mb-6">Why Choose HPS?</h2>
|
|
<div className="space-y-6">
|
|
{[
|
|
"Over 20 years of specialized ICF experience",
|
|
"Certified and trained installation crews",
|
|
"Commitment to energy efficiency and durability",
|
|
"On-time and on-budget project delivery",
|
|
"Comprehensive support from design to completion",
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<div className="bg-accent/20 p-2 rounded-full">
|
|
<CheckCircle2 className="h-5 w-5 text-accent" />
|
|
</div>
|
|
<span className="text-lg text-gray-200">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-10">
|
|
<Link href="/contact">
|
|
<Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8">
|
|
Start Your Project
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
|
|
<h3 className="text-2xl font-bold mb-4">Ready to build better?</h3>
|
|
<p className="text-gray-300 mb-6">
|
|
Contact us today for a consultation or quote on your next residential or commercial project.
|
|
</p>
|
|
<form className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Name"
|
|
className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="Email"
|
|
className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
/>
|
|
</div>
|
|
<textarea
|
|
placeholder="Project Details"
|
|
rows={4}
|
|
className="w-full bg-white/10 border border-white/20 rounded-md px-4 py-3 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-accent"
|
|
/>
|
|
<Button className="w-full bg-primary hover:bg-primary-dark text-white font-bold">Send Message</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<SiteFooter />
|
|
</div>
|
|
)
|
|
}
|