From 9df57c5eec27e7e3ffbad3878d1a9e3ce063a7d3 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:35:50 +0000 Subject: [PATCH 1/3] Update src/app/contact/page.tsx --- src/app/contact/page.tsx | 260 ++++++++++++++++++++++++++++----------- 1 file changed, 189 insertions(+), 71 deletions(-) diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 215fadd..99f6792 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -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) => { + 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 ( - {/* Contact CTA */} -
- -
+ {/* Contact Hero */} +
+
+
+

Get in Touch

+

We'd love to hear from you. Let's discuss your pool and solar needs.

+
- {/* FAQ Section */} -
- -
+
+ {/* Contact Information */} +
+
+

Contact Information

+
- {/* Footer */} - + + {/* Contact Form */} +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +