352 lines
16 KiB
TypeScript
Executable File
352 lines
16 KiB
TypeScript
Executable File
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
import { SiteHeader } from "@/components/site-header"
|
||
import { SiteFooter } from "@/components/site-footer"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Label } from "@/components/ui/label"
|
||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||
import { Mail, Phone, MapPin, Clock, Play, ExternalLink } from "lucide-react"
|
||
import { useState } from "react"
|
||
import Image from "next/image"
|
||
|
||
export default function ContactPage() {
|
||
const [formData, setFormData] = useState({
|
||
firstName: "",
|
||
lastName: "",
|
||
email: "",
|
||
phone: "",
|
||
interest: "",
|
||
message: "",
|
||
})
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
console.log("Form submitted:", formData)
|
||
}
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||
setFormData({
|
||
...formData,
|
||
[e.target.name]: e.target.value,
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||
<SiteHeader />
|
||
|
||
<main className="flex-1">
|
||
{/* Hero Section */}
|
||
<section className="relative bg-[#0f172a] pt-40 pb-20 overflow-hidden">
|
||
<div className="absolute inset-0 bg-[url('/construction-blueprint.jpg')] opacity-10 bg-cover bg-center" />
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Contact Us</h1>
|
||
<p className="text-xl text-gray-300 max-w-2xl">
|
||
Get in touch with our team to discuss your next high-performance project.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="container mx-auto px-4 py-12">
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||
{/* Main Content - Left Column */}
|
||
<div className="lg:col-span-2 space-y-12">
|
||
{/* Intro Text */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-3xl font-bold text-[#0f172a]">We want to hear from you!</h2>
|
||
<p className="text-gray-600 leading-relaxed text-lg">
|
||
We have over 20 years of construction experience and specialize in Insulated Concrete Form (ICFs)
|
||
installations, Structural Concrete Flooring and Radiant Heating Systems. If you are interested in more
|
||
information regarding ICF structures or require an estimate, please fill out the contact form, call or
|
||
email us today.
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6 pt-4">
|
||
<div className="space-y-4">
|
||
<div className="flex items-start gap-3">
|
||
<MapPin className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
|
||
<div>
|
||
<h3 className="font-bold text-[#0f172a]">Address:</h3>
|
||
<p className="text-sm text-gray-600">
|
||
We are located in beautiful Woodland Park, CO and serve the Rocky Mtn. Region and the Front
|
||
Range. Please call to set up an appointment.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<Mail className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
|
||
<div>
|
||
<h3 className="font-bold text-[#0f172a]">Email:</h3>
|
||
<a
|
||
href="mailto:info@highperformancestructures.com"
|
||
className="text-sm text-[#0066bf] hover:underline"
|
||
>
|
||
info@highperformancestructures.com
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start gap-3">
|
||
<Phone className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
|
||
<div>
|
||
<h3 className="font-bold text-[#0f172a]">Phone:</h3>
|
||
<a href="tel:7199008850" className="text-sm text-[#0066bf] hover:underline">
|
||
719.900.8850
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<Clock className="h-5 w-5 text-[#8cc63f] mt-1 shrink-0" />
|
||
<div>
|
||
<h3 className="font-bold text-[#0f172a]">Business Hours:</h3>
|
||
<p className="text-sm text-gray-600">8:00a–4:00p M-F</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Form */}
|
||
<Card className="border-t-4 border-t-[#0066bf] shadow-lg">
|
||
<CardContent className="p-8">
|
||
<form onSubmit={handleSubmit} className="space-y-8">
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="firstName" className="text-[#0f172a] font-semibold">
|
||
Name <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="firstName"
|
||
name="firstName"
|
||
placeholder="First"
|
||
required
|
||
value={formData.firstName}
|
||
onChange={handleChange}
|
||
className="bg-gray-50"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="lastName" className="text-[#0f172a] font-semibold">
|
||
|
||
</Label>
|
||
<Input
|
||
id="lastName"
|
||
name="lastName"
|
||
placeholder="Last"
|
||
value={formData.lastName}
|
||
onChange={handleChange}
|
||
className="bg-gray-50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email" className="text-[#0f172a] font-semibold">
|
||
Email <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
required
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
className="bg-gray-50"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="phone" className="text-[#0f172a] font-semibold">
|
||
Phone <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="phone"
|
||
name="phone"
|
||
type="tel"
|
||
required
|
||
value={formData.phone}
|
||
onChange={handleChange}
|
||
className="bg-gray-50"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<Label className="text-[#0f172a] font-semibold">
|
||
I am Interested in Being Contacted About: <span className="text-red-500">*</span>
|
||
</Label>
|
||
<RadioGroup
|
||
onValueChange={(value) => setFormData({ ...formData, interest: value })}
|
||
className="space-y-3"
|
||
>
|
||
{[
|
||
"ICF Training/Consultation",
|
||
"Installation Estimate (Excavation, Footers, ICF Foundation, ICF Above-Grade Walls, Other)",
|
||
"General Information About Building with ICFs",
|
||
"Custom Residential Design/Build Services",
|
||
"Commercial New Construction",
|
||
"Other (Please Explain Below)",
|
||
].map((option) => (
|
||
<div key={option} className="flex items-start space-x-3">
|
||
<RadioGroupItem value={option} id={option} className="mt-1 text-[#0066bf]" />
|
||
<Label htmlFor={option} className="font-normal text-gray-700 cursor-pointer leading-tight">
|
||
{option}
|
||
</Label>
|
||
</div>
|
||
))}
|
||
</RadioGroup>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="message" className="text-[#0f172a] font-semibold">
|
||
Comment or Message <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="message"
|
||
name="message"
|
||
required
|
||
rows={6}
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
className="bg-gray-50 resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{/* reCAPTCHA Placeholder */}
|
||
<div className="bg-gray-100 border border-gray-300 p-4 rounded-md w-fit flex items-center gap-4">
|
||
<div className="w-6 h-6 border-2 border-gray-400 rounded-sm" />
|
||
<span className="text-sm text-gray-600">I'm not a robot</span>
|
||
<div className="ml-4 flex flex-col items-center">
|
||
<div className="w-8 h-8 bg-[url('https://www.gstatic.com/recaptcha/api2/logo_48.png')] bg-contain bg-no-repeat" />
|
||
<span className="text-[10px] text-gray-500">reCAPTCHA</span>
|
||
</div>
|
||
</div>
|
||
|
||
<Button
|
||
type="submit"
|
||
className="bg-[#0066bf] hover:bg-[#0055a0] text-white px-8 py-6 text-lg font-semibold w-full md:w-auto"
|
||
>
|
||
Submit
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Sidebar - Right Column */}
|
||
<div className="space-y-8">
|
||
{/* Newsletter Signup */}
|
||
<Card className="bg-gray-50 border-none shadow-md">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold text-[#0f172a]">Subscribe to Our Newsletter</CardTitle>
|
||
<p className="text-xs text-gray-500 text-right">* indicates required</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nl-email" className="text-sm font-semibold">
|
||
Email Address <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input id="nl-email" className="bg-white" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nl-first" className="text-sm font-semibold">
|
||
First Name
|
||
</Label>
|
||
<Input id="nl-first" className="bg-white" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nl-last" className="text-sm font-semibold">
|
||
Last Name
|
||
</Label>
|
||
<Input id="nl-last" className="bg-white" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label className="text-sm font-semibold">Birthday</Label>
|
||
<div className="flex gap-2">
|
||
<Input placeholder="MM" className="w-16 bg-white" />
|
||
<span className="self-center">/</span>
|
||
<Input placeholder="DD" className="w-16 bg-white" />
|
||
</div>
|
||
<p className="text-xs text-gray-500">( mm / dd )</p>
|
||
</div>
|
||
<Button className="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold">
|
||
Subscribe
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* ProView Badge */}
|
||
<div className="flex justify-center">
|
||
<div className="bg-gradient-to-b from-blue-100 to-blue-50 border border-blue-200 rounded-full px-8 py-3 shadow-sm">
|
||
<span className="text-[#0066bf] font-bold italic text-lg">ProView</span>
|
||
<span className="block text-[10px] text-center text-gray-500 uppercase tracking-wider">
|
||
Qualify Us Now!
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BuilderTrend Login */}
|
||
<div className="space-y-2">
|
||
<h3 className="font-bold text-[#0f172a]">BuilderTrend Login</h3>
|
||
<Card className="bg-gray-100 border-gray-200">
|
||
<CardHeader className="bg-[#b0b0b0] py-2 px-4">
|
||
<h4 className="text-white text-xs font-bold uppercase tracking-wider text-center">Client Login</h4>
|
||
</CardHeader>
|
||
<CardContent className="p-6">
|
||
<Button
|
||
variant="outline"
|
||
className="w-full flex items-center justify-center gap-2 bg-white hover:bg-gray-50 text-[#0066bf] border-gray-300"
|
||
>
|
||
<span className="font-bold">Sign in to Buildertrend</span>
|
||
<ExternalLink className="h-4 w-4" />
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Video Placeholder */}
|
||
<div className="relative aspect-video bg-black rounded-lg overflow-hidden group cursor-pointer shadow-lg">
|
||
<Image
|
||
src="/construction-site-video.jpg"
|
||
alt="ICF Installation Video"
|
||
width={500}
|
||
height={300}
|
||
className="object-cover opacity-80 group-hover:opacity-60 transition-opacity"
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
|
||
<Play className="h-8 w-8 text-white fill-current ml-1" />
|
||
</div>
|
||
</div>
|
||
<div className="absolute top-4 left-4 flex items-center gap-2">
|
||
<div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
|
||
<span className="font-bold text-xs text-[#0f172a]">HPS</span>
|
||
</div>
|
||
<span className="text-white font-medium text-sm drop-shadow-md">ICF Install in B...</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* BBB Accredited */}
|
||
<div className="space-y-2">
|
||
<h3 className="font-bold text-[#0f172a]">BBB Accredited</h3>
|
||
<div className="w-24 h-32 bg-[#1a1a1a] rounded-sm flex flex-col items-center justify-center p-2 text-white">
|
||
<span className="text-2xl font-serif font-bold">BBB</span>
|
||
<div className="w-full h-px bg-gray-600 my-2" />
|
||
<span className="text-[10px] text-center leading-tight">ACCREDITED BUSINESS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
)
|
||
}
|