bender/ba0ae3f8-c31d-4cb8-bd95-72c37009d53d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/services/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-11 12:02:24 +00:00
parent 195abfa319
commit f16c8a19ed
1 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/services/page.tsx
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>
);
}
}