Merge version_1 into main #1
494
src/app/page.tsx
494
src/app/page.tsx
@@ -19,374 +19,154 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "process",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="JM Roofing 3rd Gen"
|
||||
button={{
|
||||
text: "Free Inspection",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="JM Roofing 3rd Gen"
|
||||
button={{ text: "Free Inspection", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Third-Generation Roofing. Built to Protect What Matters Most."
|
||||
description="JM Roofing 3rd Generation delivers premium roof repair, replacement, and installation with craftsmanship passed down through three generations."
|
||||
buttons={[
|
||||
{
|
||||
text: "Free Inspection",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:5550000000",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rows-seats_1398-4403.jpg",
|
||||
imageAlt: "Luxury Roofing System",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13174.jpg",
|
||||
imageAlt: "Expert Roof Installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-chisinau-city-center_1268-15424.jpg",
|
||||
imageAlt: "Residential Roofing Craftsmanship",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",
|
||||
imageAlt: "Commercial Roof Restoration",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-2594.jpg",
|
||||
imageAlt: "Storm Damage Roof Repair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-with-helmet-sitting-roof_23-2149343713.jpg",
|
||||
imageAlt: "Premium Roofing Materials",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Third-Generation Roofing. Built to Protect What Matters Most."
|
||||
description="JM Roofing 3rd Generation delivers premium roof repair, replacement, and installation with craftsmanship passed down through three generations."
|
||||
buttons={[
|
||||
{ text: "Free Inspection", href: "#contact" },
|
||||
{ text: "Call Now", href: "tel:5550000000" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/rows-seats_1398-4403.jpg", imageAlt: "Luxury Roofing System" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13174.jpg", imageAlt: "Expert Roof Installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-chisinau-city-center_1268-15424.jpg", imageAlt: "Residential Roofing Craftsmanship" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg", imageAlt: "Commercial Roof Restoration" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-2594.jpg", imageAlt: "Storm Damage Roof Repair" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-with-helmet-sitting-roof_23-2149343713.jpg", imageAlt: "Premium Roofing Materials" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Roof Replacement",
|
||||
subtitle: "Durable and elegant",
|
||||
category: "Installation",
|
||||
value: "01",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Roof Repair",
|
||||
subtitle: "Expert leak detection",
|
||||
category: "Maintenance",
|
||||
value: "02",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Storm Damage",
|
||||
subtitle: "Swift, documented repairs",
|
||||
category: "Storm",
|
||||
value: "03",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Residential",
|
||||
subtitle: "Refined residential finish",
|
||||
category: "Home",
|
||||
value: "04",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Commercial",
|
||||
subtitle: "Reliable business solutions",
|
||||
category: "Business",
|
||||
value: "05",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
title: "Inspections",
|
||||
subtitle: "Hidden issue detection",
|
||||
category: "Assessment",
|
||||
value: "06",
|
||||
},
|
||||
]}
|
||||
title="Roofing Services With a Higher Standard"
|
||||
description="Premium roofing solutions for homeowners and businesses who want lasting protection and a clean, refined finish."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "Roof Replacement", subtitle: "Durable and elegant", category: "Installation", value: "01" },
|
||||
{ id: "s2", title: "Roof Repair", subtitle: "Expert leak detection", category: "Maintenance", value: "02" },
|
||||
{ id: "s3", title: "Storm Damage", subtitle: "Swift, documented repairs", category: "Storm", value: "03" },
|
||||
{ id: "s4", title: "Residential", subtitle: "Refined residential finish", category: "Home", value: "04" },
|
||||
{ id: "s5", title: "Commercial", subtitle: "Reliable business solutions", category: "Business", value: "05" },
|
||||
{ id: "s6", title: "Inspections", subtitle: "Hidden issue detection", category: "Assessment", value: "06" },
|
||||
]}
|
||||
title="Roofing Services With a Higher Standard"
|
||||
description="Premium roofing solutions for homeowners and businesses who want lasting protection and a clean, refined finish."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Roofing Legacy You Can See in Every Detail"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Roofing Legacy You Can See in Every Detail"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
price: "Step 1",
|
||||
name: "Inspection",
|
||||
buttons: [
|
||||
{
|
||||
text: "Start",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"On-site assessment",
|
||||
"Problem identification",
|
||||
"Detailed explanation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
price: "Step 2",
|
||||
name: "Estimate",
|
||||
buttons: [
|
||||
{
|
||||
text: "View",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Transparent pricing",
|
||||
"No pressure",
|
||||
"Clear proposal",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
price: "Step 3",
|
||||
name: "Installation",
|
||||
buttons: [
|
||||
{
|
||||
text: "Build",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Precision work",
|
||||
"Respect for property",
|
||||
"Quality assurance",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
price: "Step 4",
|
||||
name: "Review",
|
||||
buttons: [
|
||||
{
|
||||
text: "Finalize",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Quality walkthrough",
|
||||
"Performance check",
|
||||
"Client satisfaction",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple, Stress-Free Roofing Experience"
|
||||
description="Our four-step process ensures transparency and peace of mind."
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", price: "Step 1", name: "Inspection", buttons: [{ text: "Start" }], features: ["On-site assessment", "Problem identification", "Detailed explanation"] },
|
||||
{ id: "p2", price: "Step 2", name: "Estimate", buttons: [{ text: "View" }], features: ["Transparent pricing", "No pressure", "Clear proposal"] },
|
||||
{ id: "p3", price: "Step 3", name: "Installation", buttons: [{ text: "Build" }], features: ["Precision work", "Respect for property", "Quality assurance"] },
|
||||
{ id: "p4", price: "Step 4", name: "Review", buttons: [{ text: "Finalize" }], features: ["Quality walkthrough", "Performance check", "Client satisfaction"] },
|
||||
]}
|
||||
title="Simple, Stress-Free Roofing Experience"
|
||||
description="Our four-step process ensures transparency and peace of mind."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"GAF Certified",
|
||||
"CertainTeed Pro",
|
||||
"Owens Corning Select",
|
||||
"BBB Accredited",
|
||||
"NRCA Member",
|
||||
"Local Chamber",
|
||||
"Guild Quality",
|
||||
]}
|
||||
title="Quality Assured Partnerships"
|
||||
description="We partner with top industry leaders to ensure the highest standard of material and installation quality."
|
||||
/>
|
||||
</div>
|
||||
<div id="proof" data-section="proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["GAF Certified", "CertainTeed Pro", "Owens Corning Select", "BBB Accredited", "NRCA Member", "Local Chamber", "Guild Quality"]}
|
||||
title="Quality Assured Partnerships"
|
||||
description="We partner with top industry leaders to ensure the highest standard of material and installation quality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
role: "Homeowner",
|
||||
company: "Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-young-woman-giving-thumbs-up-standing-isolated-rosy_176532-7958.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael C.",
|
||||
role: "Property Manager",
|
||||
company: "Commercial",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-workers-high-five_23-2149366624.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily R.",
|
||||
role: "Homeowner",
|
||||
company: "Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-brush-paint_23-2148903535.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David K.",
|
||||
role: "Business Owner",
|
||||
company: "Retailer",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jane D.",
|
||||
role: "Homeowner",
|
||||
company: "Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-husband-wife-toasting-with-wine-before-family-lunch-kitchen_637285-3136.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "3",
|
||||
label: "Generations",
|
||||
},
|
||||
{
|
||||
value: "1000+",
|
||||
label: "Roofs Completed",
|
||||
},
|
||||
{
|
||||
value: "25+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Professional results and a smooth experience from start to finish."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", role: "Homeowner", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-young-woman-giving-thumbs-up-standing-isolated-rosy_176532-7958.jpg" },
|
||||
{ id: "t2", name: "Michael C.", role: "Property Manager", company: "Commercial", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-workers-high-five_23-2149366624.jpg" },
|
||||
{ id: "t3", name: "Emily R.", role: "Homeowner", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-brush-paint_23-2148903535.jpg" },
|
||||
{ id: "t4", name: "David K.", role: "Business Owner", company: "Retailer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg" },
|
||||
{ id: "t5", name: "Jane D.", role: "Homeowner", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-husband-wife-toasting-with-wine-before-family-lunch-kitchen_637285-3136.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "3", label: "Generations" },
|
||||
{ value: "1000+", label: "Roofs Completed" },
|
||||
{ value: "25+", label: "Years Experience" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Professional results and a smooth experience from start to finish."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How long does a roof replacement take?",
|
||||
content: "Typically 1-3 days depending on the size of the property.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you provide warranties?",
|
||||
content: "Yes, we offer industry-leading material and workmanship warranties.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What materials do you use?",
|
||||
content: "We use premium, proven brands to ensure long-term performance.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long does a roof replacement take?", content: "Typically 1-3 days depending on the size of the property." },
|
||||
{ id: "f2", title: "Do you provide warranties?", content: "Yes, we offer industry-leading material and workmanship warranties." },
|
||||
{ id: "f3", title: "What materials do you use?", content: "We use premium, proven brands to ensure long-term performance." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Schedule your free, no-pressure inspection with our 3rd-generation roofing team today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Inspection",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
text="Schedule your free, no-pressure inspection with our 3rd-generation roofing team today."
|
||||
buttons={[{ text: "Request Inspection" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="JM Roofing 3rd Gen"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Roof Replacement",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Repairs",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Process",
|
||||
href: "#process",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="JM Roofing 3rd Gen"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Roof Replacement", href: "#services" }, { label: "Repairs", href: "#services" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Process", href: "#process" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user