Merge version_2 into main

Update src/app/services/page.tsx
2026-03-11 12:02:53 +00:00 · 2026-03-11 12:02:49 +00:00 · 2026-03-11 12:02:49 +00:00 · 2026-03-11 12:02:28 +00:00 · 2026-03-11 12:02:24 +00:00 · 2026-03-11 12:02:24 +00:00
3 changed files with 146 additions and 72 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -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>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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
@@ -132,19 +166,19 @@ export default function HomePage() {
            {
              id: 1,
              title: "Roof Repair",              description:
-                "Emergency leak repairs, shingle replacement, and fast damage fixes to restore your roof's integrity.",              imageSrc: "http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg",              imageAlt: "Professional roof repair work"},
+                "Emergency leak repairs, shingle replacement, and fast damage fixes to restore your roof's integrity.",              imageSrc: "http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg?_wi=1",              imageAlt: "Professional roof repair work"},
            {
              id: 2,
              title: "Roof Replacement",              description:
-                "Complete roof replacement with premium materials, expert installation, and lasting durability.",              imageSrc: "http://img.b2bpic.net/free-photo/feet-man-standing-longboard_23-2148138968.jpg",              imageAlt: "New roof installation on residential property"},
+                "Complete roof replacement with premium materials, expert installation, and lasting durability.",              imageSrc: "http://img.b2bpic.net/free-photo/feet-man-standing-longboard_23-2148138968.jpg?_wi=1",              imageAlt: "New roof installation on residential property"},
            {
              id: 3,
              title: "Roof Inspections",              description:
-                "Thorough inspections to identify issues early, prevent costly damage, and ensure safety.",              imageSrc: "http://img.b2bpic.net/free-photo/signing-document_1098-14224.jpg",              imageAlt: "Professional roof inspection and assessment"},
+                "Thorough inspections to identify issues early, prevent costly damage, and ensure safety.",              imageSrc: "http://img.b2bpic.net/free-photo/signing-document_1098-14224.jpg?_wi=1",              imageAlt: "Professional roof inspection and assessment"},
            {
              id: 4,
              title: "Gutter Installation",              description:
-                "Seamless gutter systems to protect your home from water damage and foundation issues.",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-two-pipes-as-they-go-up-building-window_181624-16532.jpg",              imageAlt: "Professional gutter installation"},
+                "Seamless gutter systems to protect your home from water damage and foundation issues.",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-two-pipes-as-they-go-up-building-window_181624-16532.jpg?_wi=1",              imageAlt: "Professional gutter installation"},
          ]}
        />
      </div>
@@ -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>
@@ -204,7 +238,7 @@ export default function HomePage() {
          background={{
            variant: "sparkles-gradient"}}
          useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/high-angle-shot-famous-otaki-beach-new-zealand_181624-10535.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/high-angle-shot-famous-otaki-beach-new-zealand_181624-10535.jpg?_wi=1"
          imageAlt="Milltown New Jersey homes"
          mediaAnimation="slide-up"
          mediaPosition="right"
@@ -223,4 +257,4 @@ export default function HomePage() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -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>

@@ -79,23 +79,57 @@ export default function ServicesPage() {
            {
              id: 1,
              title: "Roof Repair",              description:
-                "We handle all types of roof repairs including emergency leak fixes, shingle replacement, flashing repair, and damage restoration. Our quick response team can be at your property within hours to prevent further water damage.",              imageSrc: "http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg",              imageAlt: "Professional roof repair work"},
+                "We handle all types of roof repairs including emergency leak fixes, shingle replacement, flashing repair, and damage restoration. Our quick response team can be at your property within hours to prevent further water damage.",              imageSrc: "http://img.b2bpic.net/free-photo/weathered-concrete-surface-with-grime-mildew_632498-60772.jpg?_wi=2",              imageAlt: "Professional roof repair work"},
            {
              id: 2,
              title: "Roof Replacement",              description:
-                "When your roof reaches the end of its life, we provide complete replacement services using premium materials and expert installation techniques. We work with your insurance and provide transparent pricing.",              imageSrc: "http://img.b2bpic.net/free-photo/feet-man-standing-longboard_23-2148138968.jpg",              imageAlt: "New roof installation on residential property"},
+                "When your roof reaches the end of its life, we provide complete replacement services using premium materials and expert installation techniques. We work with your insurance and provide transparent pricing.",              imageSrc: "http://img.b2bpic.net/free-photo/feet-man-standing-longboard_23-2148138968.jpg?_wi=2",              imageAlt: "New roof installation on residential property"},
            {
              id: 3,
              title: "Professional Inspections",              description:
-                "Our certified inspectors conduct thorough roof assessments to identify potential problems before they become expensive repairs. Perfect after storms or as part of your home maintenance routine.",              imageSrc: "http://img.b2bpic.net/free-photo/signing-document_1098-14224.jpg",              imageAlt: "Professional roof inspection and assessment"},
+                "Our certified inspectors conduct thorough roof assessments to identify potential problems before they become expensive repairs. Perfect after storms or as part of your home maintenance routine.",              imageSrc: "http://img.b2bpic.net/free-photo/signing-document_1098-14224.jpg?_wi=2",              imageAlt: "Professional roof inspection and assessment"},
            {
              id: 4,
              title: "Gutter Installation & Maintenance",              description:
-                "Protect your home's foundation with seamless gutter systems. We install, repair, and maintain gutters to ensure proper water drainage and prevent foundation damage.",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-two-pipes-as-they-go-up-building-window_181624-16532.jpg",              imageAlt: "Professional gutter installation"},
+                "Protect your home's foundation with seamless gutter systems. We install, repair, and maintain gutters to ensure proper water drainage and prevent foundation damage.",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-two-pipes-as-they-go-up-building-window_181624-16532.jpg?_wi=2",              imageAlt: "Professional gutter installation"},
          ]}
        />
      </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>
@@ -119,7 +153,7 @@ export default function ServicesPage() {
          background={{
            variant: "sparkles-gradient"}}
          useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/high-angle-shot-famous-otaki-beach-new-zealand_181624-10535.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/high-angle-shot-famous-otaki-beach-new-zealand_181624-10535.jpg?_wi=2"
          imageAlt="Milltown New Jersey homes"
          mediaAnimation="slide-up"
          mediaPosition="right"
@@ -138,4 +172,4 @@ export default function ServicesPage() {
      </div>
    </ThemeProvider>
  );
-}
+}
Author	SHA1	Message	Date
bender	48e25514ea	Merge version_2 into main Merge version_2 into main	2026-03-11 12:02:53 +00:00
bender	996c227256	Update src/app/services/page.tsx	2026-03-11 12:02:49 +00:00
bender	d7f058d112	Update src/app/page.tsx	2026-03-11 12:02:49 +00:00
bender	c98742551e	Merge version_2 into main Merge version_2 into main	2026-03-11 12:02:28 +00:00
bender	f16c8a19ed	Update src/app/services/page.tsx	2026-03-11 12:02:24 +00:00
bender	195abfa319	Update src/app/page.tsx	2026-03-11 12:02:24 +00:00
bender	24ead1d765	Update src/app/about/page.tsx	2026-03-11 12:02:23 +00:00
bender	e520526629	Merge version_1 into main Merge version_1 into main	2026-03-10 22:52:05 +00:00
bender	44ad3a5284	Merge version_1 into main Merge version_1 into main	2026-03-10 22:51:36 +00:00
bender	b39d73f749	Merge version_1 into main Merge version_1 into main	2026-03-10 22:50:32 +00:00