521 lines
21 KiB
TypeScript
521 lines
21 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||
import { Cloud, FileText, Home, ListChecks, Search, Wrench } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="directional-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="small"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "#home",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "#services",
|
||
},
|
||
{
|
||
name: "Gallery",
|
||
id: "#before-after",
|
||
},
|
||
{
|
||
name: "Why Choose Us",
|
||
id: "#why-choose-telge",
|
||
},
|
||
{
|
||
name: "Reviews",
|
||
id: "#reviews",
|
||
},
|
||
{
|
||
name: "FAQ",
|
||
id: "#faq",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
logoSrc="http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg"
|
||
logoAlt="Telge Roofing Logo"
|
||
brandName="Telge Roofing"
|
||
button={{
|
||
text: "GET FREE INSPECTION",
|
||
href: "#contact",
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroOverlayTestimonial
|
||
title="Your Roof Should Add Value. Not Stress."
|
||
description="Whether you’re dealing with storm damage, an aging roof, or planning a complete exterior transformation, Telge Roofing delivers premium roofing solutions backed by nearly 700 five-star reviews. With free roof inspections, insurance claim assistance, premium roofing systems, and being family-owned since 2009 with background-checked & Google-verified professionals, we ensure peace of mind."
|
||
testimonials={[
|
||
{
|
||
name: "Trusted by Homeowners",
|
||
handle: "Nearly 700 Reviews",
|
||
testimonial: "4.8 Stars from Nearly 700 Homeowners",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg?_wi=1",
|
||
imageAlt: "professional male portrait smiling",
|
||
},
|
||
{
|
||
name: "Exceptional Service",
|
||
handle: "Quality Focused",
|
||
testimonial: "Effortless customer experience from start to finish.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg?_wi=1",
|
||
imageAlt: "professional male portrait smiling",
|
||
},
|
||
{
|
||
name: "Premium Protection",
|
||
handle: "Lifetime Peace of Mind",
|
||
testimonial: "Protecting homes with premium roofing systems for 17+ years.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=1",
|
||
imageAlt: "professional male portrait smiling",
|
||
},
|
||
{
|
||
name: "Expert Restoration",
|
||
handle: "Storm Ready",
|
||
testimonial: "Expert storm restoration ensures your home is safe.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg?_wi=1",
|
||
imageAlt: "professional male portrait smiling",
|
||
},
|
||
{
|
||
name: "Highly Recommended",
|
||
handle: "Client Success",
|
||
testimonial: "Professionalism, quality, and communication were outstanding. Truly a five-star experience with Telge Roofing.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg?_wi=1",
|
||
imageAlt: "professional male portrait smiling",
|
||
},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "GET FREE INSPECTION",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "VIEW OUR WORK",
|
||
href: "#before-after",
|
||
},
|
||
]}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg",
|
||
alt: "Customer 1",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg",
|
||
alt: "Customer 2",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
|
||
alt: "Customer 3",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148238839.jpg",
|
||
alt: "Customer 4",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",
|
||
alt: "Happy homeowner",
|
||
},
|
||
]}
|
||
avatarText="4.8 Stars from Nearly 700 Homeowners"
|
||
imageSrc="http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=2"
|
||
videoSrc="http://img.b2bpic.net/free-photo/palace-china_1127-4075.jpg"
|
||
imageAlt="Drone footage of luxury homes"
|
||
showDimOverlay={true}
|
||
showBlur={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={true}
|
||
metrics={[
|
||
{
|
||
id: "1",
|
||
value: "4.8/5",
|
||
description: "Rating",
|
||
},
|
||
{
|
||
id: "2",
|
||
value: "693+",
|
||
description: "Reviews",
|
||
},
|
||
{
|
||
id: "3",
|
||
value: "17+",
|
||
description: "Years Serving Houston",
|
||
},
|
||
{
|
||
id: "4",
|
||
value: "Google",
|
||
description: "Verified",
|
||
},
|
||
{
|
||
id: "5",
|
||
value: "Background",
|
||
description: "Checked",
|
||
},
|
||
{
|
||
id: "6",
|
||
value: "Family",
|
||
description: "Owned",
|
||
},
|
||
]}
|
||
title="Our Unmatched Track Record"
|
||
description="The numbers speak for themselves — a testament to our commitment to excellence and customer satisfaction."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-choose-telge" data-section="why-choose-telge">
|
||
<MetricSplitMediaAbout
|
||
useInvertedBackground={false}
|
||
title="The Roofing Experience Houston Homeowners Deserve"
|
||
description="At Telge Roofing, we redefine what it means to work with a contractor. Our commitment to luxury craftsmanship, transparent service, and lifetime peace of mind ensures an effortless journey from your first inspection to project completion."
|
||
metrics={[
|
||
{
|
||
value: "Premium Consultation",
|
||
title: "No pressure. No gimmicks. Just honest recommendations from experienced roofing professionals.",
|
||
},
|
||
{
|
||
value: "White-Glove Project Management",
|
||
title: "One dedicated project manager from inspection through completion.",
|
||
},
|
||
{
|
||
value: "Superior Installation",
|
||
title: "We use premium roofing systems designed for Texas heat, storms, and hurricanes.",
|
||
},
|
||
{
|
||
value: "Transparent Communication",
|
||
title: "You’ll always know what’s happening with your project.",
|
||
},
|
||
{
|
||
value: "Insurance Expertise",
|
||
title: "We help homeowners navigate claims and maximize eligible coverage.",
|
||
},
|
||
{
|
||
value: "Industry-Leading Warranties",
|
||
title: "Protection long after installation is complete.",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/engineer-writing-condenser-values_482257-90848.jpg"
|
||
imageAlt="Roofing expert discussing with homeowner"
|
||
mediaAnimation="opacity"
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentyFive
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Residential Roof Replacement",
|
||
description: "Complete roofing systems engineered for long-term protection and beauty.",
|
||
icon: Home,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-roofer-working-with-helmet_23-2149343709.jpg",
|
||
imageAlt: "New luxury architectural roof installation",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",
|
||
imageAlt: "Side view of a new asphalt shingle roof",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg?_wi=2",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
{
|
||
title: "Storm Damage Restoration",
|
||
description: "Fast inspections and expert repairs following hail and wind events.",
|
||
icon: Cloud,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg",
|
||
imageAlt: "Damaged roof after storm before repair",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/tile-roof-texture_23-2148164702.jpg",
|
||
imageAlt: "Repaired roof after storm restoration",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=3",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
{
|
||
title: "Roof Repairs",
|
||
description: "Leak detection, emergency repairs, and preventative maintenance.",
|
||
icon: Wrench,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg",
|
||
imageAlt: "Leak detection on old roof interior",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-full-shot_23-2149714278.jpg",
|
||
imageAlt: "Roof repair professional fixing shingles",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg?_wi=2",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
{
|
||
title: "Insurance Claim Assistance",
|
||
description: "We work directly with insurance carriers to simplify the process and maximize your eligible coverage.",
|
||
icon: FileText,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-couple-reaching-agreement-with-real-estate-agent-office-women-are-handshaking_637285-1732.jpg",
|
||
imageAlt: "Homeowner talking to insurance agent roof",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/paper-credit-request-with-green-stamp_23-2147764209.jpg",
|
||
imageAlt: "Insurance check for roof repair",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg?_wi=2",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
{
|
||
title: "Roof Inspections",
|
||
description: "Detailed assessments with photo documentation to give you a clear understanding of your roof’s condition.",
|
||
icon: Search,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hummer-tools-stairs-house-construction_181624-28753.jpg",
|
||
imageAlt: "Roofer performing detailed roof inspection",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-old-man-looking-tablet_23-2148269414.jpg",
|
||
imageAlt: "Detailed roof inspection report on tablet",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg?_wi=2",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
{
|
||
title: "Exterior Improvements",
|
||
description: "Enhance your home’s functionality and aesthetics with gutters, ventilation systems, and other exterior upgrades.",
|
||
icon: ListChecks,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/painting-red_1385-599.jpg",
|
||
imageAlt: "New gutter installation luxury home",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107136.jpg",
|
||
imageAlt: "Close-up of new seamless gutters",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148238839.jpg",
|
||
imageAlt: "new luxury architectural roof installation",
|
||
},
|
||
]}
|
||
title="Our Services"
|
||
description="Telge Roofing offers a comprehensive suite of luxury roofing solutions, ensuring your home is protected with beauty and durability."
|
||
/>
|
||
</div>
|
||
|
||
<div id="before-after" data-section="before-after">
|
||
<ProductCardFour
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "1",
|
||
name: "Aging Roof",
|
||
price: "",
|
||
variant: "Before",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wood-texture-background_23-2148935976.jpg",
|
||
imageAlt: "Aging roof with missing shingles",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Storm Damage",
|
||
price: "",
|
||
variant: "Before",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/roof-building-covered-snow-against-cloudy-sky_181624-37509.jpg",
|
||
imageAlt: "Storm damaged roof",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Missing Shingles",
|
||
price: "",
|
||
variant: "Before",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166582.jpg",
|
||
imageAlt: "Old roof with missing shingles",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "Luxury Architectural Roofing",
|
||
price: "",
|
||
variant: "After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/concrete-building-with-mirror-windows-clear-sky_181624-6780.jpg",
|
||
imageAlt: "Newly installed luxury architectural roof",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "Storm Restoration",
|
||
price: "",
|
||
variant: "After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
|
||
imageAlt: "Restored roof after storm damage",
|
||
},
|
||
{
|
||
id: "6",
|
||
name: "Complete Exterior Renovation",
|
||
price: "",
|
||
variant: "After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg",
|
||
imageAlt: "Home with new roof after complete exterior renovation",
|
||
},
|
||
]}
|
||
title="Real Homes. Real Transformations."
|
||
description="Every roof we install enhances curb appeal, increases property value, and protects what matters most. See the dramatic difference Telge Roofing brings."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardFifteen
|
||
useInvertedBackground={true}
|
||
testimonial="“The entire process was seamless. Professional, honest, and responsive from start to finish. Our roof looks incredible and the team handled everything.”"
|
||
rating={5}
|
||
author="Sarah Johnson, CEO, TechCorp"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-young-man-white-background_641386-889.jpg",
|
||
alt: "Sarah Johnson",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",
|
||
alt: "Michael Chen",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
|
||
alt: "Emily Rodriguez",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-25676.jpg",
|
||
alt: "David Kim",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-posing-with-helmet-medium-shot_23-2148920603.jpg",
|
||
alt: "Satisfied customer",
|
||
},
|
||
]}
|
||
ratingAnimation="opacity"
|
||
avatarsAnimation="opacity"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "1",
|
||
title: "How much does a roof replacement cost?",
|
||
content: "Every home is different, and costs vary based on materials, size, and complexity. We provide detailed inspections and transparent, no-obligation estimates tailored to your specific needs.",
|
||
},
|
||
{
|
||
id: "2",
|
||
title: "Do you help with insurance claims?",
|
||
content: "Absolutely. We specialize in storm damage restoration and work directly with insurance carriers to assist homeowners throughout the claims process, maximizing your eligible coverage and simplifying paperwork.",
|
||
},
|
||
{
|
||
id: "3",
|
||
title: "How long does a roof replacement take?",
|
||
content: "Most residential roof replacement projects are completed efficiently, typically within 1–2 days, weather permitting. Our dedicated project managers ensure a smooth and timely process.",
|
||
},
|
||
{
|
||
id: "4",
|
||
title: "Do you offer financing?",
|
||
content: "Yes, we understand that a new roof is a significant investment. Flexible financing options are available to help make your premium roofing project more affordable. Contact us to learn more.",
|
||
},
|
||
{
|
||
id: "5",
|
||
title: "Is the inspection really free?",
|
||
content: "Yes, our roof inspections are completely free, with no obligation. We provide a thorough assessment of your roof's condition, complete with photo documentation and honest recommendations.",
|
||
},
|
||
]}
|
||
title="Frequently Asked Questions"
|
||
description="Get quick answers to common questions about Telge Roofing services, pricing, and process."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "radial-gradient",
|
||
}}
|
||
text="Get Your Free Roof Inspection. Protect your home before minor issues become major expenses. Fill out the form below to schedule your complimentary assessment. (Note: Actual form fields for Name, Phone, Email, Address, Service Needed, Insurance Claim? (Yes/No) will be rendered here by the form component.)"
|
||
buttons={[
|
||
{
|
||
text: "GET MY FREE INSPECTION",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoSrc="http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg"
|
||
logoAlt="Telge Roofing Logo"
|
||
logoText="Telge Roofing"
|
||
leftLink={{
|
||
text: "Privacy Policy",
|
||
href: "#",
|
||
}}
|
||
rightLink={{
|
||
text: "Terms of Service",
|
||
href: "#",
|
||
}}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|