Merge version_2 into main #4

Merged
bender merged 3 commits from version_2 into main 2026-03-11 12:02:29 +00:00
3 changed files with 136 additions and 62 deletions

View File

@@ -19,8 +19,7 @@ export default function AboutPage() {
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Roof Repair", href: "/services" },
{ label: "Roof Replacement", href: "/services" },
{ label: "Inspections", href: "/services" },
@@ -28,8 +27,7 @@ export default function AboutPage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Customer Reviews", href: "/reviews" },
{ label: "Contact", href: "/contact" },
@@ -37,8 +35,7 @@ export default function AboutPage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
{ label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
{ label: "Open 24/7 for Emergencies", href: "#" },
@@ -64,9 +61,7 @@ export default function AboutPage() {
<NavbarStyleCentered
navItems={navItems}
button={{
text: "Get Free Estimate",
href: "/contact",
}}
text: "Get Free Estimate", href: "/contact"}}
brandName="Navarro Family Roofing"
/>
</div>
@@ -78,6 +73,39 @@ export default function AboutPage() {
</p>
</div>
<div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">See Our Work in Action</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Before */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
alt="Roof before repair - damaged and worn"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
</div>
{/* After */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
alt="Roof after repair - restored and pristine"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Professional restoration - like new again</p>
</div>
</div>
</div>
</div>
<div id="why-choose" data-section="why-choose">
<TextAbout
tag="About Us"
@@ -85,9 +113,7 @@ export default function AboutPage() {
useInvertedBackground={false}
buttons={[
{
text: "Get Your Free Estimate",
href: "/contact",
},
text: "Get Your Free Estimate", href: "/contact"},
]}
/>
</div>
@@ -102,40 +128,20 @@ export default function AboutPage() {
animationType="slide-up"
metrics={[
{
id: "1",
value: "4.8",
title: "Google Rating from 58+ Reviews",
items: [
"Real customer testimonials",
"Verified Milltown service area",
],
id: "1", value: "4.8", title: "Google Rating from 58+ Reviews", items: [
"Real customer testimonials", "Verified Milltown service area"],
},
{
id: "2",
value: "24/7",
title: "Emergency Roof Repair Available",
items: [
"Same-day inspections",
"Fast emergency response",
],
id: "2", value: "24/7", title: "Emergency Roof Repair Available", items: [
"Same-day inspections", "Fast emergency response"],
},
{
id: "3",
value: "100%",
title: "Fully Licensed & Insured",
items: [
"All work guaranteed",
"Comprehensive coverage",
],
id: "3", value: "100%", title: "Fully Licensed & Insured", items: [
"All work guaranteed", "Comprehensive coverage"],
},
{
id: "4",
value: "Local",
title: "Family-Owned Since Day One",
items: [
"Community focused service",
"Personalized attention",
],
id: "4", value: "Local", title: "Family-Owned Since Day One", items: [
"Community focused service", "Personalized attention"],
},
]}
/>
@@ -149,4 +155,4 @@ export default function AboutPage() {
</div>
</ThemeProvider>
);
}
}

View File

@@ -15,9 +15,9 @@ export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
{ name: "About", id: "/about" },
{ name: "Reviews", id: "/reviews" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
@@ -31,9 +31,9 @@ export default function HomePage() {
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Customer Reviews", href: "#reviews" },
{ label: "Contact", href: "#contact" },
{ label: "About Us", href: "/about" },
{ label: "Customer Reviews", href: "/reviews" },
{ label: "Contact", href: "/contact" },
{ label: "Emergency Service", href: "tel:(551)310-2400" },
],
},
@@ -42,7 +42,7 @@ export default function HomePage() {
{ label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
{ label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
{ label: "Open 24/7 for Emergencies", href: "#" },
{ label: "Free Estimates Available", href: "#contact" },
{ label: "Free Estimates Available", href: "/contact" },
],
},
];
@@ -66,7 +66,7 @@ export default function HomePage() {
brandName="Navarro Family Roofing"
navItems={navItems}
button={{
text: "Get Free Estimate", href: "#contact"}}
text: "Get Free Estimate", href: "/contact"}}
/>
</div>
@@ -77,7 +77,7 @@ export default function HomePage() {
description="Milltown's Trusted Family Roofing Experts. Roof repairs, replacements, and inspections done right the first time."
buttons={[
{
text: "Get Your Free Estimate", href: "#contact"},
text: "Get Your Free Estimate", href: "/contact"},
{
text: "Call Now: (551) 310-2400", href: "tel:(551)310-2400"},
]}
@@ -90,6 +90,40 @@ export default function HomePage() {
/>
</div>
{/* Before and After Section */}
<div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">See the Difference We Make</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Before */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
alt="Roof before repair - damaged and worn"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
</div>
{/* After */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
alt="Roof after repair - restored and pristine"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Professional restoration - like new again</p>
</div>
</div>
</div>
</div>
{/* Trust Indicators Section */}
<div id="trust-indicators" data-section="trust-indicators">
<MetricCardSeven
@@ -157,7 +191,7 @@ export default function HomePage() {
useInvertedBackground={false}
buttons={[
{
text: "Get Your Free Estimate", href: "#contact"},
text: "Get Your Free Estimate", href: "/contact"},
]}
/>
</div>
@@ -223,4 +257,4 @@ export default function HomePage() {
</div>
</ThemeProvider>
);
}
}

View File

@@ -12,9 +12,9 @@ export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "About", id: "about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" },
{ name: "About", id: "/about" },
{ name: "Reviews", id: "/reviews" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
@@ -28,9 +28,9 @@ export default function ServicesPage() {
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Customer Reviews", href: "/#reviews" },
{ label: "Contact", href: "#contact" },
{ label: "About Us", href: "/about" },
{ label: "Customer Reviews", href: "/reviews" },
{ label: "Contact", href: "/contact" },
{ label: "Emergency Service", href: "tel:(551)310-2400" },
],
},
@@ -39,7 +39,7 @@ export default function ServicesPage() {
{ label: "Phone: (551) 310-2400", href: "tel:(551)310-2400" },
{ label: "Address: 260 Ryders Ln, Milltown, NJ 08850", href: "#" },
{ label: "Open 24/7 for Emergencies", href: "#" },
{ label: "Free Estimates Available", href: "#contact" },
{ label: "Free Estimates Available", href: "/contact" },
],
},
];
@@ -63,7 +63,7 @@ export default function ServicesPage() {
brandName="Navarro Family Roofing"
navItems={navItems}
button={{
text: "Get Free Estimate", href: "#contact"}}
text: "Get Free Estimate", href: "/contact"}}
/>
</div>
@@ -96,6 +96,40 @@ export default function ServicesPage() {
/>
</div>
{/* Before and After Section */}
<div id="before-after" data-section="before-after" className="mx-auto px-4 md:px-6 py-16 md:py-24">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Transformation Gallery</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Before */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">Before</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg"
alt="Roof before repair - damaged and worn"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Damaged, worn roof in need of repair</p>
</div>
{/* After */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-center text-foreground/80">After</h3>
<div className="relative overflow-hidden rounded-lg shadow-lg">
<img
src="http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg"
alt="Roof after repair - restored and pristine"
className="w-full h-64 object-cover"
/>
</div>
<p className="text-center text-foreground/70">Professional restoration - like new again</p>
</div>
</div>
</div>
</div>
{/* Service Quality Section */}
<div id="service-quality" data-section="service-quality">
<TextAbout
@@ -104,7 +138,7 @@ export default function ServicesPage() {
useInvertedBackground={false}
buttons={[
{
text: "Schedule Your Free Inspection", href: "#contact"},
text: "Schedule Your Free Inspection", href: "/contact"},
]}
/>
</div>
@@ -138,4 +172,4 @@ export default function ServicesPage() {
</div>
</ThemeProvider>
);
}
}