Merge version_3 into main #8

Merged
bender merged 1 commits from version_3 into main 2026-03-08 13:32:04 +00:00

View File

@@ -1,299 +1,180 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Star, CheckCircle, Clock, DollarSign, Sparkles, Brain, Wrench, ListChecks, AlertCircle, Heart } from "lucide-react";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Star } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Services", id: "services" },
{ name: "Why Us", id: "why-us" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
];
const testimonials = [
{
id: "1", name: "John Martinez", role: "Homeowner, Downtown", testimonial: "Lavelle Roofing fixed our roof after a storm. They were professional, honest, and finished on time. Highly recommended!", imageSrc: "/testimonials/john-martinez.jpg", imageAlt: "John Martinez"
},
{
id: "2", name: "Sarah Chen", role: "Property Manager", testimonial: "We manage 15 commercial properties. Lavelle Roofing is our go-to contractor. Their quality and reliability are unmatched.", imageSrc: "/testimonials/sarah-chen.jpg", imageAlt: "Sarah Chen"
},
{
id: "3", name: "Michael Thompson", role: "Business Owner", testimonial: "Emergency roof repair at 2 AM. They responded immediately and saved us from major water damage. Exceptional service!", imageSrc: "/testimonials/michael-thompson.jpg", imageAlt: "Michael Thompson"
},
{
id: "4", name: "Jennifer Rodriguez", role: "Homeowner, Suburbs", testimonial: "Got three quotes for a full roof replacement. Lavelle's price was fair and their workmanship is outstanding. 5 stars!", imageSrc: "/testimonials/jennifer-rodriguez.jpg", imageAlt: "Jennifer Rodriguez"
},
{
id: "5", name: "David Kim", role: "HOA Board Member", testimonial: "The team coordinated our community roof project perfectly. Professional, punctual, and left no mess. Wonderful to work with.", imageSrc: "/testimonials/david-kim.jpg", imageAlt: "David Kim"
}
];
const handleGetQuoteClick = () => {
const contactSection = document.getElementById("contact");
if (contactSection) {
contactSection.scrollIntoView({ behavior: "smooth" });
}
};
const heroTestimonials = [
{
name: "John Martinez", handle: "Homeowner, Downtown", testimonial: "Lavelle Roofing fixed our roof after a storm. Professional and on time!", rating: 5,
imageSrc: "/testimonials/john-martinez.jpg", imageAlt: "John Martinez"
},
{
name: "Sarah Chen", handle: "Property Manager", testimonial: "Their quality and reliability are unmatched. Our go-to contractor.", rating: 5,
imageSrc: "/testimonials/sarah-chen.jpg", imageAlt: "Sarah Chen"
},
{
name: "Michael Thompson", handle: "Business Owner", testimonial: "Emergency response saved us from major water damage. Exceptional!", rating: 5,
imageSrc: "/testimonials/michael-thompson.jpg", imageAlt: "Michael Thompson"
}
];
const footerColumns = [
{
title: "Services", items: [
{ label: "Roof Repairs", href: "#services" },
{ label: "Flat Roof Installation", href: "#services" },
{ label: "Chimney Repairs", href: "#services" },
{ label: "Guttering & Drainage", href: "#services" },
{ label: "Emergency Roofing", href: "#services" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#why-us" },
{ label: "Reviews", href: "#reviews" },
{ label: "Contact", href: "#contact" },
{ label: "FAQ", href: "#" },
{ label: "Blog", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Insurance & Certifications", href: "#" },
{ label: "Fully Insured", href: "#" },
],
},
];
const metrics = [
{
id: "1", value: "20+", description: "Years of Experience"
},
{
id: "2", value: "5,000+", description: "Satisfied Customers"
},
{
id: "3", value: "98%", description: "Customer Satisfaction"
},
{
id: "4", value: "24/7", description: "Emergency Response"
}
];
const faqs = [
{
id: "1", title: "How quickly can you respond to emergency repairs?", content: "We offer 24/7 emergency response. Most emergency calls are responded to within 2 hours during business hours and within 4 hours after hours. We understand that roof damage requires immediate attention to prevent further property damage."
},
{
id: "2", title: "What is the typical lifespan of a new roof?", content: "Most modern roofing materials last 15-25 years depending on the material type and climate conditions. We use high-quality materials and expert installation to ensure maximum longevity. We also recommend annual inspections to catch and repair issues early."
},
{
id: "3", title: "Do you offer warranties on your work?", content: "Yes! We offer a 10-year workmanship warranty on all our installations and major repairs. We also work with top roofing manufacturers who provide material warranties ranging from 15-30 years depending on the product."
},
{
id: "4", title: "Will you work with my insurance company?", content: "Absolutely. We have extensive experience working with insurance adjusters and claims. We can provide detailed estimates, documentation, and coordinate directly with your insurance company to streamline the claims process."
},
{
id: "5", title: "What types of roofing materials do you install?", content: "We install asphalt shingles, metal roofing, tile roofing, flat roofing systems, and more. We can recommend the best material for your climate, budget, and aesthetic preferences during a free consultation."
},
{
id: "6", title: "How can I prepare for a roof installation?", content: "We'll handle most of the preparation. We recommend clearing the area around your home of vehicles and outdoor furniture. We'll protect your landscaping and ensure minimal disruption. Our team will communicate the timeline and any special instructions during the initial consultation."
}
];
export default function Home() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="shadow"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="noise"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="extrabold"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Lavelle Roofing"
navItems={navItems}
button={{
text: "Get Free Quote", onClick: handleGetQuoteClick,
}}
animateOnLoad={true}
/>
</div>
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "#services" },
{ name: "Reviews", id: "#reviews" },
{ name: "FAQ", id: "#faq" },
{ name: "Contact", id: "#contact" }
]}
brandName="Lavelle Roofing"
button={{
text: "Get Quote", href: "#contact"
}}
/>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Roofing You Can Trust"
description="Reliable repairs, honest pricing, and professional workmanship. Local roofing specialists trusted by homeowners for fast response, fair quotes, and quality repairs that last."
tag="20+ Five Star Reviews"
tagIcon={Star}
tagAnimation="slide-up"
<HeroBillboardTestimonial
background={{ variant: "glowing-orb" }}
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=1", imageAlt: "Professional roofer working on modern home at sunset"},
{
imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=1", imageAlt: "Expert roof repair work"},
{
imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=1", imageAlt: "Modern flat roof installation"},
{
imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=1", imageAlt: "Professional chimney repair"},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg?_wi=1", imageAlt: "Emergency roof damage response"},
{
imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=1", imageAlt: "Professional guttering installation"},
{
imageSrc: "http://img.b2bpic.net/free-photo/happy-mother-smiling-posing-kitchen_23-2148414936.jpg?_wi=1", imageAlt: "Satisfied customer testimonial"},
{
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg?_wi=1", imageAlt: "Happy customer review"},
]}
title="Professional Roofing Solutions You Can Trust"
description="20+ years of expert roofing services. Storm repairs, installations, and emergency response available 24/7."
tag="Trusted Local Specialists"
imageSrc="/hero-roofing.jpg"
imageAlt="Professional roof installation"
mediaAnimation="slide-up"
testimonials={heroTestimonials}
testimonialRotationInterval={5000}
buttons={[
{
text: "Get Free Quote", onClick: handleGetQuoteClick,
},
{
text: "Call Now", onClick: () => {
window.location.href = "tel:+1234567890";
},
},
]}
buttonAnimation="slide-up"
carouselPosition="right"
/>
</div>
<div id="why-us" data-section="why-us">
<SplitAbout
title="Why Homeowners Trust Lavelle Roofing"
description="Based on consistent customer feedback, we've built our reputation on four core promises."
tag="Our Commitment"
tagIcon={CheckCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "Same Day Quotes", description: "Most customers hear back within 24 hours with a transparent, honest estimate.", icon: Clock,
},
{
title: "Honest Pricing", description: "No hidden costs or inflated prices. Clear, fair quotes you can trust.", icon: DollarSign,
},
{
title: "Clean & Professional", description: "Work completed tidily with respect for your property and property lines.", icon: Sparkles,
},
{
title: "Expert Knowledge", description: "Problems diagnosed quickly with the right solution, led by Marc's expertise.", icon: Brain,
},
]}
mediaAnimation="blur-reveal"
imagePosition="right"
imageSrc="http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=2"
imageAlt="Professional roofer working on modern home"
/>
</div>
<div id="services" data-section="services">
<FeatureCardMedia
title="Professional Roofing Services"
description="From emergency repairs to full installations, we handle all roofing needs with speed and precision."
tag="Services"
tagIcon={Wrench}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
id: "1", title: "Roof Repairs", description: "Leaks, broken tiles, storm damage and general roof issues fixed quickly and professionally.", tag: "Emergency", imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=2", imageAlt: "Professional roof repair work", buttons: [
{
text: "Learn More", onClick: () => {
const servicesSection = document.getElementById("services");
if (servicesSection) {
servicesSection.scrollIntoView({ behavior: "smooth" });
}
},
},
],
},
{
id: "2", title: "Flat Roof Installation", description: "Durable modern flat roofing systems built to last with professional installation.", tag: "Installation", imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=2", imageAlt: "Modern flat roof installation", buttons: [
{
text: "Learn More", onClick: () => {
const servicesSection = document.getElementById("services");
if (servicesSection) {
servicesSection.scrollIntoView({ behavior: "smooth" });
}
},
},
],
},
{
id: "3", title: "Chimney Repairs", description: "Repointing, chimney restoration and leak prevention with expert workmanship.", tag: "Repairs", imageSrc: "http://img.b2bpic.net/free-photo/plasterer-renovating-indoor-walls_1150-9959.jpg?_wi=2", imageAlt: "Professional chimney repair", buttons: [
{
text: "Learn More", onClick: () => {
const servicesSection = document.getElementById("services");
if (servicesSection) {
servicesSection.scrollIntoView({ behavior: "smooth" });
}
},
},
],
},
{
id: "4", title: "Guttering & Drainage", description: "Repairs, replacements and cleaning to prevent damp issues and water damage.", tag: "Maintenance", imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=2", imageAlt: "Professional guttering installation", buttons: [
{
text: "Learn More", onClick: () => {
const servicesSection = document.getElementById("services");
if (servicesSection) {
servicesSection.scrollIntoView({ behavior: "smooth" });
}
},
},
],
},
{
id: "5", title: "Emergency Roofing", description: "Fast response to urgent roof leaks or storm damage when you need it most.", tag: "24/7 Response", imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg?_wi=2", imageAlt: "Emergency roof damage response", buttons: [
{
text: "Call Now", onClick: () => {
window.location.href = "tel:+1234567890";
},
},
],
},
{ text: "Get Free Estimate", href: "#contact" },
{ text: "Call Now", href: "tel:+1-555-0123" }
]}
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardTwelve
testimonials={[
{
id: "1", name: "Edward F.", imageSrc: "http://img.b2bpic.net/free-photo/happy-mother-smiling-posing-kitchen_23-2148414936.jpg?_wi=2", imageAlt: "Edward F., satisfied customer"},
{
id: "2", name: "Kate M.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg?_wi=2", imageAlt: "Kate M., happy customer"},
{
id: "3", name: "Jimmy L.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg?_wi=1", imageAlt: "Jimmy L., satisfied client"},
{
id: "4", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-multiracial-business-team_1262-21007.jpg?_wi=1", imageAlt: "Sarah J., happy homeowner"},
{
id: "5", name: "Michael D.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg?_wi=1", imageAlt: "Michael D., satisfied customer"},
{
id: "6", name: "Jennifer R.", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-beautiful-confident-young-african-american-woman-dressed-stylish-purple-turtleneck-smiling-joyfully-showing-ok-gesture_344912-1015.jpg?_wi=1", imageAlt: "Jennifer R., happy customer"},
]}
cardTitle="What Customers Say About Lavelle Roofing"
cardTag="Trusted by Homeowners"
cardTagIcon={Heart}
cardAnimation="blur-reveal"
<TestimonialCardTwo
testimonials={testimonials}
title="Customer Reviews"
description="Real feedback from satisfied customers across our community"
tag="Verified Reviews"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
/>
</div>
<div id="process" data-section="process">
<FeatureCardMedia
title="Simple, Stress-Free Roofing"
description="Four straightforward steps from first contact to finished project."
tag="Process"
tagIcon={ListChecks}
tagAnimation="slide-up"
<div id="metrics" data-section="metrics">
<MetricCardTwo
metrics={metrics}
title="Why Choose Lavelle Roofing"
description="Proven track record of excellence and customer satisfaction"
tag="Our Impact"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
faqs={faqs}
imageSrc="/faq-hero.jpg"
imageAlt="Roofing consultation"
mediaAnimation="slide-up"
title="Frequently Asked Questions"
description="Find answers to common questions about our roofing services"
tag="Help Center"
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
id: "1", title: "Get in Touch", description: "Call or request a free quote online. We respond quickly.", tag: "Step 1", imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-building-with-wood_23-2148748856.jpg?_wi=3", imageAlt: "Contact us for a quote"},
{
id: "2", title: "Free Assessment", description: "We inspect the issue and explain exactly what needs fixing.", tag: "Step 2", imageSrc: "http://img.b2bpic.net/free-photo/crop-skateboarder-man-ramp_23-2147678250.jpg?_wi=3", imageAlt: "Professional roof assessment"},
{
id: "3", title: "Clear Quote", description: "You receive a fair, honest price with no hidden costs.", tag: "Step 3", imageSrc: "http://img.b2bpic.net/free-photo/bison-race-obstacle-race-sports-competition-belarus-may-2019_1321-3203.jpg?_wi=3", imageAlt: "Transparent pricing quote"},
{
id: "4", title: "Job Done Properly", description: "Professional work completed quickly and cleanly.", tag: "Step 4", imageSrc: "http://img.b2bpic.net/free-photo/focused-plumber-working-assembling-pipelines-install-plumbing-system-while-building-new-house_662251-539.jpg?_wi=3", imageAlt: "Professional completed project"},
]}
mediaPosition="left"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Emergency Support"
title="Got a Roof Leak?"
description="Don't wait until it causes more damage. Contact us immediately for fast, professional emergency roofing response."
tagIcon={AlertCircle}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Get Emergency Help"
termsText="We respond to emergencies 24/7. Contact our team right away or call for immediate assistance."
onSubmit={(email) => {
console.log("Emergency contact email:", email);
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
<FooterLogoReveal
logoText="Lavelle Roofing"
copyrightText="© 2025 Lavelle Roofing. All rights reserved."
columns={footerColumns}
leftLink={{
text: "Privacy Policy", href: "#"
}}
rightLink={{
text: "Terms of Service", href: "#"
}}
/>
</div>
</ThemeProvider>