12 Commits

Author SHA1 Message Date
41d4144332 Merge version_3 into main
Merge version_3 into main
2026-03-04 18:36:45 +00:00
95be8f61c2 Update src/app/page.tsx 2026-03-04 18:36:41 +00:00
ac25f06640 Merge version_3 into main
Merge version_3 into main
2026-03-04 18:35:55 +00:00
0837f11469 Update src/app/page.tsx 2026-03-04 18:35:51 +00:00
808ff2c7f4 Update src/app/layout.tsx 2026-03-04 18:35:50 +00:00
9df57c5eec Update src/app/contact/page.tsx 2026-03-04 18:35:50 +00:00
9e9bac8e3d Merge version_2 into main
Merge version_2 into main
2026-03-04 18:26:48 +00:00
9a0bb50fd4 Update src/app/page.tsx 2026-03-04 18:26:44 +00:00
f67688905d Update src/app/layout.tsx 2026-03-04 18:26:44 +00:00
ed604ee0d5 Merge version_1 into main
Merge version_1 into main
2026-03-04 18:25:42 +00:00
0004f3c4ad Merge version_1 into main
Merge version_1 into main
2026-03-04 18:24:10 +00:00
514934ea66 Merge version_1 into main
Merge version_1 into main
2026-03-04 18:22:35 +00:00
3 changed files with 312 additions and 194 deletions

View File

