bender/55f09d55-2b89-43df-a18e-d74960560445
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1

13 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
ae80d86a23 Update src/app/styles/variables.css 2026-03-03 19:43:08 +00:00
bender
e015d14af6 Update src/app/styles/base.css 2026-03-03 19:43:08 +00:00
bender
1d7632e9bc Update src/app/services/page.tsx 2026-03-03 19:43:07 +00:00
bender
f856532566 Update src/app/page.tsx 2026-03-03 19:43:07 +00:00
bender
6f0751d934 Update src/app/layout.tsx 2026-03-03 19:43:07 +00:00
bender
1ff3e84302 Update src/app/contact/page.tsx 2026-03-03 19:43:06 +00:00
bender
ec6ac62d5f Update src/app/about/page.tsx 2026-03-03 19:43:06 +00:00
bender
84f278e0e3 Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:39:21 +00:00
bender
abcbf378c7 Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:33:12 +00:00
bender
08f6c32bc9 Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:29:24 +00:00
bender
4974c227ca Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:24:32 +00:00
bender
4b367f9395 Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:22:31 +00:00
bender
e96f57f06b Merge version_1 into main 
Merge version_1 into main
 2026-03-03 19:17:55 +00:00
7 changed files with 106 additions and 135 deletions
Expand all files Collapse all files

39
src/app/about/page.tsx
View File

