Add src/app/contact/page.tsx

2026-03-26 12:46:01 +00:00
parent e1095b0228
commit 5ac2221e1b
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 NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import Link from "next/link";
+
+interface FooterProps {
+  brandName?: string;
+  navItems: Array<{ name: string; href: string; }>;
+}
+
+const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navItems }) => {
+  return (
+    <footer className="w-full py-8 bg-card text-foreground border-t border-accent mt-16">
+      <div className="mx-auto px-4 md:px-6 max-w-7xl flex flex-col md:flex-row justify-between items-center gap-4">
+        <div className="text-lg font-bold">
+          {brandName}
+        </div>
+        <nav className="flex flex-wrap justify-center gap-6">
+          {navItems.map((item) => (
+            <Link key={item.href} href={item.href} className="text-foreground hover:text-primary-cta">
+              {item.name}
+            </Link>
+          ))}
+        </nav>
+        <div className="text-sm text-foreground/80">
+          © {new Date().getFullYear()} {brandName}. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default function ContactPage() {
+  const navItems = [
+    {name: "Home", id: "home", href: "/"},
+    {name: "Contact us", id: "contact", href: "/contact"}
+  ];
+
+  const navbarProps = {
+    brandName: "Nexsoft Australia",    navItems: navItems,
+    button: {text: "Get a Quote", href: "/contact"}
+  };
+
+  const handleFormSubmit = (data: Record<string, string>) => {
+    console.log("Form submitted:", data);
+    alert("Thank you for your message! We will get back to you soon.");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSmall"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay {...navbarProps} />
+      </div>
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We'd love to hear from you! Fill out the form below or find us on the map."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true }
+          ]}
+          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+          buttonText="Send Message"
+          imageSrc="https://picsum.photos/id/1083/800/600?grayscale&blur=2" 
+          imageAlt="Office location map"
+          mediaPosition="right"
+          useInvertedBackground={false}
+          onSubmit={handleFormSubmit}
+          className="pt-24 md:pt-32 pb-16"
+        />
+      </div>
+      <Footer brandName="Nexsoft Australia" navItems={navItems} />
+    </ThemeProvider>
+  );
+}