@@ -2,20 +2,41 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactText from "@/components/sections/contact/ContactText";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterCard from "@/components/sections/footer/FooterCard";
import { HelpCircle, Facebook, Instagram, Linkedin } from "lucide-react";
import { useState } from "react";
import { Phone, Mail, MapPin, Send, MessageCircle } from "lucide-react";
import Link from "next/link";
export default function ContactPage() {
const [formData, setFormData] = useState({
name: "", email: "", phone: "", serviceInterested: "", message: ""});
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Products", id: "/products" },
{ name: "About", id: "/about" },
{ name: "Pools", id: "#pools" },
{ name: "Solar", id: "#solar" },
{ name: "Landscaping", id: "#landscaping" },
{ name: "Contact", id: "/contact" },
];
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Form submitted:", formData);
// Reset form
setFormData({ name: "", email: "", phone: "", serviceInterested: "", message: "" });
alert("Thank you! We'll contact you soon.");
};
const whatsappMessage = `Hello Blue Pools! I'm interested in your pool and solar services. Please contact me.`;
const whatsappLink = `https://wa.me/27000000000?text=${encodeURIComponent(whatsappMessage)}`;
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
@@ -35,75 +56,172 @@ export default function ContactPage() {
navItems={navItems}
brandName="Blue Pools"
button={{
text: "Get Quote", href: "#contact"}}
text: "Get a Free Quote", href: "/contact"
}}
/>
</div>
{/* Contact CTA */}
<div id="contact" data-section="contact">
<ContactText
text="Ready to transform your outdoor space? Let Blue Pools bring your dream pool and solar solution to life."
animationType="entrance-slide"
buttons={[
{ text: "Get Your Free Quote", href: "#" },
{ text: "Call Us Today", href: "tel:+27-11-000-0000" },
]}
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
/>
</div>
{/* Contact Hero */}
<div className="py-20 px-4 md:px-8 min-h-screen flex flex-col items-center justify-center w-full bg-background">
<div className="w-full max-w-4xl">
<div className="text-center mb-12">
<h1 className="text-5xl md:text-7xl font-bold mb-4 text-foreground">Get in Touch</h1>
<p className="text-lg md:text-xl text-foreground/80">We'd love to hear from you. Let's discuss your pool and solar needs.</p>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Get answers to common questions about our pool and solar services."
tag="FAQ"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
mediaPosition="left"
imageSrc="http://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg?_wi=2"
imageAlt="Pool maintenance and care"
mediaAnimation="slide-up"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
faqs={[
{
id: "1", title: "How long does pool construction typically take?", content: "Most residential pools take 4-8 weeks from excavation to completion, depending on size and complexity. We'll provide a detailed timeline during your consultation."},
{
id: "2", title: "What is the cost of pool maintenance services?", content: "Our maintenance packages start at R300/month for basic service and go up to R800/month for premium care including equipment servicing. Custom quotes available based on your needs."},
{
id: "3", title: "How much can I save with solar pool heating?", content: "Most customers save 40-60% on pool heating costs. A typical solar system pays for itself in 3-5 years through energy savings while providing hot water year-round."},
{
id: "4", title: "Do you offer financing options?", content: "Yes! We partner with leading financial institutions to offer flexible payment plans. Speak with our team about options that work for your budget."},
{
id: "5", title: "What warranty do you provide?", content: "We guarantee workmanship for 2 years and most equipment for 5-10 years depending on the product. Full details provided in your contract."},
{
id: "6", title: "Can you design a pool to fit my specific space?", content: "Absolutely! Our design team specializes in custom pools for any size lot. We'll work with you to maximize beauty and functionality within your space and budget."},
]}
/>
</div>
<div className="grid md:grid-cols-2 gap-12 mb-12">
{/* Contact Information */}
<div className="space-y-8">
<div>
<h2 className="text-2xl font-semibold mb-6 text-foreground">Contact Information</h2>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="Blue Pools"
copyrightText="© 2025 Blue Pools. All rights reserved. Premium Pool & Solar Solutions."
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/bluepools", ariaLabel: "Blue Pools Facebook"},
{
icon: Instagram,
href: "https://instagram.com/bluepools", ariaLabel: "Blue Pools Instagram"},
{
icon: Linkedin,
href: "https://linkedin.com/company/bluepools", ariaLabel: "Blue Pools LinkedIn"},
]}
/>
<div className="flex gap-4 items-start">
<div className="mt-1">
<Phone className="w-6 h-6 text-primary-cta" />
</div>
<div>
<h3 className="font-semibold text-foreground mb-1">Phone</h3>
<p className="text-foreground/70">+27 (0)11 XXX XXXX</p>
<p className="text-foreground/70">Mon - Fri: 9am - 5pm SAST</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="mt-1">
<Mail className="w-6 h-6 text-primary-cta" />
</div>
<div>
<h3 className="font-semibold text-foreground mb-1">Email</h3>
<p className="text-foreground/70">info@bluepools.co.za</p>
<p className="text-foreground/70">quotes@bluepools.co.za</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="mt-1">
<MapPin className="w-6 h-6 text-primary-cta" />
</div>
<div>
<h3 className="font-semibold text-foreground mb-1">Office Location</h3>
<p className="text-foreground/70">Johannesburg, South Africa</p>
<p className="text-foreground/70">Serving all of South Africa</p>
</div>
</div>
<div className="pt-4">
<a
href={whatsappLink}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 bg-primary-cta text-primary-cta-text px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
>
<MessageCircle className="w-5 h-5" />
Chat on WhatsApp
</a>
</div>
</div>
{/* Contact Form */}
<div className="bg-card rounded-lg p-8">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-semibold text-foreground mb-2">Full Name</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
required
className="w-full px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
placeholder="Your name"
/>
</div>
<div>
<label className="block text-sm font-semibold text-foreground mb-2">Email Address</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
placeholder="your@email.com"
/>
</div>
<div>
<label className="block text-sm font-semibold text-foreground mb-2">Phone Number</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
required
className="w-full px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
placeholder="+27 (0)11 XXX XXXX"
/>
</div>
<div>
<label className="block text-sm font-semibold text-foreground mb-2">Service Interested In</label>
<select
name="serviceInterested"
value={formData.serviceInterested}
onChange={handleInputChange}
required
className="w-full px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
>
<option value="">Select a service</option>
<option value="pool-construction">Pool Construction</option>
<option value="pool-maintenance">Pool Maintenance</option>
<option value="solar-heating">Solar Heating Systems</option>
<option value="landscaping">Landscaping & Decking</option>
<option value="consultation">Free Consultation</option>
</select>
</div>
<div>
<label className="block text-sm font-semibold text-foreground mb-2">Message</label>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
rows={4}
className="w-full px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground focus:outline-none focus:border-primary-cta"
placeholder="Tell us about your project..."
/>
</div>
<button
type="submit"
className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
>
<Send className="w-4 h-4" />
Send Message
</button>
</form>
</div>
</div>
{/* Google Maps Embed */}
<div className="bg-card rounded-lg overflow-hidden p-8">
<h2 className="text-2xl font-semibold mb-4 text-foreground">Find Us on the Map</h2>
<div className="relative w-full h-96 rounded-lg overflow-hidden">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3585.8206299999998!2d24.8247!3d-25.7461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ebd43cf5c5c5c5d%3A0x5c5c5c5c5c5c5c5c!2sJohannesburg%2C%20South%20Africa!5e0!3m2!1sen!2s!4v1234567890"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
</div>
</div>
</ThemeProvider>
);
}
}

