diff --git a/.gitignore b/.gitignore
index a126f8b..ac76883 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,8 @@ next-env.d.ts
.dev.vars*
!.dev.vars.example
!.env.example
+
+# claude code
+.claude/**
+CLAUDE.md
+
diff --git a/app/blog/[slug]/blog-post.module.css b/app/blog/[slug]/blog-post.module.css
new file mode 100755
index 0000000..8c356cc
--- /dev/null
+++ b/app/blog/[slug]/blog-post.module.css
@@ -0,0 +1,77 @@
+.blogContent {
+ font-family: var(--font-sans);
+ color: #334155;
+}
+
+.blogContent p {
+ margin-bottom: 1.5rem;
+ line-height: 1.8;
+ font-size: 1.125rem;
+}
+
+.blogContent p.lead {
+ font-size: 1.5rem;
+ line-height: 1.6;
+ color: #0f172a;
+ font-weight: 500;
+ margin-bottom: 2.5rem;
+}
+
+.blogContent h2 {
+ font-size: 2rem;
+ font-weight: 800;
+ margin-top: 3.5rem;
+ margin-bottom: 1.5rem;
+ color: #0f172a;
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+}
+
+.blogContent h3 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-top: 2.5rem;
+ margin-bottom: 1rem;
+ color: #0f172a;
+}
+
+.blogContent a {
+ color: #0066bf;
+ text-decoration: none;
+ border-bottom: 2px solid rgba(0, 102, 191, 0.2);
+ transition: all 0.2s ease;
+}
+
+.blogContent a:hover {
+ color: #004a8f;
+ border-bottom-color: #0066bf;
+}
+
+.blogContent ul,
+.blogContent ol {
+ margin-left: 1.5rem;
+ margin-bottom: 2rem;
+ padding-left: 1rem;
+}
+
+.blogContent li {
+ margin-bottom: 0.75rem;
+ font-size: 1.125rem;
+ line-height: 1.7;
+}
+
+.blogContent blockquote {
+ border-left: 4px solid #0066bf;
+ padding-left: 1.5rem;
+ margin: 2.5rem 0;
+ font-style: italic;
+ font-size: 1.25rem;
+ color: #0f172a;
+}
+
+.blogContent img {
+ width: 100%;
+ height: auto;
+ border-radius: 0.25rem;
+ margin: 2.5rem 0;
+}
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
new file mode 100755
index 0000000..6d27431
--- /dev/null
+++ b/app/blog/[slug]/page.tsx
@@ -0,0 +1,132 @@
+import { SiteHeader } from "@/components/site-header"
+import { SiteFooter } from "@/components/site-footer"
+import { notFound } from "next/navigation"
+import Link from "next/link"
+import { ArrowLeft } from "lucide-react"
+import styles from "./blog-post.module.css"
+
+// This would typically come from a CMS or database
+const posts = {
+ "home-repairs-when-to-call-in-the-pros": {
+ title: "Home Repairs: When to Call in the Pros",
+ date: "January 23, 2020",
+ author: "webmaster",
+ category: "Maintenance",
+ image: "/blog/home-repairs-plumber.jpg",
+ content: `
+ With all the resources available, people are choosing more often to tackle DIY projects around the house by themselves. Certainly, you can save money and hassle by doing it yourself, and you will walk away with the pride of a job well done. However, there are some projects in your home that are best left to the professionals.
+
+ Contributed by: diyguys.net
+
+ What's the Difference?
+
+ When deciding whether to take on the project yourself or hire a professional, first assess how serious the problem is. Minor home repairs, such as touching up paint on your walls or replacing cabinet hardware, are common projects to tackle yourself with success. They have a low risk of injury, accessible tools and equipment, and are going to be acceptable if a less-than-perfect result is achieved.
+
+ Major home repairs, like plumbing leaks and foundation issues, are risky to take on without the help of a professional. These repairs involve a safety risk, structural importance, or require an expert. If you risk attempting some of these more complicated repairs, you risk not only injuring yourself but also damaging your home further.
+
+ Minor vs. Major Plumbing Repairs
+
+ Plumbing issues can often happen at the worst times, and sometimes the problems are well within your abilities to repair. Installing or repairing sink faucets, cleaning clogged drains, and changing out the shower heads are great examples of inexpensive DIY projects that you can successfully undertake. However, if you are experiencing issues such as low water pressure, no hot water, or sewage back up, you need to call in a professional. Plumbers are highly skilled and trained, so you will pay more for their expertise but diagnosing and repairing these types of problems is one best left to an expert plumber.
+
+ Electricity is Dangerous
+
+ Just like plumbers, professional electricians are highly trained and experts in their field. Electrical repair can be dangerous and potentially life-threatening. While you will save money tackling repairs by yourself, you need to consider your knowledge level and capabilities. You may possess basic knowledge in electrical wiring and feel confident installing new light fixtures or ceiling fan. However, more complicated problems can arise, such as dead outlets, flickering light bulbs, and circuit breakers frequently tripping. If you are not skilled in electrical work, you may find that hiring a good electrician is the safest and most efficient route.
+
+ Getting Rid of Junk
+
+ If you're planning to toss old appliances, worn mattresses, or the ratty carpet you ripped out of several rooms, your first thought might be to remove it all yourself. Think again. By calling in professional junk haulers, you can save yourself the hassle and money — not to mention grievous bodily harm. Additionally, reputable haulers will ensure that everything is disposed of in an environmentally friendly manner. That way, if you have items that need recycling, you can rest assured that these objects will end up precisely where they should go. Junk and waste removal services in Colorado Springs typically cost between $397 and $941.
+
+ When Structure is Involved
+
+ Another area of home repair that is best left to the professionals is anything involving the structure of your home. Foundation issues can occur that affect the structure of your home, like uneven floors, poor drainage, or cracked concrete. If any of these problems occur in your home, a professional needs to be called to handle it immediately. Left alone, the foundation will be compromised resulting in a dangerous and expensive domino effect of damage.
+
+ Let's Talk Numbers
+
+ In all these circumstances, we have established that there is a time for professional repair. Obviously, the cost is higher to outsource the repair work, but how much exactly are we talking about? Foundation repair can cost around $5,800 on average, but smaller repairs like cracks cost less and issues with drainage could cost more. Hiring an electrician will not be as expensive, as the repairs are less serious than foundation issues. The cost varies based on the repair; the breaker that keeps tripping may cost less than a dead outlet. Calling a plumber to fix a leaky faucet can be as low as $100, though you might be able to do this yourself.
+
+ Calling a plumber, electrician, or structural engineer costs money, but it is money well spent when you are preventing further damage or personal injury in the repair. Do your research to find a reputable repairman and you will be glad that you called the professionals.
+
+ Photo Credit: Pixabay
+ `,
+ },
+}
+
+export default function BlogPostPage({ params }: { params: { slug: string } }) {
+ const post = posts[params.slug as keyof typeof posts]
+
+ if (!post) {
+ notFound()
+ }
+
+ return (
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
Back to Journal
+
+
+ {post.title}
+
+
+ {post.date}
+ {post.category}
+ By {post.author}
+
+
+
+ {/* Featured Image */}
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+ {/* Share / Footer */}
+
+
Share this article
+
+ {/* Social placeholders */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Refined header section with better typography and spacing */}
+
+
+
+
+
Insights
+
+ Expert perspectives on structural engineering, modern construction, and high-performance building
+ systems.
+
+
+
+
+ {/* Blog Grid */}
+
+
+
+ {posts.map((post, index) => (
+
+
+
+
+
+ {post.category}
+
+
+
+
+
+
{post.date}
+
+ Read Article
+
+
+ {post.title}
+
+
{post.excerpt}
+
+
+ ))}
+
+
+
+
+
+
) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ })
+ }
+
+ return (
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
Contact Us
+
+ Get in touch with our team to discuss your next high-performance project.
+
+
+
+
+
+ {/* Main Content - Left Column */}
+
+ {/* Intro Text */}
+
+
We want to hear from you!
+
+ 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.
+
+
+
+
+
+
+
+
Address:
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
Business Hours:
+
8:00a–4:00p M-F
+
+
+
+
+
+
+ {/* Contact Form */}
+
+
+
+
+
+
+
+ {/* Sidebar - Right Column */}
+
+ {/* Newsletter Signup */}
+
+
+ Subscribe to Our Newsletter
+ * indicates required
+
+
+
+
+ Email Address *
+
+
+
+
+ First Name
+
+
+
+
+ Last Name
+
+
+
+
Birthday
+
+ /
+
+
( mm / dd )
+
+ Subscribe
+
+
+
+
+ {/* ProView Badge */}
+
+
+ ProView
+
+ Qualify Us Now!
+
+
+
+
+ {/* BuilderTrend Login */}
+
+
BuilderTrend Login
+
+
+ Client Login
+
+
+
+ Sign in to Buildertrend
+
+
+
+
+
+ {/* Video Placeholder */}
+
+
+
+
+
+ HPS
+
+
ICF Install in B...
+
+
+
+ {/* BBB Accredited */}
+
+
BBB Accredited
+
+
BBB
+
+
ACCREDITED BUSINESS
+
+
+
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+ {/* Background Image with Overlay */}
+
+
+
+
+
+ Building the Future
+
+
+ Specializing in Insulating Concrete Form (ICF) installations, structural flooring, and radiant heating
+ systems.
+
+
+
+ Get a Quote
+
+
+
+ Our Services
+
+
+
+
+
+ {/* Intro Section */}
+
+
+
+
+
+ High Performance Structures
+
+
+
+ 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.
+
+
+ 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.
+
+
+
+ 20+
+
+ Years Experience
+
+
+
+
+ 250k+
+
+ Sq Ft Installed
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Services Grid */}
+
+
+
+
+
Our Expertise
+
+ Comprehensive concrete and construction solutions.
+
+
+
+
+ View All Services
+
+
+
+
+
+ {[
+ {
+ 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) => (
+
+
+
+
+ {service.title}
+
+
{service.description}
+
+
+ ))}
+
+
+
+ {/* Featured Videos Section */}
+
+
+
+
See Us in Action
+
+ Watch our team at work and learn more about the ICF construction process.
+
+
+
+
+ {["eQAEIYZN4Xs", "xQ51P5oZBuw", "MXCVrOM3kBk"].map((videoId, index) => (
+
+ VIDEO
+
+ ))}
+
+
+
+ {/* Why Choose Us / CTA */}
+
+
+
+
+
+
+
Why Choose HPS?
+
+ {[
+ "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) => (
+
+ ))}
+
+
+
+ Start Your Project
+
+
+
+
+
+
Ready to build better?
+
+ Contact us today for a consultation or quote on your next residential or commercial project.
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+ Resources & Careers
+
+
+ Industry tools, partnerships, and opportunities to join our team.
+
+
+
+
+
+ {/* Sticky Sidebar Navigation */}
+
+
+
Quick Navigation
+
+ {sections.map((section) => (
+ scrollToSection(section.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 === section.id
+ ? "bg-deep-navy text-white shadow-md"
+ : "text-gray-600 hover:bg-gray-100 hover:text-deep-navy",
+ )}
+ >
+
+
+ {activeSection === section.id &&
+ ))}
+
+
+
+
+ {/* Main Content */}
+
+ {sections.map((section, index) => (
+
+
+
+
+
+
{section.title}
+
{section.description}
+
+
+ {section.items?.map((item, i) => (
+
+
+
+ {item.name}
+ {item.url && (
+
+
+
+ {item.description}
+ {/* @ts-ignore */}
+ {item.contact && (
+
+ Contact: {item.contact}
+
+ )}
+ {/* @ts-ignore */}
+ {item.email && (
+
+ {item.email}
+
+ )}
+ {item.url && (
+
+ Visit Website
+ )}
+
+
+ ))}
+
+
+
{section.content.intro}
+
+
+
+
+
+
+
+
Basic Requirements
+
+ {section.content.requirements.map((req, i) => (
+
+ {req}
+
+ ))}
+
+
+
+
Job Tasks
+
+ {section.content.tasks.map((task, i) => (
+
+ {task}
+
+ ))}
+
+
+
+
+
+
Knowledge, Skills & Abilities
+
+ {section.content.skills.map((skill, i) => (
+
+ ))}
+
+
+
+
+
+
Ready to Join the Team?
+
+ If you are willing to work outdoors during any season, have a desire to grow into leadership
+ roles, and are willing to listen and learn our processes, we want to hear from you!
+
+
+
+ Apply Now
+
+
+
+
}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+
+ Our Services
+
+
+ Comprehensive concrete and construction solutions tailored to your project's needs.
+
+
+
+
+
+ {/* Sticky Sidebar Navigation */}
+
+
+
Service Menu
+
+ {services.map((service) => (
+ 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 &&
+ ))}
+
+
+
Need a Quote?
+
Contact us today to discuss your project requirements.
+
+
Contact Us
+
+
+
+
+ {/* Main Content */}
+
+ {services.map((service, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
{service.title}
+
+
+
{service.description}
+
+
+ {service.details.map((detail, i) => (
+
+ {detail}
+
+ ))}
+
+
+
+
+
+ Request {service.title}
+
+
+
+
}
+
+ ))}
+
+
+
+
+
Ready to Start Your Project?
+
+ Our team of experts is ready to help you build with confidence and precision.
+
+
+
+ Get a Free Quote
+
+
+
+
+
+
+
+
+
+ {/* Brand Info */}
+
+
+
+
+
+ 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.
+
+
+
+
+ {/* Quick Links */}
+
+
Quick Links
+
+ {["Home", "Services", "Resources", "Blog", "Contact"].map((item) => (
+
+
+
+ {/* Services */}
+
+
Our Services
+
+ {[
+ "ICF Foundations",
+ "Above Grade Walls",
+ "Structural Floors",
+ "Radiant Heating",
+ "Safe Rooms",
+ "Consultation",
+ ].map((item) => (
+
+
+
+ {/* Contact Info */}
+
+
+
+
+
© {new Date().getFullYear()} High Performance Structures, Inc. All rights reserved.
+
+
+
+
+ )
+}
diff --git a/components/site-header.tsx b/components/site-header.tsx
new file mode 100755
index 0000000..961a52e
--- /dev/null
+++ b/components/site-header.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import Link from "next/link"
+import { useState, useEffect } from "react"
+import { Menu, X, Phone, ArrowRight } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { HpsLogo } from "@/components/hps-logo"
+import { cn } from "@/lib/utils"
+
+export function SiteHeader() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [scrolled, setScrolled] = useState(false)
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setScrolled(window.scrollY > 20)
+ }
+ window.addEventListener("scroll", handleScroll)
+ return () => window.removeEventListener("scroll", handleScroll)
+ }, [])
+
+ const navigation = [
+ { name: "Home", href: "/" },
+ { name: "Services", href: "/services" },
+ { name: "Resources", href: "/resources" },
+ { name: "Blog", href: "/blog" },
+ { name: "Contact", href: "/contact" },
+ ]
+
+ return (
+
+
+
+ {/* Logo */}
+
+
+ {/* Desktop Navigation - Minimalist Centered */}
+
+
+ {navigation.map((item) => (
+
+
+
+ {/* Right Side Actions */}
+
+
+ {/* Mobile Navigation Toggle */}
+
+ setMobileMenuOpen(!mobileMenuOpen)}
+ className={cn(
+ "relative z-50 rounded-full w-12 h-12 transition-colors",
+ scrolled || mobileMenuOpen ? "text-deep-navy hover:bg-gray-100" : "text-white hover:bg-white/10",
+ )}
+ >
+ {mobileMenuOpen ?
+
+
+
+
+
+ {navigation.map((item, index) => (
+
+
+
+
+
+ )
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100755
index 0000000..55c2f6e
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+ ThemeProvider as NextThemesProvider,
+ type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return {children}
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100755
index 0000000..e538a33
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+
+ svg]:rotate-180',
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+ )
+}
+
+function AccordionContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100755
index 0000000..9704452
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100755
index 0000000..40bb120
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : 'span'
+
+ return (
+ svg]:size-3.5', className)}
+ {...props}
+ >
+ {children ??
+ )
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<'span'>) {
+ return (
+
+ More
+
+ )
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100755
index 0000000..09d4430
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+ "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+ {
+ variants: {
+ orientation: {
+ horizontal:
+ '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+ vertical:
+ 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+ },
+ },
+ defaultVariants: {
+ orientation: 'horizontal',
+ },
+ },
+)
+
+function ButtonGroup({
+ className,
+ orientation,
+ ...props
+}: React.ComponentProps<'div'> & VariantProps) {
+ return (
+
+ )
+}
+
+function ButtonGroupText({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<'div'> & {
+ asChild?: boolean
+}) {
+ const Comp = asChild ? Slot : 'div'
+
+ return (
+ ) {
+ return (
+ & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : 'button'
+
+ return (
+ & {
+ buttonVariant?: React.ComponentProps['variant']
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className,
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString('default', { month: 'short' }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn('w-fit', defaultClassNames.root),
+ months: cn(
+ 'flex gap-4 flex-col md:flex-row relative',
+ defaultClassNames.months,
+ ),
+ month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+ nav: cn(
+ 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+ defaultClassNames.nav,
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+ defaultClassNames.button_previous,
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+ defaultClassNames.button_next,
+ ),
+ month_caption: cn(
+ 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+ defaultClassNames.month_caption,
+ ),
+ dropdowns: cn(
+ 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+ defaultClassNames.dropdowns,
+ ),
+ dropdown_root: cn(
+ 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+ defaultClassNames.dropdown_root,
+ ),
+ dropdown: cn(
+ 'absolute bg-popover inset-0 opacity-0',
+ defaultClassNames.dropdown,
+ ),
+ caption_label: cn(
+ 'select-none font-medium',
+ captionLayout === 'label'
+ ? 'text-sm'
+ : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+ defaultClassNames.caption_label,
+ ),
+ table: 'w-full border-collapse',
+ weekdays: cn('flex', defaultClassNames.weekdays),
+ weekday: cn(
+ 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+ defaultClassNames.weekday,
+ ),
+ week: cn('flex w-full mt-2', defaultClassNames.week),
+ week_number_header: cn(
+ 'select-none w-(--cell-size)',
+ defaultClassNames.week_number_header,
+ ),
+ week_number: cn(
+ 'text-[0.8rem] select-none text-muted-foreground',
+ defaultClassNames.week_number,
+ ),
+ day: cn(
+ 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+ defaultClassNames.day,
+ ),
+ range_start: cn(
+ 'rounded-l-md bg-accent',
+ defaultClassNames.range_start,
+ ),
+ range_middle: cn('rounded-none', defaultClassNames.range_middle),
+ range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+ today: cn(
+ 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+ defaultClassNames.today,
+ ),
+ outside: cn(
+ 'text-muted-foreground aria-selected:text-muted-foreground',
+ defaultClassNames.outside,
+ ),
+ disabled: cn(
+ 'text-muted-foreground opacity-50',
+ defaultClassNames.disabled,
+ ),
+ hidden: cn('invisible', defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === 'left') {
+ return (
+
+
+ {children}
+
+
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+ span]:text-xs [&>span]:opacity-70',
+ defaultClassNames.day,
+ className,
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100755
index 0000000..db7dd3c
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100755
index 0000000..d4a768e
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+ opts?: CarouselOptions
+ plugins?: CarouselPlugin
+ orientation?: 'horizontal' | 'vertical'
+ setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0]
+ api: ReturnType[1]
+ scrollPrev: () => void
+ scrollNext: () => void
+ canScrollPrev: boolean
+ canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext)
+
+ if (!context) {
+ throw new Error('useCarousel must be used within a ) => {
+ if (event.key === 'ArrowLeft') {
+ event.preventDefault()
+ scrollPrev()
+ } else if (event.key === 'ArrowRight') {
+ event.preventDefault()
+ scrollNext()
+ }
+ },
+ [scrollPrev, scrollNext],
+ )
+
+ React.useEffect(() => {
+ if (!api || !setApi) return
+ setApi(api)
+ }, [api, setApi])
+
+ React.useEffect(() => {
+ if (!api) return
+ onSelect(api)
+ api.on('reInit', onSelect)
+ api.on('select', onSelect)
+
+ return () => {
+ api?.off('select', onSelect)
+ }
+ }, [api, onSelect])
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+ )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+}
+
+function CarouselPrevious({
+ className,
+ variant = 'outline',
+ size = 'icon',
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ Previous slide
+
+ )
+}
+
+function CarouselNext({
+ className,
+ variant = 'outline',
+ size = 'icon',
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ Next slide
+
+ )
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100755
index 0000000..421fe58
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode
+ icon?: React.ComponentType
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ )
+}
+
+type ChartContextProps = {
+ config: ChartConfig
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+ const context = React.useContext(ChartContext)
+
+ if (!context) {
+ throw new Error('useChart must be used within a
+
+
+ {children}
+
+
+
+ )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color,
+ )
+
+ if (!colorConfig.length) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/placeholder-logo.png b/public/placeholder-logo.png
new file mode 100755
index 0000000..8a792ac
Binary files /dev/null and b/public/placeholder-logo.png differ
diff --git a/public/placeholder-logo.svg b/public/placeholder-logo.svg
new file mode 100755
index 0000000..b1695aa
--- /dev/null
+++ b/public/placeholder-logo.svg
@@ -0,0 +1 @@
+
-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx
-
- .
-
- Save and see your changes instantly.
-
-
-
-
-
-
+
+ 
+ 
+
+ )
+}
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
new file mode 100755
index 0000000..0ca44f3
--- /dev/null
+++ b/components/site-footer.tsx
@@ -0,0 +1,104 @@
+import Link from "next/link"
+import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone } from "lucide-react"
+
+export function SiteFooter() {
+ return (
+
+ )
+}
diff --git a/components/site-header.tsx b/components/site-header.tsx
new file mode 100755
index 0000000..961a52e
--- /dev/null
+++ b/components/site-header.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import Link from "next/link"
+import { useState, useEffect } from "react"
+import { Menu, X, Phone, ArrowRight } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { HpsLogo } from "@/components/hps-logo"
+import { cn } from "@/lib/utils"
+
+export function SiteHeader() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [scrolled, setScrolled] = useState(false)
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setScrolled(window.scrollY > 20)
+ }
+ window.addEventListener("scroll", handleScroll)
+ return () => window.removeEventListener("scroll", handleScroll)
+ }, [])
+
+ const navigation = [
+ { name: "Home", href: "/" },
+ { name: "Services", href: "/services" },
+ { name: "Resources", href: "/resources" },
+ { name: "Blog", href: "/blog" },
+ { name: "Contact", href: "/contact" },
+ ]
+
+ return (
+