Merge version_1 into main #1
416
src/app/page.tsx
416
src/app/page.tsx
@@ -27,302 +27,142 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="TM Roofing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="TM Roofing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background="gradient-bars"
|
||||
title="Roofing Excellence. Built to Last."
|
||||
description="Professional, reliable roofing solutions for your home. Expert craftsmanship, fair pricing, and on-time delivery every single time."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg",
|
||||
imageAlt: "Professional roof inspection",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-iron-textured-abstract-backdrop_23-2148139853.jpg",
|
||||
imageAlt: "Roof renovation in progress",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-construction_1127-104.jpg",
|
||||
imageAlt: "Detailed slate roofing",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/geometric-construction-project-landing-page_23-2149689873.jpg",
|
||||
imageAlt: "Residential maintenance",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-with-helmet-sitting-roof_23-2149343711.jpg",
|
||||
imageAlt: "Roofing craftsmanship",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Roofing Excellence. Built to Last."
|
||||
description="Professional, reliable roofing solutions for your home. Expert craftsmanship, fair pricing, and on-time delivery every single time."
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg", imageAlt: "Professional roof inspection" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/metallic-iron-textured-abstract-backdrop_23-2148139853.jpg", imageAlt: "Roof renovation in progress" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-construction_1127-104.jpg", imageAlt: "Detailed slate roofing" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/geometric-construction-project-landing-page_23-2149689873.jpg", imageAlt: "Residential maintenance" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-with-helmet-sitting-roof_23-2149343711.jpg", imageAlt: "Roofing craftsmanship" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Hardworking, Reliable Roofing Specialists"
|
||||
description="We are a dedicated team committed to quality and punctuality. We believe that professional work, fair pricing, and clear communication are the foundations of every successful project. No shortcuts, just expert results."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "On-Time Service",
|
||||
description: "We respect your schedule and arrive exactly when promised.",
|
||||
},
|
||||
{
|
||||
title: "Expert Craftsmanship",
|
||||
description: "Detail-oriented work that stands the test of time.",
|
||||
},
|
||||
{
|
||||
title: "Transparent Pricing",
|
||||
description: "Fair quotes with no hidden costs.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-with-drill-low-view_23-2148748772.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Hardworking, Reliable Roofing Specialists"
|
||||
description="We are a dedicated team committed to quality and punctuality. We believe that professional work, fair pricing, and clear communication are the foundations of every successful project. No shortcuts, just expert results."
|
||||
bulletPoints={[
|
||||
{ title: "On-Time Service", description: "We respect your schedule and arrive exactly when promised." },
|
||||
{ title: "Expert Craftsmanship", description: "Detail-oriented work that stands the test of time." },
|
||||
{ title: "Transparent Pricing", description: "Fair quotes with no hidden costs." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-with-drill-low-view_23-2148748772.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Full Roof Installation",
|
||||
description: "High-quality installation using premium materials.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-2594.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-wooden-house-with-new-roof_23-2149343703.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Flat Roof Systems",
|
||||
description: "Durable, weather-resistant flat roofing designs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13113.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/crop-woman-training-near-railings_23-2147786915.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Chimney Repairs",
|
||||
description: "Comprehensive masonry and pointing services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/romantic-couple-looking-each-other-before-kissing_1153-734.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-control-box_107420-95947.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Roof Repairs",
|
||||
description: "Fast, precise fixes for leaks and damages.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-full-shot_23-2149714278.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14804.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Cladding Services",
|
||||
description: "Efficient and weather-tight cladding installations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892919.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/modern-building-clear-blue-sky_250224-204.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
{
|
||||
title: "Roof Inspections",
|
||||
description: "Thorough assessments for long-term safety.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384864.jpg",
|
||||
buttonText: "Learn More",
|
||||
},
|
||||
]}
|
||||
title="Professional Roofing Solutions"
|
||||
description="Comprehensive roofing services tailored to protect your home with durable materials and expert installation."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Full Roof Installation", description: "High-quality installation using premium materials.", imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-2594.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-wooden-house-with-new-roof_23-2149343703.jpg", buttonText: "Learn More" },
|
||||
{ title: "Flat Roof Systems", description: "Durable, weather-resistant flat roofing designs.", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13113.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/crop-woman-training-near-railings_23-2147786915.jpg", buttonText: "Learn More" },
|
||||
{ title: "Chimney Repairs", description: "Comprehensive masonry and pointing services.", imageSrc: "http://img.b2bpic.net/free-photo/romantic-couple-looking-each-other-before-kissing_1153-734.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-control-box_107420-95947.jpg", buttonText: "Learn More" },
|
||||
{ title: "Roof Repairs", description: "Fast, precise fixes for leaks and damages.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-full-shot_23-2149714278.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14804.jpg", buttonText: "Learn More" },
|
||||
{ title: "Cladding Services", description: "Efficient and weather-tight cladding installations.", imageSrc: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892919.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/modern-building-clear-blue-sky_250224-204.jpg", buttonText: "Learn More" },
|
||||
{ title: "Roof Inspections", description: "Thorough assessments for long-term safety.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384864.jpg", buttonText: "Learn More" }
|
||||
]}
|
||||
title="Professional Roofing Solutions"
|
||||
description="Comprehensive roofing services tailored to protect your home with durable materials and expert installation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Excellence in Numbers"
|
||||
tag="Our Impact"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15+",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "500+",
|
||||
description: "Roofs Completed",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
description: "Customer Satisfaction",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Excellence in Numbers"
|
||||
tag="Our Impact"
|
||||
metrics={[
|
||||
{ id: "1", value: "15+", description: "Years Experience" },
|
||||
{ id: "2", value: "500+", description: "Roofs Completed" },
|
||||
{ id: "3", value: "100%", description: "Customer Satisfaction" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Homeowner",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13336.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Client",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ambitious-businessman-standing-street_1262-3451.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Homeowner",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-standing-garden-showing-ok-gesture-looking-camera_259150-59030.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Client",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-older-business-woman-posing-while-out-work_23-2148661159.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Laura Smith",
|
||||
role: "Homeowner",
|
||||
company: "Residential",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Rating",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Reviews",
|
||||
},
|
||||
{
|
||||
value: "10+",
|
||||
label: "Awards",
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Authentic feedback from homeowners who trust our work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", role: "Homeowner", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13336.jpg" },
|
||||
{ id: "2", name: "Michael Chen", role: "Client", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/ambitious-businessman-standing-street_1262-3451.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", role: "Homeowner", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-standing-garden-showing-ok-gesture-looking-camera_259150-59030.jpg" },
|
||||
{ id: "4", name: "David Kim", role: "Client", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-older-business-woman-posing-while-out-work_23-2148661159.jpg" },
|
||||
{ id: "5", name: "Laura Smith", role: "Homeowner", company: "Residential", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9", label: "Rating" },
|
||||
{ value: "500+", label: "Reviews" },
|
||||
{ value: "10+", label: "Awards" }
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Authentic feedback from homeowners who trust our work."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you provide free quotes?",
|
||||
content: "Yes, we provide fair, no-obligation quotes for all our services.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long do installations take?",
|
||||
content: "Timeline depends on your roof size and complexity, but we always prioritize efficiency.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are your materials durable?",
|
||||
content: "We only use high-quality, weather-tested materials to ensure long-term durability.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Everything you need to know about our roofing services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do you provide free quotes?", content: "Yes, we provide fair, no-obligation quotes for all our services." },
|
||||
{ id: "2", title: "How long do installations take?", content: "Timeline depends on your roof size and complexity, but we always prioritize efficiency." },
|
||||
{ id: "3", title: "Are your materials durable?", content: "We only use high-quality, weather-tested materials to ensure long-term durability." }
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Everything you need to know about our roofing services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Roofing You Can Rely On?"
|
||||
description="Get a fast, fair quote from a team that delivers. Contact us today to start your project."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project...",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/girl-teaching-her-grandfather-how-use-laptop_1157-29763.jpg"
|
||||
buttonText="Request a Free Quote"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Roofing You Can Rely On?"
|
||||
description="Get a fast, fair quote from a team that delivers. Contact us today to start your project."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
{ name: "phone", type: "tel", placeholder: "Your Phone Number" }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project..." }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/girl-teaching-her-grandfather-how-use-laptop_1157-29763.jpg"
|
||||
buttonText="Request a Free Quote"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="TM Roofing Service"
|
||||
copyrightText="© 2025 TM Roofing Service. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="TM Roofing Service"
|
||||
copyrightText="© 2025 TM Roofing Service. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user