Files
4f220545-cca5-417a-baa4-1fa…/src/app/page.tsx
2026-05-10 11:05:15 +00:00

150 lines
6.9 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { ShieldCheck, CalendarCheck, Home, PhoneCall, Star } from "lucide-react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLarge"
background="fluid"
cardStyle="glass-elevated"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Residential", id: "#services" },
{ name: "Commercial", id: "#services" },
{ name: "About", id: "#about" },
{ name: "Reviews", id: "#testimonials" },
]}
brandName="Horn Brothers Roofing"
button={{ text: "Contact Us", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "plain" }}
title="Expert Residential & Commercial Roofing in Colorado"
description="With 28 years of dedicated experience, Horn Brothers Roofing delivers premium residential and commercial roofing solutions across Colorado. Built on integrity, quality craftsmanship, and a commitment to excellence."
buttons={[{ text: "Get Your Free Estimate", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Nearly Three Decades of Reliability"
description="Since our founding, Horn Brothers Roofing has been the trusted name for Colorado homeowners and businesses. We combine time-tested techniques with modern roofing technology to ensure your structure is protected against the unpredictable Rocky Mountain elements."
imageSrc="http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg"
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="Professional Roofing Solutions"
description="Whether it's a small residential repair or a large-scale commercial installation, our expert crews handle every project with precision."
features={[
{
id: "1", label: "Residential", title: "Home Roofing Services", items: ["Expert shingle replacement", "Custom roof repairs", "Complete gutter systems"],
},
{
id: "2", label: "Commercial", title: "Business Roofing Systems", items: ["Advanced flat roof solutions", "Full maintenance programs", "Emergency roofing repairs"],
},
{
id: "3", label: "Specialty", title: "Mountain & Alpine", items: ["Snow-load engineering", "Alpine weather durability", "High-altitude materials"],
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="By The Numbers"
description="Our commitment to the Colorado community is reflected in our long-term results and client trust."
metrics={[
{ id: "m1", value: "28+", title: "Years Serving Colorado", items: ["Industry leading experience"] },
{ id: "m2", value: "100%", title: "Quality Guaranteed", items: ["Licensed and insured experts"] },
{ id: "m3", value: "Thousands", title: "Happy Clients", items: ["Homes and businesses protected"] },
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="What Colorado Says"
description="See why property owners across the state trust the Horn Brothers name."
showRating={true}
testimonials={[
{ id: "1", name: "Sarah J.", handle: "Denver", testimonial: "Fast response and a flawless roof installation. Highly professional team.", rating: 5 },
{ id: "2", name: "Mark R.", handle: "Montrose", testimonial: "Exceptional quality, honest pricing, and they kept my site spotless.", rating: 5 },
{ id: "3", name: "Emily P.", handle: "Colorado Springs", testimonial: "The only team I trust for our business properties. Truly reliable experts.", rating: 5 },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Common Roofing Questions"
description="Get answers about our installation and repair process."
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{ id: "f1", title: "Do you offer free roof inspections?", content: "Yes, we provide thorough, no-obligation roof inspections and detailed estimates." },
{ id: "f2", title: "How soon can you start my roof repair?", content: "For emergency repairs, we prioritize your call. Standard replacements are scheduled upon project approval." },
{ id: "f3", title: "Are you licensed and insured?", content: "Yes, we are fully licensed and carry comprehensive insurance for all residential and commercial projects." },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
background={{ variant: "plain" }}
useInvertedBackground={false}
text="Ready for a better roof? Get your professional consultation with Colorado's roofing experts today."
buttons={[{ text: "Call Our Team", href: "tel:1-800-ROOFING" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Horn Brothers Roofing"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}