222 lines
14 KiB
TypeScript
222 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
const scrollToId = (id: string) => {
|
|
if (id.startsWith('http') || id.startsWith('tel:') || id.startsWith('mailto:')) {
|
|
window.open(id, '_blank');
|
|
return;
|
|
}
|
|
|
|
const targetId = id.replace(/^#+/, '');
|
|
const target = document.getElementById(targetId);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Why Us", id: "why-us" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Modern Roofing"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Built to Protect. Designed to Last."
|
|
description="Premium roofing solutions delivered with precision, speed, and unmatched attention to detail."
|
|
testimonials={[
|
|
{ name: "Brady T.", handle: "Homeowner", testimonial: "Completed the job faster than expected and left our yard spotless.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg?_wi=1", imageAlt: "cinematic modern house roof sunset drone" },
|
|
{ name: "Mrig R.", handle: "Homeowner", testimonial: "Smooth, professional, and stress-free from start to finish.", rating: 5, 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?_wi=1", imageAlt: "cinematic modern house roof sunset drone" },
|
|
{ name: "Ian L.", handle: "Homeowner", testimonial: "Top-quality work, finished on time, and extremely detail-oriented.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1", imageAlt: "cinematic modern house roof sunset drone" },
|
|
{ name: "Sarah J.", handle: "Homeowner", testimonial: "Exceptional communication and attention to detail. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fire-escape-ladder_1385-549.jpg?_wi=1", imageAlt: "cinematic modern house roof sunset drone" },
|
|
{ name: "Mark D.", handle: "Homeowner", testimonial: "The best roofing experience I've had. Professional and tidy.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-business-man-signing-documents-modern-office_158595-5383.jpg?_wi=1", imageAlt: "cinematic modern house roof sunset drone" },
|
|
]}
|
|
buttons={[
|
|
{ text: "Get a Free Inspection", onClick: () => scrollToId("#contact") },
|
|
{ text: "Call Now: (262) 546-9589", onClick: () => scrollToId("tel:2625469589") },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg?_wi=2"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/young-woman-her-kitchen_329181-20396.jpg", alt: "Happy client" },
|
|
{ src: "http://img.b2bpic.net/free-photo/shining-face-beautiful-woman-home_329181-1327.jpg", alt: "Satisfied homeowner" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-smiley-man-looking-camera_23-2148306634.jpg", alt: "Content resident" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-man-drinking-coffee-construction-side_329181-3771.jpg", alt: "Roofing project customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-sitting-floor-living-room-using-laptop-looking-computer-screen_1258-314534.jpg", alt: "Happy homeowner" },
|
|
]}
|
|
avatarText="Trusted by 500+ local homeowners"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<FeatureCardEight
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Precision Craftsmanship", description: "Every detail matters. We ensure your roof stands the test of time.", 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?_wi=2" },
|
|
{ title: "Fast & Efficient", description: "Projects completed ahead of schedule without sacrificing quality.", imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2" },
|
|
{ title: "Clean Job Sites", description: "No nails, no debris, no stress. We leave your property spotless.", imageSrc: "http://img.b2bpic.net/free-photo/fire-escape-ladder_1385-549.jpg?_wi=2" },
|
|
{ title: "Transparent Pricing", description: "Honest estimates with no surprise costs or hidden fees.", imageSrc: "http://img.b2bpic.net/free-photo/successful-business-man-signing-documents-modern-office_158595-5383.jpg?_wi=2" },
|
|
]}
|
|
title="Roofing Done Right — Every Time"
|
|
description="We don't cut corners. From material selection to the final sweep, we focus on durability, aesthetics, and respect for your property."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "Roof Replacement", price: "Expert Installation", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-roof-wooden-house_23-2149343706.jpg" },
|
|
{ id: "p2", name: "Roof Repairs", price: "Lasting Fixes", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg" },
|
|
{ id: "p3", name: "Inspections", price: "Detailed Analysis", imageSrc: "http://img.b2bpic.net/free-photo/mature-engineer_1098-18201.jpg" },
|
|
{ id: "p4", name: "Gutter Systems", price: "Seamless Protection", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13126.jpg" },
|
|
{ id: "p5", name: "Storm Restoration", price: "Emergency Care", imageSrc: "http://img.b2bpic.net/free-photo/cracked-table-paint_1122-425.jpg" },
|
|
{ id: "p6", name: "Custom Flashing", price: "Precision Fit", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-with-drill_23-2148748774.jpg" },
|
|
]}
|
|
title="Complete Roofing Solutions"
|
|
description="Professional services for every stage of your roofing project."
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardEight
|
|
textboxLayout="split-description"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "1. Inspection", description: "We assess your roof honestly—no pressure, no upselling.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-holding-clipboard_23-2148384535.jpg" },
|
|
{ title: "2. Clear Estimate", description: "Detailed, transparent pricing explained in plain English.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-carpenter-working-with-experienced-man_329181-15650.jpg" },
|
|
{ title: "3. Installation", description: "Fast, precise, and expertly handled by our team.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg" },
|
|
{ title: "4. Final Cleanup", description: "We inspect your property to ensure it's left spotless.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-two-leaf-rakes-shovels-leaned-against-wooden-fence-with-blurred-background_181624-4367.jpg" },
|
|
]}
|
|
title="A Simple, Stress-Free Process"
|
|
description="We take the complexity out of roof maintenance, ensuring you're informed and comfortable at every step."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Brady T.", handle: "Verified Homeowner", testimonial: "Completed the job faster than expected and left our yard spotless.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13336.jpg" },
|
|
{ id: "2", name: "Mrig R.", handle: "Verified Homeowner", testimonial: "Smooth, professional, and stress-free from start to finish.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-pleased-woman-seated-sofa-looking-ahead_259150-60489.jpg" },
|
|
{ id: "3", name: "Ian L.", handle: "Verified Homeowner", testimonial: "Top-quality work, finished on time, and extremely detail-oriented.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-successful-businesspeople-showing-thumb-up-sign-office_23-2147923403.jpg" },
|
|
{ id: "4", name: "Sarah J.", handle: "Verified Homeowner", testimonial: "Amazing service and great attention to detail. Best experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg" },
|
|
{ id: "5", name: "Mark D.", handle: "Verified Homeowner", testimonial: "Exceeded all expectations. Very professional crew.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" },
|
|
]}
|
|
showRating={true}
|
|
title="Trusted by Homeowners Across Wisconsin"
|
|
description="See why local families trust us to protect their most valuable investment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="showcase" data-section="showcase">
|
|
<ProductCardOne
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "s1", name: "Modern Slate Finish", price: "Transformation A", imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-weave-abstract-wallpaper-background_1048-8671.jpg" },
|
|
{ id: "s2", name: "Asphalt Replacement", price: "Transformation B", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-wooden-house-with-new-roof_23-2149343703.jpg" },
|
|
{ id: "s3", name: "Historic Restoration", price: "Transformation C", imageSrc: "http://img.b2bpic.net/free-photo/roof-tiles-warehouse-closeup-selective-focus-construction-repair-houses-delivery-sale-building-materials_166373-3212.jpg" },
|
|
{ id: "s4", name: "Luxury Shingle Upgrade", price: "Transformation D", imageSrc: "http://img.b2bpic.net/free-photo/metallic-background-with-black-lines_23-2148744336.jpg" },
|
|
{ id: "s5", name: "Commercial Roofing", price: "Transformation E", imageSrc: "http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937902.jpg" },
|
|
{ id: "s6", name: "Modern Gutter System", price: "Transformation F", imageSrc: "http://img.b2bpic.net/free-photo/stretching_23-2148023765.jpg" },
|
|
]}
|
|
title="Project Showcase"
|
|
description="Transformations that speak for themselves. Precision you can see."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "How long does a replacement take?", content: "Most projects are completed in 1-2 days depending on roof size." },
|
|
{ id: "q2", title: "Are you fully insured?", content: "Yes, we are fully licensed and insured for your peace of mind." },
|
|
{ id: "q3", title: "Do you offer financing?", content: "We offer several flexible financing plans to fit your budget." },
|
|
{ id: "q4", title: "What materials do you use?", content: "We use only top-rated, industry-standard roofing materials for maximum lifespan." },
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our process and commitment to excellence."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Get Started"
|
|
title="Ready for a Roof You Can Rely On?"
|
|
description="Don't wait for minor issues to cause major damage. Get your free, no-obligation inspection today."
|
|
buttons={[
|
|
{ text: "Schedule Your Free Inspection", onClick: () => scrollToId("#contact") },
|
|
{ text: "Call (262) 546-9589", onClick: () => scrollToId("tel:2625469589") },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Modern Roofing"
|
|
columns={[
|
|
{ title: "Navigate", items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "Why Us", href: "#why-us" },
|
|
{ label: "Services", href: "#services" },
|
|
] },
|
|
{ title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" },
|
|
] },
|
|
{ title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Use", href: "#" },
|
|
] },
|
|
]}
|
|
copyrightText="© 2024 Modern Roofing."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|