Add src/app/contact/page.tsx

2026-03-03 16:09:11 +00:00
parent 97bb54387b
commit b4399daa08
1 changed files with 88 additions and 0 deletions
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import Link from "next/link";
+
+export default function ContactPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" },
+    { name: "Request Quote", id: "/quote" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmall"
+      background="fluid"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="FlowMaster Plumbing"
+          bottomLeftText="Available 24/7"
+          bottomRightText="1-800-PLUMBER"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactCenter
+          tag="Contact Us"
+          title="Get in Touch"
+          description="Have a plumbing issue? Need a consultation? Reach out to our team and we'll respond promptly to assist you."
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Get in Touch"
+          termsText="We respect your privacy and will only use your information to respond to your inquiry."
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info">
+        <ContactCenter
+          tag="Other Ways to Reach Us"
+          title="24/7 Availability"
+          description="Call us anytime for emergency plumbing services. Our team is always ready to help."
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your phone"
+          buttonText="Call Now"
+          termsText="Emergency services available every day, every hour. We pride ourselves on quick response times."
+        />
+      </div>
+
+      <div id="contact-hours" data-section="contact-hours">
+        <ContactCenter
+          tag="Service Hours"
+          title="When to Reach Us"
+          description="While we're available 24/7, our standard response time for non-emergency calls is within 2 hours during business hours."
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your service request"
+          buttonText="Schedule Service"
+          termsText="We offer same-day service for most plumbing needs when possible."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="FlowMaster"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}