View File

@@ -1,67 +1,25 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Public_Sans } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
const publicSans = Public_Sans({
variable: "--font-public-sans",
subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Blue Pools | Premium Pool Construction & Solar Solutions",
description: "Expert pool construction, solar energy systems, and maintenance services across South Africa. Transform your outdoor space with Blue Pools' 15+ years of excellence.",
keywords: "pool construction, solar panels, pool maintenance, swimming pool, solar energy, South Africa, renewable energy",
metadataBase: new URL("https://bluepools.co.za"),
alternates: {
canonical: "https://bluepools.co.za",
},
robots: {
index: true,
follow: true,
},
openGraph: {
title: "Blue Pools | Premium Pool & Solar Solutions",
description: "Expert pool construction, solar energy systems, and professional maintenance. Transform your outdoor space today.",
url: "https://bluepools.co.za",
siteName: "Blue Pools",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Blue Pools | Premium Pool & Solar Solutions",
description: "Expert pool construction and solar energy systems in South Africa",
},
title: "Blue Pools | Your Dream Pool & Sustainable Solar Solutions Start Here", description: "Blue Pools delivers professional pool construction, maintenance, and solar installations across South Africa.", keywords: "pools, solar energy, pool construction, solar heating, South Africa", openGraph: {
title: "Blue Pools | Your Dream Pool & Sustainable Solar Solutions Start Here", description: "Blue Pools delivers professional pool construction, maintenance, and solar installations across South Africa."},
};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<head>
<meta name="theme-color" content="#15479c" />
</head>
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1429,7 +1387,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}
}

View File