@@ -5,30 +5,31 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
import SplitAbout from "@/components/sections/about/SplitAbout"; import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen"; import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Clock, Award, Star, DollarSign, Zap, Heart } from "lucide-react"; import { Clock, Award, Star, DollarSign, Zap, Heart } from "lucide-react";
export default function AboutPage() { export default function AboutPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight" defaultTextAnimation="reveal-blur"
borderRadius="soft" borderRadius="rounded"
contentWidth="medium" contentWidth="medium"
sizing="mediumLargeSizeLargeTitles" sizing="mediumLargeSizeLargeTitles"
background="grid" background="none"
cardStyle="gradient-bordered" cardStyle="solid"
primaryButtonStyle="flat" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="VanPro Plumbing" brandName="VanPro Plumbing"
navItems={[ navItems={[
{ name: "Services", id: "/services" }, { name: "Services", id: "/services" },
{ name: "About", id: "about-story" }, { name: "About", id: "/about" },
{ name: "Reviews", id: "about-testimonials" }, { name: "Reviews", id: "#reviews" },
{ name: "Home", id: "/" }, { name: "Contact", id: "/contact" },
]} ]}
button={{ button={{
text: "Call Now", href: "tel:+1-604-618-4988"}} text: "Call Now", href: "tel:+1-604-618-4988"}}
@@ -67,7 +68,7 @@ export default function AboutPage() {
"We're part of the Vancouver community and take pride in serving our neighbors with excellence.", icon: Zap, "We're part of the Vancouver community and take pride in serving our neighbors with excellence.", icon: Zap,
}, },
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/front-view-male-mechanic-leaning-car_23-2148327555.jpg" imageSrc="http://img.b2bpic.net/free-photo/front-view-male-mechanic-leaning-car_23-2148327555.jpg?_wi=2"
imageAlt="VanPro Plumbing professional team and van" imageAlt="VanPro Plumbing professional team and van"
mediaAnimation="blur-reveal" mediaAnimation="blur-reveal"
textboxLayout="default" textboxLayout="default"
@@ -91,15 +92,15 @@ export default function AboutPage() {
{ {
id: "1", title: "Professional Emergency Response", quote: id: "1", title: "Professional Emergency Response", quote:
"When our pipe burst at 2 AM on a Sunday, VanPro was here in 45 minutes. Professional, efficient, and fixed the problem immediately. They saved us from serious water damage.", name: "Sarah Mitchell", role: "Vancouver Homeowner", imageSrc: "When our pipe burst at 2 AM on a Sunday, VanPro was here in 45 minutes. Professional, efficient, and fixed the problem immediately. They saved us from serious water damage.", name: "Sarah Mitchell", role: "Vancouver Homeowner", imageSrc:
"http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg", imageAlt: "Sarah Mitchell"}, "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg?_wi=2", imageAlt: "Sarah Mitchell"},
{ {
id: "2", title: "Honest and Fair Service", quote: id: "2", title: "Honest and Fair Service", quote:
"I was worried about getting overcharged. VanPro explained exactly what was needed, gave me a fair quote, and did quality work. No surprises, just honest service.", name: "Michael Chen", role: "Burnaby Property Manager", imageSrc: "I was worried about getting overcharged. VanPro explained exactly what was needed, gave me a fair quote, and did quality work. No surprises, just honest service.", name: "Michael Chen", role: "Burnaby Property Manager", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Michael Chen"}, "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=3", imageAlt: "Michael Chen"},
{ {
id: "3", title: "True Professionalism", quote: id: "3", title: "True Professionalism", quote:
"The technician knew exactly what he was doing. Certified professional, courteous, cleaned up after himself. This is what true professionalism looks like.", name: "Emily Rodriguez", role: "West Vancouver Homeowner", imageSrc: "The technician knew exactly what he was doing. Certified professional, courteous, cleaned up after himself. This is what true professionalism looks like.", name: "Emily Rodriguez", role: "West Vancouver Homeowner", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Emily Rodriguez"}, "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=4", imageAlt: "Emily Rodriguez"},
]} ]}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
@@ -114,7 +115,7 @@ export default function AboutPage() {
{ {
items: [ items: [
{ label: "Call Emergency", href: "tel:+1-604-618-4988" }, { label: "Call Emergency", href: "tel:+1-604-618-4988" },
{ label: "Get Free Estimate", href: "#" }, { label: "Get Free Estimate", href: "/contact" },
{ {
label: "$100 Off Camera Inspection", href: "/services"}, label: "$100 Off Camera Inspection", href: "/services"},
], ],
@@ -122,8 +123,8 @@ export default function AboutPage() {
{ {
items: [ items: [
{ label: "Services", href: "/services" }, { label: "Services", href: "/services" },
{ label: "About Us", href: "#about-story" }, { label: "About Us", href: "/about" },
{ label: "Reviews", href: "#about-testimonials" }, { label: "Reviews", href: "/" },
], ],
}, },
{ {
@@ -131,7 +132,7 @@ export default function AboutPage() {
{ {
label: "Emergency Service", href: "tel:+1-604-618-4988"}, label: "Emergency Service", href: "tel:+1-604-618-4988"},
{ label: "Service Areas", href: "#" }, { label: "Service Areas", href: "#" },
{ label: "Contact", href: "#" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
@@ -147,4 +148,4 @@ export default function AboutPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

25
src/app/contact/page.tsx
View File

@@ -5,21 +5,22 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
import ContactFaq from "@/components/sections/contact/ContactFaq"; import ContactFaq from "@/components/sections/contact/ContactFaq";
import FaqSplitText from "@/components/sections/faq/FaqSplitText"; import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Phone } from "lucide-react"; import { Phone } from "lucide-react";
export default function ContactPage() { export default function ContactPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight" defaultTextAnimation="reveal-blur"
borderRadius="soft" borderRadius="rounded"
contentWidth="medium" contentWidth="medium"
sizing="mediumLargeSizeLargeTitles" sizing="mediumLargeSizeLargeTitles"
background="grid" background="none"
cardStyle="gradient-bordered" cardStyle="solid"
primaryButtonStyle="flat" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
@@ -27,8 +28,8 @@ export default function ContactPage() {
navItems={[ navItems={[
{ name: "Services", id: "/services" }, { name: "Services", id: "/services" },
{ name: "About", id: "/about" }, { name: "About", id: "/about" },
{ name: "Home", id: "/" }, { name: "Reviews", id: "#reviews" },
{ name: "Call Now", id: "tel:+1-604-618-4988" }, { name: "Contact", id: "/contact" },
]} ]}
button={{ button={{
text: "Call Now", href: "tel:+1-604-618-4988"}} text: "Call Now", href: "tel:+1-604-618-4988"}}
@@ -108,7 +109,7 @@ export default function ContactPage() {
{ {
items: [ items: [
{ label: "Call Emergency", href: "tel:+1-604-618-4988" }, { label: "Call Emergency", href: "tel:+1-604-618-4988" },
{ label: "Get Free Estimate", href: "#contact" }, { label: "Get Free Estimate", href: "/contact" },
{ {
label: "$100 Off Camera Inspection", href: "/services"}, label: "$100 Off Camera Inspection", href: "/services"},
], ],
@@ -125,7 +126,7 @@ export default function ContactPage() {
{ {
label: "Emergency Service", href: "tel:+1-604-618-4988"}, label: "Emergency Service", href: "tel:+1-604-618-4988"},
{ label: "Service Areas", href: "#" }, { label: "Service Areas", href: "#" },
{ label: "Contact", href: "#contact" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
@@ -141,4 +142,4 @@ export default function ContactPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

10
src/app/layout.tsx
View File

@@ -1,11 +1,11 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Mulish } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const mulish = Mulish({ const inter = Inter({
variable: "--font-mulish", subsets: ["latin"], variable: "--font-inter", subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -35,7 +35,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body className={`${mulish.variable} antialiased`}> <body className={`${inter.variable} antialiased`}>
<Tag /> <Tag />
{children} {children}
@@ -1409,4 +1409,4 @@ export default function RootLayout({
</ServiceWrapper> </ServiceWrapper>
</html> </html>
); );
} }

92
src/app/page.tsx
View File

@@ -7,32 +7,32 @@ import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import SplitAbout from "@/components/sections/about/SplitAbout"; import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen"; import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactFaq from "@/components/sections/contact/ContactFaq"; import ContactFaq from "@/components/sections/contact/ContactFaq";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Clock, Award, Star, DollarSign, Zap, Phone } from "lucide-react"; import { Clock, Award, Star, DollarSign, Zap, Phone } from "lucide-react";
export default function HomePage() { export default function HomePage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight" defaultTextAnimation="reveal-blur"
borderRadius="soft" borderRadius="rounded"
contentWidth="medium" contentWidth="medium"
sizing="mediumLargeSizeLargeTitles" sizing="mediumLargeSizeLargeTitles"
background="grid" background="none"
cardStyle="gradient-bordered" cardStyle="solid"
primaryButtonStyle="flat" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="VanPro Plumbing" brandName="VanPro Plumbing"
navItems={[ navItems={[
{ name: "Services", id: "services" }, { name: "Services", id: "/services" },
{ name: "Why Us", id: "why-us" }, { name: "About", id: "/about" },
{ name: "Reviews", id: "reviews" }, { name: "Reviews", id: "#reviews" },
{ name: "Emergency", id: "emergency" }, { name: "Contact", id: "/contact" },
]} ]}
button={{ button={{
text: "Call Now", href: "tel:+1-604-618-4988"}} text: "Call Now", href: "tel:+1-604-618-4988"}}
@@ -44,7 +44,7 @@ export default function HomePage() {
<HeroCentered <HeroCentered
title="Vancouver's 5-Star Rated 24/7 Plumbing Experts" title="Vancouver's 5-Star Rated 24/7 Plumbing Experts"
description="Drains, Sewer & Plumbing Services Done Right the First Time. Red Seal Certified Professionals • Same-Day Solutions • Upfront Pricing" description="Drains, Sewer & Plumbing Services Done Right the First Time. Red Seal Certified Professionals • Same-Day Solutions • Upfront Pricing"
background={{ variant: "downward-rays-static" }} background={{ variant: "plain" }}
avatars={[ avatars={[
{ {
src: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-standing-with-arms-crossed-with-confident-smile-isolated-orange-wall_141793-14478.jpg", alt: "VanPro certified technician"}, src: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-standing-with-arms-crossed-with-confident-smile-isolated-orange-wall_141793-14478.jpg", alt: "VanPro certified technician"},
@@ -54,7 +54,7 @@ export default function HomePage() {
avatarText="Trusted by 629+ Homeowners (5.0 Rating)" avatarText="Trusted by 629+ Homeowners (5.0 Rating)"
buttons={[ buttons={[
{ text: "Call Now (604) 618-4988", href: "tel:+1-604-618-4988" }, { text: "Call Now (604) 618-4988", href: "tel:+1-604-618-4988" },
{ text: "Get Free Estimate", href: "#contact" }, { text: "Get Free Estimate", href: "/contact" },
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
ariaLabel="Hero section - VanPro Plumbing services" ariaLabel="Hero section - VanPro Plumbing services"
@@ -75,22 +75,22 @@ export default function HomePage() {
{ {
title: "Drain Cleaning", description: title: "Drain Cleaning", description:
"Fast, professional drain cleaning for clogs, backups, and slow drains. Equipment includes high-pressure jetting.", imageSrc: "Fast, professional drain cleaning for clogs, backups, and slow drains. Equipment includes high-pressure jetting.", imageSrc:
"http://img.b2bpic.net/free-photo/girl-s-hand-filling-cup-with-water_23-2147824128.jpg", imageAlt: "Professional drain cleaning service", button: { text: "Learn More", href: "/services" }, "http://img.b2bpic.net/free-photo/girl-s-hand-filling-cup-with-water_23-2147824128.jpg?_wi=1", imageAlt: "Professional drain cleaning service", button: { text: "Learn More", href: "/services/drain-cleaning" },
}, },
{ {
title: "$100 Off Camera Inspection", description: title: "$100 Off Camera Inspection", description:
"Advanced sewer camera inspection to diagnose issues accurately. See exactly what's wrong before expensive repairs.", imageSrc: "Advanced sewer camera inspection to diagnose issues accurately. See exactly what's wrong before expensive repairs.", imageSrc:
"http://img.b2bpic.net/free-photo/shot-oilfield-worker-checking-quality-gas-pipes-construction-site_342744-363.jpg", imageAlt: "Sewer camera inspection technology", button: { text: "Book Now", href: "tel:+1-604-618-4988" }, "http://img.b2bpic.net/free-photo/shot-oilfield-worker-checking-quality-gas-pipes-construction-site_342744-363.jpg?_wi=1", imageAlt: "Sewer camera inspection technology", button: { text: "Book Now", href: "tel:+1-604-618-4988" },
}, },
{ {
title: "Emergency Plumbing", description: title: "Emergency Plumbing", description:
"24/7 emergency response for burst pipes, floods, and urgent issues. Available nights, weekends, and holidays.", imageSrc: "24/7 emergency response for burst pipes, floods, and urgent issues. Available nights, weekends, and holidays.", imageSrc:
"http://img.b2bpic.net/free-photo/distraught-car-mechanic-going-through-problematic-paperwork-with-his-manager-auto-repair-shop_637285-7584.jpg", imageAlt: "Emergency plumbing repair service", button: { text: "Get Help Now", href: "tel:+1-604-618-4988" }, "http://img.b2bpic.net/free-photo/distraught-car-mechanic-going-through-problematic-paperwork-with-his-manager-auto-repair-shop_637285-7584.jpg?_wi=1", imageAlt: "Emergency plumbing repair service", button: { text: "Get Help Now", href: "tel:+1-604-618-4988" },
}, },
{ {
title: "Water Heater Replacement", description: title: "Water Heater Replacement", description:
"Professional water heater installation and replacement. Same-day service available on select units.", imageSrc: "Professional water heater installation and replacement. Same-day service available on select units.", imageSrc:
"http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334225.jpg", imageAlt: "Water heater replacement and installation", button: { text: "Get Quote", href: "#contact" }, "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334225.jpg?_wi=1", imageAlt: "Water heater replacement and installation", button: { text: "Get Quote", href: "/contact" },
}, },
]} ]}
gridVariant="two-columns-alternating-heights" gridVariant="two-columns-alternating-heights"
@@ -133,7 +133,7 @@ export default function HomePage() {
title: "Locally Owned", description: title: "Locally Owned", description:
"We're part of the Vancouver community and take pride in serving our neighbors right."}, "We're part of the Vancouver community and take pride in serving our neighbors right."},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/front-view-male-mechanic-leaning-car_23-2148327555.jpg" imageSrc="http://img.b2bpic.net/free-photo/front-view-male-mechanic-leaning-car_23-2148327555.jpg?_wi=1"
imageAlt="VanPro Plumbing professional team" imageAlt="VanPro Plumbing professional team"
mediaAnimation="blur-reveal" mediaAnimation="blur-reveal"
textboxLayout="default" textboxLayout="default"
@@ -156,27 +156,27 @@ export default function HomePage() {
{ {
id: "1", title: "Outstanding Emergency Response", quote: id: "1", title: "Outstanding Emergency Response", quote:
"When our pipe burst at 2 AM on a Sunday, VanPro was here in 45 minutes. The technician was professional, efficient, and fixed the problem immediately. Saved us from serious water damage!", name: "Sarah Mitchell", role: "Homeowner, Vancouver", imageSrc: "When our pipe burst at 2 AM on a Sunday, VanPro was here in 45 minutes. The technician was professional, efficient, and fixed the problem immediately. Saved us from serious water damage!", name: "Sarah Mitchell", role: "Homeowner, Vancouver", imageSrc:
"http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg", imageAlt: "Sarah Mitchell"}, "http://img.b2bpic.net/free-photo/closeup-shot-handsome-male-smiling_181624-41237.jpg?_wi=1", imageAlt: "Sarah Mitchell"},
{ {
id: "2", title: "Honest and Fair Pricing", quote: id: "2", title: "Honest and Fair Pricing", quote:
"I was worried about getting overcharged for the repair. VanPro explained exactly what was needed, gave me a fair quote, and did quality work. No surprises, just great service.", name: "Michael Chen", role: "Property Manager, Burnaby", imageSrc: "I was worried about getting overcharged for the repair. VanPro explained exactly what was needed, gave me a fair quote, and did quality work. No surprises, just great service.", name: "Michael Chen", role: "Property Manager, Burnaby", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Michael Chen"}, "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=1", imageAlt: "Michael Chen"},
{ {
id: "3", title: "Red Seal Certified Excellence", quote: id: "3", title: "Red Seal Certified Excellence", quote:
"The technician knew exactly what he was doing. Certified professional, courteous, cleaned up after himself. This is what true professionalism looks like.", name: "Emily Rodriguez", role: "Homeowner, West Vancouver", imageSrc: "The technician knew exactly what he was doing. Certified professional, courteous, cleaned up after himself. This is what true professionalism looks like.", name: "Emily Rodriguez", role: "Homeowner, West Vancouver", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Emily Rodriguez"}, "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1", imageAlt: "Emily Rodriguez"},
{ {
id: "4", title: "Same-Day Solution", quote: id: "4", title: "Same-Day Solution", quote:
"Called in the morning about a drain issue. They came that afternoon and fixed it completely. Fast, reliable, and worth every penny.", name: "David Kim", role: "Homeowner, East Vancouver", imageSrc: "Called in the morning about a drain issue. They came that afternoon and fixed it completely. Fast, reliable, and worth every penny.", name: "David Kim", role: "Homeowner, East Vancouver", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "David Kim"}, "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2", imageAlt: "David Kim"},
{ {
id: "5", title: "Camera Inspection Was Thorough", quote: id: "5", title: "Camera Inspection Was Thorough", quote:
"The $100 off camera inspection was perfect for diagnosing the problem. They showed me exactly what was wrong and explained my options clearly.", name: "Jennifer Walsh", role: "Homeowner, North Shore", imageSrc: "The $100 off camera inspection was perfect for diagnosing the problem. They showed me exactly what was wrong and explained my options clearly.", name: "Jennifer Walsh", role: "Homeowner, North Shore", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Jennifer Walsh"}, "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=3", imageAlt: "Jennifer Walsh"},
{ {
id: "6", title: "Professional from Start to Finish", quote: id: "6", title: "Professional from Start to Finish", quote:
"Every interaction was professional. Punctual arrival, clean work, transparent communication. I'd recommend VanPro to anyone needing plumbing services.", name: "Robert Thompson", role: "Property Owner, Coquitlam", imageSrc: "Every interaction was professional. Punctual arrival, clean work, transparent communication. I'd recommend VanPro to anyone needing plumbing services.", name: "Robert Thompson", role: "Property Owner, Coquitlam", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Robert Thompson"}, "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=2", imageAlt: "Robert Thompson"},
]} ]}
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
@@ -217,38 +217,6 @@ export default function HomePage() {
/> />
</div> </div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Common Plumbing Questions"
sideDescription="Find answers to the questions homeowners ask us most often about plumbing repairs, maintenance, and our services."
faqs={[
{
id: "1", title: "What should I do if I have a pipe burst?", content:
"First, shut off the main water valve immediately to stop water flow. Then call VanPro Plumbing right away at (604) 618-4988. We provide 24/7 emergency response to minimize water damage."},
{
id: "2", title: "How often should I get my drains cleaned?", content:
"Most homes benefit from professional drain cleaning every 1-2 years as preventative maintenance. If you're experiencing slow drains or backups, we should evaluate your system immediately."},
{
id: "3", title: "What's included in a camera inspection?", content:
"Our camera inspection uses advanced technology to see inside your sewer lines. We identify clogs, cracks, tree root intrusion, and other problems without digging. Get $100 off this service!"},
{
id: "4", title: "How long does a water heater last?", content:
"Traditional tank water heaters typically last 8-12 years. If yours is over 10 years old or showing signs of failure, replacement may be more cost-effective than repair."},
{
id: "5", title: "Do you warranty your work?", content:
"Yes, all our work is backed by our satisfaction guarantee. If you're not happy, we'll make it right at no additional cost."},
{
id: "6", title: "Can you help with slow drains?", content:
"Absolutely. Slow drains often indicate buildup or blockages. We use professional equipment to clear the issue completely, not just temporarily."},
]}
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
faqsAnimation="slide-up"
ariaLabel="Frequently asked questions"
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoEmphasis <FooterLogoEmphasis
logoText="VanPro Plumbing" logoText="VanPro Plumbing"
@@ -256,15 +224,15 @@ export default function HomePage() {
{ {
items: [ items: [
{ label: "Call Emergency", href: "tel:+1-604-618-4988" }, { label: "Call Emergency", href: "tel:+1-604-618-4988" },
{ label: "Get Free Estimate", href: "#contact" }, { label: "Get Free Estimate", href: "/contact" },
{ {
label: "$100 Off Camera Inspection", href: "#services"}, label: "$100 Off Camera Inspection", href: "#services"},
], ],
}, },
{ {
items: [ items: [
{ label: "Services", href: "#services" }, { label: "Services", href: "/services" },
{ label: "About Us", href: "#why-us" }, { label: "About Us", href: "/about" },
{ label: "Reviews", href: "#reviews" }, { label: "Reviews", href: "#reviews" },
], ],
}, },
@@ -273,7 +241,7 @@ export default function HomePage() {
{ {
label: "Emergency Service", href: "tel:+1-604-618-4988"}, label: "Emergency Service", href: "tel:+1-604-618-4988"},
{ label: "Service Areas", href: "#" }, { label: "Service Areas", href: "#" },
{ label: "Contact", href: "#emergency" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
@@ -289,4 +257,4 @@ export default function HomePage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

43
src/app/services/page.tsx
View File

@@ -5,29 +5,30 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne"; import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FaqSplitText from "@/components/sections/faq/FaqSplitText"; import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
export default function ServicesPage() { export default function ServicesPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-bubble" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight" defaultTextAnimation="reveal-blur"
borderRadius="soft" borderRadius="rounded"
contentWidth="medium" contentWidth="medium"
sizing="mediumLargeSizeLargeTitles" sizing="mediumLargeSizeLargeTitles"
background="grid" background="none"
cardStyle="gradient-bordered" cardStyle="solid"
primaryButtonStyle="flat" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
brandName="VanPro Plumbing" brandName="VanPro Plumbing"
navItems={[ navItems={[
{ name: "Services", id: "services-detail" }, { name: "Services", id: "/services" },
{ name: "FAQ", id: "services-faq" }, { name: "About", id: "/about" },
{ name: "Reviews", id: "/" }, { name: "Reviews", id: "#reviews" },
{ name: "Home", id: "/" }, { name: "Contact", id: "/contact" },
]} ]}
button={{ button={{
text: "Call Now", href: "tel:+1-604-618-4988"}} text: "Call Now", href: "tel:+1-604-618-4988"}}
@@ -44,22 +45,22 @@ export default function ServicesPage() {
{ {
title: "Drain Cleaning & Maintenance", description: title: "Drain Cleaning & Maintenance", description:
"Professional drain cleaning using high-pressure jetting technology. We clear clogs, backups, and slow drains quickly and efficiently. Preventative maintenance keeps your system flowing smoothly.", imageSrc: "Professional drain cleaning using high-pressure jetting technology. We clear clogs, backups, and slow drains quickly and efficiently. Preventative maintenance keeps your system flowing smoothly.", imageSrc:
"http://img.b2bpic.net/free-photo/girl-s-hand-filling-cup-with-water_23-2147824128.jpg", imageAlt: "Professional drain cleaning service", button: { text: "Schedule Service", href: "tel:+1-604-618-4988" }, "http://img.b2bpic.net/free-photo/girl-s-hand-filling-cup-with-water_23-2147824128.jpg?_wi=2", imageAlt: "Professional drain cleaning service", button: { text: "Schedule Service", href: "tel:+1-604-618-4988" },
}, },
{ {
title: "Sewer Camera Inspection", description: title: "Sewer Camera Inspection", description:
"Advanced video camera inspection reveals exactly what's happening inside your sewer lines. Identify cracks, tree roots, and blockages without expensive digging. Save $100 on this service.", imageSrc: "Advanced video camera inspection reveals exactly what's happening inside your sewer lines. Identify cracks, tree roots, and blockages without expensive digging. Save $100 on this service.", imageSrc:
"http://img.b2bpic.net/free-photo/shot-oilfield-worker-checking-quality-gas-pipes-construction-site_342744-363.jpg", imageAlt: "Sewer camera inspection technology", button: { text: "Book Inspection", href: "tel:+1-604-618-4988" }, "http://img.b2bpic.net/free-photo/shot-oilfield-worker-checking-quality-gas-pipes-construction-site_342744-363.jpg?_wi=2", imageAlt: "Sewer camera inspection technology", button: { text: "Book Inspection", href: "tel:+1-604-618-4988" },
}, },
{ {
title: "Emergency Plumbing Repair", description: title: "Emergency Plumbing Repair", description:
"24/7 emergency response for burst pipes, leaks, floods, and urgent issues. Our technicians arrive quickly and resolve your problem to minimize water damage and restore peace of mind.", imageSrc: "24/7 emergency response for burst pipes, leaks, floods, and urgent issues. Our technicians arrive quickly and resolve your problem to minimize water damage and restore peace of mind.", imageSrc:
"http://img.b2bpic.net/free-photo/distraught-car-mechanic-going-through-problematic-paperwork-with-his-manager-auto-repair-shop_637285-7584.jpg", imageAlt: "Emergency plumbing repair service", button: { text: "Emergency Service", href: "tel:+1-604-618-4988" }, "http://img.b2bpic.net/free-photo/distraught-car-mechanic-going-through-problematic-paperwork-with-his-manager-auto-repair-shop_637285-7584.jpg?_wi=2", imageAlt: "Emergency plumbing repair service", button: { text: "Emergency Service", href: "tel:+1-604-618-4988" },
}, },
{ {
title: "Water Heater Installation", description: title: "Water Heater Installation", description:
"Professional water heater replacement and installation. Whether traditional tank or tankless systems, our technicians handle the complete job with same-day service available on select units.", imageSrc: "Professional water heater replacement and installation. Whether traditional tank or tankless systems, our technicians handle the complete job with same-day service available on select units.", imageSrc:
"http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334225.jpg", imageAlt: "Water heater replacement and installation", button: { text: "Get Quote", href: "#" }, "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334225.jpg?_wi=2", imageAlt: "Water heater replacement and installation", button: { text: "Get Quote", href: "/contact" },
}, },
]} ]}
gridVariant="two-columns-alternating-heights" gridVariant="two-columns-alternating-heights"
@@ -111,15 +112,15 @@ export default function ServicesPage() {
{ {
items: [ items: [
{ label: "Call Emergency", href: "tel:+1-604-618-4988" }, { label: "Call Emergency", href: "tel:+1-604-618-4988" },
{ label: "Get Free Estimate", href: "#" }, { label: "Get Free Estimate", href: "/contact" },
{ {
label: "$100 Off Camera Inspection", href: "#services-detail"}, label: "$100 Off Camera Inspection", href: "/services"},
], ],
}, },
{ {
items: [ items: [
{ label: "Services", href: "#services-detail" }, { label: "Services", href: "/services" },
{ label: "About Us", href: "/" }, { label: "About Us", href: "/about" },
{ label: "Reviews", href: "/" }, { label: "Reviews", href: "/" },
], ],
}, },
@@ -128,7 +129,7 @@ export default function ServicesPage() {
{ {
label: "Emergency Service", href: "tel:+1-604-618-4988"}, label: "Emergency Service", href: "tel:+1-604-618-4988"},
{ label: "Service Areas", href: "#" }, { label: "Service Areas", href: "#" },
{ label: "Contact", href: "#" }, { label: "Contact", href: "/contact" },
], ],
}, },
{ {
@@ -144,4 +145,4 @@ export default function ServicesPage() {
</div> </div>
</ThemeProvider> </ThemeProvider>
); );
} }

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-mulish), sans-serif; font-family: var(--font-inter), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-mulish), sans-serif; font-family: var(--font-inter), sans-serif;
} }

28
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f7f6f7;; /* --background: #ffffff;;
--card: #ffffff;; --card: #f9f9f9;;
--foreground: #1b0c25;; --foreground: #1f3251;;
--primary-cta: #1b0c25;; --primary-cta: #106EFB;;
--secondary-cta: #ffffff;; --secondary-cta: #f9f9f9;;
--accent: #ff93e4;; --accent: #159c49;;
--background-accent: #e8a8c3;; */ --background-accent: #a8e8ba;; */
--background: #f7f6f7;; --background: #ffffff;;
--card: #ffffff;; --card: #f9f9f9;;
--foreground: #1b0c25;; --foreground: #1f3251;;
--primary-cta: #1b0c25;; --primary-cta: #106EFB;;
--primary-cta-text: #f7f6f7;; --primary-cta-text: #f7f6f7;;
--secondary-cta: #ffffff;; --secondary-cta: #f9f9f9;;
--secondary-cta-text: #1b0c25;; --secondary-cta-text: #1b0c25;;
--accent: #ff93e4;; --accent: #159c49;;
--background-accent: #e8a8c3;; --background-accent: #a8e8ba;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);