2025-11-21 12:39:35 -07:00

105 lines
4.3 KiB
TypeScript
Executable File

import Link from "next/link"
import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone } from "lucide-react"
export function SiteFooter() {
return (
<footer className="bg-gray-900 text-white pt-16 pb-8">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
{/* Brand Info */}
<div className="space-y-6">
<div className="bg-white p-2 inline-block rounded-sm">
<img src="/hps-logo-full.png" alt="HPS Logo" className="h-12 w-auto" />
</div>
<p className="text-gray-400 text-sm leading-relaxed">
High Performance Structures specializes in Insulating Concrete Form (ICF) installations, structural
concrete flooring, and radiant heating systems. Building the future, one structure at a time.
</p>
<div className="flex gap-4">
<a href="#" className="text-gray-400 hover:text-accent transition-colors">
<Facebook className="h-5 w-5" />
</a>
<a href="#" className="text-gray-400 hover:text-accent transition-colors">
<Instagram className="h-5 w-5" />
</a>
<a href="#" className="text-gray-400 hover:text-accent transition-colors">
<Linkedin className="h-5 w-5" />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h3 className="text-lg font-bold mb-6 text-white">Quick Links</h3>
<nav className="flex flex-col gap-3">
{["Home", "Services", "Resources", "Blog", "Contact"].map((item) => (
<Link
key={item}
href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
className="text-gray-400 hover:text-accent transition-colors text-sm"
>
{item}
</Link>
))}
</nav>
</div>
{/* Services */}
<div>
<h3 className="text-lg font-bold mb-6 text-white">Our Services</h3>
<nav className="flex flex-col gap-3">
{[
"ICF Foundations",
"Above Grade Walls",
"Structural Floors",
"Radiant Heating",
"Safe Rooms",
"Consultation",
].map((item) => (
<Link key={item} href="/services" className="text-gray-400 hover:text-accent transition-colors text-sm">
{item}
</Link>
))}
</nav>
</div>
{/* Contact Info */}
<div>
<h3 className="text-lg font-bold mb-6 text-white">Contact Us</h3>
<div className="space-y-4">
<div className="flex items-start gap-3 text-gray-400 text-sm">
<MapPin className="h-5 w-5 text-accent shrink-0" />
<p>Woodland Park, CO</p>
</div>
<div className="flex items-center gap-3 text-gray-400 text-sm">
<Phone className="h-5 w-5 text-accent shrink-0" />
<a href="tel:7199008850" className="hover:text-white transition-colors">
719.900.8850
</a>
</div>
<div className="flex items-center gap-3 text-gray-400 text-sm">
<Mail className="h-5 w-5 text-accent shrink-0" />
<a href="mailto:info@highperformancestructures.com" className="hover:text-white transition-colors">
info@highperformancestructures.com
</a>
</div>
</div>
</div>
</div>
<div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-500">
<p>&copy; {new Date().getFullYear()} High Performance Structures, Inc. All rights reserved.</p>
<div className="flex gap-6">
<Link href="#" className="hover:text-white transition-colors">
Privacy Policy
</Link>
<Link href="#" className="hover:text-white transition-colors">
Terms of Service
</Link>
</div>
</div>
</div>
</footer>
)
}