@@ -9,15 +9,15 @@ import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award, CheckCircle, Zap, Wrench, Package, TrendingUp, Star, HelpCircle, Facebook, Instagram, Linkedin } from "lucide-react";
import { Award, CheckCircle, Zap, Wrench, Package, TrendingUp, Star, HelpCircle, Facebook, Instagram, Linkedin, Zap as ZapBadge, Shield, Award as AwardBadge, Droplet, Sun, Hammer, MapPin, Phone, Mail } from "lucide-react";
import Link from "next/link";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Products", id: "/products" },
{ name: "About", id: "/about" },
{ name: "Pools", id: "#pools" },
{ name: "Solar", id: "#solar" },
{ name: "Landscaping", id: "#landscaping" },
{ name: "Contact", id: "/contact" },
];
@@ -40,24 +40,25 @@ export default function HomePage() {
navItems={navItems}
brandName="Blue Pools"
button={{
text: "Get Quote", href: "#contact"}}
text: "Get a Free Quote", href: "/contact"
}}
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Premium Pools & Solar Solutions"
description="Transform your outdoor space with custom pool construction and harness the power of solar energy. Blue Pools delivers excellence in design, installation, and maintenance across South Africa."
title="Your Dream Pool & Sustainable Solar Solutions Start Here"
description="Blue Pools delivers professional pool construction, maintenance, and solar installations across South Africa."
tag="Expert Craftsmanship Since 2010"
tagIcon={Zap}
tagAnimation="slide-up"
background={{ variant: "animated-grid" }}
imageSrc="http://img.b2bpic.net/free-photo/stylish-young-beautiful-fit-slim-blonde-woman-summer-blue-top-short-skirt_343596-3080.jpg"
imageSrc="http://img.b2bpic.net/free-photo/stylish-young-beautiful-fit-slim-blonde-woman-summer-blue-top-short-skirt_343596-3080.jpg?_wi=1"
imageAlt="Luxurious swimming pool with modern design"
buttons={[
{ text: "Schedule Consultation", href: "/contact" },
{ text: "View Portfolio", href: "/services" },
{ text: "Get a Free Quote", href: "/contact" },
{ text: "View Services", href: "#services" },
]}
buttonAnimation="slide-up"
/>
@@ -69,7 +70,7 @@ export default function HomePage() {
tag="About Blue Pools"
tagIcon={Award}
title="South Africa's Trusted Pool & Solar Experts"
description="Blue Pools has been transforming outdoor spaces across South Africa for over a decade. Our team combines decades of expertise in pool construction, solar energy integration, and maintenance services. We're committed to delivering sustainable, beautiful, and durable solutions that enhance your lifestyle while reducing your environmental footprint."
description="Blue Pools has been transforming outdoor spaces across South Africa for over a decade. Our team combines decades of expertise in pool construction, solar energy integration, and maintenance services. We're committed to delivering sustainable, beautiful, and durable solutions that enhance your lifestyle while reducing your environmental footprint. Quality craftsmanship, speed of delivery, and sustainability are at the heart of everything we do."
metrics={[
{ value: "2000+", title: "Pools Installed" },
{ value: "15+", title: "Years of Excellence" },
@@ -82,7 +83,7 @@ export default function HomePage() {
/>
</div>
{/* Features/Services Section */}
{/* Services Section */}
<div id="services" data-section="services">
<FeatureCardTen
title="Our Core Services"
@@ -95,45 +96,63 @@ export default function HomePage() {
useInvertedBackground={false}
features={[
{
id: "1", title: "Pool Construction", description: "Custom-designed pools tailored to your space and budget. From fibreglass to concrete, we handle every detail with precision and care.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/man-balancing-skateboard_23-2147678275.jpg?_wi=2"},
id: "1", title: "Pool Construction", description: "Custom-designed pools tailored to your space and budget. From fibreglass to concrete, we handle every detail with precision and care. Our expert team ensures quality materials, professional installation, and attention to every design element for pools that last.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/man-balancing-skateboard_23-2147678275.jpg?_wi=2"
},
items: [
{ icon: CheckCircle, text: "Custom designs" },
{ icon: CheckCircle, text: "Professional installation" },
{ icon: CheckCircle, text: "Quality materials" },
{ icon: CheckCircle, text: "5-year warranty" },
],
reverse: false,
},
{
id: "2", title: "Solar Energy Solutions", description: "Reduce energy costs with our solar heating and power systems. Perfect for pool heating and powering your home sustainably.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/lots-solar-panels-field-generating-electricity_23-2148895413.jpg"},
items: [
{ icon: CheckCircle, text: "System design & installation" },
{ icon: CheckCircle, text: "Energy efficiency" },
{ icon: CheckCircle, text: "Long-term savings" },
],
reverse: true,
},
{
id: "3", title: "Pool Maintenance", description: "Keep your pool in pristine condition year-round with our comprehensive maintenance packages and emergency repair services.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg?_wi=1"},
id: "2", title: "Pool Renovation & Maintenance", description: "Keep your pool in pristine condition year-round with our comprehensive maintenance packages and emergency repair services. From routine cleaning to equipment repair and water treatment, we ensure your pool stays safe and beautiful.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg?_wi=1"
},
items: [
{ icon: CheckCircle, text: "Regular servicing" },
{ icon: CheckCircle, text: "Equipment repair" },
{ icon: CheckCircle, text: "Water treatment" },
{ icon: CheckCircle, text: "Emergency support" },
],
reverse: true,
},
{
id: "3", title: "Solar Water Heating Systems", description: "Reduce energy costs with our solar heating and power systems. Perfect for pool heating and powering your home sustainably. Our solar solutions are designed for maximum efficiency and long-term savings with professional installation and support.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/lots-solar-panels-field-generating-electricity_23-2148895413.jpg"
},
items: [
{ icon: CheckCircle, text: "System design & installation" },
{ icon: CheckCircle, text: "Energy efficiency" },
{ icon: CheckCircle, text: "Long-term savings" },
{ icon: CheckCircle, text: "10-year warranty" },
],
reverse: false,
},
{
id: "4", title: "Outdoor Landscaping & Decking", description: "Complete your outdoor oasis with professional landscaping and decking solutions. We design and build beautiful outdoor spaces that complement your pool and enhance your property's value and appeal.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-swimming-pool-with-bed-deck-chair-umbrella-resort-travel-vacation_74190-7923.jpg?_wi=1"
},
items: [
{ icon: CheckCircle, text: "Landscape design" },
{ icon: CheckCircle, text: "Decking installation" },
{ icon: CheckCircle, text: "Hardscaping" },
{ icon: CheckCircle, text: "Maintenance plans" },
],
reverse: true,
},
]}
/>
</div>
{/* Products Section */}
<div id="products" data-section="products">
{/* Gallery Section - displayed through Products */}
<div id="gallery" data-section="gallery">
<ProductCardTwo
title="Quality Pool & Solar Products"
description="We supply and install premium equipment from trusted manufacturers across South Africa."
tag="Products"
title="Gallery - Before & After Projects"
description="View our portfolio of completed pool and solar projects across South Africa."
tag="Portfolio"
tagIcon={Package}
tagAnimation="slide-up"
textboxLayout="default"
@@ -142,14 +161,63 @@ export default function HomePage() {
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1", brand: "AquaPro", name: "Variable Speed Pool Pump", price: "R4,500", rating: 5,
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-swimming-pool-with-bed-deck-chair-umbrella-resort-travel-vacation_74190-7923.jpg?_wi=1", imageAlt: "AquaPro variable speed pool pump"},
id: "1", brand: "Cape Town Residence", name: "Resort-Style Pool & Deck", price: "Completed 2024", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-swimming-pool-with-bed-deck-chair-umbrella-resort-travel-vacation_74190-7923.jpg?_wi=1", imageAlt: "Resort-style pool with timber decking and landscaping"
},
{
id: "2", brand: "SolarTech", name: "Solar Water Heater System", price: "R12,800", rating: 5,
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/view-water-tank-storage_23-2151748235.jpg", imageAlt: "SolarTech solar water heater"},
id: "2", brand: "Johannesburg Estate", name: "Solar Heating & Pool Renovation", price: "Completed 2024", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/view-water-tank-storage_23-2151748235.jpg", imageAlt: "Modern solar water heating system installation"
},
{
id: "3", brand: "ClearFlow", name: "Multi-Stage Filtration Unit", price: "R3,200", rating: 5,
reviewCount: "289", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-swimming-pool-with-bed-deck-chair-umbrella-resort-travel-vacation_74190-7923.jpg?_wi=2", imageAlt: "ClearFlow multi-stage filtration system"},
id: "3", brand: "Durban Beachfront", name: "Contemporary Design Pool", price: "Completed 2023", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-outdoor-swimming-pool-with-bed-deck-chair-umbrella-resort-travel-vacation_74190-7923.jpg?_wi=2", imageAlt: "Contemporary style pool with waterfall feature"
},
{
id: "4", brand: "Pretoria Residence", name: "Family Pool & Solar System", price: "Completed 2023", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-beautiful-fit-slim-blonde-woman-summer-blue-top-short-skirt_343596-3080.jpg?_wi=2", imageAlt: "Family-sized pool with solar heating installation"
},
{
id: "5", brand: "Stellenbosch Garden", name: "Landscaping & Decking Project", price: "Completed 2024", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/man-balancing-skateboard_23-2147678275.jpg?_wi=2", imageAlt: "Professional landscaping with stone decking and gardens"
},
{
id: "6", brand: "Sandton Commercial", name: "Corporate Pool Complex", price: "Completed 2023", rating: 5,
reviewCount: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg?_wi=1", imageAlt: "Commercial pool installation with maintenance systems"
},
]}
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="What Our Clients Say"
description="Hear from homeowners and businesses who've transformed their spaces with Blue Pools."
tag="Testimonials"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Johan Pieterse", handle: "Cape Town, WC", testimonial: "Blue Pools transformed our backyard into a resort-like oasis. Their professionalism and attention to detail exceeded all expectations. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Johan Pieterse"
},
{
id: "2", name: "Michelle van Dyk", handle: "Johannesburg, GP", testimonial: "The solar solution Blue Pools installed has cut our energy costs by 40%. Best investment we've made for our home and the environment.", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=1", imageAlt: "Michelle van Dyk"
},
{
id: "3", name: "David Nkosi", handle: "Durban, KZN", testimonial: "Their maintenance service keeps our pool in perfect condition year-round. Reliable, affordable, and professional every time.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "David Nkosi"
},
{
id: "4", name: "Sarah Thompson", handle: "Pretoria, GP", testimonial: "From consultation to installation, Blue Pools made the entire process seamless. Our family loves our new pool and solar system!", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=2", imageAlt: "Sarah Thompson"
},
{
id: "5", name: "Thabo Mdlalose", handle: "Sandton, GP", testimonial: "Premium quality work at competitive prices. Blue Pools is the only company I trust with my pool and solar needs.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Thabo Mdlalose"
},
{
id: "6", name: "Lisa Chen", handle: "Stellenbosch, WC", testimonial: "Five stars all the way. The team was punctual, professional, and left our property cleaner than when they arrived. Exceptional service!", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=3", imageAlt: "Lisa Chen"
},
]}
/>
</div>
@@ -182,34 +250,6 @@ export default function HomePage() {
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="What Our Clients Say"
description="Hear from homeowners and businesses who've transformed their spaces with Blue Pools."
tag="Testimonials"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Johan Pieterse", handle: "Cape Town, WC", testimonial: "Blue Pools transformed our backyard into a resort-like oasis. Their professionalism and attention to detail exceeded all expectations. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Johan Pieterse"},
{
id: "2", name: "Michelle van Dyk", handle: "Johannesburg, GP", testimonial: "The solar solution Blue Pools installed has cut our energy costs by 40%. Best investment we've made for our home and the environment.", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=1", imageAlt: "Michelle van Dyk"},
{
id: "3", name: "David Nkosi", handle: "Durban, KZN", testimonial: "Their maintenance service keeps our pool in perfect condition year-round. Reliable, affordable, and professional every time.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "David Nkosi"},
{
id: "4", name: "Sarah Thompson", handle: "Pretoria, GP", testimonial: "From consultation to installation, Blue Pools made the entire process seamless. Our family loves our new pool and solar system!", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=2", imageAlt: "Sarah Thompson"},
{
id: "5", name: "Thabo Mdlalose", handle: "Sandton, GP", testimonial: "Premium quality work at competitive prices. Blue Pools is the only company I trust with my pool and solar needs.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Thabo Mdlalose"},
{
id: "6", name: "Lisa Chen", handle: "Stellenbosch, WC", testimonial: "Five stars all the way. The team was punctual, professional, and left our property cleaner than when they arrived. Exceptional service!", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg?_wi=3", imageAlt: "Lisa Chen"},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
@@ -218,16 +258,19 @@ export default function HomePage() {
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/bluepools", ariaLabel: "Blue Pools Facebook"},
href: "https://facebook.com/bluepools", ariaLabel: "Blue Pools Facebook"
},
{
icon: Instagram,
href: "https://instagram.com/bluepools", ariaLabel: "Blue Pools Instagram"},
href: "https://instagram.com/bluepools", ariaLabel: "Blue Pools Instagram"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/bluepools", ariaLabel: "Blue Pools LinkedIn"},
href: "https://linkedin.com/company/bluepools", ariaLabel: "Blue Pools LinkedIn"
},
]}
/>
</div>
</ThemeProvider>
);
}
}