Add src/app/contact/page.tsx

2026-03-05 01:51:24 +00:00
parent 9ec90d97a5
commit 2dc83c59a4
1 changed files with 107 additions and 0 deletions
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { useRouter } from 'next/navigation';
+
+export default function ContactPage() {
+  const router = useRouter();
+
+  const handleSubmit = (data: Record<string, string>) => {
+    console.log('Contact form submitted:', data);
+    // Here you would typically send the data to a backend service
+    // For now, we'll just log it and redirect
+    alert('Thank you for contacting us! We will get back to you soon.');
+    router.push('/');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "why-us" },
+            { name: "Reviews", id: "reviews" },
+            { name: "Book Now", id: "contact" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="OnSpot"
+          bottomLeftText="Ottawa, Ontario"
+          bottomRightText="(613) 716-5686"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Get In Touch"
+          description="Have questions about our services? Want to book a detailing appointment? Fill out the form below and we'll get back to you as soon as possible. We're available 24/7 to serve you."
+          inputs={[
+            { name: 'name', type: 'text', placeholder: 'Full Name', required: true },
+            { name: 'email', type: 'email', placeholder: 'Email Address', required: true },
+            { name: 'phone', type: 'tel', placeholder: 'Phone Number', required: true }
+          ]}
+          textarea={{
+            name: 'message',
+            placeholder: 'Tell us about your vehicle and what service you\'re interested in...',
+            rows: 6,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg?_wi=3"
+          imageAlt="OnSpot mobile detailing service"
+          mediaAnimation="none"
+          mediaPosition="right"
+          buttonText="Send Message"
+          onSubmit={handleSubmit}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="OnSpot Mobile Detailing"
+          copyrightText="© 2025 OnSpot Mobile Detailing. All rights reserved."
+          columns={[
+            {
+              title: "Service",              items: [
+                { label: "Interior Detailing", href: "/" },
+                { label: "Exterior Wash & Wax", href: "/" },
+                { label: "Deep Cleaning", href: "/" },
+                { label: "Stain Removal", href: "/" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Reviews", href: "/" },
+                { label: "Home", href: "/" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: (613) 716-5686", href: "tel:+16137165686" },
+                { label: "180 Beausoleil Dr, Ottawa, ON K1N 8X8", href: "#" },
+                { label: "Available 24/7", href: "#" },
+                { label: "Service Area: Ottawa & Surrounding", href: "#" }
+              ]
+            }
+          ]}
+          onPrivacyClick={() => console.log('Privacy clicked')}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}